Skip to content

Conversation

@mskwon02
Copy link
Collaborator

@mskwon02 mskwon02 commented Jan 22, 2026

#️⃣ 변경 사항

Tailwind CSS 디자인 시스템 구축을 위한 전역 디자인 토큰(Design Tokens) 설정 및 폰트 자산 추가

#️⃣ 작업 상세 내용

  • 폰트 자산 추가 및 웹폰트 설정
    • 서비스 기본 폰트인 Pretendard Variable 및 숫자용 폰트 Poppins (SemiBold 600) 파일 추가
    • @font-face 설정을 통한 폰트 패밀리 정의 및 body 기본 폰트 적용
  • 색상(Color) 시스템 정의
    • Primitive Tokens: Grey(0-1000), Brand(20-900), Others(Red, Blue 등)의 단계별 색상 팔레트 정의
    • Semantic Tokens: brand-main, brand-light, negative 등 의미 기반의 색상 변수 매핑
    • 대시보드 및 카드 배경색 등 특수 목적 색상 추가
  • 간격(Spacing) 및 모서리 곡률(Radius) 토큰 설정
    • spacing-0부터 spacing-1000까지 8px 그리드 시스템 기반의 간격 토큰 세분화
    • radius-0부터 radius-unlimit까지 디자인 가이드에 맞춘 모서리 둥굴기 토큰 정의
  • 타이포그래피(Typography) 유틸리티 클래스 구축
    • Headline, Title, Body, Caption 계층별 Font-size 및 Line-height 설정
    • @utility를 사용하여 Bold, SemiBold, Medium 등 굵기별 조합 클래스 생성
    • 숫자 표현을 위한 number-semibold-X 전용 유틸리티 추가 (Poppins 폰트 적용)

#️⃣ 관련 이슈

@mskwon02 mskwon02 self-assigned this Jan 22, 2026
@mskwon02 mskwon02 added the ✨ feat 새로운 기능이나 서비스 로직을 추가합니다. label Jan 22, 2026
@mskwon02 mskwon02 requested review from lee0jae330 and lwjmcn January 22, 2026 05:26
@mskwon02
Copy link
Collaborator Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a 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>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

테스트 목적으로 추가된 UI 요소로 보입니다. 기능 구현과 직접적인 관련이 없다면, 최종 병합 전에는 이 코드를 삭제하는 것이 좋습니다.

Comment on lines 62 to 63
--color-special-dashboard-bg: #fafbff;
--color-special-card-bg: #ffffff;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

--color-special-dashboard-bg--color-special-card-bg는 각각 --color-grey-50--color-grey-0와 동일한 값을 가집니다. 중복된 하드코딩 값을 사용하는 대신, 이미 정의된 primitive 토큰을 var() 함수로 참조하면 코드의 일관성과 유지보수성이 향상됩니다.

Suggested change
--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);

Comment on lines +71 to +72
--color-others-50: var(--color-brand-50);
--color-others-20: var(--color-brand-20);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

시맨틱 토큰 --color-others-50--color-others-20brand 색상 토큰을 참조하고 있어 이름과 실제 값 사이에 혼동을 줄 수 있습니다. 이 토큰들의 목적이 명확하지 않다면, 직접 brand 토큰을 사용하고 이 시맨틱 토큰들을 제거하여 혼동을 줄이는 것을 고려해볼 수 있습니다.

Comment on lines 76 to 90
--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 */

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

spacing 변수명에 spacing- 접두사가 중복되어 있습니다 (예: --spacing-spacing-50). 가독성과 일관성을 위해 --spacing-50과 같이 중복을 제거하는 것이 좋습니다. 이는 Tailwind 설정 파일에서 값을 매핑할 때도 더 직관적입니다.

Suggested change
--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 */

Comment on lines 93 to 106
--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; /* 원형 */

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

radius 변수명에도 radius- 접두사가 중복되어 있습니다 (예: --radius-radius-50). spacing 변수와 마찬가지로, --radius-50과 같이 수정하여 일관성을 유지하고 가독성을 높이는 것을 권장합니다.

Suggested change
--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%;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

line-height90%로 설정하면 텍스트가 여러 줄로 표시될 경우 글자가 겹쳐 보일 수 있습니다. 특히 숫자 외에 다른 문자가 포함되거나 줄바꿈이 발생할 가능성이 있다면 문제가 될 수 있습니다. 1 또는 100% 이상의 값으로 설정하는 것이 안전합니다.

Suggested change
line-height: 90%;
line-height: 1.2;

font-family: var(--font-poppins);
font-weight: 600;
font-size: 5.25rem;
line-height: 90%;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

line-height90%로 설정하면 텍스트가 여러 줄로 표시될 경우 글자가 겹쳐 보일 수 있습니다. 1 또는 100% 이상의 값으로 설정하는 것이 안전합니다.

Suggested change
line-height: 90%;
line-height: 1.2;

Copy link

Copilot AI left a 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;
Copy link

Copilot AI Jan 22, 2026

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.

Suggested change
--color-others-gracyblue: #e4e9f3;
--color-others-grayishblue: #e4e9f3;

Copilot uses AI. Check for mistakes.
--color-special-dashboard-bg: #fafbff;
--color-special-card-bg: #ffffff;

/* ======= sementic ========*/
Copy link

Copilot AI Jan 22, 2026

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.

Suggested change
/* ======= sementic ========*/
/* ======= semantic ========*/

Copilot uses AI. Check for mistakes.
Comment on lines 76 to 106
--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; /* 원형 */
Copy link

Copilot AI Jan 22, 2026

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.

Copilot uses AI. Check for mistakes.
Comment on lines +190 to +288
@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;
}
Copy link

Copilot AI Jan 22, 2026

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.

Copilot uses AI. Check for mistakes.
Comment on lines +22 to 25
<div className="number-semibold-84">tailwind test</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 2)}>
Copy link

Copilot AI Jan 22, 2026

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.

Suggested change
<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))}>

Copilot uses AI. Check for mistakes.

--color-others-50: var(--color-brand-50);
--color-others-20: var(--color-brand-20);
--color-others-tap-bg: var(--color-others-gracyblue);
Copy link

Copilot AI Jan 22, 2026

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.

Copilot uses AI. Check for mistakes.
Copy link
Collaborator

@lee0jae330 lee0jae330 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 ~ 구두 논의한 부분만 수정되면 좋을 것 같아요 ㅎㅎ

@lee0jae330 lee0jae330 added the 💄 style 레이아웃, 스타일 등 시각적인 요소를 변경합니다. label Jan 22, 2026

/* special colors */
--color-special-dashboard-bg: #fafbff;
--color-special-card-bg: #ffffff;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P4] primitive가 아니라 semantic으로 들어가야 할 것 같아요! 참고만 해주세요 ㅎㅎ

}

@theme {
--font-sans: 'Pretendard Variable', sans-serif;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P4] 폰트명을 sans로 하신 이유가 있나요? pretendard로 하는 게 좀 더 직관적일 것 같다는 의견입니다

Copy link
Collaborator Author

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 {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P3] font-style, font-weight, font-size, line-height, font-family 순서로 css variable처럼 넣을 수 있어요. @Utility @apply 여러 번 쓰는 것보다 깔끔할 것 같은데 참고만 해주십셔
예시: font: italic bold 24px 'Malgun Gothic', sans-serif;

@mskwon02 mskwon02 merged commit 7f6958d into develop Jan 22, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ feat 새로운 기능이나 서비스 로직을 추가합니다. 💄 style 레이아웃, 스타일 등 시각적인 요소를 변경합니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FE] tailwind 스타일 토큰 정의

4 participants