klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
ca8da51991faa0cbd2fea5f11abcaa6a0e8470dc
sodalive-ios/docs/plan-task/20260519_섹션타이틀컴포넌트.md

10 KiB
Raw Blame History

20260519 섹션 타이틀 컴포넌트 계획

구현 시 문서 범위를 벗어나지 않는다. 신규 UI 컴포넌트 작업이므로 구현 단계에서는 시각/UI 전용 실행 경로를 사용한다.

Goal: Figma 노드 20:3614의 42pt 섹션 타이틀을 V2 SwiftUI 재사용 컴포넌트로 구현한다.

Architecture: 신규 SectionTitle View 하나를 SodaLive/Sources/V2/Component에 추가한다. 기존 TitleBar 계열은 화면 상단 네비게이션 바 책임을 유지하고, 섹션 헤더는 별도 컴포넌트로 분리한다.

Tech Stack: SwiftUI, existing SodaSpacing, existing SodaTypography, 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/SectionTitle.swift: Figma 섹션 타이틀의 레이아웃, 스타일, 버튼 동작, Preview 담당

참조

  • SodaLive/Sources/V2/Component/TitleBar.swift: 기존 V2 컴포넌트 스타일 참고
  • SodaLive/Sources/Extensions/FontModifier.swift: .appFont(.heading3)의 20pt bold 매핑 확인
  • SodaLive/Sources/UI/Theme/Spacing.swift: SodaSpacing.s20 확인
  • SodaLive/Resources/Assets.xcassets/v2/ic_chevron_right.imageset/Contents.json: 우측 chevron 에셋 확인

