feat: 헤더 메뉴 동작 추가

Author: y00eunji

src/components/layout/Header/index.tsx

@@ -1,6 +1,32 @@
 import styled from "@emotion/styled";
+import { useMenu } from "../../../hooks/useMenu";
+
+interface SubMenuItem {
+  text: string;
+  href: string;
+}
+
+interface MenuItem {
+  text: string;
+  href?: string;
+  subMenu?: SubMenuItem[];
+}
+
+interface HeaderProps {
+  menus: MenuItem[];
+}
+
+export default function Header({ menus }: HeaderProps) {
+  const {
+    hoveredMenu,
+    focusedMenu,
+    menuRefs,
+    setHoveredMenu,
+    setFocusedMenu,
+    handleKeyDown,
+    handleBlur,
+  } = useMenu();
 
-export default function Header() {
   return (
     <HeaderContainer>
       <HeaderLogo>
@@ -14,12 +40,34 @@ export default function Header() {
 
       <nav>
         <HeaderNav>
-          <li>파이콘 한국</li>
-          <li>프로그램</li>
-          <li>세션</li>
-          <li>구매</li>
-          <li>재정 지원</li>
-          <li>후원하기</li>
+          {menus.map((menu) => (
+            <li
+              key={menu.text}
+              ref={(el) => {
+                menuRefs.current[menu.text] = el;
+              }}
+              onMouseEnter={() => setHoveredMenu(menu.text)}
+              onMouseLeave={() => setHoveredMenu(null)}
+              onFocus={() => setFocusedMenu(menu.text)}
+              onBlur={() => handleBlur(menu)}
+              onKeyDown={(e) => handleKeyDown(e, menu)}
+              tabIndex={0}
+            >
+              {menu.text}
+              {menu.subMenu &&
+                (hoveredMenu === menu.text || focusedMenu === menu.text) && (
+                  <SubMenu>
+                    {menu.subMenu.map((subItem) => (
+                      <SubMenuItem key={subItem.text}>
+                        <a href={subItem.href} tabIndex={0}>
+                          {subItem.text}
+                        </a>
+                      </SubMenuItem>
+                    ))}
+                  </SubMenu>
+                )}
+            </li>
+          ))}
         </HeaderNav>
       </nav>
       <HeaderLeft>
@@ -50,6 +98,7 @@ const HeaderContainer = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
 `;
 
 const HeaderLogo = styled.div`
@@ -64,6 +113,18 @@ const HeaderNav = styled.ul`
   gap: 2rem;
   font-size: 0.875rem;
   font-weight: 500;
+  position: relative;
+
+  li {
+    position: relative;
+    cursor: pointer;
+    outline: none;
+
+    &:focus {
+      outline: 2px solid ${({ theme }) => theme.palette.primary.main};
+      outline-offset: 1px;
+    }
+  }
 `;
 
 const HeaderLeft = styled.div`
@@ -77,3 +138,40 @@ const HeaderItem = styled.div`
   align-items: center;
   gap: 0.625rem;
 `;
+
+const SubMenu = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: white;
+  border-radius: 5px;
+  padding: 5px 0;
+  width: 125px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+`;
+
+const SubMenuItem = styled.li`
+  padding: 5px 0;
+  text-align: center;
+
+  a {
+    color: ${({ theme }) => theme.palette.primary.light};
+    text-decoration: none;
+    font-size: 10px;
+    display: block;
+    outline: none;
+
+    &:hover,
+    &:focus {
+      color: ${({ theme }) => theme.palette.primary.main};
+      font-weight: 600;
+    }
+
+    &:focus {
+      outline: 2px solid ${({ theme }) => theme.palette.primary.main};
+      outline-offset: 0.5px;
+    }
+  }
+`;

src/components/layout/index.tsx

@@ -2,10 +2,53 @@ import { Outlet } from "react-router-dom";
 import Header from "./Header";
 import Footer from "./Footer";
 
+const headerMenus = [
+  {
+    text: "파이콘 한국",
+    subMenu: [
+      { text: "파이콘 한국 2025", href: "/2025" },
+      { text: "파이콘 한국 행동강령(CoC)", href: "/coc" },
+      { text: "파이썬 사용자 모임", href: "/user-group" },
+      { text: "역대 파이콘 행사", href: "/past-events" },
+      { text: "파이콘 한국 건강 관련 안내", href: "/health" },
+    ],
+  },
+  {
+    text: "프로그램",
+    subMenu: [
+      { text: "튜토리얼", href: "/tutorial" },
+      { text: "스프린트", href: "/sprint" },
+      { text: "포스터 세션", href: "/poster" },
+    ],
+  },
+  {
+    text: "세션",
+    subMenu: [
+      { text: "세션 목록", href: "/sessions" },
+      { text: "세션 시간표", href: "/schedule" },
+    ],
+  },
+  {
+    text: "구매",
+    subMenu: [
+      { text: "티켓 구매", href: "/tickets" },
+      { text: "굿즈 구매", href: "/goods" },
+      { text: "결제 내역", href: "/payments" },
+    ],
+  },
+  {
+    text: "후원하기",
+    subMenu: [
+      { text: "후원사 안내", href: "/sponsors" },
+      { text: "개인 후원자", href: "/individual-sponsors" },
+    ],
+  },
+];
+
 export default function MainLayout() {
   return (
     <>
-      <Header />
+      <Header menus={headerMenus} />
       <main>
         <Outlet />
       </main>

src/hooks/useMenu.ts

@@ -0,0 +1,55 @@
+import { useState, useRef, useEffect } from "react";
+
+interface MenuItem {
+  text: string;
+  href?: string;
+  subMenu?: {
+    text: string;
+    href: string;
+  }[];
+}
+
+export const useMenu = () => {
+  const [hoveredMenu, setHoveredMenu] = useState<string | null>(null);
+  const [focusedMenu, setFocusedMenu] = useState<string | null>(null);
+  const menuRefs = useRef<{ [key: string]: HTMLLIElement | null }>({});
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        focusedMenu &&
+        !menuRefs.current[focusedMenu]?.contains(event.target as Node)
+      ) {
+        setFocusedMenu(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [focusedMenu]);
+
+  const handleKeyDown = (e: React.KeyboardEvent, menu: MenuItem) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setFocusedMenu(menu.text);
+    }
+  };
+
+  const handleBlur = (menu: MenuItem) => {
+    setTimeout(() => {
+      if (!menuRefs.current[menu.text]?.contains(document.activeElement)) {
+        setFocusedMenu(null);
+      }
+    }, 0);
+  };
+
+  return {
+    hoveredMenu,
+    focusedMenu,
+    menuRefs,
+    setHoveredMenu,
+    setFocusedMenu,
+    handleKeyDown,
+    handleBlur,
+  };
+};