feat(widget): 섹션 타이틀 컴포넌트를 추가한다

2026-05-19 21:07:15 +09:00
parent 4457941193
commit 30264935dc
4 changed files with 321 additions and 0 deletions
--- a/docs/plan-task/20260519_섹션타이틀컴포넌트.md
+++ 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
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="42dp"
+    android:background="@color/gray_600"
+    android:gravity="center_vertical"
+    android:orientation="horizontal"
+    android:paddingHorizontal="@dimen/spacing_20">
+
+    <TextView
+        android:id="@+id/tv_section_title"
+        style="@style/Typography.Heading3"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="@color/white"
+        tools:text="텍스트" />
+
+    <ImageView
+        android:id="@+id/iv_section_title_chevron"
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:contentDescription="@null"
+        android:src="@drawable/ic_chevron_right" />
+</LinearLayout>
+```
+
+- [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 생성 가능성을 확인했다.
--- a/docs/prd/20260519_섹션타이틀컴포넌트_prd.md
+++ 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` 사용을 기본값으로 한다.