From b2adbba05607c8252a68d0e7290598ca5cd13518 Mon Sep 17 00:00:00 2001 From: MUsoftware Date: Sat, 16 May 2026 20:20:42 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=ED=8A=B9=EC=A0=95=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=84=88=EB=B9=84=20=EC=9D=B4=EC=83=81=EC=9D=80=20?= =?UTF-8?q?navigation=20=EC=9A=94=EC=86=8C=EA=B0=80=20=EB=8D=94=20?= =?UTF-8?q?=EC=9D=B4=EC=83=81=20=EB=B2=8C=EC=96=B4=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layout/Header/index.tsx | 135 ++++++++++-------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/apps/pyconkr-2026/src/components/layout/Header/index.tsx b/apps/pyconkr-2026/src/components/layout/Header/index.tsx index 7d274d3..11f46b1 100644 --- a/apps/pyconkr-2026/src/components/layout/Header/index.tsx +++ b/apps/pyconkr-2026/src/components/layout/Header/index.tsx @@ -23,6 +23,7 @@ type NavigationStateType = { const HeaderHeight: CSSProperties["height"] = "3.625rem"; const BreadCrumbHeight: CSSProperties["height"] = "4.5rem"; +const MaxContentWidth: CSSProperties["maxWidth"] = "1366px"; export default function Header() { const { title, language, siteMapNode, currentSiteMapDepth, shouldShowTitleBanner } = useAppContext(); @@ -51,42 +52,44 @@ export default function Header() { return ( - - - - - - PyCon Korea 2026 - - - - + + + + + + + PyCon Korea 2026 + + + + - {siteMapNode ? ( - - {Object.values(siteMapNode.children) - .filter((s) => !s.hide) - .map((r) => ( - - setDepth1(r)} isActive={navState.depth1?.id === r.id}> - {r.name} - - - ))} - - ) : ( - - )} + {siteMapNode ? ( + + {Object.values(siteMapNode.children) + .filter((s) => !s.hide) + .map((r) => ( + + setDepth1(r)} isActive={navState.depth1?.id === r.id}> + {r.name} + + + ))} + + ) : ( + + )} - - - + + + + {navState.depth1 && ( @@ -147,22 +150,24 @@ export default function Header() { {shouldShowTitleBanner && ( <> - - {breadCrumbArray - .filter((routeInfo) => isNonNullish(routeInfo)) - .map(({ route_code, name }, index) => { - breadCrumbRoute += `${route_code}/`; - return ( - - {index > 0 && } - - - ); - })} - - - {title} - + + + {breadCrumbArray + .filter((routeInfo) => isNonNullish(routeInfo)) + .map(({ route_code, name }, index) => { + breadCrumbRoute += `${route_code}/`; + return ( + + {index > 0 && } + + + ); + })} + + + {title} + + @@ -180,10 +185,6 @@ const ResponsivePadding = ({ theme }: MUIStyledCommonProps) => ({ const HeaderContainer = styled("header")(({ theme }) => ({ position: "fixed", - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", width: "100%", height: HeaderHeight, backgroundColor: "rgba(18, 9, 30, 0.85)", @@ -201,6 +202,17 @@ const HeaderContainer = styled("header")(({ theme }) => ({ "&:hover .header-title-text": { opacity: 1, }, +})); + +const HeaderInner = styled("div")(({ theme }) => ({ + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + width: "100%", + height: "100%", + maxWidth: MaxContentWidth, + marginInline: "auto", ...ResponsivePadding({ theme }), })); @@ -214,7 +226,7 @@ const NavButton = styled(Button)<{ isActive?: boolean }>(({ isActive }) => ({ "&:hover": { color: "#ed5ebd", backgroundColor: "transparent" }, })); -const NavSideElementContainer = styled(Stack)({ flexGrow: 1, flexBasis: 0 }); +const NavSideElementContainer = styled(Stack)(); const NavDropdownOuter = styled(Stack)(({ theme }) => ({ width: "100vw", @@ -231,6 +243,8 @@ const NavDropdownOuter = styled(Stack)(({ theme }) => ({ const NavDropdownInner = styled(Stack)(({ theme }) => ({ width: "100%", + maxWidth: MaxContentWidth, + marginInline: "auto", minHeight: "10rem", overflowY: "auto", gap: "1rem", @@ -261,7 +275,7 @@ const Depth2to3Divider = styled(Divider)({ borderColor: "rgba(237, 94, 189, 0.3) const Depth3Item = styled(Depth2Item)({ fontSize: "0.75rem" }); -const BreadCrumbContainer = styled(Stack)(({ theme }) => ({ +const BreadCrumbContainer = styled("div")(({ theme }) => ({ position: "fixed", top: HeaderHeight, width: "100%", @@ -271,10 +285,17 @@ const BreadCrumbContainer = styled(Stack)(({ theme }) => ({ backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", borderBottom: "1px solid rgba(237, 94, 189, 0.15)", + zIndex: theme.zIndex.appBar - 1, +})); + +const BreadCrumbInner = styled(Stack)(({ theme }) => ({ + width: "100%", + height: "100%", + maxWidth: MaxContentWidth, + marginInline: "auto", gap: "0.25rem", justifyContent: "center", alignItems: "flex-start", - zIndex: theme.zIndex.appBar - 1, ...ResponsivePadding({ theme }), "& a": { color: "#f5c73d", From 88bcee8ad11c90129a24a4d517262d05806133e6 Mon Sep 17 00:00:00 2001 From: MUsoftware Date: Sat, 16 May 2026 20:23:50 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20PyCon=20Korea=202026=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EA=B0=80=20Dropdown=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=8F=84=20=EB=85=B8=EC=B6=9C=20=EC=9C=A0=EC=A7=80=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layout/Header/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/pyconkr-2026/src/components/layout/Header/index.tsx b/apps/pyconkr-2026/src/components/layout/Header/index.tsx index 11f46b1..c966c44 100644 --- a/apps/pyconkr-2026/src/components/layout/Header/index.tsx +++ b/apps/pyconkr-2026/src/components/layout/Header/index.tsx @@ -50,7 +50,13 @@ export default function Header() { const headerStyle: SxProps = shouldShowTitleBanner ? {} : { backgroundColor: "transparent" }; return ( - + @@ -93,7 +99,7 @@ export default function Header() { {navState.depth1 && ( - + {navState.depth1.name} From 0fab3380db32e40c7fbf116f4695f513a1bff893 Mon Sep 17 00:00:00 2001 From: MUsoftware Date: Sat, 16 May 2026 20:27:56 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20sitemap=EC=9D=B4=20navigation=20bar?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A0=95=ED=99=95=ED=9E=88=20=EC=A4=91?= =?UTF-8?q?=EC=95=99=20=EC=A0=95=EB=A0=AC=EB=90=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layout/Header/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/pyconkr-2026/src/components/layout/Header/index.tsx b/apps/pyconkr-2026/src/components/layout/Header/index.tsx index c966c44..644505e 100644 --- a/apps/pyconkr-2026/src/components/layout/Header/index.tsx +++ b/apps/pyconkr-2026/src/components/layout/Header/index.tsx @@ -211,9 +211,8 @@ const HeaderContainer = styled("header")(({ theme }) => ({ })); const HeaderInner = styled("div")(({ theme }) => ({ - display: "flex", - flexDirection: "row", - justifyContent: "space-between", + display: "grid", + gridTemplateColumns: "1fr auto 1fr", alignItems: "center", width: "100%", height: "100%", @@ -232,7 +231,10 @@ const NavButton = styled(Button)<{ isActive?: boolean }>(({ isActive }) => ({ "&:hover": { color: "#ed5ebd", backgroundColor: "transparent" }, })); -const NavSideElementContainer = styled(Stack)(); +const NavSideElementContainer = styled(Stack)({ + flexDirection: "row", + alignItems: "center", +}); const NavDropdownOuter = styled(Stack)(({ theme }) => ({ width: "100vw", From 76504a1a3b7bba4ba17156a49c009717f2da71ad Mon Sep 17 00:00:00 2001 From: MUsoftware Date: Sat, 16 May 2026 20:32:09 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20sitemap=EC=9D=B4=20=EB=A7=8E?= =?UTF-8?q?=EC=9D=B4=20=EB=93=B1=EB=A1=9D=EB=90=A0=EB=95=8C=EA=B9=8C?= =?UTF-8?q?=EC=A7=80=EB=A7=8C=20=EC=9A=B0=EC=84=A0=20=EC=A2=8C=EC=B8=A1=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC=20&=20PyCon=20Korea=202026=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EC=83=81=EC=8B=9C=20=EB=85=B8?= =?UTF-8?q?=EC=B6=9C=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/pyconkr-2026/src/components/layout/Header/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/pyconkr-2026/src/components/layout/Header/index.tsx b/apps/pyconkr-2026/src/components/layout/Header/index.tsx index 644505e..0d4a8f1 100644 --- a/apps/pyconkr-2026/src/components/layout/Header/index.tsx +++ b/apps/pyconkr-2026/src/components/layout/Header/index.tsx @@ -202,7 +202,8 @@ const HeaderContainer = styled("header")(({ theme }) => ({ zIndex: theme.zIndex.appBar, transition: "background-color 0.3s ease-in-out", "& .header-title-text": { - opacity: 0, + // TODO: FIXME: HeaderInner의 좌측 정렬 모드를 중앙 정렬("1fr auto 1fr")로 되돌릴 때 opacity를 다시 0으로 변경할 것 (hover 시에만 노출되는 원래 동작 복귀) + opacity: 1, transition: "opacity 0.2s ease", }, "&:hover .header-title-text": { @@ -212,7 +213,9 @@ const HeaderContainer = styled("header")(({ theme }) => ({ const HeaderInner = styled("div")(({ theme }) => ({ display: "grid", - gridTemplateColumns: "1fr auto 1fr", + // TODO: FIXME: sitemap 항목이 충분히 등록되면 gridTemplateColumns를 "1fr auto 1fr"로 되돌려 중앙 정렬로 복귀하고, columnGap도 제거할 것 + gridTemplateColumns: "auto auto 1fr", + columnGap: theme.spacing(2), alignItems: "center", width: "100%", height: "100%",