feat(creator): 본인 채널 액션 기반을 추가한다
This commit is contained in:
244
docs/20260703_크리에이터_채널_본인_진입_플로팅_버튼/plan-task.md
Normal file
244
docs/20260703_크리에이터_채널_본인_진입_플로팅_버튼/plan-task.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# 크리에이터 채널 본인 진입 플로팅 버튼 구현 계획
|
||||
|
||||
## 기준 문서
|
||||
|
||||
- PRD: `docs/20260703_크리에이터_채널_본인_진입_플로팅_버튼/prd.md`
|
||||
- 기존 PRD: `docs/20260701_크리에이터_채널_홈/prd.md`
|
||||
- 기존 구현 계획: `docs/20260701_크리에이터_채널_홈/plan-task.md`
|
||||
- 코드 스타일: `docs/agent-guides/code-style.md`
|
||||
- 빌드/검증: `docs/agent-guides/build-test-verification.md`
|
||||
- Figma 닫힘 상태 floating button: `665:19092`
|
||||
- Figma 열림 상태 floating menu: `665:19223`
|
||||
|
||||
## 구현 원칙
|
||||
|
||||
- 기존 크리에이터 채널 홈 구조를 유지하고, 본인 채널 전용 UI만 추가한다.
|
||||
- 본인 채널 판별은 `CreatorChannelHomeResponse.creator.creatorId`와 `UserDefaults.int(forKey: .userId)` 비교로 처리한다.
|
||||
- 기존 팔로우/알림 mutation, 홈 섹션, sticky tab-bar 동작은 본인 채널 조건 외에는 수정하지 않는다.
|
||||
- Floating menu는 크리에이터 채널 전용 컴포넌트로 만들고 `CreatorChannelView`의 최상위 `ZStack` overlay에서 표시한다.
|
||||
- 신규 라우팅 case는 만들지 않고 기존 `AppStep.creatorCommunityWrite`, `AppStep.createContent`, `AppStep.createLive`를 우선 재사용한다.
|
||||
- 지정 asset `ic_new_upload_community_post`, `ic_new_upload_audio`, `ic_new_create_live`, `ic_new_x_black`을 사용한다.
|
||||
- Figma localhost asset URL은 앱 코드에 사용하지 않는다.
|
||||
|
||||
## 주요 대상 파일
|
||||
|
||||
### 생성
|
||||
- `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift`
|
||||
|
||||
### 수정
|
||||
- `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
|
||||
- `SodaLive/Sources/App/AppStep.swift`
|
||||
- `SodaLive/Sources/ContentView.swift`
|
||||
- `SodaLive/Sources/Content/Create/ContentCreateView.swift`
|
||||
- `SodaLive/Sources/I18n/I18n.swift`
|
||||
|
||||
### 확인
|
||||
- `SodaLive/Sources/Live/LiveView.swift`
|
||||
- `SodaLive/Sources/Content/Create/ContentCreateViewModel.swift`
|
||||
- `SodaLive/Resources/Assets.xcassets/v2/ic_new_upload_community_post.imageset`
|
||||
- `SodaLive/Resources/Assets.xcassets/v2/ic_new_upload_audio.imageset`
|
||||
- `SodaLive/Resources/Assets.xcassets/v2/ic_new_create_live.imageset`
|
||||
- `SodaLive/Resources/Assets.xcassets/v2/ic_new_x_black.imageset`
|
||||
|
||||
## TASK 체크리스트
|
||||
|
||||
### Phase 1: 본인 채널 판별과 title bar 조건
|
||||
|
||||
- [x] **Task 1.1: 본인 채널 판별값 추가**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 작업 내용:
|
||||
- `CreatorChannelView`에 `private var isOwnCreatorChannel: Bool` 계산 프로퍼티를 추가한다.
|
||||
- `viewModel.response?.creator.creatorId`가 없으면 `false`를 반환한다.
|
||||
- `UserDefaults.int(forKey: .userId)`가 `0` 이하이면 `false`를 반환한다.
|
||||
- 두 값이 같을 때만 `true`를 반환한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "isOwnCreatorChannel|UserDefaults\\.int\\(forKey: \\.userId\\)|creator\\.creatorId" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 본인 채널 판별 계산 프로퍼티가 확인된다.
|
||||
|
||||
- [x] **Task 1.2: title bar 우측 액션 숨김 옵션 추가**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
|
||||
- 작업 내용:
|
||||
- `CreatorChannelTitleBar`에 `showsCreatorActions: Bool = true` 성격의 프로퍼티를 추가한다.
|
||||
- `showsCreatorActions == false`이면 팔로우 버튼, 알림 버튼, 더보기 버튼을 포함한 우측 `HStack`을 표시하지 않는다.
|
||||
- back 버튼, nickname, background progress 동작은 유지한다.
|
||||
- Preview에 `showsCreatorActions: false` 케이스를 추가한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "showsCreatorActions|if showsCreatorActions|CreatorChannelTitleBar\\(" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
|
||||
- 기대 결과: title bar 우측 액션 표시 여부를 제어하는 조건이 확인된다.
|
||||
|
||||
- [x] **Task 1.3: 본인 채널이면 title bar 우측 액션 숨김 연결**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 작업 내용:
|
||||
- `titleBar(backgroundProgress:)`에서 `CreatorChannelTitleBar`에 `showsCreatorActions: !isOwnCreatorChannel`을 전달한다.
|
||||
- 본인 채널에서 follow/notify/more closure가 UI로 호출되지 않는지 확인한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "showsCreatorActions: !isOwnCreatorChannel|CreatorChannelTitleBar" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 본인 채널 조건이 title bar에 전달된다.
|
||||
|
||||
### Phase 2: Floating action menu 컴포넌트
|
||||
|
||||
- [x] **Task 2.1: floating menu 문구 추가**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/I18n/I18n.swift`
|
||||
- 작업 내용:
|
||||
- `I18n.CreatorChannelHome`에 접근성 label용 문구를 추가한다.
|
||||
- 추가 문구:
|
||||
- `uploadCommunityPost`: ko `커뮤니티 글 올리기`, en `Upload community post`, ja `コミュニティ投稿を作成`
|
||||
- `uploadAudioContent`: ko `오디오 콘텐츠 올리기`, en `Upload audio content`, ja `オーディオコンテンツを投稿`
|
||||
- `createLive`: ko `라이브 만들기`, en `Create live`, ja `ライブを作成`
|
||||
- `closeFloatingMenu`: ko `닫기`, en `Close`, ja `閉じる`
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "uploadCommunityPost|uploadAudioContent|closeFloatingMenu" SodaLive/Sources/I18n/I18n.swift`
|
||||
- 기대 결과: 접근성 label용 다국어 문구가 존재한다.
|
||||
|
||||
- [x] **Task 2.2: floating menu 컴포넌트 생성**
|
||||
- 대상 파일:
|
||||
- 생성: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift`
|
||||
- 확인: `SodaLive/Resources/Assets.xcassets/v2/ic_new_upload_community_post.imageset`
|
||||
- 확인: `SodaLive/Resources/Assets.xcassets/v2/ic_new_upload_audio.imageset`
|
||||
- 확인: `SodaLive/Resources/Assets.xcassets/v2/ic_new_create_live.imageset`
|
||||
- 확인: `SodaLive/Resources/Assets.xcassets/v2/ic_new_x_black.imageset`
|
||||
- 작업 내용:
|
||||
- `CreatorChannelFloatingActionMenu`를 `View`로 생성한다.
|
||||
- 입력값은 `isPresented: Binding<Bool>`, `onTapCommunityPost`, `onTapAudioContent`, `onTapCreateLive` closure로 둔다.
|
||||
- 닫힘 상태에서는 `ic_plus_no_bg`를 사용하는 plus 버튼 하나만 표시한다.
|
||||
- 열림 상태에서는 `Color.black.opacity(0.4).ignoresSafeArea()` dim과 4개 floating button을 표시한다.
|
||||
- 버튼 순서는 화면 위에서 아래로 커뮤니티 글 올리기, 오디오 콘텐츠 올리기, 라이브 만들기, 닫기 순서로 구성한다.
|
||||
- 지정 asset을 `Image(...)`로 사용한다.
|
||||
- 닫기 버튼은 white background, 나머지는 Figma 기준 soda blue 계열 background를 사용한다.
|
||||
- spring animation은 `.interpolatingSpring(mass: 1, stiffness: 256, damping: 24, initialVelocity: 0)`를 사용한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "struct CreatorChannelFloatingActionMenu|isPresented|interpolatingSpring\\(mass: 1, stiffness: 256, damping: 24|ic_plus_no_bg|ic_new_upload_community_post|ic_new_upload_audio|ic_new_create_live|ic_new_x_black|opacity\\(0.4\\)" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift`
|
||||
- 기대 결과: dim, spring animation, plus icon, 지정 asset, 4개 버튼이 확인된다.
|
||||
|
||||
- [x] **Task 2.3: 닫힘 상태 plus icon 적용 확인**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift`
|
||||
- 확인: `SodaLive/Resources/Assets.xcassets/ic_plus_no_bg.imageset`
|
||||
- 작업 내용:
|
||||
- 닫힘 상태 plus icon으로 `ic_plus_no_bg`를 사용한다.
|
||||
- 버튼 배경, 크기, padding은 Task 2.2의 Figma 기준을 따른다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "ic_plus_no_bg" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift SodaLive/Resources/Assets.xcassets`
|
||||
- 기대 결과: 닫힘 상태 plus icon이 `ic_plus_no_bg`로 고정되어 있다.
|
||||
|
||||
### Phase 3: CreatorChannelView overlay 연결과 액션 라우팅
|
||||
|
||||
- [ ] **Task 3.1: floating menu 표시 상태 연결**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 작업 내용:
|
||||
- `@State private var isCreatorActionMenuPresented = false`를 추가한다.
|
||||
- 최상위 `ZStack`에 `CreatorChannelFloatingActionMenu` overlay를 추가한다.
|
||||
- 표시 조건은 `isOwnCreatorChannel && viewModel.selectedTab == .home && !viewModel.isLoading`으로 한다.
|
||||
- 홈 외 탭으로 변경되면 `isCreatorActionMenuPresented = false`가 되도록 처리한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "isCreatorActionMenuPresented|CreatorChannelFloatingActionMenu|isOwnCreatorChannel && viewModel\\.selectedTab == \\.home" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 본인 채널 홈 탭에서만 floating menu가 연결된다.
|
||||
|
||||
- [ ] **Task 3.2: 오디오 콘텐츠 업로드 성공 callback 확장**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/App/AppStep.swift`
|
||||
- 수정: `SodaLive/Sources/ContentView.swift`
|
||||
- 수정: `SodaLive/Sources/Content/Create/ContentCreateView.swift`
|
||||
- 확인: `SodaLive/Sources/Content/Create/ContentCreateViewModel.swift`
|
||||
- 작업 내용:
|
||||
- `AppStep.createContent`를 `case createContent(onSuccess: (() -> Void)? = nil)` 형태로 변경한다.
|
||||
- 기존 `.createContent` 호출부가 컴파일되지 않으면 `.createContent()`로만 바꾸고, 동작은 그대로 유지한다.
|
||||
- `ContentView`의 `.createContent(let onSuccess)` destination에서 `ContentCreateView(onSuccess: onSuccess)`로 전달한다.
|
||||
- `ContentCreateView`에 `onSuccess: (() -> Void)?`를 추가한다.
|
||||
- 기존 업로드 화면의 입력 항목, 검증, 업로드 API, 완료 팝업 문구는 변경하지 않는다.
|
||||
- `viewModel.isShowCompletePopup`의 확인 액션에서 기존 `AppState.shared.back()`을 유지하고, back 직전 또는 직후에 `onSuccess?()`를 호출한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "createContent|ContentCreateView\\(|onSuccess|isShowCompletePopup|AppState\\.shared\\.back\\(\\)" SodaLive/Sources/App/AppStep.swift SodaLive/Sources/ContentView.swift SodaLive/Sources/Content/Create/ContentCreateView.swift`
|
||||
- 기대 결과: 기존 create content 진입은 유지되고, 업로드 성공 callback 전달과 호출 지점이 확인된다.
|
||||
|
||||
- [ ] **Task 3.3: 커뮤니티 글 올리기 액션 연결**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 확인: `SodaLive/Sources/App/AppStep.swift`
|
||||
- 확인: `SodaLive/Sources/ContentView.swift`
|
||||
- 작업 내용:
|
||||
- `showCommunityWrite()` helper를 추가한다.
|
||||
- helper에서 menu를 닫고 `AppState.shared.setAppStep(step: .creatorCommunityWrite(onSuccess: { viewModel.fetchHome(creatorId: creatorId) }))`를 호출한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "showCommunityWrite|creatorCommunityWrite\\(onSuccess:|fetchHome\\(creatorId: creatorId\\)" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 커뮤니티 글 작성 진입과 작성 성공 후 홈 갱신이 확인된다.
|
||||
|
||||
- [ ] **Task 3.4: 오디오 콘텐츠 올리기 액션 연결**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 확인: `SodaLive/Sources/App/AppStep.swift`
|
||||
- 확인: `SodaLive/Sources/Content/Create/ContentCreateView.swift`
|
||||
- 작업 내용:
|
||||
- `showAudioContentUpload()` helper를 추가한다.
|
||||
- helper에서 menu를 닫고 기존 진입을 유지한 `AppState.shared.setAppStep(step: .createContent(onSuccess: { viewModel.fetchHome(creatorId: creatorId) }))` 형태로 호출한다.
|
||||
- 기존 `createContent` 진입과 업로드 화면 자체의 UX/검증 로직은 변경하지 않는다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "showAudioContentUpload|createContent\\(onSuccess:|fetchHome\\(creatorId: creatorId\\)" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 오디오 콘텐츠 업로드 진입과 업로드 성공 후 홈 갱신 연결이 확인된다.
|
||||
|
||||
- [ ] **Task 3.5: 라이브 만들기 액션 연결**
|
||||
- 대상 파일:
|
||||
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 확인: `SodaLive/Sources/Live/LiveView.swift`
|
||||
- 확인: `SodaLive/Sources/App/AppStep.swift`
|
||||
- 작업 내용:
|
||||
- `CreatorChannelView`에 기존 `LiveView.onCreateSuccess`와 동일한 처리를 위한 `@StateObject private var liveViewModel = LiveViewModel()`을 추가한다.
|
||||
- `showCreateLive()` helper를 추가한다.
|
||||
- helper에서 menu를 닫고 `AppState.shared.setAppStep(step: .createLive(timeSettingMode: .NOW, onSuccess: handleCreateLiveSuccess))`를 호출한다.
|
||||
- `handleCreateLiveSuccess(response:)`는 기존 `LiveView.onCreateSuccess(response:)`와 동일하게 처리한다.
|
||||
- 기존 처리 기준으로 `liveViewModel.getLiveMain()`을 호출하고, `response.channelName`이 있으면 `liveViewModel.enterRoom(roomId: response.id!)`를 호출한다.
|
||||
- 크리에이터 채널로 돌아왔을 때 최신 상태가 보이도록 `viewModel.fetchHome(creatorId: creatorId)`도 호출한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "LiveViewModel|showCreateLive|handleCreateLiveSuccess|createLive\\(timeSettingMode: \\.NOW|channelName|getLiveMain\\(\\)|enterRoom\\(roomId:|fetchHome\\(creatorId: creatorId\\)" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 기대 결과: 라이브 만들기 진입, 기존 `LiveView.onCreateSuccess`와 동일한 생성 성공 처리, 크리에이터 채널 홈 갱신이 확인된다.
|
||||
|
||||
### Phase 4: 검증
|
||||
|
||||
- [ ] **Task 4.1: 정적 검색 검증**
|
||||
- 대상 파일:
|
||||
- 확인: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
|
||||
- 확인: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
|
||||
- 확인: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelFloatingActionMenu.swift`
|
||||
- 작업 내용:
|
||||
- 본인 채널 조건, title bar 숨김, floating menu 표시 조건, 지정 asset, spring animation을 검색한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `rg "isOwnCreatorChannel|showsCreatorActions|CreatorChannelFloatingActionMenu|ic_plus_no_bg|ic_new_upload_community_post|ic_new_upload_audio|ic_new_create_live|ic_new_x_black|interpolatingSpring\\(mass: 1, stiffness: 256, damping: 24" SodaLive/Sources/V2/CreatorChannel`
|
||||
- 기대 결과: 모든 핵심 변경 지점이 검색된다.
|
||||
|
||||
- [ ] **Task 4.2: 빌드 검증**
|
||||
- 대상 파일:
|
||||
- 확인: `SodaLive.xcworkspace`
|
||||
- 작업 내용:
|
||||
- Debug 빌드를 실행한다.
|
||||
- 검증 기준:
|
||||
- 실행 명령: `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build`
|
||||
- 기대 결과: build succeeded.
|
||||
|
||||
- [ ] **Task 4.3: 수동 동작 검증**
|
||||
- 대상 화면:
|
||||
- 본인 크리에이터 채널 홈
|
||||
- 타인 크리에이터 채널 홈
|
||||
- 작업 내용:
|
||||
- 본인 채널 title bar 우측 액션이 숨겨지는지 확인한다.
|
||||
- 타인 채널 title bar 팔로우/알림/더보기 액션이 기존처럼 보이는지 확인한다.
|
||||
- 본인 채널 홈 탭에서 floating button이 보이고 홈 외 탭에서는 숨겨지는지 확인한다.
|
||||
- Floating button 터치 시 dim과 4개 버튼이 표시되는지 확인한다.
|
||||
- dim 탭/닫기 버튼으로 menu가 닫히는지 확인한다.
|
||||
- 커뮤니티 글 올리기, 오디오 콘텐츠 올리기, 라이브 만들기 버튼이 각각 기존 화면으로 이동하는지 확인한다.
|
||||
- 커뮤니티 글 작성 성공 후 크리에이터 채널 홈이 갱신되는지 확인한다.
|
||||
- 오디오 콘텐츠 업로드 성공 후 크리에이터 채널 홈이 갱신되는지 확인한다.
|
||||
- 라이브 만들기 성공 후 기존 `LiveView.onCreateSuccess`와 동일한 이동/갱신 흐름이 동작하는지 확인한다.
|
||||
- 검증 기준:
|
||||
- 기대 결과: PRD Success Criteria를 모두 만족한다.
|
||||
|
||||
## 검증 기록
|
||||
|
||||
- 2026-07-03: 문서 작성 단계. 구현/빌드 검증은 아직 수행하지 않음.
|
||||
- 2026-07-03: Open Questions 결정 사항을 반영함. `ic_plus_no_bg`, 기존 `AppStep.createContent`, 기존 `LiveView.onCreateSuccess` 동일 처리, 커뮤니티/오디오 성공 후 홈 갱신 기준을 문서화함.
|
||||
- 2026-07-03: Phase 1, 2 구현 완료. 계획서의 Task 1.1~2.3 `rg` 검증을 수행했고, `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 성공을 확인함. 자동화 테스트 타깃은 `rg "Tests|XCTest|testTarget|PBXNativeTarget.*Tests|\.xctest|unit test|swift test" "SodaLive.xcodeproj" "SodaLive"` 검색 결과 확인되지 않아 별도 RED/GREEN 테스트는 추가하지 않음.
|
||||
148
docs/20260703_크리에이터_채널_본인_진입_플로팅_버튼/prd.md
Normal file
148
docs/20260703_크리에이터_채널_본인_진입_플로팅_버튼/prd.md
Normal file
@@ -0,0 +1,148 @@
|
||||
# PRD: 크리에이터 채널 본인 진입 플로팅 버튼
|
||||
|
||||
## 1. Overview
|
||||
크리에이터 채널에 크리에이터 본인이 입장한 경우, 팔로우 대상 사용자에게 필요한 title bar 액션을 숨기고 홈 탭 우측 하단에 콘텐츠 생성용 floating button을 제공한다. Floating button은 Figma 디자인의 닫힘/열림 상태와 spring interaction animation을 반영하며, 열림 상태에서는 전체 화면 dim과 4개 버튼을 표시한다.
|
||||
|
||||
기존 크리에이터 채널 홈 구현(`docs/20260701_크리에이터_채널_홈/prd.md`) 위에 추가하는 요구사항이다.
|
||||
|
||||
Figma 참조:
|
||||
- 닫힘 상태 floating button: `665:19092`, `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=665-19092&m=dev`
|
||||
- 열림 상태 floating menu: `665:19223`, `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=665-19223&m=dev`
|
||||
|
||||
## 2. Problem
|
||||
- 현재 크리에이터 채널 title bar는 본인 채널에 입장한 경우에도 팔로우/알림/더보기 액션을 표시할 수 있다.
|
||||
- 크리에이터 본인은 자신의 채널 홈에서 커뮤니티 글, 오디오 콘텐츠, 라이브 생성으로 빠르게 이동해야 하지만, 현재 홈 탭 안에는 해당 작성/생성 진입점이 없다.
|
||||
- Floating menu는 화면 전체 dim, 버튼 배치, 열림/닫힘 animation이 함께 동작해야 하므로 기존 홈 섹션에 단순 버튼을 추가하는 방식만으로는 Figma 상태를 충족하기 어렵다.
|
||||
|
||||
## 3. Goals
|
||||
- 크리에이터 본인이 자신의 채널에 입장했는지 판별한다.
|
||||
- 본인 채널일 때 title bar 우측의 팔로우 버튼, 알림 버튼, 더보기 버튼을 보이지 않게 한다.
|
||||
- 본인 채널이고 선택된 탭이 `홈`일 때만 홈 탭 우측 하단에 floating button을 표시한다.
|
||||
- Floating button 터치 시 Figma 열림 상태처럼 화면 전체 dim과 세 개 생성 액션 버튼, 닫기 버튼을 표시한다.
|
||||
- Floating menu 열림/닫힘에는 SwiftUI spring animation을 적용한다.
|
||||
- 버튼 asset은 지정된 `ic_new_upload_community_post`, `ic_new_upload_audio`, `ic_new_create_live`, `ic_new_x_black`을 사용한다.
|
||||
- 각 생성 액션은 기존 앱 라우팅을 우선 재사용한다.
|
||||
- 본인 채널이 아닌 경우 기존 크리에이터 채널 홈의 팔로우/알림/더보기/탭 동작을 유지한다.
|
||||
|
||||
## 4. Non-Goals
|
||||
- 크리에이터 권한/역할을 서버에서 새로 조회하는 API를 추가하지 않는다.
|
||||
- 커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 화면 자체를 새로 구현하지 않는다.
|
||||
- Floating button을 홈 탭 외 `라이브`, `오디오`, `시리즈`, `커뮤니티`, `팬Talk`, `후원` 탭에 표시하지 않는다.
|
||||
- Floating menu 버튼에 텍스트 라벨을 추가하지 않는다. Figma 기준 아이콘 버튼만 표시한다.
|
||||
- Figma localhost asset URL을 앱 코드에 직접 사용하지 않는다.
|
||||
- `Pods/**`, `generated/**`, `build/**`는 수정하지 않는다.
|
||||
|
||||
## 5. Target Users
|
||||
- 자신의 크리에이터 채널에 입장해 채널 콘텐츠를 관리하거나 새 콘텐츠를 등록하려는 크리에이터
|
||||
|
||||
## 6. User Stories
|
||||
- 크리에이터는 본인 채널에 들어갔을 때 자신을 팔로우하는 버튼을 보지 않고 싶다.
|
||||
- 크리에이터는 채널 홈에서 floating button을 눌러 작성/생성 액션을 빠르게 펼치고 싶다.
|
||||
- 크리에이터는 펼쳐진 floating menu에서 커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 중 하나를 선택하고 싶다.
|
||||
- 크리에이터는 dim 영역이나 닫기 버튼으로 floating menu를 닫고 싶다.
|
||||
|
||||
## 7. Core Requirements
|
||||
|
||||
### 7.1 본인 채널 판별
|
||||
- 본인 채널 여부는 `CreatorChannelHomeResponse.creator.creatorId == UserDefaults.int(forKey: .userId)` 기준으로 판별한다.
|
||||
- API 응답이 아직 없거나 실패 placeholder 상태이면 본인 채널로 간주하지 않는다.
|
||||
- 로그인하지 않은 상태에서는 `UserDefaults.int(forKey: .userId)`가 유효하지 않으므로 본인 채널로 간주하지 않는다.
|
||||
- 본인 채널 판별값은 `CreatorChannelView`에서 title bar와 floating menu 표시 조건에 함께 사용한다.
|
||||
|
||||
### 7.2 Title Bar 본인 채널 상태
|
||||
- 본인 채널이 아닌 경우 기존 title bar 동작을 유지한다.
|
||||
- 본인 채널이면 title bar 우측의 팔로우 버튼, 알림 버튼, 더보기 버튼을 모두 표시하지 않는다.
|
||||
- 본인 채널이어도 back 버튼과 scroll progress에 따른 title bar 배경/닉네임 노출은 기존처럼 유지한다.
|
||||
- 우측 버튼이 사라져도 닉네임이 back 버튼 영역과 겹치지 않아야 한다.
|
||||
- 팔로우/알림 mutation 로직은 본인 채널에서는 호출되지 않아야 한다.
|
||||
|
||||
### 7.3 홈 탭 Floating Button 닫힘 상태
|
||||
- 본인 채널이고 `selectedTab == .home`일 때만 표시한다.
|
||||
- 버튼 위치는 화면 우측 하단이며 Figma 기준 bottom/right `14pt`를 우선한다.
|
||||
- 버튼은 원형, 배경색은 `#00BDF7` 또는 기존 디자인 토큰 중 동일한 soda blue 계열을 사용한다.
|
||||
- 버튼 크기는 Figma의 `38pt` icon + `14pt` padding 구조를 기준으로 한다.
|
||||
- 닫힘 상태 plus icon은 기존 asset `ic_plus_no_bg`를 사용한다.
|
||||
- 앱 하단 player가 표시되는 경우 floating button과 겹치는지 확인하고, 기존 `LiveView` floating button처럼 필요한 경우 player 표시 상태를 고려한다.
|
||||
|
||||
### 7.4 Floating Menu 열림 상태
|
||||
- Floating button 터치 시 menu가 열린다.
|
||||
- 열림 상태에서는 화면 전체에 black dim `opacity 0.4`를 적용한다.
|
||||
- dim은 status bar와 title bar를 포함한 전체 화면 위에 표시한다.
|
||||
- dim 영역 탭 또는 닫기 버튼 탭으로 menu를 닫는다.
|
||||
- 버튼은 우측 하단에 세로로 표시하며 아래에서 위 순서로 닫기, 라이브 만들기, 오디오 콘텐츠 올리기, 커뮤니티 글 올리기를 배치한다.
|
||||
- 사용자에게 보이는 위치 기준 위에서부터 아래 순서는 다음과 같다.
|
||||
1. 커뮤니티 글 올리기: `ic_new_upload_community_post`
|
||||
2. 오디오 콘텐츠 올리기: `ic_new_upload_audio`
|
||||
3. 라이브 만들기: `ic_new_create_live`
|
||||
4. 닫기: `ic_new_x_black`
|
||||
- 커뮤니티 글 올리기, 오디오 콘텐츠 올리기 버튼 배경은 Figma의 soda blue 계열을 사용한다.
|
||||
- 라이브 만들기 버튼 배경은 Figma의 darker soda blue 계열을 사용한다.
|
||||
- 닫기 버튼 배경은 white를 사용한다.
|
||||
|
||||
### 7.5 Interaction Animation
|
||||
- Floating menu 열림/닫힘 animation은 SwiftUI `interpolatingSpring` 또는 동등한 spring animation을 사용한다.
|
||||
- Figma 수치 기준:
|
||||
- Mass: `1`
|
||||
- Stiffness: `256`
|
||||
- Damping: `24`
|
||||
- 버튼들은 열림 상태에서 아래 기준 위치에서 위로 펼쳐지는 형태로 보이게 한다.
|
||||
- 닫힘 상태로 전환 시 버튼들은 닫기 버튼 위치로 수렴하거나 opacity/scale이 줄어드는 형태로 정리한다.
|
||||
- animation 중 중복 터치로 상태가 꼬이지 않도록 `isCreatorActionMenuPresented` 단일 상태를 기준으로 렌더링한다.
|
||||
|
||||
### 7.6 Button Actions
|
||||
- 커뮤니티 글 올리기:
|
||||
- 기존 `AppStep.creatorCommunityWrite(onSuccess:)`로 이동한다.
|
||||
- 작성 성공 시 크리에이터 채널 홈 데이터를 다시 조회한다.
|
||||
- 오디오 콘텐츠 올리기:
|
||||
- 기존 `AppStep.createContent` 진입과 기존 오디오 콘텐츠 업로드 화면을 그대로 사용한다.
|
||||
- 기존 업로드 화면의 입력 항목, 검증, 업로드 API, 완료 팝업 문구는 변경하지 않는다.
|
||||
- 업로드 완료 팝업의 확인 액션에서 기존 `AppState.shared.back()` 동작을 유지하되, 크리에이터 채널에서 진입한 경우 홈 갱신 callback을 함께 실행한다.
|
||||
- 업로드 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.
|
||||
- 라이브 만들기:
|
||||
- 기존 `AppStep.createLive(timeSettingMode: .NOW, onSuccess:)`로 이동한다.
|
||||
- 생성 성공 시 기존 `LiveView.onCreateSuccess`와 동일하게 처리한다.
|
||||
- 기존 흐름에 맞춰 live main 데이터를 갱신하고, `response.channelName`이 있으면 생성된 room에 입장한다.
|
||||
- 크리에이터 채널로 돌아왔을 때 최신 상태가 보이도록 크리에이터 채널 홈 데이터도 다시 조회한다.
|
||||
- 각 액션 버튼 터치 시 floating menu는 먼저 닫고 이동한다.
|
||||
|
||||
### 7.7 Accessibility / Interaction
|
||||
- 각 버튼에는 VoiceOver label을 제공한다.
|
||||
- dim overlay는 버튼 뒤 콘텐츠 터치를 차단해야 한다.
|
||||
- 본인 채널이 아닌 상태에서는 floating menu 관련 overlay가 표시되거나 터치를 가로채지 않아야 한다.
|
||||
|
||||
## 8. UX / UI Expectations
|
||||
- 기존 크리에이터 채널 홈의 scroll, sticky tab-bar, title bar background progress 동작을 유지한다.
|
||||
- Floating menu는 화면 최상위 overlay로 표시되어 홈 콘텐츠, tab-bar, title bar와 시각적으로 겹치더라도 dim 위에 버튼이 명확히 보여야 한다.
|
||||
- 버튼 크기와 위치는 Figma iPhone 13 width `402pt` 기준을 SwiftUI responsive layout으로 변환한다.
|
||||
- 버튼이 safe area bottom과 지나치게 붙지 않도록 `safeAreaInsets.bottom`을 고려하되, Figma의 `14pt` 시각 간격을 우선한다.
|
||||
|
||||
## 9. Technical Constraints
|
||||
- 기능 변경은 `SodaLive/Sources/V2/CreatorChannel/**` 하위에서 해결한다.
|
||||
- 크리에이터 채널 전용 floating menu는 `SodaLive/Sources/V2/CreatorChannel/Components/**` 아래에 둔다.
|
||||
- 기존 `CreatorChannelViewModel.fetchHome(creatorId:)`와 `CreatorChannelHomeResponse`를 재사용한다.
|
||||
- 신규 API는 만들지 않는다.
|
||||
- 오디오 콘텐츠 업로드 성공 후 홈 갱신을 위해 기존 `AppStep.createContent`와 `ContentCreateView`에 optional success callback을 추가할 수 있다. 이때 기본 진입의 기존 동작은 바꾸지 않는다.
|
||||
- 신규 사용자 노출 문구가 필요하면 `SodaLive/Sources/I18n/I18n.swift`에 ko/en/ja를 추가한다.
|
||||
- 아이콘 asset은 `SodaLive/Resources/Assets.xcassets/v2/**`에 존재하는 지정 asset을 사용한다.
|
||||
|
||||
## 10. Success Criteria
|
||||
- 본인 채널에서 title bar 우측 팔로우/알림/더보기 버튼이 보이지 않는다.
|
||||
- 타인 채널에서는 기존 title bar 우측 버튼들이 기존 조건대로 보인다.
|
||||
- 본인 채널 홈 탭에서 floating button이 보이고, 홈 외 탭으로 이동하면 보이지 않는다.
|
||||
- Floating button 터치 시 dim과 4개 버튼이 Figma 순서대로 표시된다.
|
||||
- 닫기 버튼 또는 dim 탭으로 floating menu가 닫힌다.
|
||||
- 커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 버튼이 기존 라우팅으로 이동한다.
|
||||
- 커뮤니티 글 작성 성공 후 크리에이터 채널 홈이 갱신된다.
|
||||
- 오디오 콘텐츠 업로드 성공 후 크리에이터 채널 홈이 갱신된다.
|
||||
- 라이브 생성 성공 후 기존 `LiveView.onCreateSuccess`와 동일한 이동/갱신 흐름을 수행하고, 크리에이터 채널 홈도 갱신 대상에 포함된다.
|
||||
- `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build`가 성공한다.
|
||||
|
||||
## 11. Decisions
|
||||
- 닫힘 상태 plus icon은 `ic_plus_no_bg`를 사용한다.
|
||||
- 오디오 콘텐츠 올리기 진입은 기존 `AppStep.createContent`와 기존 업로드 화면을 그대로 사용하고, 성공 callback만 추가해 홈 갱신을 연결한다.
|
||||
- 라이브 만들기 성공 후 이동/갱신은 기존 `LiveView.onCreateSuccess`와 동일하게 처리한다.
|
||||
- 오디오 콘텐츠 업로드 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.
|
||||
- 커뮤니티 포스트 작성 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.
|
||||
|
||||
## 12. Open Questions
|
||||
- 해당 없음.
|
||||
Reference in New Issue
Block a user