디자인 토큰 2계층 재설계 (전면 표준화 Phase 3-7)

[Cassiiopeia]

관련 이슈

• 🚀 [기능개선][디자인] 디자인 시스템 재확립 및 대형 화면 분해 (전면 표준화 Phase 3) #100

개요

디자인 토큰을 원시 · 의미 2계층으로 재설계했습니다.

기존 theme.js는 값의 나열이었습니다. colors.primary가 무슨 색인지는 알 수 있지만 **"이 색을 언제 쓰는가"**가 정의돼 있지 않았습니다. 그래서 새 컴포넌트를 만들 때 참조할 기준이 없어 결국 눈대중으로 rgba를 적게 됐고, 같은 연보라가 토큰으로도 하드코딩으로도 존재하게 됐습니다.

구조

파일	역할
src/styles/tokens.js	원시 토큰 — 팔레트·간격·반경·그림자·흐림·전환. 값 그 자체
src/styles/semantic.js	의미 토큰 — surface·text·border·action·feedback·rank·glass·layer
src/styles/theme.js	호환 레이어 — 기존 이름 유지, 값은 전부 의미 토큰 참조

컴포넌트는 의미 토큰만 참조합니다. palette.lilac90은 무슨 색인지만 알려주지만 action.primary는 어디에 써야 하는지를 알려줍니다.

하위 호환

theme.js를 쓰는 기존 5개 파일(GlassCard, ProfileContent, StatsContent, DialogueSystem, NotFound)은 한 줄도 고치지 않았습니다. colors·glassmorphism·glassCard·media·componentStyles export를 그대로 유지하되 값만 의미 토큰을 참조하도록 바꿨습니다.

이제 색을 바꾸려면 tokens.js의 팔레트 한 곳만 고치면 의미 토큰과 호환 레이어를 타고 전체에 반영됩니다.

검증

자동

명령	결과
format:check	✅ exit 0
lint	✅ exit 0
test:ci	✅ 105 tests
build	✅ Compiled successfully

시각적 변화가 없음을 실제 렌더 값으로 확인

토큰 재설계는 보이는 것이 하나도 달라지지 않아야 성공입니다. 404 화면(theme.js 사용처)의 계산된 스타일을 브라우저에서 직접 읽었습니다.

항목	렌더된 값	대응 토큰
패널 배경	rgba(0, 0, 0, 0.4)	surface.glass
모서리 반경	20px	radius.lg
강조 텍스트	rgba(200, 182, 226, 0.9)	action.primary

기존 값과 정확히 일치합니다. 콘솔 에러 0건.

남은 작업 (이슈 #100)

• 하드코딩된 rgba 값을 의미 토큰 참조로 교체 (컴포넌트별)
• 인라인 스타일 잔여분
• 3해상도 전 화면 캡처

[coderabbitai]

Warning

Review limit reached

@Cassiiopeia, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 19 seconds

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e3828ea5-8958-4439-8501-a85604ed751f

📥 Commits

Reviewing files that changed from the base of the PR and between f0c8820 and 6fe325f.

📒 Files selected for processing (4)

• docs/DESIGN-SYSTEM.md
• src/styles/semantic.js
• src/styles/theme.js
• src/styles/tokens.js

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🚀 CI 빌드 성공!

📦 빌드 정보

• 빌드 크기: 167M
• 빌드 시간: 26초
• 커밋: 090e26825a00c09315cb5f6803af23df52e6dd14
• 브랜치: 20260808_#100_디자인_토큰_2계층_재설계

📁 생성된 파일

static/js/main.d309b9d5.js

✅ 모든 검사 통과

• 포맷 체크 ✅
• 린트 체크 ✅
• 테스트 실행 ✅
• 빌드 생성 ✅

이 댓글은 모든 단계가 통과했을 때만 생성됩니다.

자동 생성된 댓글입니다.