Merge pull request #13 from pythonkr/feature/mobile

모바일을 위한 반응형 스타일 적용

package.json

@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
     "dotenv": "^16.4.5",
+    "hamburger-react": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

src/components/Footer/index.tsx

@@ -78,7 +78,7 @@ const Footer = () => {
           ))
         )}
       </Sponsors> */}
-      <About>
+      <div className="footer-about-section">
         <section className="left">
           <table>
             <tbody>
@@ -126,9 +126,9 @@ const Footer = () => {
             <Link to="/privacy-policy">{t("개인 정보 처리 방침")}</Link>
           </div>
         </section>
-        <section className="right"></section>
-      </About>
-      <Fixed>
+        {/* <section className="right"></section> */}
+      </div>
+      <div className="footer-fixed-section">
         <section className="left">{t("파이콘 한국 행동 강령")} (CoC)</section>
         <section className="right">
           <a href="mailto:[email protected]">
@@ -159,7 +159,7 @@ const Footer = () => {
             <Flickr />
           </a>
         </section>
-      </Fixed>
+      </div>
     </Container>
   );
 };
@@ -175,96 +175,3 @@ const Sponsors = styled.div`
   background-color: deeppink;
   //////////////////////////
 `;
-
-const About = styled.div`
-  height: 9rem;
-  margin-bottom: 2.5rem;
-  color: #FEBD99;
-  height: max-content;
-
-  border-top: 1px solid black;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  font-size: 0.8rem;
-
-  & > section.left {
-    width: 29%;
-    padding-left: 1%;
-
-    & > table {
-      border: 1px;
-      td {
-        background-color: #090909 !important;
-      }
-      tr > td:nth-of-type(2) {
-        padding-left: 1.5rem;
-      }
-    }
-  }
-
-  & > section.center {
-    width: 70%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 0.75rem;
-
-    & > div.slogan {
-      font-size: 1rem;
-    }
-    & > div + div {
-      margin-top: 1vh;
-    }
-    & > div a {
-      text-decoration: none;
-      color: #B0A8FE;
-    }
-  }
-
-  & > section.right {
-    width: 29%;
-    padding-right: 1%;
-  }
-`;
-
-const Fixed = styled.div`
-  position: fixed;
-  bottom: 0;
-
-  width: 100%;
-  height: 2.5rem;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  padding: 0 2vw 0 1vw;
-
-  & > section.left {
-    font-weight: bold;
-  }
-
-  & > section.right {
-    padding-top: 4px;
-
-    svg {
-      width: 1.4rem;
-      fill: #FEBD99;
-    }
-
-    a + a {
-      margin-left: 1.1rem;
-    }
-  }
-
-  //////////////////////////
-  background-color: #141414;
-  color: #FEBD99;
-  //////////////////////////
-`;

src/components/Nav/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
@@ -8,13 +8,17 @@ import styled from "styled-components";
 import useTranslation from "utils/hooks/useTranslation";
 import MenuRoutes from "./menus";
 import { Slogan as SloganSvg } from "assets/icons";
+import Hamburger from "hamburger-react";
+import useIsMobile from "utils/hooks/useIsMobile";
 
 const Nav = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const isMobile = useIsMobile();
   const language = useSelector<RootState, RootState["core"]["language"]>(
     (state) => state.core.language
   );
+  const [openMenu, setOpenMenu] = useState(false);
   const t = useTranslation();
 
   // 로그인 여부 확인
