전역 레이아웃 및 배포

전역 레이아웃 및 내비게이션

헤더, 푸터 등 모든 페이지에 공통으로 적용될 레이아웃을 구성하고, 내비게이션 바를 추가합니다.

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>
  );
}

작은 서점 흐름의 완료 범위

첫 버전은 로그인 → 도서 목록·상세 → 자기 장바구니 → 가상 주문까지로 정합니다. 생성기의 홈 화면이 남아 있어도 /login과 /books에서 시작할 수 있습니다. 전체 내비게이션까지 완성하려면 아래의 직접 UI 과제도 이어서 마칩니다.

처음 비교할 값은 새 독립 실습 DB에 시드를 처음 넣었고, 다른 주문이나 가격 변경 없이 시작한 경우로 정합니다. Next.js 완벽 가이드의 가격은 35,000원, 재고는 100이며, 계정 A의 장바구니는 비어 있어야 합니다. 기존 데이터로 시작한다면 현재 가격·재고·장바구니를 먼저 기록해 그 값에서 변화를 비교합니다. 결과를 다시 맞추려고 기존 장바구니·주문이 있는 DB에 도서를 재시드하지 않습니다.

1. /login의 GitHub 버튼으로 로그인합니다. 서버 세션의 소유자 ID는 인증에서 확인한 provider:providerAccountId이며 이메일이나 브라우저가 보낸 ID로 바꾸지 않습니다.
2. /books에서 해당 도서의 상세 페이지로 이동해 제목·가격·재고를 확인합니다. 도서 목록·상세의 코드와 연결합니다.
3. 장바구니에 추가를 누르고 /cart에서 수량을 2로 바꿉니다. 합계가 70,000원인지 보고 장바구니의 자기 항목 조건을 확인합니다. 담기·수량 변경만으로 도서 재고를 차감하지는 않습니다.
4. /order에서 같은 항목과 예상 금액을 읽고 가상 주문을 제출합니다. 저장 시점에는 서버가 가격·재고를 다시 읽으므로 앞 화면의 값과 달라질 수 있습니다.
5. /order-success의 화면 이동과 DB 변화를 함께 비교합니다. 위 조건이 유지됐다면 Order에 A의 수량 2·구매 가격 35,000원·합계 70,000원·completed가 저장되고, Book 재고는 98, A의 CartItem은 삭제되는 것이 기대 결과입니다. completed는 가상 주문 상태이며 실결제·배송 완료가 아닙니다.

커밋은 트랜잭션 안의 DB 변경을 확정하는 단계입니다. 성공 페이지는 인증이나 주문 ID·DB 조회가 없는 정적 안내입니다. 직접 URL을 열어도 완료 문구가 보이므로 그 화면만으로 주문 커밋을 확정하지 않습니다. 주문 액션의 같은 session 안에서 재고·주문·장바구니를 바꾸는 경계와, 커밋 뒤의 화면 이동을 따로 확인합니다.

제공 코드와 직접 마칠 부분

홈은 생성기의 app/page.tsx를 북스토어 시작 화면으로 바꾸는 과제입니다. Header의 메뉴와 로그아웃은 로그인과 로그아웃의 서버 예제를 참고합니다. 그 예제의 src/components 경로와 /account 이동은 여기의 components 경로와 실제 북스토어 주소에 맞춰야 합니다.

검색과 페이지 이동은 기본 흐름 뒤에 확인할 수 있습니다. 현재 두 권 시드와 페이지당 12권 조건에서는 두 번째 페이지가 생기지 않습니다. 설계의 대량 데이터·응답 시간 목표를 이 예제로 달성했다고 판단하지 않습니다.

예상과 다른 결과가 나올 때

아래 표는 직접 비교할 기대 결과와 첫 확인 위치입니다. 실제 환경에서 본 결과는 사용한 데이터·계정과 함께 README에 남깁니다. 아직 확인하지 않은 항목은 미확인으로 기록합니다.

커밋이 확정된 뒤 화면 갱신만 실패했다고 주문을 다시 제출하지 않습니다. 결과가 불명인 오류도 주문이 없다는 증거는 아닙니다. 현재 수동 트랜잭션은 자동 재시도·멱등성·주문 내역 조회/복구 화면을 제공하지 않습니다. 같은 요청을 반복해도 중복 주문을 만들지 않는 성질을 멱등성이라고 합니다. 운영 확장에서는 이를 위한 주문 식별자와 결과 확인 경로를 먼저 정해야 합니다.

배포 및 테스트

로컬에서 위 학습 흐름과 직접 마친 UI의 범위를 확인한 뒤, 앱을 공개하려면 Vercel 배포로 이어갑니다. 로컬 화면·빌드 성공과 배포 환경의 DB·OAuth 연결은 각각 다른 확인입니다.

로컬 테스트

npm run dev

개발 서버가 출력한 실제 접속 주소에서 /login·/books를 열고 위 흐름을 확인합니다. 기본 주소는 http://localhost:3000이지만 사용 중인 서버의 터미널 출력을 기준으로 합니다.

특히 장바구니 추가·수량 변경·삭제·주문을 확인하고, 다른 계정의 데이터가 섞이지 않는지와 재로그인 후 소유자 ID가 유지되는지도 확인합니다. 이 문서는 코드 예시를 제시하며 실제 MongoDB·OAuth·Vercel 검증 결과를 제공하지 않습니다.

홈과 상태별 메뉴·로그아웃을 아직 만들지 않았다면 위 직접 과제로 남겨 둡니다. 고정 Header 코드만으로 그 기능까지 완료했다고 기록하지 않습니다.

배포 전에는 프로젝트에 설정된 린터·타입 검사·production 빌드를 별도로 확인합니다. Next.js 16의 빌드가 ESLint 검사까지 자동으로 대신한다고 가정하지 않습니다.

Vercel 배포

이 단계별 가이드는 온라인 북스토어 프로젝트의 핵심 기능을 구현하는 데 필요한 주요 과정과 코드 예시를 제공합니다.

실제 프로젝트에서는 계정 모델과 역할, 사용자용 오류 UI, 관측·복구 절차를 요구사항에 맞춰 확장해야 합니다.

배포 URL에서도 로그인, 목록·검색, 사용자별 장바구니와 가상 주문을 확인합니다. 세션·DB 오류는 배포 환경의 로그와 응답을 대조하며, 빌드 성공만으로 이 외부 연동이 통과했다고 판단하지 않습니다.