feat: 디자인 토큰 파이프라인 구축

[wlrnjs]

Pull Request

관련 이슈

• issue [TASK] 피그마 디자인 토큰 자동화 구현 #44

작업 내용

• 디자인 토큰 파이프라인을 구축했습니다.
• packages/design-tokens에 디자인 토큰 전용 패키지를 구성했습니다.
• 디자인 토큰 플로우
  • tokens/tokens.json: Tokens Studio for Figma 디자인 토큰 원본
  • sd.config.mjs: Style Dictionary 빌드 설정
  • dist/css/variables.css: CSS 커스텀 프로퍼티
  • dist/tailwind/preset.cjs: Tailwind preset 객체
  • apps/monitor-web/tailwind.config.ts: 디자인 토큰 preset 적용
    • presset: [designTokensPreset]

참고 사항

• variables.css, preset.cjs 파일은 디자인 토큰 빌드를 통해 자동 생성되는 산출물 입니다.

체크리스트

• 기능이 정상 동작하는지 확인
• 불필요한 코드/주석 제거

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
finditem-monitoring	Ready	Preview, Comment	May 12, 2026 1:20pm

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

본 PR은 디자인 시스템의 일관성을 유지하기 위해 디자인 토큰 파이프라인을 구축하는 작업을 포함합니다. Tokens Studio for Figma에서 추출한 디자인 토큰을 기반으로 Style Dictionary를 통해 웹 환경에서 즉시 사용 가능한 CSS 변수와 Tailwind 프리셋을 자동 생성하도록 설계되었습니다. 이를 통해 디자인 변경 사항을 코드에 효율적으로 반영할 수 있는 기반을 마련했습니다.

Highlights

• 디자인 토큰 패키지 구축: packages/design-tokens 패키지를 신규 생성하여 디자인 토큰 관리 체계를 구축했습니다.
• 자동화 파이프라인 도입: Style Dictionary를 활용하여 디자인 토큰(JSON)으로부터 CSS 변수 및 Tailwind 프리셋을 자동으로 생성하는 파이프라인을 구성했습니다.
• Tailwind 통합: 생성된 디자인 토큰을 apps/monitor-web의 Tailwind 설정에 프리셋으로 적용하고, 필요한 커스텀 유틸리티 클래스를 추가했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

---

토큰이 모여 디자인을 이루고, 파이프라인은 코드를 잇네. 수동의 굴레를 벗어던지고, 일관된 스타일이 흐르네.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request integrates a design token system into the monitor-web application, including updates to the Style Dictionary configuration and the addition of a Tailwind preset. Key feedback includes addressing a bug in the token generation logic where only [Fill] semantic tokens are currently processed, potentially omitting [Fg] and [Border] types. Additionally, it is recommended to move hardcoded typography styles from the Tailwind plugin into the design tokens package to ensure system-wide consistency and better alignment with Tailwind's utility-first approach.

[junye0l]

수고하셨습니다!