test(#19)

app/package.json

@@ -17,7 +17,11 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+<<<<<<< HEAD
     "react-hook-form": "^7.41.5",
+=======
+    "react-intersection-observer": "^9.4.1",
+>>>>>>> 49aaaf55d43af97ae60cb61b8e6e983fe90c69a2
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",

app/src/App.css

@@ -1,3 +1,35 @@
-body{font-family: 'Noto Sans KR', sans-serif;}
+body{font-family: 'Noto Sans KR', sans-serif; color: #555;}
 /* font-family: 'Raleway', sans-serif; */
-.en{ font-family: 'Raleway', sans-serif;}
+.en{ font-family: 'Raleway', sans-serif;}
+
+/* 
+Noto Sans KR
+Thin 100
+Light 300
+Regular 400
+Medium 500
+Bold 700
+Black 900
+*/
+
+/*
+Raleway
+Thin 100
+Thin 100 Italic
+ExtraLight 200
+ExtraLight 200 Italic
+Light 300
+Light 300 Italic
+Regular 400
+Regular 400 Italic
+Medium 500
+Medium 500 Italic
+SemiBold 600
+SemiBold 600 Italic
+Bold 700
+Bold 700 Italic
+ExtraBold 800
+ExtraBold 800 Italic
+Black 900
+Black 900 Italic
+*/

app/src/components/Nav/Search/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const Index = () => {
+  return (
+    <form className={styles.form}>
+      <div className={styles.search}>
+        <button className={styles.btn}>
+          <FontAwesomeIcon icon={faSearch} />
+        </button>
+        <input type="text" placeholder="검색어를 입력하세요" />
+      </div>
+    </form>
+  );
+};
+
+export default Index;

app/src/components/Nav/Search/style.module.css

@@ -0,0 +1,32 @@
+/* 검색 */
+.form{}
+.form .search{width: 350px;height: 40px; position: relative;}
+.form .search input{width: 100%;height: 100%; border-radius: 20px; border: none; background: #fff; padding: 0 20px 0 60px; font-size: 16px;font-weight: 400;}
+.form .search .btn{position: absolute; top: 50%;left: 20px; transform: translateY(-50%); background: transparent; cursor: pointer; font-size: 20px; color: #555;}
+
+@media (max-width : 767px){
+    .form{margin-left: -150px;}
+    .form .search{width: 300px;}
+}
+
+@media (max-width : 700px){
+    .form .search{width: 200px;}
+}
+
+@media (max-width : 600px){
+    .form .search{width: 150px;}
+}
+
+@media (max-width : 550px){
+    .form{margin-left: -100px;}
+    .form .search input{ font-size: 14px;font-weight: 400;}
+}
+
+@media (max-width : 450px){
+    .form{margin-left: -80px;}
+    .form .search{width: 130px;}
+}
+
+@media (max-width : 400px){
+    .form .search{width: 100px;}
+}

app/src/components/Nav/UserInfo/index.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useState } from 'react';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHeart, faBell, faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
+import usePopupClose from '../../../hooks/usePopupClose';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+
+const Index = () => {
+  const [login] = useState(true); //로그인 여부 확인
+  const [userActive, setUserActive] = useState(false); //로그인 완료시 1024미만으로 줄어들었을 경우 햄버거 아이콘 클릭시 유저 정보 active
+  const target = useRef(null); //유저정보 팝업창
+  const close = usePopupClose(target); //유저정보 팝업창 외 클릭시 팝업창 닫기
+
+  useEffect(() => {
+    setUserActive(close);
+  }, [close]);
+  return (
+    <div ref={target}>
+      {login === true && (
+        <div
+          className={styles.mobile}
+          onClick={() => {
+            setUserActive(!userActive);
+          }}
+        >
+          {userActive === false && <FontAwesomeIcon icon={faBars} />}
+          {userActive === true && <FontAwesomeIcon icon={faTimes} />}
+        </div>
+      )}
+      <div
+        className={`${styles.user_info} ${login === true && styles.visible} ${userActive === true && styles.active}`}
+      >
+        {login === false ? (
+          <div className={styles.non_login}>
+            <ul>
+              <li>
+                <em>로그인</em>
+              </li>
+              <li>
+                <em>로그아웃</em>
+              </li>
+            </ul>
+          </div>
+        ) : (
+          <div className={styles.on_login}>
+            <ul>
+              <li>
+                <div className={styles.icon_box}>
+                  <ul>
+                    <li>
+                      <FontAwesomeIcon icon={faHeart} className={styles.icon} />
+                    </li>
+                    <li>
+                      <FontAwesomeIcon icon={faBell} className={styles.icon} />
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <em>마이페이지</em>
+              </li>
+              <li>
+                <div className={styles.user}>
+                  <div className={styles.userImg}></div>
+                  <em>사용자 이름</em>
+                </div>
+              </li>
+              <li>
+                <em>로그아웃</em>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Index;

app/src/components/Nav/UserInfo/style.module.css

@@ -0,0 +1,59 @@
+.user_info{}
+
+/* 로그인X */
+.non_login{}
+.non_login ul{display: flex;}
+.non_login ul li{margin-right: 30px; box-sizing: border-box; position: relative;}
+.non_login ul li::before{content: '';width: 1px;height: 10px; background: #555; position: absolute; top: 50%; right: -15px; transform: translateY(-50%);}
+.non_login ul li:last-child{margin-right: 0;}
+.non_login ul li:last-child::before{display: none;}
+.non_login ul li em{font-size: 16px;font-weight: 400; cursor: pointer;}
+
+/* 로그인O */
+.on_login{}
+.on_login > ul{display: flex; align-items: center; box-sizing: border-box;}
+.on_login > ul > li{margin-right: 30px; position: relative;}
+.on_login > ul > li::before{content: '';width: 1px;height: 10px; background: #555; position: absolute; top: 50%; right: -15px; transform: translateY(-50%);}
+.on_login > ul > li:last-child{margin-right: 0;}
+.on_login > ul > li:last-child::before{display: none;}
+.on_login > ul > li em{font-size: 16px;font-weight: 400; cursor: pointer;}
+
+.on_login > ul > li .user{display: flex; align-items: center; cursor: pointer;}
+.on_login > ul > li .user .userImg{width: 35px;height: 35px;background: #555;margin-right: 10px; border-radius: 50%;}
+.on_login > ul > li .user .userImg img{width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
+
+.on_login > ul > li .icon_box ul{display: flex;}
+.on_login > ul > li .icon_box ul li{margin-right: 20px; position: relative; }
+.on_login > ul > li .icon_box ul li::before{content: '';width: 1px;height: 10px; background: #555; position: absolute; top: 50%; right: -10px; transform: translateY(-50%);}
+.on_login > ul > li .icon_box ul li:last-child::before{display: none;}
+.on_login > ul > li .icon_box ul li:last-child{margin-right: 0;}
+.on_login > ul > li .icon_box ul li .icon{cursor: pointer;}
+
+/* 1024 이하 */
+.mobile{display: none;}
+
+@media (max-width : 1023px){
+    .mobile{width: 40px;height: 40px;background: #fff; border-radius: 5px; display: block; font-size: 24px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
+    .user_info.visible{position: absolute; top: 60px;right: -260px; transition: all 0.6s;}
+    .user_info.active{right: 0;}
+
+    .on_login{width: 250px;height: 100%;background: #fff; padding: 20px; box-sizing: border-box; border-radius: 10px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} 
+    .on_login ul{height: 100%; flex-direction: column; justify-content: center; align-items: center;}
+    .on_login > ul > li{margin-right: 0; margin: 5px 0;}
+    .on_login > ul > li .user{ flex-direction: column; align-items: center; }
+    .on_login > ul > li .user .userImg{width: 100px;height: 100px; margin-right: 0;}
+    .on_login > ul > li::before{display: none;}
+    .on_login > ul > li .icon_box ul{display: flex; flex-direction: row;}
+    .on_login > ul > li .icon_box ul li::before{display: none;}
+    .on_login > ul > li .icon_box ul li .icon{font-size: 24px;}
+}
+
+@media (max-width : 767px){
+    .non_login ul li{margin-right: 10px;}
+    .non_login ul li::before{ right: -5px; }
+    .non_login ul li em{font-size: 14px;}
+}
+
+@media (max-width : 450px){
+
+}

app/src/components/Nav/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './style.module.css';
+import Search from './Search';
+import UserInfo from './UserInfo';
+
+const Index = () => {
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.container}>
+        <div className={styles.logo}>
+          <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="" />
+        </div>
+        <Search></Search>
+        <UserInfo></UserInfo>
+      </div>
+    </nav>
+  );
+};
+
+export default Index;

app/src/components/Nav/style.module.css

@@ -0,0 +1,10 @@
+.nav{width: 100%;height: 60px;background: #eff2f4; position: fixed; top: 0;left: 0;z-index: 9000;}
+.container{max-width: 1440px; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
+
+/* 로고 */
+.logo{width: 49px;height: 54px; cursor: pointer;}
+.logo img{width: 100%;height: 100%;object-fit: cover;}
+
+@media (max-width : 767px){
+    .container{padding: 0 10px; }
+}

app/src/hooks/usePopupClose.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { useEffect } from 'react';
+
+export default function usePopupClose(ref) {
+  const [toggle, setToggle] = useState(false);
+
+  //알림창 외부 클릭시 알림창 닫기
+  const clickModalOutside = event => {
+    if (!ref.current.contains(event.target)) {
+      setToggle(false);
+    } else {
+      setToggle(true);
+    }
+  };
+
+  //알림창 외부 클릭시 알림창 닫기
+  useEffect(() => {
+    document.addEventListener('mousedown', clickModalOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', clickModalOutside);
+    };
+  });
+
+  return toggle;
+}

app/src/pages/Main/Location/Address/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './style.module.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const Index = () => {
+  return (
+    <div className={styles.address_wrap}>
+      <form className={styles.form}>
+        <div className={styles.address_search}>
+          <input type="text" placeholder="시/군/구, 읍/면/동 단위로 입력하세요." />
+          <button className={styles.btn}>
+            <FontAwesomeIcon icon={faSearch} />
+          </button>
+        </div>
+      </form>
+      <div className={styles.address}>
+        <ul>
+          <li>
+            <em>대구 광역시 북구 태전동</em>
+          </li>
+          <li>
+            <em>대구 광역시 북구 태전동</em>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Index;