From 63b86b7f4e1949f6a68696ddcaa67fe23c0b3e75 Mon Sep 17 00:00:00 2001 From: kojoo112 Date: Sun, 27 Sep 2026 21:46:15 +0900 Subject: [PATCH] =?UTF-8?q?feat(site):=20md=20=EB=AF=B8=EB=A7=8C=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=97=A4=EB=8D=94=20=EB=A9=94=EB=89=B4=EB=A5=BC=20?= =?UTF-8?q?=ED=96=84=EB=B2=84=EA=B1=B0=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 좁은 화면에서 메뉴 4개가 로고와 겹치며 글자가 세로로 꺾였다. 768px 미만에서는 햄버거 버튼 → 아래로 열리는 패널로 바꾼다. 패널이 열리면 헤더도 면을 가져 한 덩어리로 보이고, 링크 이동· Esc 로 닫힌다. 데스크톱 인라인 메뉴는 그대로. Co-Authored-By: Claude Fable 5 --- src/components/site/site-header-bar.tsx | 91 ++++++++++++++++++++++++- 1 file changed, 89 insertions(+), 2 deletions(-) diff --git a/src/components/site/site-header-bar.tsx b/src/components/site/site-header-bar.tsx index 352bc5a..6409d9d 100644 --- a/src/components/site/site-header-bar.tsx +++ b/src/components/site/site-header-bar.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { useEffect, useState } from "react"; +import { usePathname } from "next/navigation"; import { SiteLogo } from "@/components/site/site-logo"; import { pagePath } from "@/lib/sections"; @@ -13,6 +14,7 @@ type NavPage = { /** * 고정 헤더. 히어로 위에서는 투명+밝은 글자, 스크롤하면 면이 생긴다. + * md 미만에서는 메뉴 대신 햄버거 버튼 → 아래로 패널이 열린다. * 요파트너스 `.nav` / `.nav.scrolled` 와 같은 레이아웃 역할. */ export function SiteHeaderBar({ @@ -23,6 +25,8 @@ export function SiteHeaderBar({ pages: NavPage[]; }) { const [scrolled, setScrolled] = useState(false); + const [open, setOpen] = useState(false); + const pathname = usePathname(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); @@ -31,12 +35,31 @@ export function SiteHeaderBar({ return () => window.removeEventListener("scroll", onScroll); }, []); + // 페이지를 이동하면 패널을 닫는다. + const [prevPath, setPrevPath] = useState(pathname); + if (pathname !== prevPath) { + setPrevPath(pathname); + setOpen(false); + } + + useEffect(() => { + if (!open) return; + const onKey = (e: KeyboardEvent) => { + if (e.key === "Escape") setOpen(false); + }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [open]); + + // 패널이 열려 있으면 헤더도 면을 가져야 패널과 한 덩어리로 보인다. + const solid = scrolled || open; + return (
-
); }