klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
4629ef00a96418cdc29aa8afd2f241e644f51ad4
sodalive-android/docs/plan-task/20260519_섹션타이틀컴포넌트.md

9.3 KiB
Raw Blame History

섹션 타이틀 컴포넌트 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

  • 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 구현 지점을 확인한다.

  • Step 2: 필수 디자인 토큰 확인

Run: rg -n "spacing_20|Typography\.Heading3|gray_600|white" app/src/main/res/values

Expected: 좌우 20dp, 20sp bold 대응 typography, white 텍스트, 회색 배경 토큰을 확인한다.

  • 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

  • Step 1: Section Title XML 추가

view_section_title.xml에 width match_parent, height 42dp, 세로 중앙 정렬, 좌우 @dimen/spacing_20 padding을 갖는 레이아웃을 추가한다.

<?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>
  • Step 2: 제목 TextView 추가

좌측 제목 TextView는 @+id/tv_section_title을 사용한다. maxLines=1, ellipsize=end, @color/white, Figma 20sp bold에 대응하는 @style/Typography.Heading3을 적용한다.

  • Step 3: 우측 chevron ImageView 추가

우측 chevron ImageView는 @+id/iv_section_title_chevron, 24dp 크기, @drawable/ic_chevron_right를 사용한다. 표시/숨김과 클릭 동작은 호출부에서 제어할 수 있게 한다.

  • Step 4: 색상 및 리소스 최소 추가

배경은 기존 @color/gray_600, chevron은 @drawable/ic_chevron_right를 사용한다. 신규 color/drawable 리소스는 추가하지 않는다.

Task 3: 검증 및 문서 기록

Files:

  • Modify: docs/plan-task/20260519_섹션타이틀컴포넌트.md

  • Step 1: XML 진단 실행

Run: lsp_diagnostics on modified XML files

Expected: 새 오류가 없다. XML LSP가 환경에 없으면 그 사실을 검증 기록에 남긴다.

  • Step 2: 디버그 빌드 실행

Run: ./gradlew :app:assembleDebug

Expected: BUILD SUCCESSFUL

  • Step 3: 수동 QA 수행

신규 레이아웃이 리소스 병합되고 ViewBinding 대상 id가 생성 가능한지 확인한다. 실제 화면 적용은 이번 범위에 포함하지 않는다.

  • Step 4: 검증 기록 누적

문서 하단 검증 기록에 실행한 명령, 결과, 빌드 성공 여부를 한국어로 기록한다.

체크리스트

  • AC1: Section Title은 width match_parent, height 42dp, vertical center alignment를 가진다.
    • QA: view_section_title.xml 속성 확인
  • AC2: Section Title 좌우 여백은 @dimen/spacing_20을 사용한다.
    • QA: XML padding 속성 확인
  • AC3: 제목 TextView는 화면별 텍스트 변경이 가능하고 한 줄 말줄임 처리된다.
    • QA: ViewBinding 접근 id, maxLines, ellipsize 확인
  • AC4: 제목 텍스트는 @style/Typography.Heading3와 @color/white를 사용한다.
    • QA: style/textColor 확인
  • AC5: 우측 chevron 아이콘은 24dp 기준이며 표시/숨김과 클릭 동작을 호출부에서 제어할 수 있다.
    • QA: ImageView id, size, visibility/click 연결 가능 여부 확인
  • AC6: 기존 Title Bar, Text Tab Bar, Capsule Tab Bar 동작을 변경하지 않는다.
    • QA: 변경 파일 목록 확인
  • 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 생성 가능성을 확인했다.