feat(creator): 팬Talk 쓰기 화면을 연결한다

docs/20260704_크리에이터_채널_팬Talk_탭/prd.md

@@ -11,11 +11,21 @@ Figma 참조:
 - 아이템 뷰(답글 있음): `290:9147`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=290-9147&m=dev`
 - 더보기 anchored context popup: `666:36114`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=666-36114&m=dev`
 - Empty: `290:9001`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=290-9001&m=dev`
+- 글 입력(입력 값 없음, 키보드 있음): `290:9235`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=290-9235&m=dev`
+- 글 입력(입력 값 있음, 키보드 있음): `290:9282`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=290-9282&m=dev`
+- 글 입력(입력 값 있음, 키보드 없음): `290:9290`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=290-9290&m=dev`
+- 입력 종료 모달: `308:19046`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=308-19046&m=dev`
+- 공용 모달(버튼 1개): `567:17662`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=567-17662&m=dev`
+- 공용 모달(버튼 2개): `567:17666`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=567-17666&m=dev`
+- 공용 모달 dimmed 포함: `567:17712`, `https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=567-17712&m=dev`
 
 ## 2. Problem
 - 현재 `CreatorChannelTab.fanTalk`은 placeholder로 표시되어 팬Talk 목록을 확인할 수 없다.
 - 기존 홈 탭에는 최신 팬Talk 요약만 있고, 팬Talk 탭 전용 목록 API, 페이징, 답글 표시, 신고/삭제 액션이 없다.
 - 기존 프로필 FanTalk 구현은 구 API와 구 UI 구조를 사용하므로 V2 크리에이터 채널 탭에 그대로 붙이기 어렵다.
+- 팬Talk 탭의 글쓰기 floating button과 empty state `응원 남기기` 버튼이 실제 글 입력 화면으로 연결되지 않는다.
+- 내가 쓴 팬Talk의 `수정하기` 액션이 실제 수정 화면으로 연결되지 않는다.
+- V2 화면에서 재사용할 수 있는 Figma 기준 액션 모달이 없어 입력 종료 안내 모달을 일관되게 표시하기 어렵다.
 
 ## 3. Goals
 - `CreatorChannelTab.fanTalk` 선택 시 팬Talk 탭 API를 호출하고 응답 데이터로 화면을 구성한다.
@@ -30,13 +40,20 @@ Figma 참조:
 - `삭제하기`는 기존 FanTalk에서 사용하던 삭제 API와 동일하게 `ExplorerRepository.modifyCheers(..., isActive: false)`를 사용한다.
 - `fanTalkCount == 0`이면 Figma empty view(`290:9001`)를 표시한다.
 - 내 채널인 경우 우측하단 글쓰기 floating button과 empty view 내부 `응원 남기기` 버튼을 모두 표시하지 않는다.
+- 크리에이터 채널 팬Talk 탭의 우측하단 plus button과 empty state `응원 남기기` 버튼에서 팬Talk 글 입력 화면으로 진입한다.
+- 팬Talk 글 입력 화면은 입력 값 없음, 입력 값 있음, 키보드 없음 상태를 Figma 기준으로 표시한다.
+- 입력 값이 없으면 보내기 버튼을 비활성화하고, 입력 값이 있으면 보내기 버튼을 활성화한다.
+- 입력 값이 있는 상태에서 취소 버튼을 터치하면 입력 종료 안내 모달을 표시한다.
+- 입력 종료 안내 모달은 V2 공용 액션 모달로 구현해 제목, 안내 문구, 버튼 1, 버튼 2의 label/action을 바꿔 재사용할 수 있게 한다.
+- 팬Talk 작성과 수정은 이번에 작성하는 같은 쓰기 페이지에서 수행한다.
+- 작성/수정 API는 기존 팬Talk API인 `ExplorerRepository.writeCheers`와 `ExplorerRepository.modifyCheers`를 사용한다.
 
 ## 4. Non-Goals
 - 크리에이터 채널 공통 shell, header, sticky tab-bar 동작을 다시 설계하지 않는다.
-- 신규 글쓰기/수정 페이지를 이번 작업에서 구현하지 않는다.
-- 팬Talk 작성/수정 mutation API를 새로 만들지 않는다.
+- 팬Talk 작성/수정용 새 API endpoint를 만들지 않는다.
 - 신고 API나 신고 dialog를 새로 만들지 않는다.
 - 삭제 API를 새로 만들지 않고 기존 FanTalk 삭제 흐름을 재사용한다.
+- 기존 구 UI `SodaDialog`를 V2 공용 모달로 대체하는 전역 리팩터링은 하지 않는다.
 - Figma localhost asset URL을 앱 코드에 직접 사용하지 않는다.
 - `Pods/**`, `generated/**`, `build/**`는 수정하지 않는다.
 
@@ -118,7 +135,7 @@ data class CreatorChannelFanTalkReplyResponse(
 - 더보기 버튼을 터치하면 Figma `666:36114` 기준 anchored context popup을 표시한다.
 - 내가 쓴 글이면 `수정하기`, `삭제하기`를 표시한다.
 - 내가 쓴 글이 아니지만 내 채널이면 `삭제하기`만 표시한다.
-- `수정하기`와 글쓰기 floating button은 후속 신규 글쓰기 페이지 구현 전까지 비어 있는 placeholder action으로 두되, 코드상 TODO가 드러나게 유지한다.
+- `수정하기`를 터치하면 이번에 작성하는 팬Talk 쓰기 페이지를 수정 모드로 연다.
 - `삭제하기`는 확인 dialog 후 기존 삭제 API를 호출한다.
 
 ### 5.6 Report and delete
@@ -138,7 +155,7 @@ data class CreatorChannelFanTalkReplyResponse(
 - 글쓰기 floating button은 `CreatorChannelFloatingActionMenu` 내부 `floatingButton`과 동일한 66pt 원형 버튼, 38pt 아이콘, `Color.soda400` 배경을 사용한다.
 - 동일 UI를 중복 구현하지 않기 위해 `SodaLive/Sources/V2/CreatorChannel/Components/**` 아래에 공용 icon floating button을 분리하고, `CreatorChannelFloatingActionMenu`와 팬Talk 글쓰기 floating button이 이를 재사용한다.
 - 글쓰기 floating button에는 plus 아이콘만 표시하고 텍스트는 표시하지 않는다.
-- 글쓰기 버튼 tap action은 신규 글쓰기 페이지 구현 후 연결할 수 있도록 부모 closure로 분리한다.
+- 글쓰기 버튼 tap action은 이번에 작성하는 팬Talk 쓰기 페이지의 작성 모드로 연결한다.
 
 ### 5.8 Pagination
 - 첫 진입 시 `page=0`, `size=20`으로 조회한다.
@@ -147,6 +164,48 @@ data class CreatorChannelFanTalkReplyResponse(
 - 다음 페이지 성공 시 기존 `fanTalks` 뒤에 append한다.
 - 첫 페이지 재조회 시 기존 목록을 교체한다.
 
+### 5.9 FanTalk write/modify entry
+- 쓰기 페이지는 크리에이터 채널 팬Talk 탭에서 진입한다.
+- 진입 경로는 `fanTalkCount > 0`일 때 표시되는 우측하단 plus button과 `fanTalkCount == 0`일 때 empty state에 표시되는 `응원 남기기` 버튼이다.
+- 내가 쓴 글의 더보기 메뉴에서 `수정하기`를 터치하면 같은 쓰기 페이지를 수정 모드로 연다.
+- 수정 모드로 진입할 때는 수정 대상 `fanTalkId`와 기존 글 content를 반드시 함께 전달한다.
+- 내 채널인 경우 기존 규칙대로 plus button과 empty state `응원 남기기` 버튼을 모두 표시하지 않으므로 작성 모드로 진입할 수 없다.
+- 쓰기 route는 `AppStep`에 추가하고 `creatorId`, 작성/수정 mode, 수정 대상 `fanTalkId`, 초기 content, `onSuccess`를 전달할 수 있게 한다.
+- 작성 모드에서는 `fanTalkId`와 초기 content를 전달하지 않거나 비어 있는 값으로 전달한다.
+- 수정 모드에서는 `fanTalkId`가 0보다 커야 하고 초기 content가 기존 글 content와 같아야 한다.
+- 작성 또는 수정 성공 후 `onSuccess`로 팬Talk 첫 페이지를 다시 조회한다.
+
+### 5.10 FanTalk write/modify screen
+- 쓰기 화면은 Figma `290:9235`, `290:9282`, `290:9290`을 기준으로 한다.
+- Figma `290:9235`, `290:9282`는 키보드가 올라와 있는 상태를 기준으로 한다.
+- 화면 진입 시 입력 영역에 focus를 주어 키보드가 올라오게 한다.
+- 작성 모드는 빈 content로 시작한다.
+- 수정 모드는 선택한 fanTalk의 기존 content를 입력값으로 채운 상태에서 시작한다.
+- 수정 모드의 보내기 API 호출에는 route로 받은 `fanTalkId`와 현재 입력 content를 사용한다.
+- 입력 값이 없으면 보내기 버튼을 비활성화한다.
+- 입력 값이 있으면 보내기 버튼을 활성화한다.
+- 보내기 버튼 활성화 기준은 `content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty == false`이다.
+- 키보드가 내려가도 입력 값과 보내기 버튼 활성화 상태는 유지한다.
+- 입력 값이 없는 상태에서 취소 버튼을 터치하면 이전 화면으로 닫는다.
+- 입력 값이 있는 상태에서 취소 버튼을 터치하면 입력 종료 안내 모달을 표시한다.
+
+### 5.11 Reusable V2 action modal
+- 입력 종료 안내 모달은 Figma `308:19046` 기준으로 표시한다.
+- 공용 모달 컴포넌트는 Figma `567:17662`, `567:17666`, `567:17712`을 기준으로 한다.
+- 공용 모달은 제목, 안내 문구, button 1, button 2를 외부에서 주입받는다.
+- button 1은 오른쪽, button 2는 왼쪽에 표시한다.
+- 각 버튼은 label과 action이 모두 있을 때만 표시한다.
+- 버튼 1개만 표시할 수 있어야 하며, 버튼 2개 표시도 지원해야 한다.
+- Dimmed는 Black, opacity 60%를 사용한다.
+- Dimmed tap은 별도 action 없이 모달만 닫는다.
+- 저장소 경로 관례에 맞춰 공용 모달은 `SodaLive/Sources/V2/Component/Modal/**` 아래에 둔다.
+
+### 5.12 FanTalk write/modify submission
+- 작성 API는 기존 팬Talk API인 `ExplorerRepository.writeCheers(parentCheersId:nil, creatorId:content:)`를 사용한다.
+- 수정 API는 기존 팬Talk API인 `ExplorerRepository.modifyCheers(cheersId:content:isActive:)`를 사용하고, `content`에는 수정한 입력값을 전달하며 `isActive`는 `nil`로 전달한다.
+- 작성 또는 수정 성공 시 쓰기 화면을 닫고 팬Talk 탭 첫 페이지를 재조회한다.
+- 작성 또는 수정 실패 시 기존 V2 화면 관례대로 toast 또는 오류 팝업을 표시한다.
+
 ## 6. Success Criteria
 - 팬Talk 탭 진입 시 `GET /api/v2/creator-channels/{creatorId}/fan-talks?page=0&size=20`가 호출된다.
 - count bar에는 `전체 {fanTalkCount}`만 표시되고 정렬 버튼/아이콘/popup은 표시되지 않는다.
@@ -159,20 +218,34 @@ data class CreatorChannelFanTalkReplyResponse(
 - `fanTalkCount == 0`이면 Figma `290:9001` empty view가 표시된다.
 - 내 채널인 경우 empty view 내부 `응원 남기기` 버튼과 우측하단 글쓰기 floating button이 모두 표시되지 않는다.
 - `fanTalkCount > 0`이고 내 채널이 아니면 우측하단 글쓰기 floating button이 표시된다.
-- 글쓰기/수정하기 tap은 신규 글쓰기 페이지 구현 전까지 앱 crash 없이 no-op placeholder로 동작한다.
+- `fanTalkCount > 0`이고 내 채널이 아니면 우측하단 글쓰기 floating button tap 시 팬Talk 글 입력 화면으로 이동한다.
+- `fanTalkCount == 0`이고 내 채널이 아니면 empty state `응원 남기기` 버튼 tap 시 팬Talk 글 입력 화면으로 이동한다.
+- 팬Talk 글 입력 화면은 입력 값이 없을 때 보내기 버튼을 비활성화한다.
+- 팬Talk 글 입력 화면은 입력 값이 있을 때 보내기 버튼을 활성화한다.
+- 입력 값이 있는 상태에서 취소 버튼을 터치하면 입력 종료 안내 모달이 표시된다.
+- 입력 종료 안내 모달의 dimmed를 터치하면 모달만 닫히고 입력 화면과 입력 값은 유지된다.
+- 작성 성공 후 팬Talk 탭 첫 페이지가 다시 조회된다.
+- 내가 쓴 글의 `수정하기` tap 시 같은 팬Talk 쓰기 페이지가 수정 모드로 열린다.
+- 수정 모드 진입 시 수정 대상 `fanTalkId`와 기존 글 content가 함께 전달된다.
+- 수정 모드는 선택한 fanTalk의 기존 content를 입력값으로 표시한다.
+- 수정 성공 후 팬Talk 탭 첫 페이지가 다시 조회된다.
 
 ## 7. Technical Constraints
 - 기능 변경은 `SodaLive/Sources/V2/CreatorChannel/**` 하위에서 해결한다.
 - 팬Talk 탭 전용 View, ViewModel, Repository, API, 모델은 `SodaLive/Sources/V2/CreatorChannel/FanTalk/**` 아래에 둔다.
 - 우측하단 icon floating button은 팬Talk 전용 컴포넌트로 중복 생성하지 않고 `CreatorChannelFloatingActionMenu`의 private `floatingButton` 패턴을 공용 컴포넌트로 추출해 재사용한다.
+- 팬Talk 작성/수정 공용 쓰기 View와 ViewModel은 `SodaLive/Sources/V2/CreatorChannel/FanTalk/Write/**` 아래에 둔다.
+- V2 공용 액션 모달은 `SodaLive/Sources/V2/Component/Modal/**` 아래에 둔다.
 - 삭제 API 재사용을 위해 기존 `ExplorerRepository.modifyCheers`를 호출할 수 있다.
+- 작성 API 재사용을 위해 기존 `ExplorerRepository.writeCheers`를 호출한다.
+- 수정 API 재사용을 위해 기존 `ExplorerRepository.modifyCheers`를 호출한다.
 - 신고 기능 재사용을 위해 기존 `ReportRepository`, `ReportRequest`, `CheersReportDialogView`를 사용한다.
 - 신규 문구가 필요하면 `SodaLive/Sources/I18n/I18n.swift`에 ko/en/ja를 추가한다.
 - 프로젝트 설정 변경은 신규 Swift 파일 target 등록이 필요한 경우에만 수행한다.
 
 ## 8. Assumptions
-- 신규 글쓰기/수정 페이지는 후속 작업에서 구현하며, 이번 작업에서는 버튼 표시와 action closure만 준비한다.
 - 신규 API의 `fanTalkId`는 기존 신고/삭제 API가 요구하는 `cheersId`와 동일한 식별자로 사용할 수 있다.
+- 기존 `ExplorerRepository.writeCheers`와 `ExplorerRepository.modifyCheers`는 이번 팬Talk 작성/수정 API로 사용한다.
 
 ## 9. Open Questions
 - 해당 없음
@@ -180,3 +253,11 @@ data class CreatorChannelFanTalkReplyResponse(
 ## 10. Verification Notes
 - 2026-07-04: Figma `get_design_context`와 `get_screenshot`으로 `290:9139`, `290:9145`, `290:9147`, `666:36114`, `290:9001`을 확인했다.
 - 2026-07-04: `CreatorChannelView`, 후원 탭 구현, 기존 `UserProfileFanTalkViewModel`, `UserProfileFanTalkCheersItemView`, `UserProfileView`의 신고/삭제 흐름을 확인했다.
+- 2026-07-06: 사용자 요청에 따라 Swift 구현 없이 PRD에 팬Talk 글 입력 화면 Figma URL(`290:9235`, `290:9282`, `290:9290`), 입력 종료 모달(`308:19046`), 공용 모달(`567:17662`, `567:17666`, `567:17712`)과 요구사항을 추가했다.
+- 2026-07-06: `rg "290:9235|290:9282|290:9290|308:19046|567:17662|567:17666|567:17712|SodaV2ActionModal|ExplorerRepository.writeCheers" docs/20260704_크리에이터_채널_팬Talk_탭/prd.md docs/20260704_크리에이터_채널_팬Talk_탭/plan-task.md`로 Figma node, 공용 모달, 기존 작성 API 재사용 방침이 문서에 포함된 것을 확인했다.
+- 2026-07-06: `git diff --check -- docs/20260704_크리에이터_채널_팬Talk_탭/prd.md docs/20260704_크리에이터_채널_팬Talk_탭/plan-task.md` 실행 결과 출력 없이 종료되어 공백 오류가 없음을 확인했다.
+- 2026-07-06: 사용자 요청에 따라 팬Talk 작성/수정 모두 같은 쓰기 페이지에서 수행하고, 작성/수정 API는 기존 팬Talk API(`ExplorerRepository.writeCheers`, `ExplorerRepository.modifyCheers`)를 사용하도록 PRD를 보완했다.
+- 2026-07-06: `rg "작성/수정|쓰기 페이지|수정 모드|작성 모드|ExplorerRepository.writeCheers|ExplorerRepository.modifyCheers|modifyCheers\\(cheersId:fanTalkId, content:content, isActive:nil\\)|creatorChannelFanTalkWrite|showFanTalkModifyView" docs/20260704_크리에이터_채널_팬Talk_탭/prd.md docs/20260704_크리에이터_채널_팬Talk_탭/plan-task.md`로 작성/수정 공용 쓰기 페이지와 기존 팬Talk API 사용 방침을 확인했다.
+- 2026-07-06: `rg -n "no-op|수정 페이지는|수정 mutation|작성용 새 API|재사용 가능 여부|불가능한 것이 확인|미결정 사항|수정하기 tap은 수정 페이지" docs/20260704_크리에이터_채널_팬Talk_탭/prd.md docs/20260704_크리에이터_채널_팬Talk_탭/plan-task.md` 실행 결과 매칭이 없어 이전 충돌 문구가 남지 않았음을 확인했다.
+- 2026-07-06: 사용자 확인에 따라 수정 모드 진입 시 수정 대상 `fanTalkId`와 기존 글 content를 반드시 함께 전달하도록 PRD를 보완했다.
+- 2026-07-06: `rg '수정 모드.*fanTalkId|fanTalkId.*기존 글 content|fanTalkId.*초기 content|fanTalkId.*initialContent|기존 content.*content 초기값|수정 대상.*fanTalkId.*기존 글 content|fanTalkId.*0보다 커야' docs/20260704_크리에이터_채널_팬Talk_탭/prd.md docs/20260704_크리에이터_채널_팬Talk_탭/plan-task.md`로 수정 모드 route에 `fanTalkId`와 기존 글 content를 함께 전달한다는 조건을 확인했다.