메인페이지 TanStack Query 적용 및 리팩토링

[ghdtnals]

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요 (이미지 첨부 가능)

• 기존: 항상 SSR로 데이터가 포함된 HTML 렌더링 → category, sort, keyword가 바뀔 때마다 SSR
• 현재: 처음 SSR + 이후 CSR → category, sort, keyword가 바뀔 때마다 캐싱 기반 CSR
  • 초기 로딩 시 한 번만 SSR로 데이터를 패칭하고 CSR 전환 후 React Query 캐싱 기반으로 상태 유지 및 URL만 갱신

---

• 게시글 목록 무한 스크롤

  • useInfiniteScroll -> React Query useInfiniteQuery

• 페이지 전환 시 이전 페이지의 keyword 값이 유지되어, 전환된 페이지에서 동일 검색어로 재검색이 불가능

  • 페이지 전환 시 keyword를 전역적으로 초기화하기 위해 useResetKeywordOnPathChange 훅 추가
  • 클라이언트 전용 ClientLayout 생성 및 적용

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어에게 미리 알려야 할 사항이 있다면 여기에 작성해주세요.

• Header 컴포넌트에 검색바가 있어 메인페이지와 keyword 및 category 상태 공유가 필요하기 때문에 Zustand 사용

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
chalddack	Ready	Preview	Comment	Nov 12, 2025 2:16am