YOTY (Year of the Year) 🎉

한 해의 당신의 픽을 선택하고 공유하는 플랫폼

YOTY는 사용자가 한 해를 돌아보며 가장 인상 깊었던 음악, 영화, 드라마, 책을 선택하고 다른 사람들과 공유할 수 있는 웹 플랫폼입니다.

✨ 주요 기능

• 통합 검색: Spotify, TMDB, Google Books API를 통한 통합 콘텐츠 검색
• 픽 선택 및 저장: 각 카테고리별 베스트 픽 선택 및 로컬 스토리지 저장
• 개인 프로필: 선택한 픽을 보여주는 개인 프로필 페이지
• 반응형 디자인: 모바일부터 데스크톱까지 완벽한 반응형 UI
• 실시간 검색: API 연동 및 Mock 데이터 fallback

🛠 기술 스택

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS
• API Integration: Axios
• External APIs:
  • Spotify Web API
  • The Movie Database (TMDB) API
  • Google Books API

🚀 시작하기

1. 프로젝트 클론 및 의존성 설치

git clone <repository-url>
cd yoty
npm install

2. 환경 변수 설정

.env.local 파일을 생성하고 API 키를 설정하세요:

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
TMDB_API_KEY=your_tmdb_api_key
GOOGLE_BOOKS_API_KEY=your_google_books_api_key

참고: API 키가 없어도 Mock 데이터로 테스트 가능합니다.

3. 개발 서버 실행

npm run dev

http://localhost:3000에서 애플리케이션을 확인할 수 있습니다.

📁 프로젝트 구조

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # 메인 페이지
│   ├── pick/              # 픽 선택 페이지
│   ├── profile/           # 프로필 페이지
│   └── api/               # API 라우트
├── components/            # React 컴포넌트
│   ├── MainPageClient.tsx # 메인 페이지 클라이언트
│   ├── PickSelector.tsx   # 픽 선택 컴포넌트
│   └── SearchTest.tsx     # API 테스트 컴포넌트
├── services/              # 외부 API 서비스
│   ├── spotify.ts         # Spotify API
│   ├── tmdb.ts           # TMDB API
│   ├── googleBooks.ts    # Google Books API
│   ├── storage.ts        # 로컬 스토리지 관리
│   └── mockData.ts       # Mock 데이터
├── hooks/                 # React Hooks
│   └── useAPI.ts         # API 훅
└── types/                 # TypeScript 타입 정의
    └── api.ts

🎯 주요 페이지

• 메인 페이지 (/): 플랫폼 소개 및 픽 현황 확인
• 픽 선택 (/pick): 카테고리별 작품 검색 및 선택
• 프로필 (/profile): 선택한 픽 조회 및 관리

🔧 API 설정 가이드

Spotify API

1. Spotify Developer Dashboard에서 앱 생성
2. Client ID와 Client Secret 획득
3. .env.local에 추가

TMDB API

1. TMDB에서 API 키 신청
2. API 키를 .env.local에 추가

Google Books API

1. Google Cloud Console에서 Books API 활성화
2. API 키 생성 후 .env.local에 추가

🌟 향후 계획

• 사용자 인증 시스템
• 데이터베이스 연동
• 커뮤니티 기능 (다른 사용자 픽 둘러보기)
• 소셜 미디어 공유 기능
• 픽 추천 알고리즘
• 연간 트렌드 분석

📝 라이선스

이 프로젝트는 MIT 라이선스 하에 있습니다.

🤝 기여하기

1. Fork 프로젝트
2. Feature 브랜치 생성 (git checkout -b feature/AmazingFeature)
3. 변경사항 커밋 (git commit -m 'Add some AmazingFeature')
4. 브랜치에 Push (git push origin feature/AmazingFeature)
5. Pull Request 열기

---

YOTY - 2025년을 특별하게 만드는 당신만의 픽을 선택해보세요! 🎭✨

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.