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

3
.cursor/.prompt/101101_메인페이지구성.md
View File

@@ -1,4 +1,3 @@
### 메인페이지구성 ### 메인페이지구성
[] 1. https://mabinogimobile.nexon.com/Main를 브라우저로 열기 [] 1. https://mabinogimobile.nexon.com/Main를 브라우저로 열기
[] 2. src/app/layout.tsx 와 src/app/page.tsx 파일 백업 _layout.tsxbk _page.tsx.bk로 [] 2. 1번 링크를 참조해서 기존 src/app/layout.tsx과 src/app/page.tsx파일에 큰 레이아웃 클론 css는 tailwind로
[] 3. 1번 링크를 참조해서 기존 layout과 page파일에 큰 레이아웃 클론 css는 tailwind로

5
src/app/globals.css
View File

@@ -22,5 +22,8 @@
body { body {
background: var(--background); background: var(--background);
color: var(--foreground); 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 "./globals.css";
import QueryProvider from "@/app/QueryProvider"; import QueryProvider from "@/app/QueryProvider";
import { AppHeader } from "@/app/components/AppHeader"; import { AppHeader } from "@/app/components/AppHeader";
import { AppSidebar } from "@/app/components/AppSidebar";
import { AppFooter } from "@/app/components/AppFooter"; import { AppFooter } from "@/app/components/AppFooter";
import { ToastProvider } from "@/app/components/ui/ToastProvider"; import { ToastProvider } from "@/app/components/ui/ToastProvider";
@@ -18,16 +17,27 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="ko">
<body> <body className="min-h-screen bg-background text-foreground antialiased">
<QueryProvider> <QueryProvider>
<ToastProvider> <ToastProvider>
<AppHeader /> <div className="min-h-screen flex flex-col">
<div style={{ display: "flex", minHeight: "80vh" }}> <div className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur">
<AppSidebar /> <div className="max-w-7xl mx-auto px-4">
<main style={{ flex: 1, padding: 16 }}>{children}</main> <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> </div>
<AppFooter />
</ToastProvider> </ToastProvider>
</QueryProvider> </QueryProvider>
</body> </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 { 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" } }) { export default function Home({ searchParams }: { searchParams?: { sort?: "recent" | "popular" } }) {
const sort = searchParams?.sort ?? "recent"; const sort = searchParams?.sort ?? "recent";
return ( return (
<div className=""> <div className="space-y-8">
<HeroBanner /> {/* 히어로 섹션: 상단 대형 비주얼 영역 */}
<QuickActions /> <section>
<PostList sort={sort} /> <HeroBanner />
<PersonalWidgets /> </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> </div>
); );
} }