feat: 디자인 시스템 도입 — 브랜드 토큰 + 공통 UI 프리미티브 (#20)#24
Merged
Conversation
- 브랜드 토큰(네이비/블루 brand-50..950) + Geist 폰트 본문 적용 (tailwind/globals/layout) - 공통 UI 프리미티브 신설: Button/Card/Badge/Container/Input + cn 유틸 + Wordmark (src/shared/components/, 신규 의존성 없음, 각 *.test 동반) - 기존 화면 리팩터: login/register/dashboard layout·page, UrlInput/AnalysisCard/InsightReport/analyses → blue 하드코딩을 brand 토큰으로, 박스를 Card/Badge/Button 프리미티브로 교체 - 테스트 의존 텍스트/aria-label 보존, 59개 테스트 전체 통과 Refs #20 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #20
작업 요약
소상공인 대상 브랜드 신뢰도의 시각적 토대를 만든다. 네이비/블루+화이트 토큰과 공통 UI 프리미티브를 신설하고 기존 화면을 이를 사용하도록 리팩터. 이후 #21(앱 UI)·#22(랜딩)·#23(분석 전문성)의 기반.
변경 내용
디자인 토대 (신규)
tailwind.config.ts에brand-50..950(네이비/블루) 스케일 +fontFamily.sans/mono(Geist)globals.css,layout.tsx), 본문색 slate-900 톤src/shared/components/ui/:Button(4 variant×3 size) ·Card·Badge(5 variant) ·Container·Input(forwardRef) +cn유틸 — 신규 npm 의존성 없음기존 화면 리팩터 (토큰/프리미티브 적용)
login/register— Card+Input+Button+Wordmark, blue→brandlayout(헤더 Wordmark, Container, 로그아웃 Button) ·dashboard(Card + 온보딩 카피)UrlInput·AnalysisCard(Badge 상태)·InsightReport(Card/Badge)·analyses/[id](Card, 스피너 brand)검증
npm run type-check통과npm test -- --run— 59/59 통과 (신규 프리미티브 22 + 기존 37)주요 결정
작업 방식
이슈 #20 → /task-with-harness(서브태스크 T1 토대 → T2 인증/대시보드 ∥ T3 분석 리팩터) → 이 PR. 머지 후 Wiki(Frontend) 반영 예정.
🤖 Generated with Claude Code