수정하지 않음

  • SodaLive/Sources/V2/Component/TitleBar.swift: 기존 상단 바 동작 유지
  • SodaLive/Sources/V2/Component/DefaultTitleBar.swift: 기존 상단 바 동작 유지
  • SodaLive/Sources/V2/Component/HomeTitleBar.swift: 기존 상단 바 동작 유지
  • SodaLive/Resources/Assets.xcassets/**: 신규 에셋 추가 없음

구현 체크리스트

Task 1: 에셋 확인

Files: SodaLive/Resources/Assets.xcassets/v2/ic_chevron_right.imageset/Contents.json

  • ic_chevron_right.imageset 아래 Contents.json과 ic_chevron_right.png가 존재하는지 확인한다.
  • Contents.json에 images 배열이 있고 ic_chevron_right.png가 등록되어 있는지 확인한다.
  • QA: Image("ic_chevron_right")로 참조 가능한 asset catalog 이름인지 확인한다.

Task 2: SectionTitle 작성

Files: SodaLive/Sources/V2/Component/SectionTitle.swift

  • struct SectionTitle: View를 생성한다.
  • title: String, action: (() -> Void)? = nil 초기화 API를 제공한다.
  • HStack(alignment: .center, spacing: 0)에 제목, Spacer(minLength: 0), 조건부 chevron을 배치한다.
  • 최상위 content에 .padding(.horizontal, SodaSpacing.s20), .frame(maxWidth: .infinity), .frame(height: 42, alignment: .center)를 적용한다.
  • 제목은 .appFont(.heading3), .foregroundColor(.white), .lineLimit(1), .truncationMode(.tail)을 적용한다.
  • action이 있을 때 chevron은 Image("ic_chevron_right")를 사용하고 24x24로 표시한다.
  • chevron은 plain Button으로 감싸고 .accessibilityLabel(title)을 적용한다.
  • action이 없으면 chevron 없이 정적 content만 렌더링한다.
  • 제목 영역은 탭해도 action이 실행되지 않도록 한다.

Task 3: Preview 작성

Files: SodaLive/Sources/V2/Component/SectionTitle.swift

  • action이 없는 chevron 미표시 케이스 Preview를 추가한다.
  • action이 있는 chevron 표시 케이스 Preview를 추가한다.
  • 긴 제목 말줄임 케이스 Preview를 추가한다.
  • QA: Preview 배경은 확인용으로만 지정하고 컴포넌트 본문에는 배경을 넣지 않는다.

Task 4: 정적 진단

Files: SodaLive/Sources/V2/Component/SectionTitle.swift

  • lsp_diagnostics로 신규 Swift 파일의 정적 진단을 확인한다.
  • SourceKit 단일 파일 문맥 문제로 프로젝트 심볼 미해결이 발생하면 같은 변경을 xcodebuild로 검증한다.
  • 컴포넌트 구현에서 발생한 실제 Swift 오류가 있으면 SectionTitle.swift만 수정한다.

Task 5: 빌드 검증

Files: SodaLive.xcworkspace, SodaLive/Sources/V2/Component/SectionTitle.swift

  • xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build를 실행한다.
  • 가능한 경우 xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive" -configuration Debug build도 실행한다.
  • 환경 문제로 빌드가 실패하면 첫 번째 유효 오류 라인을 검증 기록에 남긴다.
  • 코드 문제로 빌드가 실패하면 SectionTitle.swift만 수정한 뒤 같은 명령을 재실행한다.

Task 6: PRD 성공 기준 대조

Files: docs/prd/20260519_섹션타이틀컴포넌트_PRD.md, SodaLive/Sources/V2/Component/SectionTitle.swift

  • 높이 42, full width, 좌우 20pt 여백이 구현됐는지 확인한다.
  • 제목이 .appFont(.heading3)와 흰색으로 표시되는지 확인한다.
  • 긴 제목이 한 줄 말줄임 처리되는지 확인한다.
  • action 유무에 따른 chevron 표시 분기가 구현됐는지 확인한다.
  • action이 chevron 버튼에만 연결되고 제목 영역에는 연결되지 않았는지 확인한다.
  • 기존 TitleBar, DefaultTitleBar, HomeTitleBar를 수정하지 않았는지 확인한다.

구현 시 주의사항

  • 기존 TitleBar, DefaultTitleBar, HomeTitleBar를 변경하지 않는다.
  • 신규 디자인 토큰을 추가하지 않는다.
  • Image(systemName:)을 사용하지 않는다.
  • 화면 적용, 라우팅, API 연동은 별도 요청 전까지 하지 않는다.
  • 파일 생성 위치는 SodaLive/Sources/V2/Component로 고정한다.

검증 기록

  • 2026-05-19 문서 작성 전 Figma 노드 20:3614의 screenshot/design context를 확인해 높이 42, 좌우 20, 20pt bold title, 우측 24pt chevron 구조를 확인했다.
  • 2026-05-19 문서 작성 전 SodaLive/Sources/V2/Component/TitleBar.swift, DefaultTitleBar.swift, HomeTitleBar.swift를 확인해 기존 V2 상단 바 컴포넌트와 책임을 분리해야 함을 확인했다.
  • 2026-05-19 문서 작성 전 SodaLive/Sources/Extensions/FontModifier.swift를 확인해 .appFont(.heading3)가 20pt bold임을 확인했다.
  • 2026-05-19 문서 작성 전 SodaLive/Sources/UI/Theme/Spacing.swift를 확인해 SodaSpacing.s20 사용 가능성을 확인했다.
  • 2026-05-19 문서 작성 전 SodaLive/Resources/Assets.xcassets/v2/ic_chevron_right.imageset/Contents.json을 확인해 ic_chevron_right 에셋 존재를 확인했다.
  • 2026-05-19 문서 위치 보정: AGENTS.md와 docs/agent-guides/documentation-policy.md 기준에 맞춰 PRD는 docs/prd/20260519_섹션타이틀컴포넌트_PRD.md, 계획/TASK는 docs/plan-task/20260519_섹션타이틀컴포넌트.md로 정리했다.
  • 2026-05-19 구현: SodaLive/Sources/V2/Component/SectionTitle.swift를 추가하고, SodaLive.xcodeproj/project.pbxproj에 SectionTitle.swift를 SodaLive, SodaLive-dev 두 앱 타깃 Sources로 등록했다.
  • 2026-05-19 수동 QA: rg로 SectionTitle.swift의 action: (() -> Void)? = nil, Image("ic_chevron_right"), 24x24 chevron, 42pt height, 프로젝트 Sources 등록 2건을 확인했다.
  • 2026-05-19 에셋 검증: plutil -p 'SodaLive/Resources/Assets.xcassets/v2/ic_chevron_right.imageset/Contents.json' 결과 ic_chevron_right.png가 images 배열에 등록되어 있음을 확인했다.
  • 2026-05-19 프로젝트 검증: plutil -lint SodaLive.xcodeproj/project.pbxproj 실행 결과 OK.
  • 2026-05-19 LSP 진단: SectionTitle.swift 단일 파일 진단에서 SodaSpacing, .appFont, .heading3, .white, .tail 프로젝트 문맥 미해결 오류가 보고됐다. 동일 오류는 기존 TitleBar.swift에서도 재현되어 SourceKit 단일 파일 문맥 한계로 기록하고, 실제 컴파일 유효성은 아래 빌드로 확인했다.
  • 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 테스트 액션 확인: xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" test 실행 결과 Scheme SodaLive-dev is not currently configured for the test action.으로 테스트 타깃 미구성 상태를 확인했다.
  • 2026-05-19 동작 수정: 별도 chevron 표시 API를 제거하고, action이 있을 때만 ic_chevron_right chevron 버튼을 표시하도록 변경했다. action은 전체 행이 아니라 chevron 버튼에만 연결해 제목 터치로는 실행되지 않게 했다.
  • 2026-05-19 동작 수정 후 수동 QA: rg로 Text(title)과 Button(action: action)이 분리되어 있고, Image("ic_chevron_right"), 24x24 chevron, 42pt height, action 없는 Preview/action 있는 Preview가 존재함을 확인했다.
  • 2026-05-19 동작 수정 후 LSP 진단: SectionTitle.swift 단일 파일 진단에서 기존과 같은 SodaSpacing, .appFont, .heading3, .white, .tail 프로젝트 문맥 미해결 오류가 보고됐다. 실제 컴파일 유효성은 아래 빌드로 확인했다.
  • 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 동작 수정 후 테스트 액션 확인: xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" test 실행 결과 Scheme SodaLive-dev is not currently configured for the test action.으로 테스트 타깃 미구성 상태를 재확인했다.