피클리 (pickly) - 도서 큐레이션 서비스

영화와 책을 통합 관리하고, 개인의 미디어 소비 데이터를 분석하여 맞춤 추천을 제공하며, SNS 공유를 통해 취향을 자랑할 수 있는 미디어 큐레이션 서비스입니다.

🚀 시작하기

# 패키지 설치
pnpm install

# 개발 서버 실행
pnpm dev

📁 프로젝트 구조

src/
├── app/
│   ├── (auth)/           # 인증 관련 페이지
│   │   ├── login/        # 로그인 (소셜 로그인 + 약관 동의)
│   │   └── signup/       # 회원가입 (장르 선택)
│   ├── (main)/           # 메인 페이지 (GNB 포함)
│   │   ├── home/         # 홈 (배너, 통계, 추천)
│   │   ├── recommend/    # 추천 페이지
│   │   ├── library/      # 라이브러리 (완독/읽는중/보고싶어요)
│   │   ├── stats/        # 통계 페이지
│   │   ├── mypage/       # 마이페이지 (닉네임/장르 수정)
│   │   ├── review/       # 리뷰 목록 & 작성
│   │   ├── search/       # 검색
│   │   └── book/[id]/    # 책 상세
│   └── layout.tsx        # 루트 레이아웃
├── components/
│   ├── common/           # 공통 컴포넌트
│   │   ├── Button/       # 버튼
│   │   ├── Input/        # 인풋
│   │   ├── BookCard/     # 책 카드 (호버 시 상태 버튼)
│   │   ├── StarRating/   # 별점
│   │   └── PickleJar/    # 피클병 SVG
│   ├── layout/           # 레이아웃 컴포넌트
│   │   └── GNB/          # 글로벌 네비게이션
│   └── providers/        # 프로바이더
├── stores/               # Zustand 스토어
│   ├── authStore.ts      # 인증 상태
│   ├── bookStore.ts      # 도서/리뷰 상태
│   └── themeStore.ts     # 테마 상태
├── styles/               # 스타일 설정
│   ├── theme.ts          # 테마 변수
│   └── GlobalStyles.ts   # 글로벌 스타일
└── types/                # TypeScript 타입
    ├── book.ts           # 도서 관련 타입
    └── user.ts           # 사용자 관련 타입

✨ 주요 기능

1. 로그인/회원가입

• 카카오, 구글 소셜 로그인
• 개인정보 약관 동의 모달
• 선호 장르 선택 (최소 3개)

2. 홈 페이지

• 자동 캐러셀 배너 (호버 시 화살표 표시)
• 독서 통계 (데이터 없으면 "아직 데이터가 없습니다" 표시)
• 읽는 중인 책 목록
• AI 추천 책 목록

3. 책 카드

• 호버 시 하단에 상태 버튼 레이어 (읽는중/보고싶어요/독서완료)
• 클릭 시 색상 아이콘으로 변경
• 레이어 외 영역 클릭 시 상세 페이지 이동

4. 리뷰 작성

• 책 제목 입력 시 실시간 검색
• 검색 결과 키보드/클릭으로 선택
• 캘린더에서 읽은 기간 선택
• 별점 1-5점 선택

5. 마이페이지

• 닉네임 수정 (연필 아이콘 클릭 → 인라인 편집)
• 선호 장르 수정 (모달에서 최소 3개 선택)

6. 책 상세

• 책 정보 및 상태 버튼
• 리뷰 없으면 "아직 작성한 리뷰가 없어요" + 리뷰 쓰러가기 버튼
• 책 소개/저자 소개 펼쳐보기
• 비슷한 책 추천

🛠 기술 스택

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Styled Components
• State Management: Zustand
• Icons: Lucide React

📝 라이선스

MIT License