docs(creator): 본인 FAB 기준을 갱신한다

This commit is contained in:
2026-06-16 22:03:28 +09:00
parent 433bf172ce
commit 3e96a5435e
2 changed files with 17 additions and 12 deletions

View File

@@ -63,9 +63,9 @@
- Phase 12: 필수 참조 - Phase 12: 필수 참조
- 후원 empty UI는 Figma `290:8820`, 활동 영역은 Figma `296:15001`, 홈 컨텐츠 보정은 Figma `296:14895`를 기준으로 한다. - 후원 empty UI는 Figma `290:8820`, 활동 영역은 Figma `296:15001`, 홈 컨텐츠 보정은 Figma `296:14895`를 기준으로 한다.
- Phase 13: 필수 참조 - Phase 13: 필수 참조
- 크리에이터 본인 페이지 Floating Button 기본 상태는 Figma `665:19092`, 확장/dim 상태는 Figma `665:19223` 기준으로 한다. - 크리에이터 본인 페이지 Floating Button 기본 상태는 Figma `665:19221`, 확장/dim 상태는 Figma `665:19352` 기준으로 한다.
- Phase 14: 필수 참조 - Phase 14: 필수 참조
- 최종 수동 검증은 Figma `296:14890`, `296:14894`, `296:14895`, `290:8820`, `296:15001`, `665:19092`, `665:19223` 함께 대조한다. - 최종 수동 검증은 Figma `296:14890`, `296:14894`, `296:14895`, `290:8820`, `296:15001`, `665:19221`, `665:19352` 함께 대조한다.
--- ---
@@ -1317,7 +1317,7 @@
> 본인 페이지 전용 홈 탭 FAB와 확장 액션을 추가한다. 상단 액션 정책은 Phase 11에서 처리하고, FAB overlay/animation/버튼 액션은 이 Phase에서 처리한다. > 본인 페이지 전용 홈 탭 FAB와 확장 액션을 추가한다. 상단 액션 정책은 Phase 11에서 처리하고, FAB overlay/animation/버튼 액션은 이 Phase에서 처리한다.
- [ ] **Task 13.1: Floating Button 기본/확장 layout 추가** - [x] **Task 13.1: Floating Button 기본/확장 layout 추가**
- 수정: - 수정:
- `app/src/main/res/layout/activity_creator_channel.xml` - `app/src/main/res/layout/activity_creator_channel.xml`
- `app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt` - `app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt`
@@ -1326,8 +1326,8 @@
- `app/src/main/res/drawable/bg_creator_channel_owner_fab.xml` - `app/src/main/res/drawable/bg_creator_channel_owner_fab.xml`
- `app/src/main/res/drawable/bg_creator_channel_owner_fab_close.xml` - `app/src/main/res/drawable/bg_creator_channel_owner_fab_close.xml`
- Figma 기준: - Figma 기준:
- 기본 상태: `665:19092` - 기본 상태: `665:19221`
- 확장/dim 상태: `665:19223` - 확장/dim 상태: `665:19352`
- 작업: - 작업:
- Floating Button은 크리에이터 본인 페이지의 `홈` 탭에서만 표시한다. - Floating Button은 크리에이터 본인 페이지의 `홈` 탭에서만 표시한다.
- 기본 FAB는 우측/하단 safe area를 고려해 14dp inset으로 배치한다. - 기본 FAB는 우측/하단 safe area를 고려해 14dp inset으로 배치한다.
@@ -1344,6 +1344,11 @@
- `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.CreatorChannelActivitySourceTest"` - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.CreatorChannelActivitySourceTest"`
- `./gradlew :app:mergeDebugResources` - `./gradlew :app:mergeDebugResources`
- `./gradlew :app:compileDebugKotlin` - `./gradlew :app:compileDebugKotlin`
- 검증 기록:
- 2026-06-16: Figma `665:19221`, `665:19352`와 기존 Activity overlay 구조를 기준으로 본인 홈 탭 전용 FAB 기본/확장 layout을 `activity_creator_channel.xml`에 추가했다. Activity 루트가 이미 `ConstraintLayout` overlay 구조이고 `CreatorChannelHomeFragment` 루트는 단일 RecyclerView이므로 FAB는 Activity에 배치했다. 기본 FAB는 14dp inset, `soda_400` capsule 배경, 14dp padding, 38dp icon, elevation을 적용했고, 확장 상태는 `#66000000` dim과 icon-only 원형 버튼을 14dp 간격으로 배치했다. dim 영역은 기존 overlay UX에 맞춰 터치 시 닫히도록 확정했다.
- 2026-06-16: RED로 `CreatorChannelActivitySourceTest.Phase 13 owner FAB source는 본인 홈 탭 기본 확장 layout을 가진다`를 추가하고 실행해 `owner_fab_dim` 등 레이아웃 미구현으로 실패함을 확인했다. 구현 후 동일 focused test와 `./gradlew :app:mergeDebugResources`, `./gradlew :app:compileDebugKotlin`, `git diff --check`가 PASS했다. `CreatorChannelActivitySourceTest` 전체 실행은 기존 후원 섹션 source 계약(`item_creator_channel_home_donation.xml` 높이 `196dp` 기대, 현재 `wrap_content`) 1건으로 실패했으며 이번 FAB 변경과 무관해 수정하지 않았다.
- 2026-06-16: `ic_new_upload_community_post`, `ic_new_upload_audio`, `ic_new_create_live`, `ic_new_x_black`는 기존 `drawable-mdpi` PNG가 있음을 재확인했고, 처음 잘못 추가했던 동일 이름 vector XML 4개는 제거해 기존 디자인 에셋을 사용하도록 정리했다.
- 2026-06-16: 사용자 피드백으로 새 Figma 기본 FAB `665:19221`, 확장 메뉴 `665:19352`를 확인한 결과, 확장 상태는 텍스트 pill 버튼이 아니라 66dp 원형 icon-only FAB 4개 구조임을 확인했다. RED로 source test 계약을 갱신해 기존 텍스트 pill 구현 실패를 확인했고, `activity_creator_channel.xml`의 확장 버튼을 `FrameLayout` 원형 FAB와 38dp icon으로 보정했다. 커뮤니티/오디오 버튼은 `soda_400`, 라이브 버튼은 Figma 기준 `soda_800`, 닫기 버튼은 흰색 배경을 사용한다. 보정 후 focused source test, `./gradlew :app:mergeDebugResources`, `./gradlew :app:compileDebugKotlin`, `git diff --check`가 PASS했다.
- [ ] **Task 13.2: Floating Button Spring animation과 하단 inset 보정** - [ ] **Task 13.2: Floating Button Spring animation과 하단 inset 보정**
- 수정: - 수정:
@@ -1404,7 +1409,7 @@
- 타인 페이지에서 팔로우/알림/더보기/대화/DM 동작이 PRD와 일치한다. - 타인 페이지에서 팔로우/알림/더보기/대화/DM 동작이 PRD와 일치한다.
- 본인 페이지에서 팔로우/알림/더보기/대화가 제거되고 `DM 확인하기`와 FAB가 표시된다. - 본인 페이지에서 팔로우/알림/더보기/대화가 제거되고 `DM 확인하기`와 FAB가 표시된다.
- `DM 확인하기` 터치 시 메인 `대화` 탭과 `DM` 필터가 선택된다. - `DM 확인하기` 터치 시 메인 `대화` 탭과 `DM` 필터가 선택된다.
- FAB 기본/확장/dim/닫기/3개 액션이 Figma `665:19092`, `665:19223` 일치한다. - FAB 기본/확장/dim/닫기/3개 액션이 Figma `665:19221`, `665:19352` 일치한다.
- 후원 empty, 최신 콘텐츠 터치, 상대 날짜, 오디오 높이, 시리즈 original tag, 활동 날짜/D+n이 PRD와 일치한다. - 후원 empty, 최신 콘텐츠 터치, 상대 날짜, 오디오 높이, 시리즈 original tag, 활동 날짜/D+n이 PRD와 일치한다.
- sticky title-bar nickname과 tab typography가 Figma/PRD와 일치한다. - sticky title-bar nickname과 tab typography가 Figma/PRD와 일치한다.
- 기대 결과: - 기대 결과:

