TMDB API์ Supabase๋ฅผ ํ์ฉํ์ฌ ์ ์ํ ์ํ ์ ๋ณด ๋ฐ ์ปค๋ฎค๋ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค.
๐ ๋ผ์ด๋ธ ๋ฐ๋ชจ ๋ณด๋ฌ๊ฐ๊ธฐ - https://kplex.vercel.app/
| ํ (Home) | ์์ธ ์ ๋ณด (Detail) | ๋ฆฌ์คํธ (List) | ๊ฒ์ (Search) |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
- ์ํ ํ์: ์ธ๊ธฐ ์ํ, ์ถ์ฒ ์ํ, ์ฅ๋ฅด๋ณ ์ํ ๋ฆฌ์คํธ ์ ๊ณต
- ์ง๊ด์ ์ธ ํ์ UI: 10์ ๋ง์ ์ ๋ฐ์ดํฐ๋ฅผ 5์ ๋ง์ ์ ๋ณ์ UI(๋ฐ ์คํฌ๋กค ํฌํจ) ๋ก ๋ณํํ์ฌ ์๊ฐํ ๊ตฌํ
- ๊ฒ์ ๊ธฐ๋ฅ: ์ค์๊ฐ ์ํ ๊ฒ์ ๊ธฐ๋ฅ
- ํ์ ์ธ์ฆ (Supabase): ๋น ๋ฅด๊ณ ์์ ํ ์์ ๋ก๊ทธ์ธ (Google, Kakao ๋ฑ) ์ง์
- ๋ง์ดํ์ด์ง ๊ธฐ๋ฅ: ๊ด์ฌ ์ํ ์คํฌ๋ฉ ๋ฐ ๋ณด๊ด ๊ธฐ๋ฅ
- ์ปค๋ฎค๋ํฐ (๋ฆฌ๋ทฐ): ์ํ์ ๋ํ ๋ฆฌ๋ทฐ ์์ฑ, ์์ ๋ฐ ์ญ์ ๊ธฐ๋ฅ
- Frontend:
React (v19.2.4),React-Router-Dom,Axios,Swiper - Backend & Auth / DB:
Supabase - Build Tool:
Vite - External API:
TMDB API
- Node.js ์ค์น
- ํ๊ฒฝ ๋ณ์ ์ธํ
(
.envํ์ผ์ TMDB API Key ๋ฐ Supabase API ์ ๋ณด ์ ๋ ฅ ํ์)
# 1. ํจํค์ง ์ค์น
$ npm install
# 2. ๋ก์ปฌ ์๋ฒ ์คํ
$ npm run dev
# 3. ๋ฐฐํฌ์ฉ ๋น๋ (Production)
$ npm run buildํด๋น ํ๋ก์ ํธ๋ TMDB API๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์ฑ๋์์ต๋๋ค.
- ํ์ฌ ์์์ (Now Playing):
/movie/now_playing - ์ธ๊ธฐ ์ํ (Popular):
/movie/popular - ์ฅ๋ฅด (Genre):
/genre/movie/list - ์ํ ๊ฒ์ (Search):
/search/movie - ์ํ ์์ธ ์คํํ ํฌ๋ ๋ง:
/movie/{movie_id}/credits - ์ํ ๋ฐ๊ฒฌ (Discover):
/discover/movie



