Skip to content

fix: token 스크립트 수정 #8

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.

Sign up for GitHub

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

Closed
dasosann wants to merge 1 commit into from
Closed

fix: token 스크립트 수정 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Copy link
Copy Markdown

@qodo-code-review qodo-code-review bot Jan 26, 2026

Choose a reason for hiding this comment

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

File Walkthrough

Enhancement
generate-tokens.js (+214/-0)
토큰 JSON을 CSS 변수로 변환하는 생성 스크립트                                                       

scripts/generate-tokens.js

  • token.json에서 색상, 타이포그래피, 반경, 테두리, 불투명도 토큰 파싱
  • CSS 변수 형식으로 변환하여 tokens.css 자동 생성
  • 토큰 참조 해석 기능으로 의미론적 토큰 지원
  • text-{size}-{weight} 형식의 타이포그래피 유틸리티 클래스 생성
tokens.css (+260/-0)
자동 생성된 CSS 변수 및 유틸리티 클래스                                                                 

app/tokens.css

  • 자동 생성된 CSS 파일로 모든 디자인 토큰을 CSS 변수로 정의
  • 그레이스케일, 핑크, 플레임, 오렌지 색상 변수 포함
  • text-{size}-{weight} 타이포그래피 유틸리티 클래스 제공
  • 배경, 버튼, 테두리, 텍스트 색상 유틸리티 클래스 정의
page.tsx (+55/-57)
디자인 토큰 테스트 페이지로 변경                                                                             

app/page.tsx

  • 기존 Next.js 템플릿 코드 제거
  • 디자인 토큰 시각화 테스트 페이지로 전환
  • 타이포그래피, 색상, 배경, 버튼 토큰 실제 사용 예시 제공
  • 토큰 기반 클래스명으로 스타일링 적용
Configuration changes
globals.css (+2/-1)
토큰 CSS 파일 임포트 추가                                                                                 

app/globals.css

  • tokens.css 파일 임포트 추가
  • 따옴표 스타일 통일 (작은따옴표 → 큰따옴표)
settings.json (+2/-1)
CSS 린트 설정 추가                                                                                         

.vscode/settings.json

  • CSS 린트 규칙 추가: css.lint.unknownAtRules 설정
  • @layer 등 커스텀 CSS 규칙 경고 무시
Miscellaneous
token.json (+0/-1279)
토큰 파일 위치 변경                                                                                           

app/src/token.json

  • 기존 토큰 파일 삭제
  • 새로운 위치(app/token.json)로 이동

Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
},
"css.lint.unknownAtRules": "ignore"
}
3 changes: 2 additions & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'tailwindcss';
@import "tailwindcss";
@import "tw-animate-css";
@import "./tokens.css";

@custom-variant dark (&:is(.dark *));

Expand Down
112 changes: 55 additions & 57 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,61 @@
import Image from "next/image";

export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between bg-white px-16 py-32 sm:items-start dark:bg-black">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl leading-10 font-semibold tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
<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">
<h1 className="text-24-700 text-brand-black border-b pb-4">
🎨 Design Token Test
</h1>
<p className="max-w-md text-lg leading-8 font-[700] text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="bg-foreground text-background flex h-12 w-full items-center justify-center gap-2 rounded-full px-5 transition-colors hover:bg-[#383838] md:w-[158px] dark:hover:bg-[#ccc]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] md:w-[158px] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>

{/* 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">
<p className="text-24-700">Display 24px (Bold 700)</p>
<p className="text-20-600">Title 20px (SemiBold 600)</p>
<p className="text-18-500">Body 18px (Medium 500)</p>
<p className="text-16-400">Body 16px (Regular 400)</p>
<p className="text-14-400 text-disabled">
Caption 14px (Disabled Color)
</p>
</div>
</section>

{/* 2. Colors & Backgrounds */}
<section className="space-y-4">
<h2 className="text-20-600">2. Colors & Backgrounds</h2>
<div className="grid grid-cols-2 gap-4">
<div className="bg-brand-secondary-pink flex h-20 items-center justify-center rounded-lg text-white">
Pink Secondary
</div>
<div className="bg-brand-primary-orange flex h-20 items-center justify-center rounded-lg text-white">
Orange Primary
</div>
<div className="bg-surface-base border-light flex h-20 items-center justify-center rounded-lg border">
Surface Base
</div>
<div className="bg-disabled text-disabled flex h-20 items-center justify-center rounded-lg">
Disabled Area
</div>
</div>
</section>

{/* 3. Buttons */}
<section className="space-y-4">
<h2 className="text-20-600">3. Buttons</h2>
<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>
Comment on lines +48 to +56
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Jan 26, 2026

Choose a reason for hiding this comment

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

high

버튼 컴포넌트의 클래스명과 접근성에 몇 가지 개선점이 필요해 보입니다.

  1. 잘못된 클래스명: btn-primary, btn-slate 등의 클래스명이 사용되었지만, tokens.css에는 bg-button-primary와 같이 배경색을 지정하는 유틸리티 클래스가 정의되어 있습니다. 이로 인해 버튼의 배경 스타일이 적용되지 않고 있습니다.
  2. 스타일 누락: Primary 버튼의 경우, 배경 그래디언트가 적용되면 가독성을 위해 text-white 클래스를 추가해야 합니다. 또한 다른 버튼들과의 일관성을 위해 rounded-2xl을 추가하는 것이 좋습니다.
  3. Disabled 버튼 접근성: disabled 속성 없이 cursor-not-allowed 클래스만 사용하면, 시각적으로는 비활성화된 것처럼 보이지만 스크린 리더 사용자에게는 여전히 클릭 가능한 버튼으로 인식됩니다. 웹 접근성을 준수하기 위해 disabled 속성을 명시적으로 추가해야 합니다.
Suggested change
<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>
<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 cursor-not-allowed rounded-2xl px-8 py-3" disabled>
Disabled Button
</button>
References
  1. 아이콘 전용 버튼의 aria-label 등 접근성(A11y) 관련 사항을 확인해야 합니다. 현재 비활성화 버튼이 disabled 속성 없이 스타일로만 처리되어 있어 스크린 리더 사용자가 이를 인지할 수 없으므로 접근성 표준에 위배됩니다. (link)

</div>
</section>
</div>
</main>
</div>
Expand Down
Loading