Add menus in nav

src/components/Nav/index.tsx

@@ -6,47 +6,182 @@ import { RootState } from "store";
 import { setLanguage } from "store/Core";
 import styled from "styled-components";
 import "./style.scss";
+import useTranslation from "utils/hooks/useTranslation";
+import MenuRoutes from "./menus";
 
 const Nav = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const language = useSelector<RootState, RootState["core"]["language"]>(
     (state) => state.core.language
   );
+  const t = useTranslation();
 
   return (
-    <div>
+    <Container>
       <Logo
         onClick={() => {
           navigate("/");
         }}
       >
         로고
       </Logo>
-      <ul>
-        <li
+      <LeftMenus>
+        {Object.entries(MenuRoutes).map(([path, menu]) => (
+          <Menu key={path}>
+            {menu.name}
+            <SubMenus>
+              {menu.sub.map((subMenu) => (
+                <SubMenu
+                  key={subMenu.path}
+                  onClick={() => {
+                    navigate(`/${path}/${subMenu.path}`);
+                  }}
+                >
+                  {subMenu.name}
+                </SubMenu>
+              ))}
+            </SubMenus>
+          </Menu>
+        ))}
+        <Menu>
+          기여하기
+          <SubMenus>
+            <SubMenu>발표안 작성 가이드</SubMenu>
+            <SubMenu>발표 제안하기</SubMenu>
+            <SubMenu>발표 제안 검토하기</SubMenu>
+            <SubMenu>라이트닝 토크 신청하기</SubMenu>
+            <SubMenu>키노트 연사 추천하기</SubMenu>
+            <SubMenu>영상 자막</SubMenu>
+          </SubMenus>
+        </Menu>
+        <Menu
           onClick={() => {
             navigate("/sponsor");
           }}
         >
-          후원사 목록
-        </li>
-        <li>
-          <div
-            onClick={() => {
-              dispatch(setLanguage(language === "KOR" ? "ENG" : "KOR"));
-            }}
-          >
-            언어 변경 (현재: {language})
-          </div>
-        </li>
-      </ul>
-    </div>
+          후원사
+        </Menu>
+      </LeftMenus>
+      <RightMenus>
+        <Menu>
+          {t("언어 변경")} (현재: {language})
+          <SubMenus>
+            <SubMenu
+              onClick={() => {
+                dispatch(setLanguage("KOR"));
+              }}
+            >
+              한국어
+            </SubMenu>
+            <SubMenu
+              onClick={() => {
+                dispatch(setLanguage("ENG"));
+              }}
+            >
+              English
+            </SubMenu>
+          </SubMenus>
+        </Menu>
+      </RightMenus>
+    </Container>
   );
 };
 
 export default Nav;
 
+const Container = styled.div`
+  width: 100%;
+  height: 8vh;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  /////////////////////////
+  border: 1px solid black;
+  /////////////////////////
+`;
+
 const Logo = styled.div`
   display: flex;
+
+  width: 10%;
+  height: 100%;
+
+  cursor: pointer;
+
+  /////////////////////////
+  border: 1px solid black;
+  /////////////////////////
+`;
+
+const SubMenus = styled.div`
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: -10%;
+
+  padding: 0.2rem 0.5rem;
+
+  background-color: #fff;
+
+  font-size: 1rem;
+
+  /////////////////////////
+  border: 1px solid red;
+  /////////////////////////
+`;
+
+const SubMenu = styled.div`
+  cursor: pointer;
+
+  white-space: nowrap;
+
+  padding: 0.1rem 0.2rem;
+
+  color: gray;
+
+  & + & {
+    margin-top: 0.2rem;
+  }
+
+  &:hover {
+    color: black;
+  }
+`;
+
+const Menus = styled.div`
+  display: flex;
+  align-items: center;
+
+  height: 100%;
+
+  font-size: 1.2rem;
+`;
+
+const LeftMenus = styled(Menus)``;
+
+const RightMenus = styled(Menus)``;
+
+const Menu = styled.div`
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+
+  padding: 2vh 1vw;
+
+  /////////////////////////
+  border: 1px solid blue;
+  /////////////////////////
+
+  &:hover {
+    & > ${SubMenus} {
+      display: initial;
+    }
+  }
+
+  & + & {
+    margin-left: 3vw;
+  }
 `;

src/components/Nav/menus.ts

@@ -0,0 +1,50 @@
+const Menus = {
+  about: {
+    name: "파이콘 한국",
+    sub: [
+      {
+        name: "파이콘 한국 2024",
+        path: "pyconkr2024",
+      },
+      {
+        name: "개인 후원자",
+        path: "patron",
+      },
+      {
+        name: "파이콘 한국 행동 강령",
+        path: "coc",
+      },
+      {
+        name: "파이콘 한국 준비위원회",
+        path: "organizing-team",
+      },
+      {
+        name: "지난 파이콘 한국",
+        path: "previous-pyconkr",
+      },
+    ],
+  },
+  program: {
+    name: "프로그램",
+    sub: [
+      {
+        name: "키노트",
+        path: "keynote",
+      },
+      {
+        name: "발표",
+        path: "session",
+      },
+      {
+        name: "스프린트",
+        path: "sprint",
+      },
+      {
+        name: "튜토리얼",
+        path: "tutorial",
+      },
+    ],
+  },
+} as const;
+
+export default Menus;

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import store from "./store";
 import Router from "routes";
 import { Provider } from "react-redux";
+import "./style.scss";
 
 const root = ReactDOM.createRoot(document.getElementById("root") || document.createElement("div"));
 root.render(

src/locale/English/translation.ts

@@ -11,5 +11,6 @@ const EnglishTranslation: Translation = {
   },
   "파이콘 한국": "PyCon Korea",
   준비위원회: "Organizing Team",
+  "언어 변경": "Change language",
 };
 export default EnglishTranslation;

src/locale/types.ts

@@ -1,6 +1,6 @@
 import { CategoryCode } from "enums/categories";
 
-type TranslationItem = "파이콘 한국" | "준비위원회";
+type TranslationItem = "파이콘 한국" | "준비위원회" | "언어 변경";
 type MenuTranslationItem = "재정 지원";
 
 export type Translation = { [K in TranslationItem]: string } & {

src/style.scss

@@ -0,0 +1,5 @@
+body {
+	margin: 0 16px;
+
+	min-height: 100vh;
+}