TMDB API를 활용하여 만든 영화 및 TV 프로그램 OTT 웹사이트입니다.
배포 링크: https://ozmovie.vercel.app/
제작 기간: 2025.06.24 ~ 07.15 (리팩토링 진행 중)
| id | pw |
|---|---|
| test@test.com | Test1234 |
Environment
Package & Build Tools
Code Quality
Development
Deployment
- 일간 트렌딩 콘텐츠를 일정 간격마다 자동 순환하며, 페이드 인/아웃 애니메이션 효과를 적용합니다.
- 여러 카테고리의 콘텐츠를 슬라이더 형태로 보여줍니다.
- 배너의 '상세 정보' 버튼이나 콘텐츠를 클릭하면 상세 모달을 띄웁니다.
- 검색 결과 개수를 함께 보여줍니다.
- 스크롤을 내리면 추가 검색 결과를 자동으로 로딩합니다. (무한 스크롤)
- 검색 결과의 콘텐츠를 클릭하면 상세 모달을 띄웁니다.
- 콘텐츠의 정보(제목, 개봉 연도, 시즌 정보(TV), 상영 시간(영화), 장르, 태그라인, 줄거리 등)를 보여줍니다.
- 찜하기 버튼을 눌러 콘텐츠를 찜 목록에 추가/제거할 수 있습니다.
- 좋아요 버튼을 눌러 콘텐츠에 '좋아요'를 표시하거나 취소할 수 있습니다.
- TV 프로그램의 경우 각 시즌의 정보를 함께 보여줍니다.
- 현재 콘텐츠와 비슷한 콘텐츠 목록을 보여주며 클릭 시 해당 콘텐츠의 상세 모달로 이동합니다.
- 입력값에 대한 실시간 유효성 검사를 수행합니다.
- 구글 및 카카오 계정으로 로그인할 수 있습니다.
- 사용자의 프로필 이미지와 이름을 표시하며, 프로필 이미지가 없는 경우 기본 이미지를 표시합니다.
- 사용자가 찜한 콘텐츠 목록과 좋아요를 누른 콘텐츠 목록을 슬라이더 형태로 보여줍니다.
- 콘텐츠를 클릭하면 상세 모달을 띄웁니다.
| 기능 | Method | Endpoint |
|---|---|---|
| 인기 영화 가져오기 | GET | /movie/popular |
| 7일 이내 방영 예정 TV 시리즈 | GET | /tv/on_the_air |
| 조건 기반 영화 검색 | GET | /discover/movie |
| 영화, TV, 인물 검색 | GET | /search/multi?query={keyword} |
| 일간 트렌딩 콘텐츠 | GET | /trending/all/day |
| 특정 TV 시즌 상세 | GET | /tv/{series_id}/season/{season_number} |
| TV 시리즈 추천 목록 | GET | /tv/{series_id}/recommendations |
| 영화 추천 목록 | GET | /movie/{movie_id}/recommendations |
| 용도 | URL |
|---|---|
| 포스터 등 (작은 이미지) | https://image.tmdb.org/t/p/w500 |
| 백드롭 등 (원본 해상도) | https://image.tmdb.org/t/p/original |
사용 예시 (TypeScript):
export const BASE_URL: string = 'https://image.tmdb.org/t/p/w500';
export const BASE_URL_ORIGIN: string = 'https://image.tmdb.org/t/p/original';├── public/ # 정적 에셋 (이미지, 폰트)
├── src/
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── common/ # 범용 컴포넌트
│ │ ├── detailModal/ # 상세 정보 모달 관련 컴포넌트
│ │ ├── skeletons/ # 로딩 상태 UI 스켈레톤
│ │ └── slider/ # 슬라이더 관련 컴포넌트
│ ├── constants/ # 상수
│ ├── contexts/ # React Context
│ ├── hooks/ # 커스텀 React Hooks
│ │ └── auth/ # 인증 관련 Hooks
│ ├── lib/ # 라이브러리 헬퍼, 유효성 검사 스키마
│ ├── pages/ # 라우팅되는 페이지 컴포넌트
│ ├── utils/ # 유틸리티 함수
│ ├── App.tsx
│ ├── main.tsx
│ ├── supabaseClient.ts # Supabase 클라이언트 설정
│ └── types.ts # 전역 TypeScript 타입 정의
├── .eslintrc.json # ESLint 설정
├── package.json
├── tailwind.config.js # Tailwind CSS 설정
├── tsconfig.json # TypeScript 설정
└── vite.config.ts # Vite 설정