-
Notifications
You must be signed in to change notification settings - Fork 0
[FE] tailwind css 스타일 토큰(글꼴, typo, color, spacing) 설정 #19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
/gemini review |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
이 PR은 Tailwind CSS 디자인 토큰 시스템을 구축하여 애플리케이션 전반의 스타일 일관성을 위한 기반을 마련합니다. 전반적으로 잘 구성되었으나, 몇 가지 개선점을 제안합니다. 테스트 목적으로 추가된 코드를 제거하고, 색상 토큰 정의를 단순화하며, CSS 변수 명명 규칙을 개선하여 가독성과 유지보수성을 높일 수 있습니다.
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <div className="number-semibold-84">tailwind test</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
frontend/src/index.css
Outdated
| --color-special-dashboard-bg: #fafbff; | ||
| --color-special-card-bg: #ffffff; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--color-special-dashboard-bg와 --color-special-card-bg는 각각 --color-grey-50과 --color-grey-0와 동일한 값을 가집니다. 중복된 하드코딩 값을 사용하는 대신, 이미 정의된 primitive 토큰을 var() 함수로 참조하면 코드의 일관성과 유지보수성이 향상됩니다.
| --color-special-dashboard-bg: #fafbff; | |
| --color-special-card-bg: #ffffff; | |
| --color-special-dashboard-bg: var(--color-grey-50); | |
| --color-special-card-bg: var(--color-grey-0); |
| --color-others-50: var(--color-brand-50); | ||
| --color-others-20: var(--color-brand-20); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
frontend/src/index.css
Outdated
| --spacing-spacing-0: 0rem; /* 0px */ | ||
| --spacing-spacing-50: 0.125rem; /* 2px */ | ||
| --spacing-spacing-100: 0.25rem; /* 4px */ | ||
| --spacing-spacing-150: 0.375rem; /* 6px (특수 경우) */ | ||
| --spacing-spacing-200: 0.5rem; /* 8px */ | ||
| --spacing-spacing-250: 0.625rem; /* 10px */ | ||
| --spacing-spacing-300: 0.75rem; /* 12px */ | ||
| --spacing-spacing-350: 0.875rem; /* 14px */ | ||
| --spacing-spacing-400: 1rem; /* 16px */ | ||
| --spacing-spacing-500: 1.25rem; /* 20px */ | ||
| --spacing-spacing-600: 1.5rem; /* 24px */ | ||
| --spacing-spacing-700: 1.75rem; /* 28px */ | ||
| --spacing-spacing-800: 2rem; /* 32px */ | ||
| --spacing-spacing-900: 2.25rem; /* 36px */ | ||
| --spacing-spacing-1000: 2.5rem; /* 40px */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
spacing 변수명에 spacing- 접두사가 중복되어 있습니다 (예: --spacing-spacing-50). 가독성과 일관성을 위해 --spacing-50과 같이 중복을 제거하는 것이 좋습니다. 이는 Tailwind 설정 파일에서 값을 매핑할 때도 더 직관적입니다.
| --spacing-spacing-0: 0rem; /* 0px */ | |
| --spacing-spacing-50: 0.125rem; /* 2px */ | |
| --spacing-spacing-100: 0.25rem; /* 4px */ | |
| --spacing-spacing-150: 0.375rem; /* 6px (특수 경우) */ | |
| --spacing-spacing-200: 0.5rem; /* 8px */ | |
| --spacing-spacing-250: 0.625rem; /* 10px */ | |
| --spacing-spacing-300: 0.75rem; /* 12px */ | |
| --spacing-spacing-350: 0.875rem; /* 14px */ | |
| --spacing-spacing-400: 1rem; /* 16px */ | |
| --spacing-spacing-500: 1.25rem; /* 20px */ | |
| --spacing-spacing-600: 1.5rem; /* 24px */ | |
| --spacing-spacing-700: 1.75rem; /* 28px */ | |
| --spacing-spacing-800: 2rem; /* 32px */ | |
| --spacing-spacing-900: 2.25rem; /* 36px */ | |
| --spacing-spacing-1000: 2.5rem; /* 40px */ | |
| --spacing-0: 0rem; /* 0px */ | |
| --spacing-50: 0.125rem; /* 2px */ | |
| --spacing-100: 0.25rem; /* 4px */ | |
| --spacing-150: 0.375rem; /* 6px (특수 경우) */ | |
| --spacing-200: 0.5rem; /* 8px */ | |
| --spacing-250: 0.625rem; /* 10px */ | |
| --spacing-300: 0.75rem; /* 12px */ | |
| --spacing-350: 0.875rem; /* 14px */ | |
| --spacing-400: 1rem; /* 16px */ | |
| --spacing-500: 1.25rem; /* 20px */ | |
| --spacing-600: 1.5rem; /* 24px */ | |
| --spacing-700: 1.75rem; /* 28px */ | |
| --spacing-800: 2rem; /* 32px */ | |
| --spacing-900: 2.25rem; /* 36px */ | |
| --spacing-1000: 2.5rem; /* 40px */ |
frontend/src/index.css
Outdated
| --radius-radius-0: 0rem; /* 0px */ | ||
| --radius-radius-50: 0.125rem; /* 2px */ | ||
| --radius-radius-100: 0.25rem; /* 4px */ | ||
| --radius-radius-150: 0.375rem; /* 6px */ | ||
| --radius-radius-200: 0.5rem; /* 8px */ | ||
| --radius-radius-250: 0.625rem; /* 10px */ | ||
| --radius-radius-300: 0.75rem; /* 12px */ | ||
| --radius-radius-400: 1rem; /* 16px */ | ||
| --radius-radius-500: 1.25rem; /* 20px */ | ||
| --radius-radius-600: 1.5rem; /* 24px */ | ||
| --radius-radius-700: 1.75rem; /* 28px */ | ||
| --radius-radius-800: 2.25rem; /* 36px */ | ||
| --radius-radius-900: 3rem; /* 48px */ | ||
| --radius-radius-unlimit: 9999px; /* 원형 */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
radius 변수명에도 radius- 접두사가 중복되어 있습니다 (예: --radius-radius-50). spacing 변수와 마찬가지로, --radius-50과 같이 수정하여 일관성을 유지하고 가독성을 높이는 것을 권장합니다.
| --radius-radius-0: 0rem; /* 0px */ | |
| --radius-radius-50: 0.125rem; /* 2px */ | |
| --radius-radius-100: 0.25rem; /* 4px */ | |
| --radius-radius-150: 0.375rem; /* 6px */ | |
| --radius-radius-200: 0.5rem; /* 8px */ | |
| --radius-radius-250: 0.625rem; /* 10px */ | |
| --radius-radius-300: 0.75rem; /* 12px */ | |
| --radius-radius-400: 1rem; /* 16px */ | |
| --radius-radius-500: 1.25rem; /* 20px */ | |
| --radius-radius-600: 1.5rem; /* 24px */ | |
| --radius-radius-700: 1.75rem; /* 28px */ | |
| --radius-radius-800: 2.25rem; /* 36px */ | |
| --radius-radius-900: 3rem; /* 48px */ | |
| --radius-radius-unlimit: 9999px; /* 원형 */ | |
| --radius-0: 0rem; /* 0px */ | |
| --radius-50: 0.125rem; /* 2px */ | |
| --radius-100: 0.25rem; /* 4px */ | |
| --radius-150: 0.375rem; /* 6px */ | |
| --radius-200: 0.5rem; /* 8px */ | |
| --radius-250: 0.625rem; /* 10px */ | |
| --radius-300: 0.75rem; /* 12px */ | |
| --radius-400: 1rem; /* 16px */ | |
| --radius-500: 1.25rem; /* 20px */ | |
| --radius-600: 1.5rem; /* 24px */ | |
| --radius-700: 1.75rem; /* 28px */ | |
| --radius-800: 2.25rem; /* 36px */ | |
| --radius-900: 3rem; /* 48px */ | |
| --radius-unlimit: 9999px; /* 원형 */ |
| font-family: var(--font-poppins); | ||
| font-weight: 600; | ||
| font-size: 3.75rem; | ||
| line-height: 90%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| font-family: var(--font-poppins); | ||
| font-weight: 600; | ||
| font-size: 5.25rem; | ||
| line-height: 90%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR establishes a comprehensive Tailwind CSS design system by adding design tokens for fonts, typography, colors, spacing, and border radius. The changes include font asset additions (Pretendard Variable and Poppins), a complete color palette with primitive and semantic tokens, an 8px-based spacing grid system, and extensive typography utility classes.
Changes:
- Added web font assets and @font-face declarations for Pretendard Variable and Poppins fonts
- Defined color system with primitive tokens (Grey 0-1000, Brand 20-900, Others) and semantic mappings
- Established spacing (0-1000) and radius (0-unlimit) token systems based on 8px grid
- Created comprehensive typography utilities for Headline, Title, Body, and Caption with multiple weight variations
Reviewed changes
Copilot reviewed 4 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/index.css | Complete design token system setup including fonts, colors, spacing, radius, and typography utilities |
| frontend/src/App.tsx | Added test div to demonstrate typography utility class |
| frontend/src/main.tsx | Reordered imports (cosmetic change) |
| frontend/src/mocks/browser.ts | Added blank line for formatting |
| frontend/public/fonts/poppins-v24-latin-600.woff2 | Binary font file added for Poppins SemiBold |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| /* others */ | ||
| --color-others-red: #ff4443; | ||
| --color-others-gracyblue: #e4e9f3; |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The color name "gracyblue" appears to be a misspelling. This should likely be "grayishblue" or "greyishblue" to properly describe the color. This naming inconsistency could cause confusion for developers using this design token.
| --color-others-gracyblue: #e4e9f3; | |
| --color-others-grayishblue: #e4e9f3; |
| --color-special-dashboard-bg: #fafbff; | ||
| --color-special-card-bg: #ffffff; | ||
|
|
||
| /* ======= sementic ========*/ |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The comment "sementic" is misspelled. It should be "semantic" to properly describe semantic color tokens.
| /* ======= sementic ========*/ | |
| /* ======= semantic ========*/ |
frontend/src/index.css
Outdated
| --spacing-spacing-0: 0rem; /* 0px */ | ||
| --spacing-spacing-50: 0.125rem; /* 2px */ | ||
| --spacing-spacing-100: 0.25rem; /* 4px */ | ||
| --spacing-spacing-150: 0.375rem; /* 6px (특수 경우) */ | ||
| --spacing-spacing-200: 0.5rem; /* 8px */ | ||
| --spacing-spacing-250: 0.625rem; /* 10px */ | ||
| --spacing-spacing-300: 0.75rem; /* 12px */ | ||
| --spacing-spacing-350: 0.875rem; /* 14px */ | ||
| --spacing-spacing-400: 1rem; /* 16px */ | ||
| --spacing-spacing-500: 1.25rem; /* 20px */ | ||
| --spacing-spacing-600: 1.5rem; /* 24px */ | ||
| --spacing-spacing-700: 1.75rem; /* 28px */ | ||
| --spacing-spacing-800: 2rem; /* 32px */ | ||
| --spacing-spacing-900: 2.25rem; /* 36px */ | ||
| --spacing-spacing-1000: 2.5rem; /* 40px */ | ||
|
|
||
| /*====== 모서리 둥굴======= */ | ||
| --radius-radius-0: 0rem; /* 0px */ | ||
| --radius-radius-50: 0.125rem; /* 2px */ | ||
| --radius-radius-100: 0.25rem; /* 4px */ | ||
| --radius-radius-150: 0.375rem; /* 6px */ | ||
| --radius-radius-200: 0.5rem; /* 8px */ | ||
| --radius-radius-250: 0.625rem; /* 10px */ | ||
| --radius-radius-300: 0.75rem; /* 12px */ | ||
| --radius-radius-400: 1rem; /* 16px */ | ||
| --radius-radius-500: 1.25rem; /* 20px */ | ||
| --radius-radius-600: 1.5rem; /* 24px */ | ||
| --radius-radius-700: 1.75rem; /* 28px */ | ||
| --radius-radius-800: 2.25rem; /* 36px */ | ||
| --radius-radius-900: 3rem; /* 48px */ | ||
| --radius-radius-unlimit: 9999px; /* 원형 */ |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The variable naming pattern is inconsistent. The spacing tokens use "spacing-spacing-" (with duplicated "spacing"), while radius tokens use "radius-radius-" (with duplicated "radius"). This creates redundancy in the naming convention. Consider simplifying to either "--spacing-" and "--radius-", or ensure this duplication is intentional and documented for consistency with your design system.
| @utility headline-large-bold { | ||
| @apply headline-large font-bold; | ||
| } | ||
| @utility headline-large-semibold { | ||
| @apply headline-large font-semibold; | ||
| } | ||
| @utility headline-large-medium { | ||
| @apply headline-large font-medium; | ||
| } | ||
| @utility headline-medium-bold { | ||
| @apply headline-medium font-bold; | ||
| } | ||
| @utility headline-medium-semibold { | ||
| @apply headline-medium font-semibold; | ||
| } | ||
| @utility headline-medium-medium { | ||
| @apply headline-medium font-medium; | ||
| } | ||
| @utility headline-small-bold { | ||
| @apply headline-small font-bold; | ||
| } | ||
| @utility headline-small-semibold { | ||
| @apply headline-small font-semibold; | ||
| } | ||
| @utility headline-small-medium { | ||
| @apply headline-small font-medium; | ||
| } | ||
| @utility title-large-bold { | ||
| @apply title-large font-bold; | ||
| } | ||
| @utility title-large-semibold { | ||
| @apply title-large font-semibold; | ||
| } | ||
| @utility title-large-medium { | ||
| @apply title-large font-medium; | ||
| } | ||
| @utility title-medium-bold { | ||
| @apply title-medium font-bold; | ||
| } | ||
| @utility title-medium-semibold { | ||
| @apply title-medium font-semibold; | ||
| } | ||
| @utility title-medium-medium { | ||
| @apply title-medium font-medium; | ||
| } | ||
| @utility title-small-bold { | ||
| @apply title-small font-bold; | ||
| } | ||
| @utility title-small-semibold { | ||
| @apply title-small font-semibold; | ||
| } | ||
| @utility title-small-medium { | ||
| @apply title-small font-medium; | ||
| } | ||
| @utility body-large-bold { | ||
| @apply body-large font-bold; | ||
| } | ||
| @utility body-large-semibold { | ||
| @apply body-large font-semibold; | ||
| } | ||
| @utility body-large-medium { | ||
| @apply body-large font-medium; | ||
| } | ||
| @utility body-medium-bold { | ||
| @apply body-medium font-bold; | ||
| } | ||
| @utility body-medium-semibold { | ||
| @apply body-medium font-semibold; | ||
| } | ||
| @utility body-medium-medium { | ||
| @apply body-medium font-medium; | ||
| } | ||
| @utility body-small-bold { | ||
| @apply body-small font-bold; | ||
| } | ||
| @utility body-small-semibold { | ||
| @apply body-small font-semibold; | ||
| } | ||
| @utility body-small-medium { | ||
| @apply body-small font-medium; | ||
| } | ||
| @utility caption-large-bold { | ||
| @apply caption-large font-bold; | ||
| } | ||
| @utility caption-large-semibold { | ||
| @apply caption-large font-semibold; | ||
| } | ||
| @utility caption-large-medium { | ||
| @apply caption-large font-medium; | ||
| } | ||
| @utility caption-medium-bold { | ||
| @apply caption-medium font-bold; | ||
| } | ||
| @utility caption-medium-semibold { | ||
| @apply caption-medium font-semibold; | ||
| } | ||
| @utility caption-medium-medium { | ||
| @apply caption-medium font-medium; | ||
| } |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is significant code duplication in the typography utility classes. Lines 190-288 define combinations of font sizes with font weights using a repetitive pattern. This could be refactored using CSS custom properties or a more maintainable approach such as separate utility classes that can be composed together, reducing the 99 lines of repetitive code to a more maintainable solution.
| <div className="number-semibold-84">tailwind test</div> | ||
| <h1>Vite + React</h1> | ||
| <div className="card"> | ||
| <button onClick={() => setCount((count) => count + 2)}> |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The test code "tailwind test" has been added to the production component. This appears to be temporary test code that should be removed before merging to production, as it doesn't serve any functional purpose in the application.
| <div className="number-semibold-84">tailwind test</div> | |
| <h1>Vite + React</h1> | |
| <div className="card"> | |
| <button onClick={() => setCount((count) => count + 2)}> | |
| <h1>Vite + React</h1> | |
| <div className="card"> | |
| <button onClick={() => setCount((count) => setCount((count) => count + 2))}> |
|
|
||
| --color-others-50: var(--color-brand-50); | ||
| --color-others-20: var(--color-brand-20); | ||
| --color-others-tap-bg: var(--color-others-gracyblue); |
Copilot
AI
Jan 22, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This color mapping references "--color-others-gracyblue" which contains the misspelled name. Once the source token name is corrected, this reference should also be updated to maintain consistency.
lee0jae330
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다 ~ 구두 논의한 부분만 수정되면 좋을 것 같아요 ㅎㅎ
frontend/src/index.css
Outdated
|
|
||
| /* special colors */ | ||
| --color-special-dashboard-bg: #fafbff; | ||
| --color-special-card-bg: #ffffff; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[P4] primitive가 아니라 semantic으로 들어가야 할 것 같아요! 참고만 해주세요 ㅎㅎ
frontend/src/index.css
Outdated
| } | ||
|
|
||
| @theme { | ||
| --font-sans: 'Pretendard Variable', sans-serif; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[P4] 폰트명을 sans로 하신 이유가 있나요? pretendard로 하는 게 좀 더 직관적일 것 같다는 의견입니다
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--font-sans가 기본값이어서 pretendard로 덮은거였는데 말씀하신대로
--font-pretendard로 따로 정의하고 body의 font-family를 var(--font-pretendard)로 정의했습니다!
| } | ||
| } | ||
|
|
||
| @utility headline-large { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#️⃣ 변경 사항
Tailwind CSS 디자인 시스템 구축을 위한 전역 디자인 토큰(Design Tokens) 설정 및 폰트 자산 추가
#️⃣ 작업 상세 내용
Pretendard Variable및 숫자용 폰트Poppins(SemiBold 600) 파일 추가@font-face설정을 통한 폰트 패밀리 정의 및body기본 폰트 적용brand-main,brand-light,negative등 의미 기반의 색상 변수 매핑spacing-0부터spacing-1000까지 8px 그리드 시스템 기반의 간격 토큰 세분화radius-0부터radius-unlimit까지 디자인 가이드에 맞춘 모서리 둥굴기 토큰 정의@utility를 사용하여 Bold, SemiBold, Medium 등 굵기별 조합 클래스 생성number-semibold-X전용 유틸리티 추가 (Poppins 폰트 적용)#️⃣ 관련 이슈