dpdpdndn 블로그

FE-06-app-post-api-hook-확장

NEW2 min read

[FE-06] 앱 게시글·댓글 api·훅 확장 (모임글·종목·댓글)

작업 내용 (설계 의도)

변경 사항

게시글의 모임 소속·종목 필터·댓글을 지원하도록 mobile/api/post.ts와 mobile/lib/usePosts.ts를 확장한다.

  • api/post.ts: searchPosts(criteria)에 communityId·sportCategory 쿼리 지원, listCommunityPosts(communityId, {sportCategory,page,size})(GET /communities/{id}/posts), getPost(id, requesterId?)(X-User-Id 헤더), listComments(postId, requesterId?)(GET /posts/{postId}/comments), addComment(postId, {content})(POST /posts/{postId}/comments), createPost에 communityId·sportCategory 반영.
  • lib/usePosts.ts: usePosts(criteria) 확장, useCommunityPosts(communityId, criteria) 신규, useComments(postId) 신규, useAddComment(postId) 신규(성공 시 댓글 queryKey 무효화, 낙관적 업데이트 + 실패 롤백).

X-User-Id는 기존 커스텀 인증 헤더 규약 사용(신규 인증 모델 없음). 모임 게시글 작성 시 sportCategory는 서버가 모임값 상속 — FE는 전송하지 않는다. 근거: 20260707-post-community-연동-tdd.md API 계약, 20260707-...-design-fe-app.md API 연동 표(모임 게시글).

의존

  • FE-01 (Post/Comment/criteria 타입)

다이어그램

처리 흐름 (댓글 낙관 업데이트)

sequenceDiagram
    participant V as CommentInput
    participant H as useAddComment
    participant Q as QueryCache
    participant A as api/post.addComment
    V->>H: mutate(content)
    H->>Q: 낙관적 반영(임시 댓글)
    H->>A: POST /posts/{id}/comments
    A-->>H: 성공→invalidate / 실패→롤백

클래스 의존

flowchart LR
    Hook["lib/usePosts.ts"] --> Api["api/post.ts"]
    Api --> Client["be-client"]
    Screen["community/[id] · communities board (FE-16/19)"] --> Hook

테스트 케이스

  • useCommunityPosts(3)이 GET /communities/3/posts를 호출하고 결과를 반환한다
  • usePosts({sportCategory:'RUNNING'})이 종목 쿼리를 전달한다
  • useAddComment가 성공 시 댓글 목록 queryKey를 무효화한다
  • 댓글 낙관 반영 후 서버 실패 시 이전 상태로 롤백된다
  • getPost(id, requesterId)가 X-User-Id 헤더를 실어 보낸다
  • 403 응답이 훅의 isError로 노출된다(잠금 UI 전제)

그래프 뷰