diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index cdbae48e..b14f3562 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -138,4 +138,38 @@ #7C7C80 #37474F #CFD8DC + + #E6F9FF + #B8EEFD + #85E1FB + #4FD2F9 + #00BDF7 + #00A0DF + #0081C2 + #006BA4 + #004F7F + #052742 + + #FFF1F2 + #FFD7D9 + #FFB3B7 + #FF858B + #FF4C3C + + #F5FBEF + #E9FADB + #C0F595 + #9FFB56 + #73FF01 + + #FAFAFA + #F2F2F2 + #E2E2E2 + #CCCCCC + #B5B5B5 + #959595 + #787878 + #494949 + #343434 + #202020 diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml new file mode 100644 index 00000000..5ee3c274 --- /dev/null +++ b/app/src/main/res/values/dimens.xml @@ -0,0 +1,18 @@ + + + 4dp + 6dp + 8dp + 12dp + 14dp + 16dp + 20dp + 24dp + 28dp + 32dp + 48dp + + 4dp + 8dp + 14dp + diff --git a/docs/plan-task/20260515_XML디자인토큰리소스추가.md b/docs/plan-task/20260515_XML디자인토큰리소스추가.md new file mode 100644 index 00000000..8561a505 --- /dev/null +++ b/docs/plan-task/20260515_XML디자인토큰리소스추가.md @@ -0,0 +1,118 @@ +# XML 디자인 토큰 리소스 추가 + +## 작업 목표 +- XML 레이아웃에서 재사용할 수 있는 색상, Spacing, Radius 디자인 토큰 리소스를 추가한다. +- 구현 범위는 XML 리소스 추가로만 한정한다. + +## 구현 계획 + +### Task 1: Color 토큰 리소스 추가 + +**Files:** +- Modify: `app/src/main/res/values/colors.xml` + +- [x] **Step 1: RED - 신규 color 토큰 부재 확인** + +Run: `rg -n '' app/src/main/res/values/colors.xml` + +Expected: 토큰 추가 전에는 매칭 결과가 없어 실패한다. + +- [x] **Step 2: Primary, Semantic, Gray color 토큰 추가** + +`colors.xml`의 기존 리소스 하단에 요청된 `soda_*`, `red_*`, `green_*`, `gray_*` color 리소스를 추가한다. + +- [x] **Step 3: GREEN - 대표 color 토큰 확인** + +Run: `rg -n '' app/src/main/res/values/colors.xml` + +Expected: `soda_400`, `red_400`, `green_400`, `gray_900`이 모두 조회된다. + +### Task 2: Spacing/Radius dimen 리소스 추가 + +**Files:** +- Create: `app/src/main/res/values/dimens.xml` + +- [x] **Step 1: RED - 신규 dimen 토큰 부재 확인** + +Run: `rg -n '' app/src/main/res/values` + +Expected: 토큰 추가 전에는 매칭 결과가 없어 실패한다. + +- [x] **Step 2: Spacing과 Radius dimen 토큰 추가** + +`dimens.xml`을 생성하고 요청된 spacing 11개와 radius 3개를 `dp` 값으로 추가한다. + +- [x] **Step 3: GREEN - 대표 dimen 토큰 확인** + +Run: `rg -n '' app/src/main/res/values/dimens.xml` + +Expected: `spacing_16`, `spacing_48`, `radius_8`, `radius_14`가 모두 조회된다. + +### Task 3: 리소스 검증 및 문서 기록 + +**Files:** +- Modify: `docs/plan-task/20260515_XML디자인토큰리소스추가.md` + +- [x] **Step 1: XML LSP 진단 실행** + +Run: `lsp_diagnostics(app/src/main/res/values/colors.xml)` 및 `lsp_diagnostics(app/src/main/res/values/dimens.xml)` + +Expected: 새 XML 리소스에 새 오류가 없다. XML LSP가 환경에 없으면 그 사실을 검증 기록에 남긴다. + +- [x] **Step 2: 디버그 빌드 실행** + +Run: `./gradlew :app:assembleDebug` + +Expected: `BUILD SUCCESSFUL` + +- [x] **Step 3: 검증 기록 누적** + +문서 하단 `검증 기록`에 실행한 명령, 결과, 빌드 성공 여부를 한국어로 기록한다. + +## 체크리스트 +- [x] AC1: `soda_50`부터 `soda_900`까지 10개 Primary Color 토큰이 존재한다. + - QA: `colors.xml`에서 이름과 hex 값 확인 +- [x] AC2: `red_50`부터 `red_400`, `green_50`부터 `green_400`까지 Semantic Color 토큰이 존재한다. + - QA: `colors.xml`에서 이름과 hex 값 확인 +- [x] AC3: `gray_50`부터 `gray_900`까지 10개 Gray Color 토큰이 존재한다. + - QA: `colors.xml`에서 이름과 hex 값 확인 +- [x] AC4: spacing 11개와 radius 3개 dimen 토큰이 존재한다. + - QA: `dimens.xml`에서 이름과 dp 값 확인 +- [x] AC5: 기존 XML 레이아웃, Kotlin 코드, Compose 파일은 변경하지 않는다. + - QA: 변경 파일 목록에서 리소스/문서 외 변경이 없는지 확인 +- [x] AC6: 리소스 빌드 검증을 수행한다. + - QA: `./gradlew :app:assembleDebug` + +## 검증 기록 +- 2026-05-15 + - 무엇/왜/어떻게: 구현 전 PRD와 계획 문서를 작성했다. 사용자 지시에 따라 범위는 XML 리소스 추가로만 제한했다. + - 실행 명령/도구: + - `read(app/src/main/res/values/colors.xml)` + - `read(app/src/main/res/values/themes.xml)` + - `rg --files app/src/main/res/values | rg 'dimens|spacing|radius|shape'` + - 결과: + - 기존 프로젝트는 XML 리소스 중심이며 Compose 사용 흔적이 확인되지 않았다. + - 기존 `dimens.xml`은 없어 새 파일 생성 대상으로 정리했다. +- 2026-05-15 + - 무엇/왜/어떻게: TDD 방식으로 토큰 추가 전 대표 color/dimen 조회가 실패함을 확인한 뒤, XML 리소스만 추가했다. + - 실행 명령/도구: + - `rg -n '' app/src/main/res/values/colors.xml` + - `rg -n '' app/src/main/res/values` + - `apply_patch` + - 결과: + - 토큰 추가 전에는 대표 color/dimen 토큰 조회 결과가 없었다. + - `colors.xml`에는 요청된 color 토큰 30개를 추가했다. + - `dimens.xml`에는 요청된 spacing 토큰 11개와 radius 토큰 3개를 추가했다. +- 2026-05-15 + - 무엇/왜/어떻게: 추가된 XML 리소스가 조회되고 Android 리소스 빌드가 가능한지 검증했다. + - 실행 명령/도구: + - `rg -n '' app/src/main/res/values/colors.xml` + - `rg -n '' app/src/main/res/values/dimens.xml` + - `lsp_diagnostics(app/src/main/res/values/colors.xml)` + - `lsp_diagnostics(app/src/main/res/values/dimens.xml)` + - `./gradlew :app:assembleDebug` + - 결과: + - 요청된 color 토큰 30개와 dimen 토큰 14개가 모두 조회됐다. + - XML LSP는 현재 환경에 설정되어 있지 않아 실행 불가(`No LSP server configured for extension: .xml`)였다. + - `./gradlew :app:assembleDebug`는 `BUILD SUCCESSFUL`로 완료됐다. + - 빌드 중 기존 Kotlin deprecation/unchecked cast warning은 출력됐지만 이번 XML 리소스 추가와 무관하며 빌드는 성공했다. diff --git a/docs/prd/20260515_design_token_xml_resource_prd.md b/docs/prd/20260515_design_token_xml_resource_prd.md new file mode 100644 index 00000000..b21c892b --- /dev/null +++ b/docs/prd/20260515_design_token_xml_resource_prd.md @@ -0,0 +1,133 @@ +# PRD: XML 디자인 토큰 리소스 추가 + +## 1. Overview +XML 레이아웃에서 재사용할 수 있는 색상, Spacing, Radius 디자인 토큰 리소스를 추가한다. + +--- + +## 2. Problem +- 현재 색상은 `colors.xml`에 값 중심 이름으로 많이 정의되어 있어 신규 디자인 시스템 팔레트를 의미 단위로 재사용하기 어렵다. +- Spacing과 Radius는 공통 `dimen` 리소스로 중앙화되어 있지 않아 XML마다 직접 `dp` 값을 지정해야 한다. +- 현재 프로젝트는 Compose가 아니라 XML 레이아웃 중심이므로 XML 리소스로 토큰을 제공해야 한다. + +--- + +## 3. Goals +- Primary Color `soda_50`부터 `soda_900`까지 XML color 리소스로 제공한다. +- Semantic Color `red_50`부터 `red_400`, `green_50`부터 `green_400`까지 XML color 리소스로 제공한다. +- Gray Color `gray_50`부터 `gray_900`까지 XML color 리소스로 제공한다. +- Spacing `4, 6, 8, 12, 14, 16, 20, 24, 28, 32, 48`을 XML dimen 리소스로 제공한다. +- Radius `4, 8, 14`를 XML dimen 리소스로 제공한다. + +--- + +## 4. Non-Goals +- 기존 XML 레이아웃의 색상, margin, padding, corner 값을 일괄 교체하지 않는다. +- Compose Theme, Kotlin 디자인 토큰 객체, 신규 UI 컴포넌트를 추가하지 않는다. +- 요청된 토큰 외 추가 색상, spacing, radius 값을 정의하지 않는다. +- 기존 `color_...` 리소스 이름을 삭제하거나 변경하지 않는다. + +--- + +## 5. Target Users +- XML 레이아웃을 작성하거나 유지보수하는 Android 개발자. + +--- + +## 6. User Stories +- 개발자는 신규 XML 레이아웃에서 `@color/soda_400`처럼 의미 있는 색상 토큰을 사용하고 싶다. +- 개발자는 XML에서 `@dimen/spacing_16`, `@dimen/radius_8`처럼 공통 간격과 라운드 값을 재사용하고 싶다. + +--- + +## 7. Core Features + +### XML Color Tokens +`app/src/main/res/values/colors.xml`에 요청된 디자인 시스템 색상 토큰을 추가한다. + +#### Requirements +- Primary Color + - `soda_50`: `#E6F9FF` + - `soda_100`: `#B8EEFD` + - `soda_200`: `#85E1FB` + - `soda_300`: `#4FD2F9` + - `soda_400`: `#00BDF7` + - `soda_500`: `#00A0DF` + - `soda_600`: `#0081C2` + - `soda_700`: `#006BA4` + - `soda_800`: `#004F7F` + - `soda_900`: `#052742` +- Accent + - `red_50`: `#FFF1F2` + - `red_100`: `#FFD7D9` + - `red_200`: `#FFB3B7` + - `red_300`: `#FF858B` + - `red_400`: `#FF4C3C` +- Point + - `green_50`: `#F5FBEF` + - `green_100`: `#E9FADB` + - `green_200`: `#C0F595` + - `green_300`: `#9FFB56` + - `green_400`: `#73FF01` +- Gray Color + - `gray_50`: `#FAFAFA` + - `gray_100`: `#F2F2F2` + - `gray_200`: `#E2E2E2` + - `gray_300`: `#CCCCCC` + - `gray_400`: `#B5B5B5` + - `gray_500`: `#959595` + - `gray_600`: `#787878` + - `gray_700`: `#494949` + - `gray_800`: `#343434` + - `gray_900`: `#202020` + +### XML Spacing and Radius Tokens +`app/src/main/res/values/dimens.xml`에 spacing/radius 토큰을 추가한다. + +#### Requirements +- Spacing: `spacing_4`, `spacing_6`, `spacing_8`, `spacing_12`, `spacing_14`, `spacing_16`, `spacing_20`, `spacing_24`, `spacing_28`, `spacing_32`, `spacing_48` +- Radius: `radius_4`, `radius_8`, `radius_14` +- 각 값은 이름의 숫자와 동일한 `dp` 값을 사용한다. + +#### Edge Cases +- 기존 레이아웃에 새 토큰을 자동 적용하지 않으므로 화면 변화는 발생하지 않는다. +- 기존 `colors.xml`의 값 중심 색상 리소스는 유지한다. + +--- + +## 8. UX / UI Expectations +- 기존 화면은 변경되지 않는다. +- 신규 XML 작성 시 색상, spacing, radius 값을 의미 있는 리소스 이름으로 재사용할 수 있다. + +### Usage Samples +```xml + +``` + +```xml + +``` + +--- + +## 9. Technical Constraints +- XML 리소스만 추가한다. +- 기존 XML 레이아웃, Kotlin 코드, Compose 관련 파일은 변경하지 않는다. +- 색상 토큰은 기존 색상 리소스 파일인 `app/src/main/res/values/colors.xml`에 추가한다. +- Spacing과 Radius는 새 `app/src/main/res/values/dimens.xml`에 추가한다. + +--- + +## 10. Metrics +- 요청된 color 토큰 30개가 모두 존재한다. +- 요청된 spacing 토큰 11개와 radius 토큰 3개가 모두 존재한다. +- Android 리소스 병합 및 디버그 빌드가 성공한다. + +--- + +## 11. Open Questions +- 없음. 현재 요청 범위는 XML 리소스 추가로 한정한다.