@@ -24,23 +28,22 @@ const Nav = () => {
   const isLogin = localStorage.getItem("id");
 
   return (
-    <Container>
-      <Logo
-        onClick={() => {
-          navigate("/");
-        }}
-      >
+    <Container className="nav-bar">
+      <div className="nav-logo" onClick={() => navigate("/")}>
         <SloganSvg />
-      </Logo>
-      <LeftMenus>
+      </div>
+      {isMobile && <Hamburger toggled={openMenu} toggle={setOpenMenu} hideOutline={true} />}
+      <div className={`menus ${isMobile && !openMenu ? "hidden" : "visible"}`}>
         {Object.entries(MenuRoutes).map(([path, menu]) => (
-          <Menu className="peach-puzz" key={path}>
-            {t(menu.name)}
-            <SubMenus>
+          <Menu className="menu-item" key={path}>
+            <span>{t(menu.name)}</span>
+            <SubMenus className="sub-menu">
               {menu.sub.map((subMenu) => (
                 <SubMenu
+                  className="sub-menu-item"
                   key={subMenu.path}
                   onClick={() => {
+                    setOpenMenu(false);
                     navigate(`/${path}/${subMenu.path}`);
                   }}
                 >
@@ -50,12 +53,12 @@ const Nav = () => {
             </SubMenus>
           </Menu>
         ))}
-      </LeftMenus>
-      <RightMenus>
-        <Menu className="peach-puzz">
+        <Menu className="menu-item border-bottom">
           {isLogin ? (
             <SubMenu
+              className="sub-menu-item"
               onClick={() => {
+                setOpenMenu(false);
                 localStorage.removeItem("id");
                 navigate("/");
               }}
@@ -64,72 +67,60 @@ const Nav = () => {
             </SubMenu>
           ) : (
             <SubMenu
+              className="sub-menu-item"
               onClick={() => {
+                setOpenMenu(false);
                 navigate("/login");
               }}
             >
               {t("로그인")}
             </SubMenu>
           )}
         </Menu>
-        <Menu className="peach-puzz">
-          {t("언어")}
-          <SubMenus>
+        <Menu className="menu-item">
+          <span>{t("언어")}</span>
+          <SubMenus className="sub-menu">
             <SubMenu
+              className="sub-menu-item"
               onClick={() => {
+                setOpenMenu(false);
                 dispatch(setLanguage("KOR"));
               }}
             >
               한국어
             </SubMenu>
             <SubMenu
+              className="sub-menu-item"
               onClick={() => {
+                setOpenMenu(false);
                 dispatch(setLanguage("ENG"));
               }}
             >
               English
             </SubMenu>
           </SubMenus>
         </Menu>
-      </RightMenus>
+      </div>
     </Container>
   );
 };
 
 export default Nav;
 
 const Container = styled.div`
-  height: 8vh;
-  padding: 0 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   background-color: #141414;
 `;
 
-const Logo = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 10%;
-  height: 100%;
-
-  cursor: pointer;
-`;
-
 const SubMenus = styled.div`
   display: none;
   position: absolute;
-  top: 85%;
-  left: -10%;
-
-  padding: 0.2rem 0.5rem;
+  top: 70%;
 
   background-color: #141414;
-  border: 1px solid;
-  border-color: #FEBD99;
 
   font-size: initial;
   font-weight: initial;
@@ -138,54 +129,30 @@ const SubMenus = styled.div`
 const SubMenu = styled.div`
   cursor: pointer;
 
-  white-space: nowrap;
-
   padding: 0.1rem 0.2rem;
 
-  color: #FEBD99;
+  color: #febd99;
 
   & + & {
     margin-top: 0.2rem;
   }
 
   &:hover {
-    color: #B0A8FE;
+    color: #b0a8fe;
   }
 `;
 
-const Menus = styled.div`
-  display: flex;
-  align-items: center;
-
-  height: 100%;
-`;
-
 const Menu = styled.div`
   position: relative;
   cursor: pointer;
   user-select: none;
 
-  padding: 2vh 1vw;
+  padding: 1vh 1vw;
 
   &:hover {
-    color: #B0A8FE;
+    color: #b0a8fe;
     & > ${SubMenus} {
       display: initial;
     }
   }
-
-  & + & {
-    margin-left: 3vw;
-  }
-`;
-
-const LeftMenus = styled(Menus)`
-  font-weight: bold;
-  font-size: 1.25rem;
-`;
-
-const RightMenus = styled(Menus)`
-  ${Menu} + ${Menu} {
-    margin-left: 1vw;
-  }
 `;