[6주차 과제] TanStack Query 연습

[jinaaaaaaaaaaaaa]

🏡 과제 명세

💡 과제

• React + TypeScript
• TanStack Query 사용
• HTTP 클라이언트 라이브러리 사용 (axios, ky, ...)
• ThemeProvider, GlobalStyle 사용 (CSS 라이브러리 사용)
• any 사용 금지

1. 영화 목록 페이지(메인 페이지)

• 리스트 형태로 영화 데이터 불러오기
• 별점을 통한 필터링 기능 구현
• 각 영화 카드에는 포스터, 영화 제목, 개봉일, 줄거리 표시
• 영화 카드 hover시 효과(확대 or 그림자 or 색상 변경 등 자유)
• 영화 카드 클릭 시, 영화 상세 페이지로 이동
• 무한 스크롤 구현

2. 영화 상세 페이지

• movieId 로 라우팅
• 영화 포스터, 배경 이미지, 제목, 개봉일, 장르, 평점, 상영 시간, 투표 수, 상태, 줄거리 표시
• 기본 정보(원제, 원어, 제작 국가, 사용 언어, 예산, 수익) 표시
• ‘<- 목록으로 돌아가기’ 클릭 시 영화 목록 페이지로 이동

3. 별점 남기기/삭제하기

• 영화 상세 페이지에 존재
• 이전에 매긴 별점이 없을 경우 비어 있으며, 있을 경우 해당 값으로 채워짐
• 범위 밖 숫자 입력 시 저장 x
• 성공시, 성공 메시지 하단에 출력
• ‘별점 삭제하기’ 클릭 시, 별점 삭제

✍️ 구현 요약 및 새로 배운 점

• Emotion의 ThemeProvider를 적용하여 색상, 폰트 크기 등 반복되는 디자인 값을 공통으로 관리했습니다. ThemeProvider가 Context API를 기반으로 동작한다는 점을 새롭게 배웠습니다.
• 영화 카드 클릭 시 navigate() 대신 Link를 사용하여 상세 페이지로 이동하도록 구현했습니다. 사용자의 클릭으로 이동하는 UI에는 시맨틱한 링크 요소를 사용하는 것이 적절하다는 점을 배웠습니다.
• 반복되는 페이지네이션 응답 구조를 제네릭 타입으로 분리하여 목록 API 응답 타입을 재사용할 수 있도록 구성했습니다.
• Axios instance에는 공통 API 주소와 인증 관련 설정만 두고, 불필요한 Content-Type 헤더는 공통 설정에서 제외했습니다.

💦 구현 과정에서 어려웠던 & 고민했던 부분

• 카드 전체를 클릭 가능하게 만들기 위해 Link의 display 속성을 조정하는 과정에서, block을 사용하면 빈 공간까지 클릭 영역에 포함되는 문제가 있었습니다. 카드 크기에 맞게 클릭 영역을 제한하기 위해 inline-block을 적용했습니다.
• API 응답 타입을 TanStack Query 훅과 API 요청 함수 중 어느 위치에서 지정해야 할지 고민했습니다. 응답을 최초로 받는 API 함수에서 Axios 제네릭으로 타입을 지정하여 이후 흐름에서도 타입이 자연스럽게 추론되도록 구현했습니다.
• .env와 상수 파일에 저장할 값을 구분하는 기준이 어려웠습니다. 실행 환경에 따라 변경될 수 있는 API 주소와 토큰은 .env로, 공개된 고정 이미지 주소는 상수 파일로 분리했습니다.

🙋‍♀️ 리뷰 요청 포인트 & 질문

• tanstack-query를 사용한 훅 부분이 아닌 API 함수에서 응답 타입을 정의했습니다. 저번 프로젝트에서는 훅 선언 부분에 타입을 정의했었는데 타입스크립트가 자연스럽게 추론할 수 있도록 API 함수에 정의하는게 낫다고 하네요..! 다른 분들은 어떻게 하셨는지 궁금합니다!
• 무한스크롤을 구현할때 react-intersection-observer와 같은 라이브러리를 사용하는 방법도 있지만 지금 규모라면 과할 수 있을 것 같아서 기본 IntersectionObserver로 구현했는데, 라이브러리를 설치하는 것을 고려할 규모가 언제인지 궁금하군요...

📷 결과물

2026-06-04.223907.mp4