Refactor(client): 데이터 로딩 중 레이아웃 시프트 개선

[minjeoong]

📌 Summary

close #495

해당 PR에 대한 작업 내용을 요약하여 작성해주세요.

📚 Tasks

• 해당 PR에 수행한 작업을 작성해주세요.

커뮤니티 내부에서 인기 게시물 데이터가 상대적으로 느리게 로드될 경우,
해당 섹션이 일시적으로 비어 보였다가 나중에 채워지는 레이아웃 다닥임(Layout Shift) 문제가 발생하고 있었어요.

2026-01-25.02.01.00.mov

인기 게시물 섹션이 useQuery 기반으로 데이터 패칭을 하고 있어 초기 렌더 시 data === undefined 상태로 먼저 UI가 렌더링된 뒤,
데이터 주입 시점에 레이아웃이 변경되는 구조이기 때문에 초기 진입 시에는 레이아웃 시프트를 유저가 볼 수 있다는 문제였어요.

해결 방법

인기 게시물 섹션
useQuery → useSuspenseQuery 로 변경

커뮤니티 post 리스트
useInfiniteQuery → useSuspenseInfiniteQuery 로 변경

지금 현재 프로젝트 구조가 인기 게시물 section 과, 커뮤니티 post section 이 전체 suspense boundary 에 감싸져 있는 형태이기 때문에
두 API 모두 Suspense 기반으로 통일해서, 모든 데이터가 준비된 이후에 한 번에 완성된 UI가 렌더링되도록 개선했어요.

[TO - BE]

2026-01-25.02.26.28.mov

[github-actions]

✅ Storybook이 배포되었습니다.
🔗 바로가기

[gwagjiug]

👍 good 좋네요 디테일

[jeonghoon11]

늦었지만 너무 좋네요..........