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;
- }
 `;