Skip to content

fix: token 스크립트 수정 #7

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 스크립트 수정 #7

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
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">
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.

medium

이 컴포넌트에서 border-gray-200과 bg-white 같은 하드코딩된 스타일 값을 사용하고 있습니다. 디자인 토큰 시스템을 도입한 만큼, 모든 스타일은 토큰을 통해 관리하는 것이 일관성 및 유지보수 측면에서 바람직합니다. border-light와 같은 시맨틱 토큰을 사용하거나, border-gray-200에 해당하는 토큰을 추가하여 사용하시는 것을 권장합니다.

References
  1. 중복 코드를 발견하면 재사용 가능한 유틸리티나 컴포넌트로 추출할 것을 제안하세요. 이 경우, 하드코딩된 값을 사용하는 대신 토큰 기반의 유틸리티를 사용하여 코드의 일관성과 재사용성을 높여야 합니다. (link)

<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">
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.

medium

타이포그래피 섹션의 배경색으로 bg-gray-50이 하드코딩되어 있습니다. 이 또한 color-gray-50 토큰을 활용한 유틸리티 클래스(예: bg-gray-50)로 대체하여 일관성을 유지하는 것이 좋습니다. 현재 스크립트에서는 해당 유틸리티 클래스를 생성하지 않으므로, generate-tokens.js 스크립트에 Grayscale 색상에 대한 배경 유틸리티 클래스 생성 로직을 추가하는 것을 고려해 보세요.

References
  1. 중복 코드를 발견하면 재사용 가능한 유틸리티나 컴포넌트로 추출할 것을 제안하세요. 이 경우, 하드코딩된 값을 사용하는 대신 토큰 기반의 유틸리티를 사용하여 코드의 일관성과 재사용성을 높여야 합니다. (link)

<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

버튼에 사용된 btn-primary, btn-slate, btn-disabled 클래스가 tokens.css에 정의되어 있지 않아 버튼 스타일이 올바르게 적용되지 않습니다. generate-tokens.js 스크립트는 bg-button-* 형태의 배경 유틸리티 클래스를 생성하므로 이를 사용해야 합니다.

또한, 버튼들의 border-radius가 일관성 있게 적용되지 않았습니다. rounded-2xl을 공통으로 적용하고, text-white, text-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 rounded-2xl cursor-not-allowed px-8 py-3">
Disabled Button
</button>

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