120 lines
5.2 KiB
Markdown
120 lines
5.2 KiB
Markdown
# PRD: 섹션 타이틀 컴포넌트
|
|
|
|
## 1. Overview
|
|
|
|
Figma 노드 `20:3614`의 42pt 섹션 타이틀을 SwiftUI 재사용 컴포넌트로 정의한다. 신규 UI 컴포넌트 위치 규칙에 따라 구현 대상은 `SodaLive/Sources/V2/Component/**` 아래에 둔다.
|
|
|
|
---
|
|
|
|
## 2. Background
|
|
|
|
Figma 노드 `20:3614`는 402x42 크기의 섹션 타이틀 컴포넌트다. 좌측에는 `Pretendard Variable Bold 20pt` 텍스트가 있고, 우측에는 24x24 chevron-right 아이콘이 조건부로 표시된다.
|
|
|
|
최근 코드에는 다음 기반 요소가 이미 존재한다.
|
|
|
|
- `SodaLive/Sources/V2/Component/TitleBar.swift`: V2 상단 바 컴포넌트 스타일 참고 가능
|
|
- `SodaLive/Sources/Extensions/FontModifier.swift`: `SodaTypography.heading3` 및 `.appFont(_:)` 제공
|
|
- `SodaLive/Sources/UI/Theme/Spacing.swift`: `SodaSpacing.s20` 제공
|
|
- `SodaLive/Resources/Assets.xcassets/v2/ic_chevron_right.imageset`: 우측 chevron 에셋 존재
|
|
|
|
---
|
|
|
|
## 3. Goals
|
|
|
|
- Figma 시안과 동일한 높이, 여백, 타이포그래피를 SwiftUI로 구현한다.
|
|
- 기존 V2 컴포넌트 관례와 디자인 토큰을 사용한다.
|
|
- 제목 텍스트와 우측 chevron 탭 동작을 호출부에서 제어할 수 있게 한다.
|
|
- 네비게이션 상단 바인 `TitleBar`와 책임을 분리한다.
|
|
|
|
---
|
|
|
|
## 4. Non-Goals
|
|
|
|
- 화면 단위 라우팅이나 API 연동은 포함하지 않는다.
|
|
- 신규 디자인 토큰을 추가하지 않는다.
|
|
- Figma의 React/Tailwind 생성 코드를 그대로 이식하지 않는다.
|
|
- 기존 `TitleBar`, `DefaultTitleBar`, `HomeTitleBar`의 동작을 변경하지 않는다.
|
|
|
|
---
|
|
|
|
## 5. Core Requirements
|
|
|
|
### 5.1 컴포넌트 API
|
|
|
|
- 컴포넌트 이름은 `SectionTitle`로 둔다.
|
|
- `title: String`을 호출부에서 전달한다.
|
|
- `action: (() -> Void)?`는 기본값 `nil`을 사용한다.
|
|
- `action`이 있으면 우측 chevron만 `Button`으로 렌더링한다.
|
|
- `action`이 없으면 chevron을 표시하지 않고 정적 `HStack`을 표시한다.
|
|
|
|
### 5.2 레이아웃
|
|
|
|
- Width: full
|
|
- Height: `42`
|
|
- Horizontal padding: `SodaSpacing.s20`
|
|
- Alignment: 세로 가운데 정렬
|
|
- 좌측 제목, `Spacer(minLength: 0)`, 우측 chevron의 `HStack` 구조를 사용한다.
|
|
- 우측 chevron은 `action != nil`일 때만 24x24 크기로 표시한다.
|
|
|
|
### 5.3 스타일
|
|
|
|
- 제목은 `Text(title).appFont(.heading3)`를 사용한다.
|
|
- 제목 색상은 `Color.white`를 사용한다.
|
|
- 제목은 한 줄로 제한하고 말줄임 처리한다.
|
|
- 컴포넌트 본문에는 배경색을 지정하지 않는다.
|
|
|
|
### 5.4 아이콘 및 접근성
|
|
|
|
- 우측 chevron은 기존 에셋 `ic_chevron_right`를 사용한다.
|
|
- SwiftUI `Image(systemName: "chevron.right")`는 앱 에셋 스타일과 다를 수 있으므로 사용하지 않는다.
|
|
- `action`이 있을 때 chevron 버튼의 접근성 라벨은 `title`을 사용한다.
|
|
- 제목 영역은 탭해도 `action`을 실행하지 않는다.
|
|
|
|
---
|
|
|
|
## 6. Recommended Approach
|
|
|
|
전용 `SectionTitle` 컴포넌트를 신규 추가한다. 기존 `TitleBar`를 확장하지 않는 이유는 `TitleBar`가 화면 상단 네비게이션 바 책임을 갖고 있고 높이도 60pt라, Figma의 42pt 섹션 헤더와 의미 및 치수가 다르기 때문이다.
|
|
|
|
단순 호출부 인라인 구현도 가능하지만 재사용성과 디자인 일관성이 떨어진다. 따라서 `SodaLive/Sources/V2/Component/SectionTitle.swift`에 작고 독립적인 View로 구현한다.
|
|
|
|
---
|
|
|
|
## 7. Technical Constraints
|
|
|
|
- SwiftUI 기반으로 작성한다.
|
|
- 신규 파일은 구현 시 `SodaLive/Sources/V2/Component/**` 아래에 둔다.
|
|
- 색상과 spacing은 기존 토큰을 우선 사용한다.
|
|
- 폰트는 기존 `.appFont(.heading3)` 사용을 우선한다.
|
|
- 프로젝트 설정 변경은 필요한 경우에만 수행한다.
|
|
|
|
---
|
|
|
|
## 8. Success Criteria
|
|
|
|
- 문서 기준 구현 후 `SectionTitle`은 높이 42, full width, 좌우 20pt 여백을 갖는다.
|
|
- 제목은 20pt bold에 해당하는 `.appFont(.heading3)`와 흰색으로 표시된다.
|
|
- 긴 제목은 한 줄 말줄임 처리된다.
|
|
- `action`이 있으면 우측 24x24 chevron이 표시되고, 없으면 표시되지 않는다.
|
|
- `action`은 chevron을 탭했을 때만 실행되고, 제목 영역을 탭했을 때는 실행되지 않는다.
|
|
- 기존 `TitleBar`, `DefaultTitleBar`, `HomeTitleBar` 동작은 바뀌지 않는다.
|
|
|
|
---
|
|
|
|
## 9. Decisions
|
|
|
|
- 파일 생성 위치는 `SodaLive/Sources/V2/Component/SectionTitle.swift`로 결정한다.
|
|
- 우측 chevron은 `action`이 있을 때만 `ic_chevron_right`를 사용한다.
|
|
- 신규 디자인 토큰은 추가하지 않는다.
|
|
- 이번 PRD는 Figma 노드 `20:3614` 단일 컴포넌트만 다룬다.
|
|
|
|
---
|
|
|
|
## 10. Verification Notes
|
|
|
|
- Figma 노드 `20:3614`의 스크린샷과 생성 코드에서 높이 42, 좌우 20, 20pt bold title, 우측 24pt chevron 구조를 확인했다.
|
|
- `SodaLive/Sources/V2/Component/TitleBar.swift`를 확인해 V2 컴포넌트의 SwiftUI 스타일을 확인했다.
|
|
- `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`을 확인해 `ic_chevron_right` 에셋 존재를 확인했다.
|