66 lines (45 loc) · 2.93 KB

Feed 상세 무한 스크롤 구현 계획

목표

둘러보기에서 선택한 포스트를 상세 진입 시 첫 카드로 고정한다.
첫 카드 아래로는 랜덤 포스트를 세션 기반으로 이어 붙여 인스타형 세로 스크롤 경험을 만든다.
사용자가 다시 맨 위로 올리면 처음 선택한 포스트가 항상 첫 카드에 남아 있어야 한다.

현재 상태

MainAPP 상세 화면은 선택한 포스트 1개만 ScrollView로 보여준다.
MainBE는 랜덤 피드 세션 API를 제공하지만, seed 포스트를 첫 카드로 고정하는 기능은 없다.
따라서 MainAPP에서 선택 포스트 고정 + 랜덤 세션 아이템 후행 배치를 직접 조합해야 한다.

구현 원칙

첫 카드 고정은 프론트에서 책임진다.
랜덤 피드는 MainBE의 /api/v1/feed/random/session, /api/v1/feed/random/next를 사용한다.
랜덤 세션 응답은 상세 데이터가 아니므로, 각 아이템은 타입별 상세 API로 보강 조회한다.
seed 포스트와 중복되는 랜덤 아이템은 클라이언트에서 제거한다.

단계별 작업

1단계. 타입과 API 훅 추가

랜덤 피드 세션 응답 타입 추가
세션 시작/다음 페이지 API 추가
useInfiniteQuery 기반 랜덤 세션 훅 추가

2단계. 상세 화면 공통 리스트 구조 전환

ScrollView 기반 상세 화면을 FlatList 기반으로 전환
첫 item은 seed 포스트로 고정
이후 item은 랜덤 세션 아이템을 이어 붙임

3단계. 카드 렌더링 분리

기존 FeedDetail은 상세 표시 블록으로 유지
seed 포스트는 기존 상세 API 결과를 바로 사용
랜덤 포스트는 타입별 상세 API를 내부에서 조회해 카드 렌더링

4단계. 댓글 입력 UX 정리

하단 고정 CommentComposer는 seed 포스트에만 붙인다
랜덤 카드에는 댓글 입력을 붙이지 않는다
seed 포스트의 기존 댓글 작성 기능은 유지한다

5단계. 중복 제거와 로딩 처리

seed 포스트와 같은 (postType, postId) 랜덤 아이템 제거
페이지 간 중복 방지
랜덤 카드 상세 로딩/에러 상태 표시
다음 페이지 자동 로딩 시 과도한 중복 호출 방지

6단계. 검증

둘러보기에서 일기 선택 시 seed 일기 고정 확인
둘러보기에서 아바타 포스트 선택 시 seed 아바타 포스트 고정 확인
아래로 내리면 랜덤 카드가 이어지는지 확인
위로 다시 올리면 처음 선택한 포스트가 첫 카드인지 확인
seed 포스트 댓글 작성 후 refetch 정상 반영 확인

주의사항

백엔드 랜덤 세션 시작 API는 seed 제외를 받지 않으므로, 첫 페이지에서 seed 중복이 내려와도 프론트에서 제거해야 한다.
랜덤 카드가 많아질수록 상세 API 호출 수가 늘어나므로 한 페이지 크기는 과하게 크게 잡지 않는다.