View File

@@ -337,9 +337,9 @@ enum class CreatorActivityType(val code: String) {
#### Requirements #### Requirements
- Floating Button은 크리에이터 본인 페이지의 `홈` 탭에서만 표시한다. - Floating Button은 크리에이터 본인 페이지의 `홈` 탭에서만 표시한다.
- 기본 Floating Button은 Figma `665:19092`를 기준으로 우측 하단에 표시한다. - 기본 Floating Button은 Figma `665:19221`를 기준으로 우측 하단에 표시한다.
- 기본 Floating Button은 화면 우측/하단 safe area를 고려한 14dp inset, `soda/400` 배경, 100dp radius, 14dp padding, 38dp 아이콘 영역, `0px 0px 8px rgba(0,0,0,0.12)` 수준의 shadow를 따른다. - 기본 Floating Button은 화면 우측/하단 safe area를 고려한 14dp inset, `soda/400` 배경, 100dp radius, 14dp padding, 38dp 아이콘 영역, `0px 0px 8px rgba(0,0,0,0.12)` 수준의 shadow를 따른다.
- 기본 Floating Button 터치 시 Figma `665:19223`처럼 화면 전체에 dim을 적용하고 액션 버튼 목록을 펼친다. - 기본 Floating Button 터치 시 Figma `665:19352`처럼 화면 전체에 dim을 적용하고 액션 버튼 목록을 펼친다.
- dim은 화면 전체를 덮으며 Figma 기준 `rgba(0,0,0,0.4)`로 적용한다. - dim은 화면 전체를 덮으며 Figma 기준 `rgba(0,0,0,0.4)`로 적용한다.
- 펼쳐진 액션 버튼은 우측 하단 정렬을 유지하고, 버튼 간 세로 간격은 Figma 기준 14dp를 따른다. - 펼쳐진 액션 버튼은 우측 하단 정렬을 유지하고, 버튼 간 세로 간격은 Figma 기준 14dp를 따른다.
- 펼쳐진 액션 버튼은 위에서부터 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 순서로 표시한다. - 펼쳐진 액션 버튼은 위에서부터 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 순서로 표시한다.
@@ -347,7 +347,7 @@ enum class CreatorActivityType(val code: String) {
- `오디오 콘텐츠 올리기` 버튼 아이콘은 `ic_new_upload_audio`를 사용한다. - `오디오 콘텐츠 올리기` 버튼 아이콘은 `ic_new_upload_audio`를 사용한다.
- `라이브 만들기` 버튼 아이콘은 `ic_new_create_live`를 사용한다. - `라이브 만들기` 버튼 아이콘은 `ic_new_create_live`를 사용한다.
- `닫기` 버튼 아이콘은 `ic_new_x_black`을 사용한다. - `닫기` 버튼 아이콘은 `ic_new_x_black`을 사용한다.
- `닫기` 버튼은 Figma `665:19223` 기준 흰색 배경을 사용하고, 터치 시 dim과 펼쳐진 액션 버튼을 닫아 기본 Floating Button 상태로 복귀한다. - `닫기` 버튼은 Figma `665:19352` 기준 흰색 배경을 사용하고, 터치 시 dim과 펼쳐진 액션 버튼을 닫아 기본 Floating Button 상태로 복귀한다.
- Floating Button 펼침/닫힘 Interaction Animation은 Spring easing을 사용한다. - Floating Button 펼침/닫힘 Interaction Animation은 Spring easing을 사용한다.
- Spring animation parameter는 Mass `1`, Stiffness `256`, Damping `24`를 따른다. - Spring animation parameter는 Mass `1`, Stiffness `256`, Damping `24`를 따른다.
- Floating Button과 펼쳐진 버튼은 홈 탭 컨텐츠 스크롤 위에 overlay되어야 하며, tab-bar sticky 상태와 겹쳐 조작 불가능해지면 안 된다. - Floating Button과 펼쳐진 버튼은 홈 탭 컨텐츠 스크롤 위에 overlay되어야 하며, tab-bar sticky 상태와 겹쳐 조작 불가능해지면 안 된다.
@@ -530,8 +530,8 @@ tab-bar는 스크롤 중 title-bar 하단에 고정되는 sticky 영역으로
- 더보기 버튼 터치 시 기존 `UserProfileActivity`의 프로필 액션 메뉴와 동일한 차단/차단 해제, 사용자 신고, 프로필 신고 액션을 BottomSheet로 표시한다. - 더보기 버튼 터치 시 기존 `UserProfileActivity`의 프로필 액션 메뉴와 동일한 차단/차단 해제, 사용자 신고, 프로필 신고 액션을 BottomSheet로 표시한다.
- 팔로잉 상태에서 `iv_bell` 터치 시 `follow=true`, `notify=false` API를 바로 호출하고 성공 후 알림 꺼짐 아이콘으로 변경된다. - 팔로잉 상태에서 `iv_bell` 터치 시 `follow=true`, `notify=false` API를 바로 호출하고 성공 후 알림 꺼짐 아이콘으로 변경된다.
- 팔로잉 상태에서 `layout_follow_capsule` 터치 시 `follow=false`, `notify=false` API를 바로 호출하고 완료/오류 토스트를 표시한다. - 팔로잉 상태에서 `layout_follow_capsule` 터치 시 `follow=false`, `notify=false` API를 바로 호출하고 완료/오류 토스트를 표시한다.
- 크리에이터 본인 페이지의 홈 탭 우측 하단에는 Figma `665:19092` 기준 Floating Button이 표시된다. - 크리에이터 본인 페이지의 홈 탭 우측 하단에는 Figma `665:19221` 기준 Floating Button이 표시된다.
- Floating Button 터치 시 Figma `665:19223` 기준 전체 화면 dim과 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 버튼이 표시된다. - Floating Button 터치 시 Figma `665:19352` 기준 전체 화면 dim과 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 버튼이 표시된다.
- 펼침/닫힘 애니메이션은 Spring easing, Mass `1`, Stiffness `256`, Damping `24`를 따른다. - 펼침/닫힘 애니메이션은 Spring easing, Mass `1`, Stiffness `256`, Damping `24`를 따른다.
- Floating Button 확장 상태의 버튼 아이콘은 위에서부터 `ic_new_upload_community_post`, `ic_new_upload_audio`, `ic_new_create_live`, `ic_new_x_black`을 사용한다. - Floating Button 확장 상태의 버튼 아이콘은 위에서부터 `ic_new_upload_community_post`, `ic_new_upload_audio`, `ic_new_create_live`, `ic_new_x_black`을 사용한다.
- tab-bar에 `홈`, `라이브`, `오디오`, `시리즈`, `커뮤니티`, `팬Talk`, `후원`이 표시된다. - tab-bar에 `홈`, `라이브`, `오디오`, `시리즈`, `커뮤니티`, `팬Talk`, `후원`이 표시된다.
@@ -625,4 +625,4 @@ tab-bar는 스크롤 중 title-bar 하단에 고정되는 sticky 영역으로
- 2026-06-16: 사용자 요청에 따라 오디오 아이템의 이미지 위 free tag(`tv_audio_content_free_tag`) width를 `wrap_content`로 표시하고, 오디오 컨텐츠 섹션 높이는 표시되는 콘텐츠 개수만큼만 차지하도록 PRD에 추가했다. 콘텐츠가 1개일 때 3개 이상 있을 때와 같은 고정 높이나 빈 placeholder 영역을 유지하지 않는 요구사항을 명시했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다. - 2026-06-16: 사용자 요청에 따라 오디오 아이템의 이미지 위 free tag(`tv_audio_content_free_tag`) width를 `wrap_content`로 표시하고, 오디오 컨텐츠 섹션 높이는 표시되는 콘텐츠 개수만큼만 차지하도록 PRD에 추가했다. 콘텐츠가 1개일 때 3개 이상 있을 때와 같은 고정 높이나 빈 placeholder 영역을 유지하지 않는 요구사항을 명시했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다.
- 2026-06-16: 사용자 요청에 따라 시리즈 아이템의 이미지 위 original tag(`layout_series_original_tag`) width/height를 `wrap_content`로 적용하고 Figma 기준 margin/padding을 따르도록 PRD에 추가했다. 또한 시리즈 아이템 터치 시 `series.seriesId`를 사용해 기존 시리즈 상세 페이지로 이동하는 요구사항을 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다. - 2026-06-16: 사용자 요청에 따라 시리즈 아이템의 이미지 위 original tag(`layout_series_original_tag`) width/height를 `wrap_content`로 적용하고 Figma 기준 margin/padding을 따르도록 PRD에 추가했다. 또한 시리즈 아이템 터치 시 `series.seriesId`를 사용해 기존 시리즈 상세 페이지로 이동하는 요구사항을 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다.
- 2026-06-16: Figma `296:15001` metadata와 screenshot을 확인해 활동 영역이 `SectionTitle(활동)`, label/value row, `Pretendard Variable Medium` 16px, label `#939393`, value white, 데뷔 값 예시 `2026.06.11(D+1)` 형식으로 구성됨을 확인했다. 사용자 요청에 따라 활동 영역 폰트, 데뷔 날짜 `yyyy.MM.dd(D+n)` 표시 형식, `activity.dDay` 누락 방지 요구사항을 PRD에 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다. - 2026-06-16: Figma `296:15001` metadata와 screenshot을 확인해 활동 영역이 `SectionTitle(활동)`, label/value row, `Pretendard Variable Medium` 16px, label `#939393`, value white, 데뷔 값 예시 `2026.06.11(D+1)` 형식으로 구성됨을 확인했다. 사용자 요청에 따라 활동 영역 폰트, 데뷔 날짜 `yyyy.MM.dd(D+n)` 표시 형식, `activity.dDay` 누락 방지 요구사항을 PRD에 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다.
- 2026-06-16: Figma `665:19092`, `665:19223` metadata와 screenshot을 확인해 크리에이터 본인 페이지 홈 탭의 기본 Floating Button과 dim 확장 상태를 확인했다. 사용자 요청에 따라 본인 페이지에서 팔로우/팔로잉, 더보기, `대화하기`를 제거하고 `DM 확인하기`를 통해 메인 `대화` 탭의 `DM` 필터 선택 상태로 이동하는 요구사항을 추가했다. 또한 본인 페이지 홈 탭 Floating Button, 전체 dim, 4개 버튼 순서와 아이콘, Spring animation parameter를 PRD에 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다. - 2026-06-16: Figma `665:19221`, `665:19352` metadata와 screenshot을 확인해 크리에이터 본인 페이지 홈 탭의 기본 Floating Button과 dim 확장 상태를 확인했다. 사용자 요청에 따라 본인 페이지에서 팔로우/팔로잉, 더보기, `대화하기`를 제거하고 `DM 확인하기`를 통해 메인 `대화` 탭의 `DM` 필터 선택 상태로 이동하는 요구사항을 추가했다. 또한 본인 페이지 홈 탭 Floating Button, 전체 dim, 4개 버튼 순서와 아이콘, Spring animation parameter를 PRD에 추가했다. 이번 단계는 PRD 문서 보완만 수행했으며 `plan-task.md`와 구현/빌드/테스트는 실행하지 않았다.