[FE] PostCard 로드될 때 Skeleton UI 적용

[junyeokk]

하위 태스크

포스트 카드 스켈레톤 UI 구현

src/components/common/Card/PostCardSkeleton.tsx

• shadcn/ui Skeleton 컴포넌트 활용해 구현
• 실제 포스트 카드와 동일한 레이아웃 구성
• 반응형 그리드 레이아웃 적용

최신 포스트 섹션 스켈레톤 UI 적용

src/components/sections/LatestSection.tsx

• 초기 로딩 상태 스켈레톤 UI 구현
• 무한 스크롤 시 추가 로딩 스켈레톤 UI 구현
• Intersection Observer 설정 최적화 (threshold, rootMargin)

트렌딩 포스트 섹션 스켈레톤 UI 적용

src/components/sections/TrendingSection.tsx

• 초기 로딩 상태 스켈레톤 UI 구현
• 데이터 로딩 상태 처리 로직 개선
• 레이아웃 유지를 위한 최소 높이 설정

인수조건

• 포스트 카드 로딩 시 스켈레톤 UI가 표시되어야 함
• 스켈레톤 UI가 실제 포스트 카드와 유사한 레이아웃을 가져야 함
• 무한 스크롤 로딩 시 추가 포스트에 대한 스켈레톤 UI가 자연스럽게 표시되어야 함
• 데이터가 로드되면 스켈레톤 UI가 부드럽게 실제 컨텐츠로 전환되어야 함
• 트렌딩 섹션에서 데이터 로딩 중일 때 레이아웃이 깨지지 않아야 함