🧱 1. 구조 설계
전체적으로 아래와 같은 구조를 만든다고 생각
<html>
<body>
<Header />
<Main>{children}</Main>
<Footer />
</body>
</html>📁 2. 파일 생성
src/components 폴더에 다음 파일들을 생성
src/
└── components/
├── Header.tsx
├── Footer.tsx
└── Main.tsx🧩 3. 컴포넌트 작성
Header.tsx
export default function Header() {
return (
<header className="w-full py-4 px-6 bg-white border-b sticky top-0 z-50">
<h1 className="text-xl font-bold">프론트엔드 포트폴리오</h1>
</header>
);
}
Footer.tsx
export default function Footer() {
return (
<footer className="w-full py-6 px-6 text-center text-sm text-gray-500 border-t">
© 2025 서승준. All rights reserved.
</footer>
);
}
Main.tsx
export default function Main({ children }: { children: React.ReactNode }) {
return (
<main className="max-w-4xl mx-auto px-4 py-10">
{children}
</main>
);
}🧩 4. layout.tsx에서 레이아웃 적용
src/app/layout.tsx를 아래처럼 수정
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Main from "@/components/Main";
const geistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" });
export const metadata: Metadata = {
title: "프론트엔드 포트폴리오",
description: "프론트엔드 개발자가 되기 위해 만든 포트폴리오입니다.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body className={`${geistSans.variable} ${geistMono.variable} font-sans`}>
<Header />
<Main>{children}</Main>
<Footer />
</body>
</html>
);
}
html_programming_language