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

CreatorChannelAudioTabView에서 선택된 테마 탭의 배경, 텍스트, 테두리가 각각 Color.white, Color.black, Color.white다.
MainChatView에서 선택된 채팅 필터 탭의 배경, 텍스트, 테두리가 각각 Color.white, Color.black, Color.white다.
MainContentAllView에서 선택된 콘텐츠 유형 탭의 배경, 텍스트, 테두리가 각각 Color.white, Color.black, Color.white다.
CapsuleTabBar_Previews에서 선택된 탭의 배경, 텍스트, 테두리가 각각 Color.white, Color.black, Color.white다.
미선택 탭은 배경 Color.black, 텍스트 Color.white, 테두리 Color.gray700을 유지한다.
탭을 선택하면 기존 선택 바인딩과 action으로 선택 항목이 바뀐다.
SodaLive Debug 빌드가 성공한다.

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`

6.1 KiB Raw Permalink Blame History