From 3e96a5435e491c6a5b3b7f803ad07672a532096a Mon Sep 17 00:00:00 2001 From: klaus Date: Tue, 16 Jun 2026 22:03:28 +0900 Subject: [PATCH] =?UTF-8?q?docs(creator):=20=EB=B3=B8=EC=9D=B8=20FAB=20?= =?UTF-8?q?=EA=B8=B0=EC=A4=80=EC=9D=84=20=EA=B0=B1=EC=8B=A0=ED=95=9C?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20260611_크리에이터_채널_홈_탭/plan-task.md | 17 +++++++++++------ docs/20260611_크리에이터_채널_홈_탭/prd.md | 12 ++++++------ 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/20260611_크리에이터_채널_홈_탭/plan-task.md b/docs/20260611_크리에이터_채널_홈_탭/plan-task.md index 47c7e619..3b356563 100644 --- a/docs/20260611_크리에이터_채널_홈_탭/plan-task.md +++ b/docs/20260611_크리에이터_채널_홈_탭/plan-task.md @@ -63,9 +63,9 @@ - Phase 12: 필수 참조 - 후원 empty UI는 Figma `290:8820`, 활동 영역은 Figma `296:15001`, 홈 컨텐츠 보정은 Figma `296:14895`를 기준으로 한다. - Phase 13: 필수 참조 - - 크리에이터 본인 페이지 Floating Button 기본 상태는 Figma `665:19092`, 확장/dim 상태는 Figma `665:19223`을 기준으로 한다. + - 크리에이터 본인 페이지 Floating Button 기본 상태는 Figma `665:19221`, 확장/dim 상태는 Figma `665:19352`를 기준으로 한다. - 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에서 처리한다. -- [ ] **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/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_close.xml` - Figma 기준: - - 기본 상태: `665:19092` - - 확장/dim 상태: `665:19223` + - 기본 상태: `665:19221` + - 확장/dim 상태: `665:19352` - 작업: - Floating Button은 크리에이터 본인 페이지의 `홈` 탭에서만 표시한다. - 기본 FAB는 우측/하단 safe area를 고려해 14dp inset으로 배치한다. @@ -1344,6 +1344,11 @@ - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.CreatorChannelActivitySourceTest"` - `./gradlew :app:mergeDebugResources` - `./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 보정** - 수정: @@ -1404,7 +1409,7 @@ - 타인 페이지에서 팔로우/알림/더보기/대화/DM 동작이 PRD와 일치한다. - 본인 페이지에서 팔로우/알림/더보기/대화가 제거되고 `DM 확인하기`와 FAB가 표시된다. - `DM 확인하기` 터치 시 메인 `대화` 탭과 `DM` 필터가 선택된다. - - FAB 기본/확장/dim/닫기/3개 액션이 Figma `665:19092`, `665:19223`과 일치한다. + - FAB 기본/확장/dim/닫기/3개 액션이 Figma `665:19221`, `665:19352`와 일치한다. - 후원 empty, 최신 콘텐츠 터치, 상대 날짜, 오디오 높이, 시리즈 original tag, 활동 날짜/D+n이 PRD와 일치한다. - sticky title-bar nickname과 tab typography가 Figma/PRD와 일치한다. - 기대 결과: diff --git a/docs/20260611_크리에이터_채널_홈_탭/prd.md b/docs/20260611_크리에이터_채널_홈_탭/prd.md index 0da4784e..47b8bade 100644 --- a/docs/20260611_크리에이터_채널_홈_탭/prd.md +++ b/docs/20260611_크리에이터_채널_홈_탭/prd.md @@ -337,9 +337,9 @@ enum class CreatorActivityType(val code: String) { #### Requirements - 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 터치 시 Figma `665:19223`처럼 화면 전체에 dim을 적용하고 액션 버튼 목록을 펼친다. +- 기본 Floating Button 터치 시 Figma `665:19352`처럼 화면 전체에 dim을 적용하고 액션 버튼 목록을 펼친다. - dim은 화면 전체를 덮으며 Figma 기준 `rgba(0,0,0,0.4)`로 적용한다. - 펼쳐진 액션 버튼은 우측 하단 정렬을 유지하고, 버튼 간 세로 간격은 Figma 기준 14dp를 따른다. - 펼쳐진 액션 버튼은 위에서부터 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 순서로 표시한다. @@ -347,7 +347,7 @@ enum class CreatorActivityType(val code: String) { - `오디오 콘텐츠 올리기` 버튼 아이콘은 `ic_new_upload_audio`를 사용한다. - `라이브 만들기` 버튼 아이콘은 `ic_new_create_live`를 사용한다. - `닫기` 버튼 아이콘은 `ic_new_x_black`을 사용한다. -- `닫기` 버튼은 Figma `665:19223` 기준 흰색 배경을 사용하고, 터치 시 dim과 펼쳐진 액션 버튼을 닫아 기본 Floating Button 상태로 복귀한다. +- `닫기` 버튼은 Figma `665:19352` 기준 흰색 배경을 사용하고, 터치 시 dim과 펼쳐진 액션 버튼을 닫아 기본 Floating Button 상태로 복귀한다. - Floating Button 펼침/닫힘 Interaction Animation은 Spring easing을 사용한다. - Spring animation parameter는 Mass `1`, Stiffness `256`, Damping `24`를 따른다. - Floating Button과 펼쳐진 버튼은 홈 탭 컨텐츠 스크롤 위에 overlay되어야 하며, tab-bar sticky 상태와 겹쳐 조작 불가능해지면 안 된다. @@ -530,8 +530,8 @@ tab-bar는 스크롤 중 title-bar 하단에 고정되는 sticky 영역으로 - 더보기 버튼 터치 시 기존 `UserProfileActivity`의 프로필 액션 메뉴와 동일한 차단/차단 해제, 사용자 신고, 프로필 신고 액션을 BottomSheet로 표시한다. - 팔로잉 상태에서 `iv_bell` 터치 시 `follow=true`, `notify=false` API를 바로 호출하고 성공 후 알림 꺼짐 아이콘으로 변경된다. - 팔로잉 상태에서 `layout_follow_capsule` 터치 시 `follow=false`, `notify=false` API를 바로 호출하고 완료/오류 토스트를 표시한다. -- 크리에이터 본인 페이지의 홈 탭 우측 하단에는 Figma `665:19092` 기준 Floating Button이 표시된다. -- Floating Button 터치 시 Figma `665:19223` 기준 전체 화면 dim과 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 버튼이 표시된다. +- 크리에이터 본인 페이지의 홈 탭 우측 하단에는 Figma `665:19221` 기준 Floating Button이 표시된다. +- Floating Button 터치 시 Figma `665:19352` 기준 전체 화면 dim과 `커뮤니티 글 올리기`, `오디오 콘텐츠 올리기`, `라이브 만들기`, `닫기` 버튼이 표시된다. - 펼침/닫힘 애니메이션은 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`을 사용한다. - 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: 사용자 요청에 따라 시리즈 아이템의 이미지 위 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 `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`와 구현/빌드/테스트는 실행하지 않았다.