Skip to content

chore(core-ui): 테마 토큰 미적용 하드코드 색상 토큰화 (closes 402)#404

Open
1hyok wants to merge 2 commits into
developfrom
feat/402
Open

chore(core-ui): 테마 토큰 미적용 하드코드 색상 토큰화 (closes 402)#404
1hyok wants to merge 2 commits into
developfrom
feat/402

Conversation

@1hyok

@1hyok 1hyok commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

📌𝘐𝘴𝘴𝘶𝘦𝘴

Closes #402 — chore(core-ui): 테마 토큰 미적용 하드코드 색상 토큰화

📎𝘞𝘰𝘳𝘬 𝘋𝘦𝘴𝘤𝘳𝘪𝘱𝘵𝘪𝘰𝘯

  • BottomSheetCalendar: 하드코드 색상 6곳을 AfternoteDesign.colors 토큰으로 치환 (drag handle·날짜박스 배경·경계선·요일 라벨·선택셀 bg/text)
  • Color.kt: Black 토큰을 privateinternal 로 승격 (Shadow 에서 재사용 가능하게)
  • Shadow.kt: top-level val 이라 @Composable 토큰 접근 불가 → 같은 패키지 Black 재사용, unused Color import 제거
  • LoginScreen: 구글 로그인 버튼 배경 Color(0xFFF2F2F2)gray2, 무의미해진 hex 주석 제거

📷𝘚𝘤𝘳𝘦𝘦𝘯𝘴𝘩𝘰𝘵

LoginScreen 구글 버튼 에뮬레이터 실기기 확인 — 렌더 정상, 색상 차 육안 무차별. BottomSheetCalendar 는 screenshot test 부재 + light mode 시각 거의 동일 (아래 근사 치환 참고).

💬𝘛𝘰 𝘙𝘦𝘷𝘪𝘦𝘸𝘦𝘳𝘴

  • 근사 치환 주의: 하드코드 hex 7곳 중 black 2곳(경계선·요일 라벨)만 토큰과 정확히 일치. 나머지 5곳은 디자인 토큰 격자의 사이값이라 최근접 토큰으로 흡수했고, 채널당 1~19단위 차가 있습니다 (#888888→gray6 가 −19로 가장 큼). 각 라인에 근사 주석을 명시했습니다. 실이득은 다크모드 토큰 대응입니다.
  • ModalBottomSheet/OutlinedCard 의 containerColor = Color.White, 카카오 버튼 Color(0xFFFEE500)(브랜드 고정색)은 이슈 범위 외라 유지했습니다.
  • 빌드 검증: ./gradlew :core:ui:compileDebugKotlin :feature:onboarding:presentation:compileDebugKotlin BUILD SUCCESSFUL

- `LoginScreen` 및 `BottomSheetCalendar`에서 사용되던 하드코딩된 HEX 색상 값을 `AfternoteDesign.colors`의 그레이스케일 토큰(gray1, gray2, gray3, gray6, gray9)으로 대체
- `core:ui` 모듈의 `Black` 색상 상수를 `internal`로 변경하여 `Shadow.kt` 등 내부 파일에서 재사용 가능하도록 수정
- `BottomSheetCalendar` 내 선택된 날짜의 배경색 및 미선택 텍스트 색상을 디자인 토큰 기반으로 리팩터링
- `Shadow.kt`에서 하드코딩된 검정색을 공통 상수로 교체하고, `spread` 값 선언 방식 수정 및 미사용 임포트 제거
@github-actions

github-actions Bot commented Jun 5, 2026

Copy link
Copy Markdown

Screenshot test fail — baseline 과 CI rendered PNG 차이.

📦 Artifact: https://github.com/Afternote/Afternote-FE/actions/runs/27013902035 (페이지 하단 Artifacts → screenshot-test-results)

🔍 확인 위치 (artifact zip 내부):

  • diff PNG: preview/debug/diffs/...
  • rendered PNG: preview/debug/rendered/... (CI 환경에서 새로 그린 결과)
  • baseline PNG: repo <module>/src/screenshotTestDebug/reference/... (:core:ui · :app · :feature:onboarding:presentation · :feature:afternote:presentation)

📝 조치 가이드:

  • 의도된 시각 변경 → docker build -t afternote-screenshot:latest -f Dockerfile.screenshot .docker run --rm -v "$PWD":/workspace -w /workspace afternote-screenshot:latest ./gradlew :<module>:updateScreenshotTest 로 baseline 갱신 + commit/push
  • diff 가 anti-aliasing/font 차이로 보이면 docker 환경 변경 여부 (Dockerfile.screenshot) 점검

CI ↔ 로컬 환경 차이는 본 워크플로의 container 단계가 root fix 한다 (README 의 "Compose Preview Screenshot Testing (docker baseline)" 섹션 참조).

- `LoginScreenScreenshotTest`의 초기 화면 캡처 레퍼런스 이미지(`loginScreenInitialScreenshot`) 갱신
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore(core-ui): 테마 토큰 미적용 하드코드 색상 토큰화

1 participant