영화 웹사이트 - 3단계 ( 상세 페이지 구현 )

구조 

기존의 영화 목록 중심 구조에서 상세 페이지로 들어갈 수 있는 동적 라우팅 구현 

• src/pages/MovieDetailPage.tsx : 영화 ID를 파라미터로 받아서 상세 정보를 렌더링
• src/types/movie.ts : 영화 상세 정보와 출연진에 대한 인터페이스를 새롭게 정의
• src/api/axios.ts : 기존에 설정한 Axios 인스턴스 활용해서 상세 정보, 출연진 둘 다 호출 

 

구현 내용

1. 동적 라우팅 설정

• URL의 특정 부분을 변수처럼 사용하는 동적 라우팅 설정해서 하나의 컴포넌트로 많은 영화 페이지 호출 가능
• 적용 코드 ( src/main.tsx )
• 흐름: 사용자가 영화를 클릭하면 MovieCard 내부의 Link 컴포넌트가 동작해서 /movie/12345와 같은 주소로 이동 

{ path: 'movies/:movieId', element: <MovieDetailPage /> }

 

2. useParams를 이용해서 데이터 호출 

• URL 주소창에 포함된 영화ID를 호출하여 API 요청에 사용
• 적용 코드 ( src/pages/MovieDetailPage.tsx )

const { movieId } = useParams<{ movieId: string }>();

useEffect(() => {
  const fetchMovieData = async () => {
    // Promise.all을 사용해 두 개의 API를 병렬로 호출 (성능 최적화)
    const [detailRes, creditsRes] = await Promise.all([
      api.get<MovieDetail>(`/movie/${movieId}?language=ko-KR`),
      api.get<CreditsResponse>(`/movie/${movieId}/credits?language=ko-KR`)
    ]);
    setDetail(detailRes.data);
    setCast(creditsRes.data.cast);
  };
  fetchMovieData();
}, [movieId]);

 

 

3. UI 디자인 및 시각화 

• 배경 포스터와 출연진 목록을 Tailwind CSS로 배치
• backdrop_path를 활용해서 상단에 영화 분위기 살리는 대형 이미지 배치
• 출연진 그리드: 감독과 배우 10명 선정하고 rounded-full 클래스로 프로필 사진을 동그랗게 배치 

 

구현 결과