TMDB 개인 프로젝트

사용자에게 TV 프로그램과 영화에 대한 정보를 제공하는 사이트

프로젝트 소개

• React와 Typescript, axios 개발 역량 강화를 목적으로 한 개인프로젝트로서
  디자인부터 퍼블리싱 및 개발, 배포까지 직접 진행하여
  TMDB 데이터를 활용한 TV & 영화 정보 제공 사이트를 제작
  

개발 기간

• 25.01.23(목) ~ 25.02.03(월) (총 12일간)

개발 환경

언어

라이브러리

HTTP 요청 관리

패키지 매니저

스타일링

라우팅

디자인 도구

배포 플랫폼

배포 주소

WONNY MOVIE

화면 구성

HOME 페이지	각 리스트 페이지
TV 페이지	MOVIE 페이지
TV 컨텐츠 상세페이지	TV 시리즈 상세페이지
MOVIE 컨텐츠 상세페이지	인물 상세페이지
검색페이지 - 검색어 입력 중	검색페이지 - 검색어 입력 완료

주요 기능

미디어 타입별 컨텐츠 정보 제공

• 일주일 간 트렌트 컨텐츠 10개 추천
• 각 리스트별 컨텐츠 추천 및 추가 검색 가능
• 각 리스트별 장르 및 정렬방식을 선택하여 정보 분류 가능

컨텐츠 검색

• 검색어 입력 시 TV, MOVIE, PERSON별로 검색 결과 확인 가능
• 검색 결과 클릭 시 해당 컨텐츠의 상세내용 확인 가능

아키텍처

디렉토리 구조

├── README.md
├── package-lock.json
├── package.json
└── src
    ├── api
    │    └── axios.ts : axios 셋팅 파일
    ├── assets : 각종 디자인 파일 폴더
    ├── components : 컴포넌트 폴더
    │   ├── common : 공통 사용 컴포넌트 폴더
    │   │   ├── Content.tsx : 세부 컨텐츠 정보 컴포넌트
    │   │   ├── ContentsArray.tsx : TV, MOVIE 페이지 컨텐츠 컴포넌트
    │   │   └── ContentsList.tsx : HOME 페이지 각 리스트 컨텐츠 컴포넌트
    │   ├── detailContent : DeatailContent 컴포넌트 내 사용 컴포넌트 폴더
    │   │   ├── ContentOverview.tsx : 컨텐츠 오버뷰 컴포넌트
    │   │   └── MediaTypeList.tsx : 미디어타입별 상세페이지 컴포넌트
    │   ├── navigation : 하단 네비게이션 바 컴포넌트 내 사용 컴포넌트 폴더
    │   │   └── NaviItem.tsx : 네비게이션 아이콘 컴포넌트
    │   ├── root : RootLayout 컴포넌트 내 공통 사용 컴포넌트 폴더
    │   │   ├── Header.tsx : 상단 헤더 컴포넌트
    │   │   └── Navigator.tsx : 하단 네비게이션 컴포넌트
    │   ├── search : 검색페이지 내 사용 컴포넌트 폴더
    │   │   └── SearchData.tsx : 검색 결과 컴포넌트
    │   └── MainImage.tsx : HOME, TV, MOVIE 페이지의 메인 이미지 컴포넌트
    ├── css : 스타일 파일 폴더
    │   ├── fonts.css : 폰트 파일
    │   ├── index.css : 메인 스타일 파일
    │   └── tailwind.css : tailwind 스타일 파일
    ├── pages
    │   ├── DetailContent.tsx : 컨텐츠 상세 페이지
    │   ├── DetailEpisode.tsx : TV 시리즈 상세 페이지
    │   ├── DetailPerson.tsx : 인물 상세 페이지
    │   ├── DetailSubject.tsx : 리스트별 상세 페이지
    │   ├── Home.tsx : Home 페이지
    │   ├── MoviePage.tsx : Movie 페이지
    │   ├── SearchPage.tsx : 검색 페이지
    │   └── TvPage.tsx : TV 페이지
    └── public