[FE-14] 상품 상세 “채팅하기” 진입 (goods 거래 채팅)

작업 내용 (설계 의도)

변경 사항

근거: 설계 문서 S8·PRD FR-18. 파일: app/product/[id]/index.tsx(변경, 이 티켓 단독 소유 — 다른 티켓과 충돌 없음).

기존 상품 상세에 “판매자와 채팅하기” 보조 CTA를 추가한다(주요 CTA는 장바구니 유지, accent 1곳 규칙 위해 채팅 CTA는 보조 스타일).

useStartGoodsChat(FE-05, POST /products/{productId}/chat) 사용.
2단계: “채팅하기” 탭 → 확인 시트(“판매자와 1:1 채팅을 시작할까요?”) → 방 생성/이동(기존 방 있으면 이동) → /rooms/{roomId}.
본인 상품이면 CTA 숨김(Product.ownerId == 내 userId — useMyProfile/useCurrentUserId).
상태: loading(생성 중 CTA 스피너), error(“채팅을 시작하지 못했어요” 토스트), success(방 이동).
진입점 노출은 chat.goods.enabled(2단계) 플래그(FE-15 와이어업).
토스 패턴: 기존 화면에 보조 CTA 1개만 추가, 절제.

기존 하드코딩 색은 이 파일 범위에서 채팅 CTA 부분만 토큰 사용(전체 리팩토링은 범위 밖 — 무관 변경 금지). 새 CTA는 테마 토큰 준수.

롤백: chat.goods.enabled=false로 CTA 숨김.

의존

FE-04 (UI 프리미티브), FE-05 (goods-chat 훅)

다이어그램

처리 흐름

sequenceDiagram
    participant Buyer
    participant Screen as product/[id]
    participant Hook as useStartGoodsChat
    participant BE
    Buyer->>Screen: "채팅하기" 탭
    Screen->>Buyer: 확인 시트
    Buyer->>Screen: 확인
    Screen->>Hook: start(productId)
    Hook->>BE: POST /products/{id}/chat
    BE-->>Hook: RoomResponse
    Screen->>Screen: /rooms/{roomId} 이동

테스트 케이스

“채팅하기” 탭 → 확인 시트 → 확정 시 방으로 이동한다
기존 거래 방이 있으면 같은 roomId로 이동한다(중복 생성 없음)
본인 상품이면 채팅 CTA가 렌더되지 않는다
방 생성 실패 시 오류 토스트가 표시되고 화면에 머문다
채팅 CTA가 테마 토큰으로 라이트/다크 모두 렌더된다

dpdpdndn 블로그

탐색기

FE-14-product-detail-chat-cta