feat(community): 피드 탭(Following/For You/Trending)과 API·개인화 피드

[cocoyoon]

목표

/feed의 Following / For You / Trending 탭이 각각 서로 다른 데이터 소스(또는 쿼리 파라미터)를 사용하도록 연결하고, 백엔드 홈 피드의 개인화 TODO를 제품 정의에 맞게 구현한다.

배경 / 현재 코드

구분	동작
packages/web/lib/components/feed/FeedTabs.tsx	following | foryou | trending 값만 정의
packages/web/app/feed/FeedClient.tsx	activeTab state만 있음; useInfinitePosts({ sort: "recent", ... }) 고정 — 탭 변경이 fetch에 반영 안 됨
packages/web/lib/hooks/useImages.ts useInfinitePosts	Supabase posts 직조회; sort: recent | popular | trending 지원
packages/api-server/src/domains/feed/service.rs home_feed	32행 TODO: 개인화·팔로우; 현재는 최신 published만
packages/api-server/src/domains/feed/handlers.rs	GET /api/v1/feed, GET /api/v1/feed/trending 존재

제품·아키텍처 결정 (PR 전 합의)

다음 중 하나를 이슈/PR 본문에 명시적으로 선택할 것:

• A) 피드 페이지만 Supabase 유지: 탭별로 useInfinitePosts의 sort / 추가 필터만 바꾼다 (trending 탭 = sort: "trending" 등).
• B) 피드를 Rust API로 통일: FeedClient가 GET /api/v1/feed, GET /api/v1/feed/trending 등을 사용하도록 이전한다.
• C) 혼합: For You만 Rust, 나머지 Supabase 등.

Following 탭은 팔로우 관계 테이블·API가 필요 → #27과 순서 조율(팔로우 없으면 탭 비활성/empty state도 옵션).

구현 체크리스트

웹 (FeedClient.tsx + 훅)

• activeTab 변경 시 queryKey가 달라지도록 연동 (useInfinitePosts 또는 신규 훅)
• Following: 팔로우한 user_id의 포스트만 조회하는 쿼리(소스가 Supabase든 Rust든) — 선행 데이터 모델 필요 시 feat(community): 팔로우 API·프로필 실데이터·타인 프로필 /profile/[userId] #27 참조
• For You: 제품 정의(최신=recent, 또는 개인화) 반영
• Trending: 이미 useInfinitePosts에 sort: "trending" 분기 있음 — 탭과 연결만 하면 되는지 확인(view_count vs 서버 알고리즘)
• 탭 전환 시 스크롤 위치·캐시 정책(keepPreviousData 등) 기본 UX

백엔드 (Rust, 선택 A가 아닐 때)

• FeedService::home_feed에 user_id 기반 필터(팔로우·카테고리 선호 등) 구현
• 필요 시 GET /api/v1/feed/following 분리 vs 쿼리 파라미터 tab=following

수용 기준

1. 세 탭을 전환할 때마다 네트워크 요청이 탭에 맞게 달라진다(동일 recent만 반복 호출되면 실패).
2. Following 탭: 팔로우 데이터가 없을 때 명확한 empty state 또는 #27과 함께 “준비 중” 처리(합의된 대로).
3. 선택한 아키텍처 A/B/C가 PR 설명에 문서화되어 있다.

관련 이슈

• 팔로우·프로필: feat(community): 팔로우 API·프로필 실데이터·타인 프로필 /profile/[userId] #27

참고 파일

• packages/web/app/feed/FeedClient.tsx
• packages/web/lib/components/feed/FeedTabs.tsx
• packages/web/lib/hooks/useImages.ts (useInfinitePosts)
• packages/api-server/src/domains/feed/service.rs, handlers.rs