# 섹션 타이틀 컴포넌트 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 생성 가능성을 확인했다.