REWIND

시대별 명작 영화를 탐색하고, 시청 가능한 OTT 정보를 확인할 수 있는 레트로 영화 아카이브 웹 서비스입니다.

프로젝트 소개

REWIND는 1970년대부터 2020년대까지 시대별 인기 영화를 한눈에 둘러볼 수 있는 영화 큐레이션 서비스입니다.

사용자는 원하는 시대를 선택해 TOP 10 영화를 확인하고, 영화 상세 정보와 시청 가능한 OTT 정보를 볼 수 있습니다. 관심 있는 영화는 MY LIST에 저장할 수 있습니다.

주요 기능

• 시대별 영화 탐색
• 시대별 TOP 10 영화 제공
• 영화 상세 정보 조회
• 시청 가능 OTT 정보 확인
• MY LIST 저장 및 삭제
• localStorage 기반 저장 유지
• TMDB API 연동
• 반응형 UI

기술 스택

구분	기술
Frontend	React, TypeScript
Build Tool	Vite
Styling	Tailwind CSS
Routing	React Router DOM
API	TMDB API
State	useState, useEffect, useContext
Storage	localStorage

사용 API

REWIND는 TMDB API를 사용해 실제 영화 데이터를 가져옵니다.

• 영화 제목
• 포스터 이미지
• 개봉연도
• 평점
• 줄거리
• 장르
• OTT 제공 정보

API 토큰은 .env 파일에서 관리합니다.

VITE_TMDB_TOKEN=YOUR_TMDB_READ_ACCESS_TOKEN

실행 방법

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

# 빌드
npm run build

# 린트 검사
npm run lint

폴더 구조

src/
├── components/
│   ├── common/
│   ├── era/
│   └── layout/
├── data/
├── hooks/
├── pages/
├── services/
├── types/
├── App.tsx
├── main.tsx
└── index.css

페이지 구성

페이지	설명
Home	시대 선택 및 시대별 TOP 10 미리보기
EraPage	선택한 시대의 영화 목록과 OTT 필터
MovieDetail	영화 상세 정보 및 시청 가능 OTT
MY LIST	저장한 영화 목록

디자인 컨셉

REWIND는 일반적인 OTT 서비스 UI가 아닌, 레트로 영화 아카이브를 컨셉으로 제작되었습니다.

• 빈티지 영화 포스터
• 영화 아카이브
• 독립 영화관 브로슈어
• 따뜻한 크림 배경
• 포스터 중심 UI

주요 구현 포인트

• TMDB API를 활용한 실제 영화 데이터 조회
• 시대별 연도 범위 기반 영화 데이터 요청
• Watch Providers API를 활용한 OTT 정보 표시
• useContext와 localStorage를 활용한 MY LIST 기능
• Skeleton UI를 활용한 로딩 상태 처리
• Tailwind CSS 기반 반응형 레이아웃

향후 개선 사항

• 영화 검색 기능
• 장르별 필터
• 예고편 보기
• MY LIST 정렬 기능
• OTT 링크 고도화