motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.1 앱 레이아웃/헤더/푸터/사이드바 구성

Browse Source
This commit is contained in:
koreacomp5
2025-10-09 15:22:05 +09:00
parent af206652cb
commit 37a5a5efde
4 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/AppFooter.tsx Normal file
View File

@@ -0,0 +1,9 @@
export function AppFooter() {
return (
<footer style={{ padding: 12, borderTop: "1px solid #eee", marginTop: 24 }}>
© msg App
</footer>
);
}

13
src/app/components/AppHeader.tsx Normal file
View File

@@ -0,0 +1,13 @@
export function AppHeader() {
return (
<header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
<div>msg App</div>
<nav style={{ display: "flex", gap: 12 }}>
<a href="/">홈</a>
<a href="/boards">게시판</a>
</nav>
</header>
);
}

12
src/app/components/AppSidebar.tsx Normal file
View File

@@ -0,0 +1,12 @@
export function AppSidebar() {
return (
<aside style={{ width: 200, borderRight: "1px solid #eee", padding: 12 }}>
<ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
<li><a href="/boards">게시판</a></li>
<li><a href="/admin">관리</a></li>
</ul>
</aside>
);
}

10
src/app/layout.tsx
View File

@@ -1,6 +1,9 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import QueryProvider from "@/app/QueryProvider"; import QueryProvider from "@/app/QueryProvider";
import { AppHeader } from "@/app/components/AppHeader";
import { AppSidebar } from "@/app/components/AppSidebar";
import { AppFooter } from "@/app/components/AppFooter";
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -17,7 +20,12 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body> <body>
<QueryProvider> <QueryProvider>
{children} <AppHeader />
<div style={{ display: "flex", minHeight: "80vh" }}>
<AppSidebar />
<main style={{ flex: 1, padding: 16 }}>{children}</main>
</div>
<AppFooter />
</QueryProvider> </QueryProvider>
</body> </body>
</html> </html>