Conversation
Summary of ChangesHello @dasosann, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 디자인 토큰 관리 시스템을 개선하여 개발 워크플로우를 효율화하는 데 중점을 둡니다. 기존에 JSON 형태로 관리되던 디자인 토큰을 자동화된 스크립트를 통해 CSS 변수 및 Tailwind CSS와 유사한 유틸리티 클래스로 변환함으로써, 개발자들이 컴포넌트에서 디자인 시스템을 보다 일관되고 편리하게 적용할 수 있도록 합니다. 이는 디자인과 개발 간의 격차를 줄이고, 유지보수성을 향상시키는 데 기여할 것입니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 디자인 토큰 시스템을 도입하여 UI 일관성을 높이는 중요한 단계입니다. token.json에서 CSS를 자동 생성하는 스크립트 방식은 매우 훌륭합니다. 다만, 몇 가지 개선점을 제안합니다. generate-tokens.js 스크립트는 타입스크립트로 전환하고 리팩토링하여 안정성을 높이는 것이 좋겠습니다. 또한, 생성된 버튼 클래스와 테스트 페이지에서의 사용법이 일치하지 않는 문제가 있으며, 새로운 토큰 시스템과 기존 스타일(shadcn/ui로 추정)이 혼재되어 있어 통합 계획이 필요해 보입니다. 아래에 자세한 리뷰를 남겼으니 확인 부탁드립니다.
| <div className="flex flex-wrap gap-4"> | ||
| <button className="btn-primary text-16-600 px-8 py-3 transition-opacity hover:opacity-90"> | ||
| Primary Button | ||
| </button> | ||
| <button className="btn-slate text-brand-black border-light text-16-600 rounded-2xl border px-8 py-3"> | ||
| Secondary Button | ||
| </button> | ||
| <button className="btn-disabled text-16-400 cursor-not-allowed px-8 py-3"> | ||
| Disabled Button | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
버튼에 사용된 btn-* 클래스들이 tokens.css에 정의되어 있지 않아 스타일이 적용되지 않습니다. generate-tokens.js 스크립트는 .bg-button-* 형태의 배경색 유틸리티만 생성하고 있습니다.
우선 급한 대로 아래와 같이 직접 클래스를 수정하여 문제를 해결할 수 있습니다. 하지만 장기적으로는 스크립트에서 @apply를 사용하여 모든 스타일이 포함된 단일 클래스(예: .btn-primary)를 생성하는 방향으로 개선하는 것이 좋습니다.
수정 제안:
btn-primary->bg-button-primary text-white rounded-2xlbtn-slate->bg-button-slatebtn-disabled->bg-button-disabled text-disabled rounded-2xl
| <div className="flex flex-wrap gap-4"> | |
| <button className="btn-primary text-16-600 px-8 py-3 transition-opacity hover:opacity-90"> | |
| Primary Button | |
| </button> | |
| <button className="btn-slate text-brand-black border-light text-16-600 rounded-2xl border px-8 py-3"> | |
| Secondary Button | |
| </button> | |
| <button className="btn-disabled text-16-400 cursor-not-allowed px-8 py-3"> | |
| Disabled Button | |
| </button> | |
| </div> | |
| <div className="flex flex-wrap gap-4"> | |
| <button className="bg-button-primary text-white text-16-600 rounded-2xl px-8 py-3 transition-opacity hover:opacity-90"> | |
| Primary Button | |
| </button> | |
| <button className="bg-button-slate text-brand-black border-light text-16-600 rounded-2xl border px-8 py-3"> | |
| Secondary Button | |
| </button> | |
| <button className="bg-button-disabled text-disabled text-16-400 rounded-2xl cursor-not-allowed px-8 py-3"> | |
| Disabled Button | |
| </button> | |
| </div> |
References
- Tailwind CSS 클래스가 길고 반복적으로 사용되고 있습니다. 스타일 가이드에서는 이런 경우
cva등을 사용한 논리적 그룹핑을 권장합니다. 스크립트를 개선하여.btn-primary와 같이 여러 스타일을 하나로 묶은 클래스를 생성하는 것이 좋습니다. (link)
| <div className="bg-surface-base flex min-h-screen items-center justify-center font-sans"> | ||
| <main className="flex min-h-screen w-full max-w-3xl flex-col items-center gap-8 px-8 py-12"> | ||
| {/* 토큰 테스트 섹션 */} | ||
| <div className="w-full space-y-8 rounded-lg border border-gray-200 bg-white p-8 shadow-sm"> |
There was a problem hiding this comment.
하드코딩된 border-gray-200 클래스 대신 토큰 시스템의 border-light를 사용하는 것이 일관성 측면에서 더 좋습니다. tokens.css에 .border-light 유틸리티가 이미 정의되어 있습니다.
| <div className="w-full space-y-8 rounded-lg border border-gray-200 bg-white p-8 shadow-sm"> | |
| <div className="w-full space-y-8 rounded-lg border border-light bg-white p-8 shadow-sm"> |
| {/* 1. Typography */} | ||
| <section className="space-y-4"> | ||
| <h2 className="text-20-600">1. Typography</h2> | ||
| <div className="space-y-2 rounded bg-gray-50 p-4"> |
There was a problem hiding this comment.
하드코딩된 bg-gray-50 클래스 대신 디자인 시스템에 정의된 시맨틱 토큰(예: bg-muted)을 사용하는 것을 권장합니다. 현재 tokens.css에는 bg-gray-50에 해당하는 유틸리티 클래스가 없어 Tailwind의 기본값을 사용하게 되는데, 이는 토큰 시스템의 일관성을 해칠 수 있습니다. 토큰 생성 스크립트에서 관련 유틸리티 클래스를 추가하는 것을 고려해보세요.
| // 토큰 참조 해석 | ||
| function resolveValue(value, depth = 0) { | ||
| if (depth > 10 || typeof value !== "string") return value; | ||
|
|
||
| const match = value.match(/^\{(.+)\}$/); | ||
| if (!match) return value; | ||
|
|
||
| const ref = match[1]; | ||
|
|
||
| // Grayscale 참조 | ||
| if (ref.startsWith("Grayscale.")) { | ||
| const key = ref.replace("Grayscale.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
|
|
||
| // Colors 참조 | ||
| if (ref.startsWith("Colors.Pink.")) { | ||
| const key = ref.replace("Colors.Pink.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
| if (ref.startsWith("Colors.Flame.")) { | ||
| const key = ref.replace("Colors.Flame.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
| if (ref.startsWith("Colors.Orange.")) { | ||
| const key = ref.replace("Colors.Orange.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
|
|
||
| // Transparent 참조 | ||
| if (ref.startsWith("Transparent.")) { | ||
| const key = ref.replace("Transparent.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
|
|
||
| // System/Mode 1의 Colors 참조 | ||
| if (ref.startsWith("Colors.")) { | ||
| const key = ref.replace("Colors.", ""); | ||
| return `var(--${key})`; | ||
| } | ||
|
|
||
| return value; | ||
| } |
There was a problem hiding this comment.
resolveValue 함수 내에 if (ref.startsWith(...)) 조건문이 반복적으로 사용되고 있습니다. 이 구조는 새로운 토큰 카테고리가 추가될 때마다 코드를 수정해야 하므로 확장성이 떨어집니다. 참조 경로(Grayscale.color-gray-64 등)를 파싱하여 동적으로 토큰 객체를 탐색하는 방식으로 리팩토링하면 더 유연하고 유지보수하기 좋은 코드가 될 것입니다.
1 participant
요약
구현 사항
generate-tokens.js
토큰 자동 생성 스크립트 구현scripts/generate-tokens.js
변환
globals.css
토큰 CSS 파일 임포트 추가app/globals.css
page.tsx
디자인 토큰 테스트 페이지 구현app/page.tsx
bg-brand-primary-orange), 배경(bg-surface-base) 토큰 시각화
tokens.css
자동 생성된 디자인 토큰 CSS 파일app/tokens.css
클래스 정의
--color-brand-primary-orange)
settings.json
CSS 린트 설정 업데이트.vscode/settings.json
token.json
레거시 토큰 파일 제거app/src/token.json
Need Review
Reference
📜 리뷰 규칙
Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.