Feat: 3주차 미션3 영화 목록 페이지 구현

[yoona24]

📚 주차 / 미션

• 3주차 3번째 미션

---영화 목록 페이지 구현

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약

---useParams를 활용한 영화 상세 페이지 개발

✨ 상세 작업 내용

• react-router-dom을 사용하여 path="/movies/:movieId"와 같이 동적 라우팅을 설정
• Tailwind CSS를 활용해 미적인 감각을 살려 상세 페이지를 디자인
• 불러온 영화 상세 정보, 크레딧 데이터의 타입(type) 또는 인터페이스(interface)를 안정적으로 정의

---

📸 스크린샷

---

❓ 리뷰어가 알아야 할 사항 / 질문

---

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

현재 movieResponse와 creditsResponse를 순차적으로 호출하고 있는데,
이 두 API는 서로 독립적이므로 병렬 처리하면 두 api가 동시헤 호출되어 소요 시간이 더 짧아집니다:)

const [movieResponse, creditsResponse] = await Promise.all([
  axios.get<MovieDetail>(
    `https://api.themoviedb.org/3/movie/${movieId}?language=ko-KR`,
    {
      headers: {
        Authorization: `Bearer ${import.meta.env.VITE_TMDB_KEY}`,
      },
    }
  ),
  axios.get<Credits>(
    `https://api.themoviedb.org/3/movie/${movieId}/credits?language=ko-KR`,
    {
      headers: {
        Authorization: `Bearer ${import.meta.env.VITE_TMDB_KEY}`,
      },
    }
  ),
]);
...

[yewon20804]

뒤로 가기 버튼 만는거 너무 좋은 것 같아요 👍

[yewon20804]

JSX 내부에 style 태그를 직접 작성해주셨는데, 해당 방식 보다는 index.css와 같은 스타일 파일로 분리하여 관리하는 것이 더 좋습니다 !

[yewon20804]

미션 3도 수고 많으셨습니다! 😊
상세 페이지를 구현해보는 미션이였는데, 타입 정의도 잘해주셨고, 스타일 작성 시 데이터가 없는 경우에 대한 예외 처리까지 신경 써주신 부분도 좋았습니다 👍 리뷰 확인 부탁드립니다 ~