9.7 KiB
9.7 KiB
Reusable Title Bar and Tab-Text Bar Component Plan
For agentic workers: 구현 시 문서 범위를 벗어나지 않는다. 신규 UI 컴포넌트 작업이므로 구현 단계에서는
frontend-design또는 시각/UI 전용 실행 경로를 사용한다. 이 문서는 현재 요청에 따라 문서만 생성하며 코드 변경은 포함하지 않는다.
Goal: Home Title Bar, Default Title Bar, Tab-Text Bar를 SwiftUI 재사용 컴포넌트로 구현할 수 있도록 작업 범위, 파일 후보, 검증 기준을 정의한다.
Architecture: Title Bar는 공통 TitleBar 레이아웃을 기반으로 Home/Default 래퍼를 제공하고, Tab-Text Bar는 최대 3개 메뉴와 단일 선택 상태를 관리하는 별도 컴포넌트로 분리한다. 신규 파일은 SodaLive/Sources/V2/Component/**에 둔다.
Tech Stack: SwiftUI, existing SodaTypography, existing Color extension, existing asset catalog
기준 문서
- PRD:
docs/prd/20260519_재사용타이틀탭텍스트바컴포넌트_PRD.md - 검증 가이드:
docs/agent-guides/build-test-verification.md - 코드 스타일:
docs/agent-guides/code-style.md
구현 대상 파일 후보
생성
SodaLive/Sources/V2/Component/TitleBar.swift: 공통 Title Bar 레이아웃SodaLive/Sources/V2/Component/HomeTitleBar.swift:img_text_logo_v2기반 Home Title Bar 래퍼SodaLive/Sources/V2/Component/DefaultTitleBar.swift: 화면명 기반 Default Title Bar 래퍼SodaLive/Sources/V2/Component/TextTabBar.swift: 텍스트 탭 바
수정 후보
SodaLive.xcodeproj/project.pbxproj: 신규 Swift 파일을 앱 타깃 Sources에 포함
수정하지 않음
SodaLive/Sources/NavigationBar/HomeNavigationBar.swift: 기존 화면 의존 NavigationBar는 유지SodaLive/Sources/NavigationBar/DetailNavigationBar.swift: 기존 상세 NavigationBar는 유지SodaLive/Resources/Assets.xcassets/**: 신규 에셋 추가 없음
구현 체크리스트
Task 1: 컴포넌트 위치 확인
Files: SodaLive/Sources/V2/Component/**
- 신규 디렉터리
SodaLive/Sources/V2/Component를 생성한다. SodaLive/Sources/V2/Common은 UI 컴포넌트보다 공통 유틸리티/기반 타입으로 해석될 여지가 있으므로 사용하지 않는다.- QA: 선택한 위치가
AGENTS.md의 신규 코드 위치 규칙과 충돌하지 않는지 확인한다.
Task 2: Title Bar 공통 레이아웃 작성
Files: TitleBar.swift
- 높이
60,maxWidth: .infinity,Color.black배경을 적용한다. - 좌측 슬롯,
Spacer(), 우측 메뉴 슬롯으로 구성한다. - 모든 콘텐츠를 세로 가운데 정렬한다.
- 우측 메뉴 슬롯은 호출부가 아이콘과 액션을 변경할 수 있게 한다.
- 좌우 horizontal padding은
20을 적용한다. - QA: SwiftUI Preview 또는 실제 화면에서 높이 60과 좌우 배치가 유지되는지 확인한다.
Task 3: Home Title Bar 작성
Files: HomeTitleBar.swift
- 좌측에
Image("img_text_logo_v2")를 표시한다. - 공통
TitleBar에 우측 메뉴 슬롯을 전달한다. - 우측 메뉴 아이콘은 고정하지 않는다.
- QA: 좌측 로고와 우측 메뉴가 같은 세로 중앙선에 정렬되는지 확인한다.
Task 4: Default Title Bar 작성
Files: DefaultTitleBar.swift
- 좌측에 호출부가 전달한 화면명을 표시한다.
- 화면명 텍스트 스타일은 구현 시 Figma 기준과 기존 Typography 토큰을 대조해 최소 변경으로 적용한다.
- 공통
TitleBar에 우측 메뉴 슬롯을 전달한다. - QA: 긴 화면명 입력 시 한 줄 표시와 우측 메뉴 영역 침범 여부를 확인한다.
Task 5: Tab-Text Bar 작성
Files: TextTabBar.swift
- 높이
52,maxWidth: .infinity,Color.black배경을 적용한다. - 메뉴 수는 1개 이상 3개 이하를 정상 입력 조건으로 둔다.
- 텍스트 스타일은
.appFont(.heading3)를 사용한다. - 일반 상태 색상은
Color.gray600, 선택 상태 색상은Color.white를 사용한다. - 텍스트 메뉴는 왼쪽 정렬하고 메뉴 간 간격은
20을 적용한다. - 탭 선택 시 호출부 상태가 갱신되고 선택 상태가 하나만 유지되도록 API를 설계한다.
- QA: 1개, 2개, 3개 메뉴에서 선택 상태가 하나만 표시되는지 확인한다.
Task 6: 프로젝트 연결
Files: SodaLive.xcodeproj/project.pbxproj
- 신규 Swift 파일을 필요한 앱 타깃 Sources에 포함한다.
- QA: Xcode 프로젝트에서 신규 파일이 빌드 대상에 포함되는지 확인한다.
Task 7: 검증
Files: 신규/수정 Swift 파일 전체
lsp_diagnostics로 신규 Swift 파일의 정적 진단을 확인한다.- 가능한 경우 문서의 검증 가이드에 따라 앱 빌드 또는 관련 스킴 빌드를 실행한다.
- SwiftUI Preview 또는 임시 호출부에서
Home Title Bar,Default Title Bar,Tab-Text Bar를 수동 확인한다. - QA: PRD의 Success Criteria를 항목별로 대조한다.
구현 시 주의사항
- 이번 문서 생성 작업에서는 코드 구현을 하지 않는다.
- 우측 메뉴는 화면별로 다르므로 컴포넌트 내부에서 특정 메뉴 아이콘을 강제하지 않는다.
Tab-Text Bar는 최대 3개 제약을 넘는 범용 스크롤 탭으로 확장하지 않는다.- 기존 NavigationBar를 교체 적용하는 작업은 별도 요청 전까지 하지 않는다.
- 파일 생성 위치는
SodaLive/Sources/V2/Component로 고정한다.
검증 기록
- 문서 작성 전
SodaLive/Sources/NavigationBar/HomeNavigationBar.swift,DetailNavigationBar.swift를 확인해 기존 상단 바 구현 패턴을 확인했다. - 문서 작성 전
SodaLive/Sources/Extensions/FontModifier.swift를 확인해SodaTypography.heading3와.appFont(_:)를 확인했다. - 문서 작성 전
SodaLive/Sources/UI/Theme/Color.swift를 확인해Color.gray600,Color.white,Color.black사용 가능성을 확인했다. - 문서 작성 전
SodaLive/Resources/Assets.xcassets/v2/img_text_logo_v2.imageset존재를 확인했다. SodaLive/Sources/V2아래에는 현재Main만 있고 전역Common/Component는 없지만, 기존 UI 재사용 View는UI/Component및 도메인별.../V2/Component명명 관례를 사용하므로V2/Component를 선택했다.- 2026-05-19 구현 시
SodaLive/Sources/V2/Component/TitleBar.swift,HomeTitleBar.swift,DefaultTitleBar.swift,TextTabBar.swift를 생성했다. - 2026-05-19 구현 시
SodaLive.xcodeproj/project.pbxproj에 신규Component그룹과 4개 Swift 파일을SodaLive,SodaLive-dev두 앱 타깃 Sources에 등록했다. - 2026-05-19 테스트 타깃 확인:
XCTestCase,@testable import,*Tests디렉터리/파일 및 테스트 번들 타깃이 확인되지 않아 XCTest 기반 RED 단계를 추가하지 않았다. - 2026-05-19 정적 진단:
lsp_diagnostics는 신규 파일과 기존SodaLive/Sources/V2/Main/MainTabBarButton.swift모두에서 같은 형태의 SourceKit 프로젝트 컨텍스트 미해결 오류를 보고했다. 컴파일 가능 여부는 아래xcodebuild로 최종 확인했다. - 2026-05-19 빌드 검증:
xcodebuild -workspace 'SodaLive.xcworkspace' -scheme 'SodaLive-dev' -configuration Debug build실행 결과** BUILD SUCCEEDED **. - 2026-05-19 추가 빌드 검증:
xcodebuild -workspace 'SodaLive.xcworkspace' -scheme 'SodaLive' -configuration Debug build실행 결과** BUILD SUCCEEDED **. Crashlytics dSYM 관련 경고와 일부 외부 모듈 dependency scan 경고가 출력됐으나 빌드는 성공했다. - 2026-05-19 LSP 진단:
SodaLive/Sources/V2/Component/*.swift대상 SourceKit 진단에서SodaSpacing,appFont,Color.soda400,TitleBar등 프로젝트 문맥 미해결 오류가 출력됐다. 동일 파일들이SodaLive-dev,SodaLive양쪽 Debug 빌드에서 컴파일 성공했으므로 단일 파일 SourceKit 문맥 이슈로 기록한다. - 2026-05-19 수동 QA 대체 검증: 신규 컴포넌트는 직접 화면 적용 범위가 아니므로 Xcode 프로젝트 등록 확인(
TitleBar.swift,HomeTitleBar.swift,DefaultTitleBar.swift,TextTabBar.swift가PBXFileReference,PBXBuildFile, 양쪽PBXSourcesBuildPhase에 존재)과 두 스킴 빌드 성공으로 사용 가능성을 확인했다. - 2026-05-19 추가 수정:
TitleBarhorizontal padding을20으로 변경하고,TextTabBar를 왼쪽 정렬 및 텍스트 간격20으로 변경했다. - 2026-05-19 네이밍 정책: 탭 바 컴포넌트는
CapsuleTabBar,TextTabBar처럼스타일 + TabBar형식으로 통일한다. - 2026-05-19 추가 수정: 이번에 추가한 컴포넌트의 하드코딩 값 중
black/white컬러는 제외하고, 변경 가능한 spacing20만SodaLive/Sources/UI/Theme/**의 기존 토큰SodaSpacing.s20으로 변경했다.Color.gray600은 이미 테마 토큰을 사용 중이며, 이번 컴포넌트에는Radius사용이 없어 변경 대상이 없었다. - 2026-05-19 추가 구현: Figma node
20:3590기준 캡슐형 탭 바를SodaLive/Sources/V2/Component/CapsuleTabBar.swift로 추가했다. 항목 수 제한 없이ScrollView(.horizontal, showsIndicators: false)와LazyHStack으로 가로 스크롤되도록 구현했고, 선택 상태는 외부Binding으로 관리한다. - 2026-05-19 추가 구현:
SodaLive.xcodeproj/project.pbxproj에CapsuleTabBar.swift를SodaLive,SodaLive-dev두 앱 타깃 Sources에 등록했다. - 2026-05-19 빌드 검증:
xcodebuild -workspace 'SodaLive.xcworkspace' -scheme 'SodaLive-dev' -configuration Debug build실행 결과** BUILD SUCCEEDED **.