💬 프로젝트 소개

풍부한 도서 정보와 직관적인 쇼핑 경험을 제공하는 도서 이커머스 플랫폼입니다 📚

• 다양한 카테고리의 도서를 손쉽게 검색하고 구매할 수 있는 사용자 친화적인 인터페이스를 제공합니다.
• 베스트셀러, 장르별 도서 등 다양한 분류를 통해 원하는 책을 빠르게 찾을 수 있습니다.
• PC와 모바일 환경에서 최적화된 반응형 UI를 제공하여 어디서든 편리하게 이용할 수 있습니다.

• 작업 기간 : 2025. 03. 20 ~ 2025. 03. 27
• 배포 주소 : https://bookly-leio.vercel.app/

👩‍👩‍👧‍👧 프로젝트 멤버 소개

KIMgyeongmIN00	jiyxxn	Taejin7088	hye410	joyounghyun550
마이페이지 및 상품 상세 페이지 구현	레이아웃 및 메인 페이지 구현	상품 검색 및 상품 목록 페이지 구현	장바구니/가상 결제 및 주문서 페이지 구현	로그인/회원가입 및 인증/인가 및 가상 결제 구현

⚙ 프로젝트 기능 소개

• Next.js 프레임워크 기반의 웹 애플리케이션으로 App Router을 이용한 페이지 간 네비게이션 처리와 SEO 최적화를 제공합니다.
• Next.js의 다양한 렌더링 전략을 효과적으로 활용하여 각 페이지의 특성에 맞는 최적화된 사용자 경험을 제공합니다.
• Zustand를 사용하여 애플리케이션의 유저 정보와 장바구니 상태 관리를 단순하고 직관적으로 처리합니다.
• TanStack Query를 사용하여 도서 데이터의 비동기 요청 및 캐싱 기능으로 서버 데이터를 효율적으로 관리합니다.
• Tailwind CSS를 사용하여 반응형 디자인을 적용했습니다.
• shadcn/ui를 활용하여 접근성과 사용자 경험을 고려한 UI 컴포넌트를 구현하였으며, 일관된 디자인 시스템을 유지합니다.
• 이메일 회원가입 및 로그인 기능과 카카오 소셜 로그인, 자동 로그인 기능을 제공해 사용자의 편의성을 향상시킵니다.
• React Hook Form을 사용하여 회원가입 및 로그인 폼을 효율적으로 관리하며, 사용자 입력을 간편하게 처리하고 제어합니다.
• Zod 스키마 검증 라이브러리를 활용하여 사용자 입력 데이터의 타입과 형식을 엄격하게 검증함으로써, 회원 정보의 정확성과 일관성을 보장합니다.
• 도서 카테고리 분류 시스템을 통해 사용자가 원하는 장르나 주제의 도서를 쉽게 찾을 수 있습니다.
• 도서 상세 정보 페이지에서는 책 소개, 저자 정보 등 도서에 대한 핵심 정보를 제공합니다.
• 찜하기 기능을 통해 사용자가 관심 있는 도서를 저장하고 나중에 쉽게 확인할 수 있습니다.
• 장바구니와 결제 시스템을 통해 여러 도서를 한 번에 구매할 수 있으며, 다양한 결제 방식을 지원합니다.
• 주문 내역 조회 기능으로 사용자가 자신의 구매 이력을 확인할 수 있습니다.

🔗 협업 프로세스

• Discussion을 활용한 프로젝트 논의

• 페이지 단위 작업 관리

  • 각 페이지별 이슈 생성
  • 페이지별 feature 브랜치 운영 (Feature/#이슈번호-이슈명, Refactor/#이슈번호-이슈명)

• Pull Request 템플릿을 활용한 코드 리뷰

🚀 트러블 슈팅

• [Home] Next.js 하이드레이션 오류 해결하기

• [OrderList] 반환 타입 지정

• [Order] 유효성 검사를 통과했는데 에러는 왜 안 사라질까..?

• [SignIn] 소셜 로그인 리다이렉트

• [Build] 넥스트 빌드 useSearchParams 빌드에러

🌱 기능 확장 방향성

• 도서 리뷰 및 평점 시스템 도입 - 사용자들이 구매한 도서에 대한 리뷰와 평점을 남길 수 있는 기능
• 개인화된 도서 추천 알고리즘 - 사용자의 구매 이력과 관심사를 분석하여 맞춤형 도서를 추천해주는 지능형 시스템
• 소셜 공유 기능 - 관심 있는 도서나 구매한 도서를 SNS를 통해 친구들과 쉽게 공유할 수 있는 기능
• 다크 모드/라이트 모드 전환 - 사용자의 시각적 편의성을 높이기 위해 화면 밝기 모드를 전환할 수 있는 옵션
• 관리자 페이지 개발 - 메인 페이지의 캐러셀 이미지와 추천 도서 목록을 효율적으로 관리할 수 있는 관리자 전용 인터페이스

📁 프로젝트 구조

📁
├─ public
├─ src
│  ├─ app          // 📄 App Routes
│  ├─ components
│  │  ├─ features  // 💾 페이지 단위로 분할된 컴포넌트
│  │  ├─ layouts   // 🌐 레이아웃 컴포넌트
│  │  └─ ui        // 🧩 shadcn 컴포넌트와 프로젝트 공통 컴포넌트
│  ├─ config
│  ├─ constants    // 📌 상수 값 관리
│  ├─ lib
│  │  ├─ api       // 🚧 API 통신 관련 서비스 로직
│  │  ├─ hooks     // 🔧 커스텀 훅
│  │  ├─ mutations // 🔹 TanStackQuery의 useMutation 함수
│  │  ├─ queries   // 🔸 TanStackQuery의 useQuery 함수
│  │  ├─ utils     // 🛸 유틸리티 함수    
│  ├─ store        // 🐻 Zustand Store
│  └─ types        // 📚 타입 정의
└─ 

🧶 기술 스택

Environment

Development