세계에서 가장 영향력 있는 베스트셀러를 한눈에
뉴욕 타임즈에서 선정한 데이터를 기반으로 다양한 장르의 베스트셀러를 탐색할 수 있는 웹 애플리케이션

🌐 Live Demo

• 픽션, 논픽션, 비즈니스 등 15개 이상의 장르
• 반응형 카드 그리드 레이아웃
• 부드러운 호버 애니메이션 제공

• 실시간 베스트셀러 순위 (books-api)
• 저자, 출판사, 줄거리, 표지 이미지 포함
• 순위 변동 및 연속 베스트셀러 유지 주 수 표시

• Amazon, Barnes & Noble, Books-A-Million 등 원클릭 이동
• 사용성 높은 직관적 버튼 UI

• 모바일 최적화 및 태블릿/데스크탑 대응

• Next.js 기반 SSR로 초기 로딩 최적화
• 스켈레톤 UI와 에러 핸들링 페이지 제공
• SEO 친화적 메타데이터 설정

• Next.js 15 - App Router 기반 SSR 지원
• TypeScript - 정적 타입을 통한 안전한 코드 작성
• CSS Modules - 컴포넌트 단위 스타일링

• Books API - 카테고리 데이터 및 최신 베스트셀러 순위 제공

src/
├── app/
│   ├── (home)/              # 카테고리 그리드
│   ├── list/[id]/           # 선택된 카테고리의 도서 목록
│   ├── about/               # 서비스 소개 페이지
│   ├── layout.tsx           # 전체 레이아웃
│   ├── error.tsx            # 에러 바운더리
│   └── not-found.tsx        # 404 페이지
├── components/
│   ├── BookCard.tsx         # 도서 카드
│   ├── CategoryCard.tsx     # 카테고리 카드
│   ├── BuyLink.tsx          # 구매 버튼
│   ├── Header.tsx           # 헤더
│   ├── Footer.tsx           # 푸터
│   └── ErrorDisplay.tsx     # 에러 메시지 표시
├── lib/
│   ├── api.ts               # API 호출 함수
│   └── utils/               # 유틸리티 함수
├── types/                   # 타입 정의
└── styles/                  # 전역 스타일

• SSR 기반 렌더링으로 SEO 및 초기 로딩 속도 개선
• Next.js 자동 캐싱 및 ISR 적용
• 사용자 친화적인 에러 바운더리 구축

• Lora 폰트 기반의 읽기 좋은 타이포그래피
• 베이지 & 브라운 기반의 서적 친화적 색상 구성
• 컴포넌트 단위 스타일 관리로 일관성 유지

• 공개 API 기반의 최신 베스트셀러 데이터
• 순위 변화 시각화 및 유지 기간 표시
• 다양한 장르별 탐색 제공