📌 개요

• 프로젝트 명: 하늘빛바다펜션 (skyblu.kr)
• 한 줄 소개: Next.js App Router 기반 남해 펜션 예약 웹사이트
• 배포 주소: https://skyblu.vercel.app

🛠️ 기술 스택

📂 폴더 구조

🏠 app
├── 📂 about ────────────────────── ℹ️ 펜션 소개 페이지
├── 📂 auth
│   ├── 📃 login ────────────────── 👤 로그인 페이지
│   ├── 📃 sign-up ──────────────── 👤 회원가입 페이지
│   ├── 📃 sign-up-success ──────── ✅ 회원가입 완료 페이지
│   └── 📃 error ────────────────── ⚠️ 인증 에러 페이지
├── 📂 faq ──────────────────────── ❓ 자주 묻는 질문 페이지
├── 📂 guideline ────────────────── 📋 이용 안내 페이지
├── 📂 notices
│   ├── 📃 [id] ─────────────────── 📰 공지사항 상세 페이지
│   └── 📃 page ─────────────────── 📰 공지사항 목록 페이지
├── 📂 reservation ──────────────── 📅 예약 페이지
├── 📂 rooms
│   ├── 📃 [type]/[id] ──────────── 🏠 객실 상세 페이지
│   ├── 📃 [type] ───────────────── 🏠 객실 타입별 목록 페이지
│   └── 📃 page ─────────────────── 🏠 전체 객실 페이지
├── 📂 special
│   ├── 📃 garden ───────────────── 🌿 정원 소개 페이지
│   ├── 📃 lounge ───────────────── 🛋️ 라운지 소개 페이지
│   ├── 📃 oceanview ────────────── 🌊 오션뷰 소개 페이지
│   └── 📃 pool ─────────────────── 🏊 수영장 소개 페이지
├── layout.tsx
├── globals.css
├── manifest.ts ─────────────────── 📱 PWA 매니페스트
├── robots.ts ───────────────────── 🤖 SEO robots.txt
└── sitemap.ts ──────────────────── 🗺️ SEO sitemap

📂 src
├── 📂 app
│   ├── 📂 http ─────────────────── 🌐 Axios 인스턴스 및 설정
│   ├── 📂 providers ────────────── 🔌 React Query, Lenis 프로바이더
│   └── 📂 supabase ─────────────── 🔐 Supabase 클라이언트/미들웨어
├── 📂 entities
│   ├── 📂 asset ────────────────── 🖼️ 자산(이미지) 도메인 로직
│   ├── 📂 asset-category ───────── 🗂️ 자산 카테고리 도메인 로직
│   ├── 📂 notice ───────────────── 📰 공지사항 도메인 로직
│   └── 📂 room ─────────────────── 🏠 객실 도메인 로직
├── 📂 pages ────────────────────── 📄 페이지별 UI/로직 컴포넌트
│   ├── 📂 about
│   ├── 📂 auth
│   ├── 📂 faq
│   ├── 📂 guideline
│   ├── 📂 home
│   ├── 📂 notices
│   ├── 📂 reservation
│   ├── 📂 rooms
│   └── 📂 special
├── 📂 shared
│   ├── 📂 data ─────────────────── 📊 정적 데이터
│   ├── 📂 hooks ────────────────── 🪝 공통 커스텀 훅
│   ├── 📂 lib ──────────────────── 🛠️ 유틸리티 함수
│   ├── 📂 types ────────────────── 📝 공통 타입 정의
│   └── 📂 ui ───────────────────── 🎨 shadcn/ui 기반 공통 컴포넌트
└── 📂 widgets ──────────────────── 🧩 재사용 가능한 위젯 컴포넌트

🚀 시작하기

1️⃣ 의존성 설치

pnpm install

2️⃣ 환경변수 설정

env.example를 복사하여 .env.local 파일을 생성하고 필요한 값을 입력하세요.

cp env.example .env.local

3️⃣ 개발 서버 실행

pnpm dev

브라우저에서 http://localhost:3000 으로 접속합니다.

📜 스크립트

pnpm dev     # 개발 서버 실행
pnpm build   # 프로덕션 빌드
pnpm start   # 프로덕션 서버 실행
pnpm lint    # ESLint 실행

🏗️ 아키텍처

Feature-Sliced Design 기반 구조

• app/: Next.js App Router 라우트 및 메타데이터 설정
• src/pages/: 페이지별 UI 컴포넌트 및 비즈니스 로직 (도메인별 분리)
• src/entities/: 도메인 모델, API 통신, 헬퍼 함수
• src/widgets/: 재사용 가능한 섹션/위젯 단위 컴포넌트
• src/shared/: 공통 유틸리티, 훅, UI 컴포넌트

🌐 배포

Vercel을 통한 배포를 권장합니다.

• 빌드 명령: pnpm build
• 실행 명령: pnpm start
• 환경변수: 위 표의 환경변수를 배포 환경에 설정

📝 참고사항

• 원격 이미지: Supabase Storage 호스트는 next.config.ts의 images.remotePatterns에 등록되어 있어야 합니다.
• 폰트: KBIZserif, Pretendard GOV 폰트를 사용합니다. (public/fonts/)
• SEO: manifest.ts, robots.ts, sitemap.ts를 통해 SEO 최적화가 적용되어 있습니다.