6주차에는 5주차의 연장선인 만큼 기본적인 페이지를 완성하는 것을 넘어서 완성도에 더 집중했습니다.

• Webpack → TurboPack으로 마이그레이션 적용
• npm → pnpm으로 패키지 매니저 변경

6주차 구현 내용

검색 페이지

• tmdb.ts : 검색 관련 비동기 함수 searchTMDB() 추가
• action.ts: 비동기함수 searchAction(), fetchTopSearches() 추가
• SearchCard.tsx: 스켈레톤 + 동적 라우팅 연결된 개별 컴포넌트 생성
• search/page.tsx: 무한 스크롤 + map()으로 SearchCard 컴포넌트 로딩
• 초기 진입 → fetchTopSearches(1)을 호출해 TMDB 트렌딩 목록을 가져와 표시
• 검색어를 입력 → SearchHeader의 onChange마다 즉시 searchAction(query)을 호출
• 검색 결과가 있으면 검색 결과, 없으면 트렌딩 목록을 렌더링
• 트렌딩: page.tsx → fetchTopSearches() → fetchTrendingDay() → TMDB
• 검색: SearchHeader → searchAction() → searchTMDB() → TMDB

무한 스크롤

• sentinel + IntersectionObserver + page 상태 조합
• useRef → sentinel div 참조
• 동작 흐름: IntersectionObserver → sentinel 감시 → 스크롤이 내려가 뷰포트에 sentinel이 진입하면 setPage(prev => prev + 1)을 호출 → useEffect가 page 변화 감지 → 다음 페이지 데이터를 fetch → setTopSearches(prev => [...prev, ...data.results])로 기존 목록 뒤에 새 카드를 이어 붙임 → data.page < data.total_pages 조건으로 hasMore를 갱신 → 마지막 페이지에 도달하면 sentinel을 DOM에서 제거해 추가 로드를 중단