Files
sodalive-ios/docs/20260818_CapsuleTabBar_선택_색상_변경/prd.md

91 lines
6.1 KiB
Markdown

# PRD: CapsuleTabBar 선택 색상 변경
## 문서 정보
| 항목 | 내용 |
|---|---|
| 문서 상태 | 구현 및 사용자 수동 검증 완료 |
| 작성일 | 2026-08-18 |
| 최종 수정일 | 2026-08-18 |
| 대상 기능 | 공유 `CapsuleTabBar` 선택 상태 색상 |
| 관련 구현 계획 | `docs/20260818_CapsuleTabBar_선택_색상_변경/plan-task.md` |
| 관련 API Contract | 해당 없음 |
| 관련 review | 해당 없음 |
## 1. Overview
공유 `CapsuleTabBar`의 선택 상태를 흰색 배경, 검은색 텍스트, 흰색 테두리로 변경한다. 이 컴포넌트를 사용하는 `CreatorChannelAudioTabView`, `MainChatView`, `MainContentAllView``CapsuleTabBar_Previews`에 같은 선택 상태가 적용된다.
## 2. Problem Statement
변경 전 선택 상태는 `Color.soda400` 배경과 테두리, `Color.white` 텍스트를 사용했다. 승인된 화면 기준에 맞춰 공유 컴포넌트의 선택 상태만 변경해야 하며, 호출 화면마다 별도 스타일을 추가하면 상태가 달라질 위험이 있다.
## 3. Goals
- 선택된 탭은 배경 `Color.white`, 텍스트 `Color.black`, 테두리 `Color.white`로 표시한다.
- 모든 production 호출부와 `CapsuleTabBar_Previews`에서 같은 선택 상태를 확인할 수 있다.
- 기존 선택 바인딩과 탭 동작을 유지한다.
## 4. Non-Goals
- 선택되지 않은 탭의 배경 `Color.black`, 텍스트 `Color.white`, 테두리 `Color.gray700`를 변경하지 않는다.
- 크기, 간격, typography, 가로 스크롤, 선택 바인딩과 action을 변경하지 않는다.
- API, 데이터 처리, 화면별 별도 색상, 디자인 토큰, 새 abstraction, 리팩터링을 추가하지 않는다.
- Swift source, 프로젝트 파일, API, 기존 기능 문서는 이 문서 작성 세션에서 변경하지 않는다.
## 5. Core Requirements
| ID | 상태 | 요구사항 | 수용 기준 | 계획 연결 |
|---|---|---|---|---|
| `CTB-001` | 확정 | `CapsuleTabBar`의 선택 상태 배경은 `Color.white`다. | 선택 항목의 배경 표현식이 `Color.white`이고 세 화면과 Preview에서 선택 탭이 흰색 배경으로 보인다. | `P2-T1` |
| `CTB-002` | 확정 | `CapsuleTabBar`의 선택 상태 텍스트는 `Color.black`이다. | 선택 항목의 텍스트 표현식이 `Color.black`이고 세 화면과 Preview에서 선택 탭 텍스트가 검은색으로 보인다. | `P2-T1` |
| `CTB-003` | 확정 | `CapsuleTabBar`의 선택 상태 테두리는 `Color.white`다. | 선택 항목의 테두리 표현식이 `Color.white`이고 세 화면과 Preview에서 선택 탭 테두리가 흰색으로 보인다. | `P2-T1` |
| `CTB-004` | 확정 | 선택되지 않은 상태와 기존 상호작용은 유지한다. | 미선택 항목은 `Color.black`, `Color.white`, `Color.gray700`을 유지하고 탭 선택 시 기존 `Binding`과 action이 그대로 동작한다. | `P2-GATE` |
## 6. 대상 화면과 적용 범위
| 구분 | 경로 | 확인 내용 |
|---|---|---|
| 크리에이터 채널 오디오 | `SodaLive/Sources/V2/CreatorChannel/Audio/CreatorChannelAudioTabView.swift` | 테마 탭의 선택 상태 |
| 메인 채팅 | `SodaLive/Sources/V2/Main/Chat/MainChatView.swift` | 채팅 필터 탭의 선택 상태 |
| 메인 콘텐츠 전체 | `SodaLive/Sources/V2/Main/Content/All/MainContentAllView.swift` | 콘텐츠 유형 탭의 선택 상태 |
| SwiftUI Preview | `SodaLive/Sources/V2/Component/CapsuleTabBar.swift` | `CapsuleTabBar_Previews`의 선택 상태 |
모든 production 사용은 위 세 화면이며, 구현 변경 대상은 공유 컴포넌트 파일 하나다.
## 7. Technical Constraints
- 미래 구현 수정 파일은 `SodaLive/Sources/V2/Component/CapsuleTabBar.swift`만 사용한다.
- 현재 확인된 호출부와 Preview는 수정하지 않고 공유 컴포넌트 변경 결과를 검증하는 대상이다.
- CocoaPods 의존성과 기존 SwiftUI, `Color`, `SodaSpacing` 사용 방식을 유지한다.
- 현재 테스트 번들 타깃이 확인되지 않았으므로 새 테스트 타깃, 테스트 파일, 의존성을 추가하지 않는다.
## 8. Acceptance Criteria
- [x] `CreatorChannelAudioTabView`에서 선택된 테마 탭의 배경, 텍스트, 테두리가 각각 `Color.white`, `Color.black`, `Color.white`다.
- [x] `MainChatView`에서 선택된 채팅 필터 탭의 배경, 텍스트, 테두리가 각각 `Color.white`, `Color.black`, `Color.white`다.
- [x] `MainContentAllView`에서 선택된 콘텐츠 유형 탭의 배경, 텍스트, 테두리가 각각 `Color.white`, `Color.black`, `Color.white`다.
- [x] `CapsuleTabBar_Previews`에서 선택된 탭의 배경, 텍스트, 테두리가 각각 `Color.white`, `Color.black`, `Color.white`다.
- [x] 미선택 탭은 배경 `Color.black`, 텍스트 `Color.white`, 테두리 `Color.gray700`을 유지한다.
- [x] 탭을 선택하면 기존 선택 바인딩과 action으로 선택 항목이 바뀐다.
- [x] `SodaLive` Debug 빌드가 성공한다.
## 9. Related Existing Documents
- `docs/20260704_크리에이터_채널_오디오_탭/prd.md`
- `docs/20260708_홈_채팅_탭/prd.md`
- `docs/plan-task/20260519_재사용타이틀탭텍스트바컴포넌트.md`
## 10. Open Questions
현재 없음. 선택 상태의 세 색상과 수정 파일 범위는 승인됐다.
## 11. Decision Log
| 날짜 | ID | 상태 | 결정 | 근거 | 영향 |
|---|---|---|---|---|---|
| 2026-08-18 | `DEC-CTB-001` | 확정 | 선택 상태를 배경 `Color.white`, 텍스트 `Color.black`, 테두리 `Color.white`로 변경한다. | 승인된 요구사항 | `CTB-001`~`CTB-003`, `P2-T1` |
| 2026-08-18 | `DEC-CTB-002` | 확정 | 선택되지 않은 색상, 레이아웃, 스크롤, 바인딩, action, API와 데이터 동작은 유지한다. | 승인된 제외 범위 | `CTB-004`, `P2-GATE` |
| 2026-08-18 | `DEC-CTB-003` | 확정 | 미래 구현은 `SodaLive/Sources/V2/Component/CapsuleTabBar.swift`만 수정한다. | 공유 컴포넌트가 세 production 호출부와 Preview를 제공한다. | `P2-T1` |
| 2026-08-18 | `DEC-CTB-004` | 확정 | 세 production 화면과 Preview의 수동 검증을 완료 처리한다. | 사용자 수동 확인 완료 결과. | `CTB-001`~`CTB-004`, `P2-GATE` |