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

feat(ui): 메인 레이아웃/홈 페이지를 타깃 사이트 구조로 Tailwind 클론

Browse Source 
- layout.tsx: 상단 고정 헤더/중앙 컨테이너/푸터 구성
- page.tsx: 히어로 + 12그리드 메인 + 하단 3컬럼 섹션 추가
- globals.css: 테마 변수/폰트/중립 배경 헬퍼 추가

Refs: @101101_메인페이지구성.md
This commit is contained in:
koreacomp5
2025-10-11 18:32:06 +09:00
parent 0e8eb2e85e
commit 54b785420f
4 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/globals.css
View File

@@ -22,5 +22,8 @@
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
}
/* 유틸: 카드 스켈레톤 색상 헬퍼 (타깃 사이트 톤 유사) */
.bg-neutral-100 { background-color: #f5f5f7; }

26
src/app/layout.tsx
View File

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
import "./globals.css";
import QueryProvider from "@/app/QueryProvider";
import { AppHeader } from "@/app/components/AppHeader";
import { AppSidebar } from "@/app/components/AppSidebar";
import { AppFooter } from "@/app/components/AppFooter";
import { ToastProvider } from "@/app/components/ui/ToastProvider";
@@ -18,16 +17,27 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<html lang="ko">
<body className="min-h-screen bg-background text-foreground antialiased">
<QueryProvider>
<ToastProvider>
<AppHeader />
<div style={{ display: "flex", minHeight: "80vh" }}>
<AppSidebar />
<main style={{ flex: 1, padding: 16 }}>{children}</main>
<div className="min-h-screen flex flex-col">
<div className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur">
<div className="max-w-7xl mx-auto px-4">
<AppHeader />
</div>
</div>
<main className="flex-1">
<div className="max-w-7xl mx-auto px-4 py-6">
{children}
</div>
</main>
<div className="border-t">
<div className="max-w-7xl mx-auto px-4">
<AppFooter />
</div>
</div>
</div>
<AppFooter />
</ToastProvider>
</QueryProvider>
</body>

42
src/app/page.tsx
View File

@@ -1,17 +1,41 @@
import Image from "next/image";
import { QuickActions } from "@/app/components/QuickActions";
import { HeroBanner } from "@/app/components/HeroBanner";
import { PostList } from "@/app/components/PostList";
import { PersonalWidgets } from "@/app/components/PersonalWidgets";
export default function Home({ searchParams }: { searchParams?: { sort?: "recent" | "popular" } }) {
const sort = searchParams?.sort ?? "recent";
return (
<div className="">
<HeroBanner />
<QuickActions />
<PostList sort={sort} />
<PersonalWidgets />
<div className="space-y-8">
{/* 히어로 섹션: 상단 대형 비주얼 영역 */}
<section>
<HeroBanner />
</section>
{/* 메인 그리드: 좌 대형 카드, 우 2열 카드 등 타깃 사이트 구조를 단순화한 12그리드 */}
<section className="grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="md:col-span-8 grid grid-cols-1 gap-4">
<div className="aspect-[16/9] rounded-xl bg-neutral-100 overflow-hidden" />
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
</div>
</div>
<aside className="md:col-span-4 space-y-4">
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
<div className="h-40 rounded-xl bg-neutral-100" />
</aside>
</section>
{/* 하단 롤링 배너/뉴스 영역 유사 섹션 */}
<section className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
<div className="h-28 rounded-lg bg-neutral-100" />
</section>
</div>
);
}