5.4 KiB
5.4 KiB
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사용을 기본값으로 한다.