diff --git a/app/src/main/res/drawable-mdpi/ic_chevron_right.png b/app/src/main/res/drawable-mdpi/ic_chevron_right.png new file mode 100644 index 00000000..af398899 Binary files /dev/null and b/app/src/main/res/drawable-mdpi/ic_chevron_right.png differ diff --git a/app/src/main/res/layout/view_section_title.xml b/app/src/main/res/layout/view_section_title.xml new file mode 100644 index 00000000..1c6df873 --- /dev/null +++ b/app/src/main/res/layout/view_section_title.xml @@ -0,0 +1,28 @@ + + + + + + + diff --git a/docs/plan-task/20260519_섹션타이틀컴포넌트.md b/docs/plan-task/20260519_섹션타이틀컴포넌트.md new file mode 100644 index 00000000..6adb2bfd --- /dev/null +++ b/docs/plan-task/20260519_섹션타이틀컴포넌트.md @@ -0,0 +1,186 @@ +# 섹션 타이틀 컴포넌트 Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Figma `20:3614` 기준 XML 레이아웃 기반 재사용 가능한 Section Title Component를 개발한다. + +**Architecture:** 구현은 `app/src/main/res/layout/view_section_title.xml` 단일 XML 레이아웃 추가로 제한한다. 호출부는 ViewBinding으로 제목 텍스트, chevron 표시 여부, 클릭 동작을 제어한다. + +**Tech Stack:** Android XML Views, ViewBinding, 기존 `colors.xml`, `dimens.xml`, `typography.xml` 디자인 토큰. + +--- + +## 작업 목표 +- Figma `20:3614` 기준 XML 레이아웃 기반 재사용 가능한 Section Title Component를 개발한다. +- 구현 범위는 컴포넌트 추가로 한정하고 기존 화면 일괄 적용은 제외한다. + +## 구현 계획 + +### Task 1: 기존 리소스 및 유사 UI 확인 + +**Files:** +- Read: `app/src/main/res/layout/view_title_bar_default.xml` +- Read: `app/src/main/res/layout/view_title_bar_home.xml` +- Read: `app/src/main/res/values/colors.xml` +- Read: `app/src/main/res/values/dimens.xml` +- Read: `app/src/main/res/values/typography.xml` +- Use: `@drawable/ic_chevron_right` + +- [x] **Step 1: 기존 공통 타이틀 계열 레이아웃 확인** + +Run: `rg -n "view_title_bar|SectionTitle|section_title|chevron" app/src/main/res app/src/main/java/kr/co/vividnext/sodalive` + +Expected: 기존 Title Bar와 중복되지 않는 Section Title 구현 지점을 확인한다. + +- [x] **Step 2: 필수 디자인 토큰 확인** + +Run: `rg -n "spacing_20|Typography\.Heading3|gray_600|white" app/src/main/res/values` + +Expected: 좌우 20dp, 20sp bold 대응 typography, white 텍스트, 회색 배경 토큰을 확인한다. + +- [x] **Step 3: chevron 리소스 확인** + +Run: `rg --files app/src/main/res | rg "ic_chevron_right"` + +Expected: `ic_chevron_right` drawable 리소스가 출력된다. + +### Task 2: Section Title Component 추가 + +**Files:** +- Create: `app/src/main/res/layout/view_section_title.xml` +- Use: `@drawable/ic_chevron_right` +- Reuse: `app/src/main/res/values/colors.xml`의 `gray_600`, `white` +- Reuse: `app/src/main/res/values/dimens.xml`의 `spacing_20` +- Reuse: `app/src/main/res/values/typography.xml`의 `Typography.Heading3` + +- [x] **Step 1: Section Title XML 추가** + +`view_section_title.xml`에 width `match_parent`, height `42dp`, 세로 중앙 정렬, 좌우 `@dimen/spacing_20` padding을 갖는 레이아웃을 추가한다. + +```xml + + + + + + + +``` + +- [x] **Step 2: 제목 TextView 추가** + +좌측 제목 TextView는 `@+id/tv_section_title`을 사용한다. `maxLines=1`, `ellipsize=end`, `@color/white`, Figma 20sp bold에 대응하는 `@style/Typography.Heading3`을 적용한다. + +- [x] **Step 3: 우측 chevron ImageView 추가** + +우측 chevron ImageView는 `@+id/iv_section_title_chevron`, `24dp` 크기, `@drawable/ic_chevron_right`를 사용한다. 표시/숨김과 클릭 동작은 호출부에서 제어할 수 있게 한다. + +- [x] **Step 4: 색상 및 리소스 최소 추가** + +배경은 기존 `@color/gray_600`, chevron은 `@drawable/ic_chevron_right`를 사용한다. 신규 color/drawable 리소스는 추가하지 않는다. + +### Task 3: 검증 및 문서 기록 + +**Files:** +- Modify: `docs/plan-task/20260519_섹션타이틀컴포넌트.md` + +- [x] **Step 1: XML 진단 실행** + +Run: `lsp_diagnostics` on modified XML files + +Expected: 새 오류가 없다. XML LSP가 환경에 없으면 그 사실을 검증 기록에 남긴다. + +- [x] **Step 2: 디버그 빌드 실행** + +Run: `./gradlew :app:assembleDebug` + +Expected: `BUILD SUCCESSFUL` + +- [x] **Step 3: 수동 QA 수행** + +신규 레이아웃이 리소스 병합되고 ViewBinding 대상 id가 생성 가능한지 확인한다. 실제 화면 적용은 이번 범위에 포함하지 않는다. + +- [x] **Step 4: 검증 기록 누적** + +문서 하단 `검증 기록`에 실행한 명령, 결과, 빌드 성공 여부를 한국어로 기록한다. + +## 체크리스트 +- [x] AC1: Section Title은 width `match_parent`, height `42dp`, vertical center alignment를 가진다. + - QA: `view_section_title.xml` 속성 확인 +- [x] AC2: Section Title 좌우 여백은 `@dimen/spacing_20`을 사용한다. + - QA: XML padding 속성 확인 +- [x] AC3: 제목 TextView는 화면별 텍스트 변경이 가능하고 한 줄 말줄임 처리된다. + - QA: ViewBinding 접근 id, `maxLines`, `ellipsize` 확인 +- [x] AC4: 제목 텍스트는 `@style/Typography.Heading3`와 `@color/white`를 사용한다. + - QA: style/textColor 확인 +- [x] AC5: 우측 chevron 아이콘은 24dp 기준이며 표시/숨김과 클릭 동작을 호출부에서 제어할 수 있다. + - QA: ImageView id, size, visibility/click 연결 가능 여부 확인 +- [x] AC6: 기존 Title Bar, Text Tab Bar, Capsule Tab Bar 동작을 변경하지 않는다. + - QA: 변경 파일 목록 확인 +- [x] AC7: 리소스 병합 및 디버그 빌드가 성공한다. + - QA: `./gradlew :app:assembleDebug` + +## 검증 기록 +- 2026-05-19 + - 무엇/왜/어떻게: 사용자 요청에 따라 구현 전 PRD와 구현 계획/TASK 문서만 작성했다. Figma `20:3614`는 기존 60dp Title Bar가 아닌 42dp Section Title Component로 분리해 문서화했다. + - 실행 명령/도구: + - `Figma_get_design_context(20:3614)` + - `Figma_get_screenshot(20:3614)` + - `read(docs/agent-guides/workflow-docs-commits.md)` + - `read(docs/agent-guides/code-style.md)` + - `read(docs/prd/sample-prd.md)` + - `read(docs/prd/20260519_타이틀바및탭텍스트바컴포넌트_prd.md)` + - `read(docs/plan-task/20260519_타이틀바및탭텍스트바컴포넌트.md)` + - `read(app/src/main/res/layout/view_title_bar_default.xml)` + - `read(app/src/main/res/layout/view_title_bar_home.xml)` + - `read(app/src/main/res/layout/view_text_tab_bar.xml)` + - `read(app/src/main/res/values/dimens.xml)` + - `read(app/src/main/res/values/typography.xml)` + - `read(app/src/main/res/values/colors.xml)` + - `rg -n "chevron|arrow.*right|ic_.*right|right.*arrow|ic_next|ic_arrow" "app/src/main/res"` + - `rg --files "app/src/main/res" | rg "ic_chevron_right"` + - 결과: + - PRD 문서는 `docs/prd/20260519_섹션타이틀컴포넌트_prd.md`에 작성했다. + - 계획/TASK 문서는 `docs/plan-task/20260519_섹션타이틀컴포넌트.md`에 작성했다. + - Figma 20sp bold에 대응하는 기존 스타일은 `Typography.Heading3`임을 확인했다. + - 배경은 기존 `gray_600`, chevron은 `@drawable/ic_chevron_right`를 사용하는 계획으로 확정했다. + - 코드, 리소스, 레이아웃 구현 파일은 변경하지 않았다. + - 실제 구현과 빌드 검증은 사용자 승인 후 계획 문서 체크리스트에 따라 진행한다. +- 2026-05-19 + - 무엇/왜/어떻게: 계획 문서에 따라 `view_section_title.xml`을 추가했다. 기존 화면에는 적용하지 않았고, 제목/chevron id는 ViewBinding에서 접근 가능하도록 구성했다. + - 실행 명령/도구: + - `rg -n "view_title_bar|SectionTitle|section_title|chevron" app/src/main/res app/src/main/java/kr/co/vividnext/sodalive` + - `rg -n "spacing_20|Typography\.Heading3|gray_600|white" app/src/main/res/values` + - `rg --files app/src/main/res | rg "ic_chevron_right"` + - `lsp_diagnostics(app/src/main/res/layout/view_section_title.xml)` + - `rg -n "layout_height=\"42dp\"|background=\"@color/gray_600\"|paddingHorizontal=\"@dimen/spacing_20\"|@\+id/tv_section_title|@style/Typography\.Heading3|maxLines=\"1\"|ellipsize=\"end\"|@\+id/iv_section_title_chevron|layout_width=\"24dp\"|src=\"@drawable/ic_chevron_right\"" app/src/main/res/layout/view_section_title.xml` + - `./gradlew :app:assembleDebug` + - `rg --files app/build/generated/data_binding_base_class_source_out/debug/out | rg "ViewSectionTitleBinding"` + - `git status --short` + - 결과: + - `app/src/main/res/layout/view_section_title.xml`을 추가했다. + - XML LSP 서버가 현재 환경에 설정되어 있지 않아 `lsp_diagnostics`는 실행 불가했다. + - XML 속성 확인에서 42dp 높이, `gray_600` 배경, `spacing_20` 좌우 여백, `Typography.Heading3`, `white`, `ic_chevron_right` 참조를 확인했다. + - `:app:assembleDebug`는 `BUILD SUCCESSFUL`로 완료됐다. + - `ViewSectionTitleBinding.java` 생성 파일을 확인해 ViewBinding 생성 가능성을 확인했다. diff --git a/docs/prd/20260519_섹션타이틀컴포넌트_prd.md b/docs/prd/20260519_섹션타이틀컴포넌트_prd.md new file mode 100644 index 00000000..db9b9635 --- /dev/null +++ b/docs/prd/20260519_섹션타이틀컴포넌트_prd.md @@ -0,0 +1,107 @@ +# 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` 사용을 기본값으로 한다.