전역 레이아웃 및 배포
공통 레이아웃과 내비게이션을 구성하고 로컬 및 Vercel 배포를 검증합니다.
전역 레이아웃 및 내비게이션
헤더, 푸터 등 모든 페이지에 공통으로 적용될 레이아웃을 구성하고, 내비게이션 바를 추가합니다.
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import type { ReactNode } from 'react';
import './globals.css';
import Header from '@/components/Header'; // Header 컴포넌트
import Footer from '@/components/Footer'; // Footer 컴포넌트
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: '나만의 온라인 북스토어',
description: 'Next.js로 만든 간단한 온라인 북스토어 프로젝트',
};
export default function RootLayout({
children,
}: {
children: ReactNode;
}) {
return (
<html lang="ko">
<body className={`${inter.className} flex flex-col min-h-screen bg-gray-100`}>
<Header />
<div className="grow">
{children}
</div>
<Footer />
</body>
</html>
);
}import Link from 'next/link';
export default function Header() {
return (
<header className="bg-white shadow-md py-4">
<div className="container mx-auto px-4 flex justify-between items-center">
<Link href="/" className="flex items-center space-x-2">
<span aria-hidden="true" className="text-2xl">📚</span>
<span className="text-2xl font-bold text-gray-800">My Bookstore</span>
</Link>
<nav>
<ul className="flex space-x-6">
<li>
<Link href="/books" className="text-gray-600 hover:text-blue-600 transition-colors">
모든 책
</Link>
</li>
<li>
<Link href="/cart" className="text-gray-600 hover:text-blue-600 transition-colors">
장바구니
</Link>
</li>
<li>
<Link href="/login" className="text-gray-600 hover:text-blue-600 transition-colors">
로그인
</Link>
</li>
</ul>
</nav>
</div>
</header>
);
}export default function Footer() {
return (
<footer className="border-t bg-white py-6 text-center text-sm text-gray-600">
<p>© {new Date().getFullYear()} My Bookstore</p>
</footer>
);
}배포 및 테스트
로컬에서 모든 기능이 정상적으로 작동하는지 확인한 후, Vercel에 배포합니다.
로컬 테스트
npm run dev브라우저에서 http://localhost:3000에 접속하여 모든 페이지와 기능이 올바르게 동작하는지 확인합니다.
특히 장바구니 추가·수량 변경·삭제·주문을 확인하고, 다른 계정의 데이터가 섞이지 않는지와 재로그인 후 소유자 ID가 유지되는지도 확인합니다. 이 문서는 코드 예시를 제시하며 실제 MongoDB·OAuth·Vercel 검증 결과를 제공하지 않습니다.
현재 Header는 고정 링크만 보여줍니다. 로그인 상태별 메뉴·로그아웃 폼은 10장의 방식으로 추가해야 하며, 홈 페이지도 생성기의 기본 화면을 북스토어 요구사항에 맞게 구현해야 합니다.
배포 전에는 프로젝트에 설정된 린터·타입 검사·production 빌드를 별도로 확인합니다. Next.js 16의 빌드가 ESLint 검사까지 자동으로 대신한다고 가정하지 않습니다.
Vercel 배포
GitHub, GitLab, 또는 Bitbucket에 프로젝트 리포지토리를 생성하고 코드를 푸시합니다.
Vercel 계정에 로그인하고 Add New Project를 통해 해당 Git 리포지토리를 임포트합니다.
Vercel이 Next.js 프로젝트임을 자동으로 감지하고 설정을 제안합니다.
환경 변수 설정: Vercel 대시보드 프로젝트 설정에서 Environment Variables 섹션으로 이동하여 MONGODB_URI, AUTH_SECRET, AUTH_GITHUB_ID, AUTH_GITHUB_SECRET을 Production 환경에 추가합니다.
데이터베이스 값은 해당 배포 환경의 MongoDB Atlas 연결 문자열을 사용하고, AUTH_SECRET에는 충분히 긴 무작위 문자열을 사용합니다. Preview 검증을 한다면 Preview 범위에도 별도 환경 값을 설정하고, 실습용 시드가 운영 DB를 지우지 않도록 대상을 분리합니다.
OAuth 운영 주소 등록: GitHub OAuth 앱에 https://배포도메인/api/auth/callback/github를 Authorization callback URL로 등록합니다.
배포: 설정 확인 후 Deploy 버튼을 클릭하면 Vercel이 자동으로 빌드하고 배포합니다.
이 단계별 가이드는 온라인 북스토어 프로젝트의 핵심 기능을 구현하는 데 필요한 주요 과정과 코드 예시를 제공합니다.
실제 프로젝트에서는 계정 모델과 역할, 사용자용 오류 UI, 관측·복구 절차를 요구사항에 맞춰 확장해야 합니다.
배포 URL에서도 로그인, 목록·검색, 사용자별 장바구니와 가상 주문을 확인합니다. 세션·DB 오류는 배포 환경의 로그와 응답을 대조하며, 빌드 성공만으로 이 외부 연동이 통과했다고 판단하지 않습니다.