dm_new: Lnb고정

This commit is contained in:
2026-02-26 14:39:25 +09:00
parent ec59447db9
commit fa21387c55
5 changed files with 24 additions and 7 deletions
@@ -3,7 +3,6 @@
import "./reuse.module.css";
// import type { ReactNode } from "react";
import TopNav from "./_components/TopNav";
import { usePathname } from "next/navigation";
@@ -5,7 +5,9 @@ export default function IntroLayout({ children }: { children: ReactNode }) {
return (
<div className="flex gap-0">
<Lnb />
<main className="flex-1 px-[100px] pt-[80px]">{children}</main>
<main className="flex-1 px-[100px] pt-[80px]">
{children}
</main>
</div>
);
}
+9 -3
View File
@@ -1,13 +1,19 @@
// app/(with-layout)/layout.tsx
/**
* 메인을 제외한 메뉴안 페이지의 layout
*/
import "../reuse.module.css";
import { StoreProvider } from "../store";
import TopNav from "@/components/TopNav";
export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {
export default function WithLayout({ children }: { children: React.ReactNode }) {
return (
<StoreProvider>
<TopNav />
<div className="pt-[83px]">{children}</div> {/* TopNav 높이만큼 */}
<div className="pt-[83px]">{/* TopNav 높이만큼 */}
<TopNav />
<main className="ml-[260px]">{children}</main>{/* Lnb 너비만큼 */}
</div>
</StoreProvider>
);
}
+11 -1
View File
@@ -68,11 +68,21 @@ export default function Lnb() {
}, [pathname, secondLevelMenus]);
return (
<aside className="w-[260px] min-w-[260px] shrink-0">
<aside
className={[
"fixed left-0 top-[83px]", // ✅ 화면 고정 + TopNav 아래로
"w-[260px] min-w-[260px] shrink-0",
"h-[calc(100vh-83px)]", // ✅ 남은 높이만큼
"overflow-y-auto", // ✅ LNB 내부 스크롤
"bg-white z-50", // ✅ 겹침 방지
].join(" ")}
>
{/* 타이틀 */}
<div className="flex h-[120px] items-center justify-center bg-gradient-to-r from-cyan-500 to-green-500 text-[40px] font-bold text-white">
{currentTopMenu?.menuKornNm?.trim().split(/\s+/).pop() ?? ""}
</div>
{/* 메뉴 */}
<ul>
{secondLevelMenus.map((item) => {
const hasChildren = hasAnyChild(item);
+1 -1
View File
@@ -24,7 +24,7 @@ const eslintConfig = [
{rules:{
// other rules..
"@typescript-eslint/no-explicit-any": "off",
"@next/next/no-img-element": "off",
// "@next/next/no-img-element": "off",
...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
}},
];