108 lines
5.4 KiB
Markdown
108 lines
5.4 KiB
Markdown
# PRD: 섹션 타이틀 컴포넌트
|
|
|
|
## 1. Overview
|
|
Figma `20:3614` 디자인을 기준으로 XML 레이아웃 기반 화면에서 재사용할 수 있는 Section Title Component를 개발한다.
|
|
|
|
---
|
|
|
|
## 2. Problem
|
|
- 화면별 섹션 제목 영역을 개별 구현하면 높이, 좌우 여백, 텍스트 스타일, 우측 이동 아이콘 표시 방식이 달라질 수 있다.
|
|
- 기존 Title Bar Component는 앱 상단 영역용 60dp 컴포넌트이고, Figma `20:3614`는 콘텐츠 섹션 내부 제목용 42dp 컴포넌트라 역할이 다르다.
|
|
- 섹션 전체보기 또는 상세 이동이 필요한 경우 우측 chevron 아이콘과 클릭 영역을 일관되게 제공할 필요가 있다.
|
|
|
|
---
|
|
|
|
## 3. Goals
|
|
- 전체 너비, 높이 42dp의 재사용 가능한 Section Title Component를 제공한다.
|
|
- 좌측에는 섹션 제목 텍스트를 표시하고, 화면별로 텍스트를 변경할 수 있어야 한다.
|
|
- 우측 chevron 아이콘은 표시 여부를 변경할 수 있어야 한다.
|
|
- 텍스트는 Figma의 `Pretendard/KR/Heading/20pt/bold`에 대응하는 기존 `Typography.Heading3` 토큰을 사용한다.
|
|
- 기존 화면에 일괄 적용하지 않고, 컴포넌트 추가와 사용 계약 문서화에 한정한다.
|
|
|
|
---
|
|
|
|
## 4. Non-Goals
|
|
- 기존 `view_title_bar_home.xml`, `view_title_bar_default.xml`, `view_text_tab_bar.xml`, `CapsuleTabBarView` 동작을 변경하지 않는다.
|
|
- 이번 범위에서는 실제 화면에 컴포넌트를 일괄 적용하지 않는다.
|
|
- 신규 Activity, Fragment, ViewModel을 만들지 않는다.
|
|
- Compose 컴포넌트 또는 Compose Theme를 추가하지 않는다.
|
|
- Figma에 없는 배지, divider, 그림자, 애니메이션, pressed 효과는 추가하지 않는다.
|
|
- 우측 chevron 클릭 시 수행할 화면별 비즈니스 로직은 컴포넌트 내부에 고정하지 않는다.
|
|
|
|
---
|
|
|
|
## 5. Target Users
|
|
- XML 레이아웃을 작성하거나 유지보수하는 Android 개발자.
|
|
- v2 화면에서 콘텐츠 섹션 제목과 전체보기 진입 affordance를 재사용하려는 개발자.
|
|
|
|
---
|
|
|
|
## 6. User Stories
|
|
- 개발자는 섹션 제목 영역을 반복 구현하지 않고 같은 높이와 여백으로 재사용하고 싶다.
|
|
- 개발자는 화면별 섹션명에 맞게 제목 텍스트를 변경하고 싶다.
|
|
- 개발자는 전체보기 이동이 있는 섹션에서만 우측 chevron 아이콘과 클릭 동작을 연결하고 싶다.
|
|
|
|
---
|
|
|
|
## 7. Core Features
|
|
|
|
### Section Title Component
|
|
Figma `20:3614` 기준 섹션 제목 영역을 XML 기반 재사용 레이아웃으로 제공한다.
|
|
|
|
#### Requirements
|
|
- Figma: https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=20-3614&m=dev
|
|
- Width: `match_parent`
|
|
- Height: `42dp`
|
|
- Alignment: 세로 가운데 정렬
|
|
- Horizontal padding: `spacing_20`
|
|
- Background: Figma 스크린샷 기준 회색 배경에 가장 가까운 기존 `gray_600` 토큰을 사용한다.
|
|
- Left title text:
|
|
- ViewBinding에서 접근 가능한 id를 부여한다.
|
|
- 화면별로 텍스트를 변경할 수 있어야 한다.
|
|
- maxLines 1, ellipsize end를 적용해 긴 제목을 안전하게 처리한다.
|
|
- Typography는 Figma `20sp bold`와 일치하는 기존 `Typography.Heading3`을 사용한다.
|
|
- Text color는 white를 사용한다.
|
|
- Right chevron icon:
|
|
- 크기는 24dp 기준으로 제공한다.
|
|
- ViewBinding에서 접근 가능한 id를 부여한다.
|
|
- 표시 여부를 호출부에서 변경할 수 있어야 한다.
|
|
- 클릭 동작은 호출부에서 연결한다.
|
|
|
|
#### Edge Cases
|
|
- 제목이 길면 한 줄 말줄임 처리한다.
|
|
- 우측 이동이 없는 섹션은 chevron 아이콘을 숨길 수 있어야 한다.
|
|
- chevron drawable은 `@drawable/ic_chevron_right`를 사용한다.
|
|
|
|
---
|
|
|
|
## 8. UX / UI Expectations
|
|
- 섹션 타이틀은 42dp 높이 안에서 제목과 chevron이 세로 중앙 정렬되어야 한다.
|
|
- 제목은 좌측 20dp 지점에서 시작한다.
|
|
- chevron은 우측 20dp 안쪽에 위치한다.
|
|
- 제목과 chevron 사이의 빈 영역은 자연스럽게 확장되어야 한다.
|
|
- chevron이 숨겨져도 제목의 좌측 위치와 높이는 유지되어야 한다.
|
|
|
|
---
|
|
|
|
## 9. Technical Constraints
|
|
- 현재 프로젝트는 XML Views + ViewBinding 기반이므로 XML 레이아웃과 호출부 ViewBinding 사용 패턴을 우선한다.
|
|
- 재사용 레이아웃은 `app/src/main/res/layout` 아래에 둔다.
|
|
- 기존 신규 공통 UI 리소스와 동일하게 `kr.co.vividnext.sodalive.v2` 하위 사용을 전제로 한다.
|
|
- 색상, spacing, typography는 기존 `colors.xml`, `dimens.xml`, `typography.xml` 토큰을 우선 사용한다.
|
|
- 기존 화면의 동작이나 레이아웃을 요청 없이 변경하지 않는다.
|
|
|
|
---
|
|
|
|
## 10. Metrics
|
|
- Section Title 높이 42dp가 문서와 구현에서 일치한다.
|
|
- 좌우 여백은 `spacing_20`을 사용한다.
|
|
- 제목 TextView와 chevron ImageView는 ViewBinding에서 접근 가능한 id를 가진다.
|
|
- chevron 아이콘은 표시/숨김과 클릭 핸들러 연결이 가능하다.
|
|
- Android 리소스 병합 및 디버그 빌드가 성공한다.
|
|
|
|
---
|
|
|
|
## 11. Open Questions
|
|
- 사용자 응답이 없으므로 Figma `20:3614`는 기존 Title Bar 변형이 아닌 별도 Section Title Component로 문서화한다.
|
|
- 회색 배경은 기존 `gray_600`, chevron drawable은 `@drawable/ic_chevron_right` 사용을 기본값으로 한다.
|