Skip to content

fix: token 스크립트 수정 #11

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

Merged
dasosann merged 2 commits into from
Jan 26, 2026
Merged

fix: token 스크립트 수정 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
354fd18
fix: token 스크립트 수정
dasosann Jan 23, 2026
aec5f13
fix/test-page
dasosann Jan 26, 2026
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)
토큰 자동 생성 스크립트 구현                                                                                 

scripts/generate-tokens.js

  • token.json 파일을 읽어 CSS 변수로 변환하는 Node.js 스크립트 작성
  • 색상, 반경, 테두리, 불투명도, 폰트 크기 토큰 처리
  • 토큰 참조 해석 기능으로 의미론적 토큰 지원
  • 텍스트 유틸리티 클래스 자동 생성 (text-{size}-{weight} 형식)
globals.css (+2/-1)
토큰 CSS 파일 임포트 추가                                                                                 

app/globals.css

  • tokens.css 파일 import 추가
  • 따옴표 스타일 통일 (작은따옴표 → 큰따옴표)
page.tsx (+55/-57)
홈페이지를 토큰 테스트 페이지로 리뉴얼                                                                       

app/page.tsx

  • 기존 Next.js 템플릿 코드 제거
  • 디자인 토큰 테스트 페이지로 전환
  • 타이포그래피, 색상, 배경, 버튼 섹션 추가
  • 토큰 기반 클래스명 적용 (text-24-700, bg-surface-base 등)
Configuration changes
tokens.css (+260/-0)
생성된 디자인 토큰 CSS 파일                                                                               

app/tokens.css

  • 자동 생성된 CSS 변수 파일 (260줄)
  • 그레이스케일, 핑크, 플레임, 오렌지 색상 정의
  • 반경, 테두리, 불투명도 CSS 변수 선언
  • 타이포그래피 유틸리티 클래스 (text-10-400 ~ text-24-700)
  • 배경, 버튼, 테두리, 텍스트 색상 유틸리티 정의
settings.json (+2/-1)
CSS 린트 설정 업데이트                                                                                     

.vscode/settings.json

  • CSS 린트 설정 추가 (unknownAtRules 무시)
  • 커스텀 CSS 변수 사용 시 경고 방지
Miscellaneous
token.json (+0/-1279)
토큰 파일 위치 변경                                                                                           

app/src/token.json

  • 기존 토큰 파일 삭제 (1279줄)
  • 새로운 위치로 이동 (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="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 Button
</button>
</div>
</section>
</div>
</main>
</div>
Expand Down
Loading