📚 INDEX — 감정 중심의 도서 기록 서비스

⭐ 서비스 이용하기 · 🧪 테스트 계정 보기 · 🔗 원본 레포(Fork) · 🗂 내 레포

✨ 프로젝트 소개

INDEX는 사용자가 책을 읽으며 느낀 감정을 중심으로 기록·조회·공유하는 독서 기록 서비스입니다.

• 내가 읽은 책을 보기 좋게 정리하고 관리
• 읽는 과정에서의 감정/생각 기록으로 기억을 풍부하게 보존
• 같은 책을 읽은 다른 사람들의 감정 분포로 인사이트 얻기
• 아직 읽지 않은 책은 추천으로 새로운 독서 이어가기

🚀 주요 기능

👤 회원가입 / 로그인

• 이메일 / 소셜 로그인(카카오·네이버·구글)
• Zustand로 인증 상태 관리
• Axios Interceptor로 토큰 갱신/에러 공통 처리

🔍 검색

• 도서명·저자·감정 기반 검색
• TanStack Query로 결과 캐싱 + 무한 스크롤
• Debounce + RHF로 입력 지연 최소화 / 폼 관리

📝 상세페이지: 찜하기 & 책상에 올리기

• Optimistic Update로 즉각 반응
• invalidateQueries로 캐시 무효화·데이터 동기화
• Zustand 상태 관리, Next.js Dynamic Routes

🛠 기술 스택

Next.js 15 (App Router), React, TypeScript, Tailwind CSS, TanStack Query, Zustand, React Hook Form, Zod, Axios, Vercel

협업: GitHub, Figma, Slack, Notion, Discord

🗂 프로젝트 구조 (펼치기)

📦SWYP-FRONTEND
 ┣ 📂.github                # GitHub 이슈/PR 템플릿
 ┣ 📂public                 # 폰트 및 아이콘
 ┣ 📂src
 ┃ ┣ 📂apis                 # API 요청/설정
 ┃ ┣ 📂app                  # Next.js App Router
 ┃ ┣ 📂components           # 공통 UI 컴포넌트
 ┃ ┣ 📂constants            # 상수
 ┃ ┣ 📂hooks                # 커스텀 훅
 ┃ ┣ 📂lib                  # 헬퍼/유틸
 ┃ ┣ 📂stores               # 전역 상태(Zustand)
 ┃ ┗ 📂types                # 전역 타입
 ┣ 📜.env.example
 ┣ 📜next.config.ts
 ┣ 📜tailwind.config.js
 ┗ 📜tsconfig.json

🧑‍💻 개발 환경 세팅 (펼치기)

# 1) 의존성 설치
npm install

# 2) 환경변수 (.env.local)
# 루트에 .env.local 생성
NEXT_PUBLIC_API_URL=백엔드서버주소

# 3) Gitmoji(처음 1회)
npm install -g gitmoji-cli
gitmoji -i

# 4) 개발 서버 실행
npm run dev

🌿 브랜치 전략 (펼치기)

git checkout main
git pull origin main
git checkout -b feature/login  # 예시
# 작업 후 PR → 병합 → 브랜치 삭제 → 다음 작업은 다시 main에서 분기

---

📌 배운 점 (What I Learned)

• 크로스 직군 커뮤니케이션: PM/디자이너/백엔드의 관점 차이를 고려해 요구사항을 사용자 스토리 + AC로 구조화하고 설명·합의하는 방법을 익혔습니다.
• 명세·테스트 중심 협업: API 입·출력/에러 케이스를 사전 정리하고 목업/테스트 시나리오로 검증해 오해와 재작업을 줄였습니다.
• 신규 스택의 목적기반 도입: 개인/FE-only 협업에선 쓰지 못했던 TanStack Query, Zustand, RHF+Zod, SSR/ISR, 접근성 개선 등을 실제 이슈에 맞춰 선택·적용하는 판단력을 키웠습니다.

---

🙏 Credits

본 프로젝트는 팀 저장소를 기반으로 한 Fork입니다.
원본: https://github.com/SWYP-index/swyp-frontend

---

🔐 테스트 계정

• ID: kimmin5209@naver.com
• PW: Test@0708