feat: 디자인 토큰 연결

[dasosann]

이슈 넘버

#10

• close #

구현 사항

• 피그마 디자인 토큰 git과 연결
• 받아온 디자인 토큰을 tailwind로 변환하는 로직 추가

Need Review

Figma에서 Token Studio 플러그인을 이용해서 color-token 브랜치로 token.json을 생성해주면
그 token,json을 받아서 pnpm run token 명령어를 통해 generate-color-tokens.mjs를 통해 global.css로 변환합니다
이제 나중에 색상 사용하실때는 text-17-500, 또는 bg-button-primary-fill 이런식으로 사용해주시면 될 것 같습니다.
추가로 만약에 토큰을 직접 변경하시려고 한다면 기존에 있던 token.json 내용은 지우고 token studio에서 재 발급 받아야합니다!

📸 스크린샷

Reference

📜 리뷰 규칙

Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.

• P1: 꼭 반영해주세요 (Comment)
• P2: 적극적으로 고려해주세요 (Comment)
• P3: 웬만하면 반영해 주세요 (Comment)
• P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
• P5: 그냥 사소한 의견입니다 (Approve)

[gemini-code-assist]

Summary of Changes

Hello @dasosann, 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!

이 Pull Request는 프로젝트에 디자인 토큰 시스템을 통합하기 위한 첫 번째 단계입니다. 피그마 디자인 토큰을 Git과 연결하기 위한 기반을 마련하며, token.json 파일을 추가하여 향후 디자인 토큰을 정의하고 관리할 수 있는 구조를 설정합니다. 이는 일관된 디자인 시스템을 구축하고 유지보수성을 높이는 데 중요한 역할을 할 것입니다.

Highlights

• 디자인 토큰 초기 설정: 피그마 디자인 토큰을 Git 저장소와 연결하기 위한 초기 설정이 완료되었습니다. 이는 디자인 시스템 구축의 첫 단계입니다.
• token.json 파일 추가: 디자인 토큰을 관리할 tokens/token.json 파일이 새로 추가되었으며, 기본적인 토큰 구조가 초기화되었습니다.

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 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 counter productive. 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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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

이 PR은 Figma 디자인 토큰을 연동하기 위한 초기 설정으로 tokens/token.json 파일을 추가합니다. 파일 구조는 디자인 토큰 관리를 위한 표준적인 형태로 보입니다. 다만, 파일의 마지막에 개행 문자를 추가하여 POSIX 표준을 준수하고 도구 호환성을 높이는 것을 제안합니다. 전반적으로 디자인 시스템 통합을 위한 좋은 첫걸음입니다.

[gemini-code-assist]

파일의 마지막에 개행 문자를 추가하는 것을 권장합니다. 이는 POSIX 표준을 따르는 좋은 관행이며, 일부 도구에서 예기치 않은 동작을 방지할 수 있습니다.¹

Suggested change

	{
	"global": {},
	"$themes": [],
	"$metadata": {
	"tokenSetOrder": [
	"global"
	]
	}
	}
	{
	"global": {},
	"$themes": [],
	"$metadata": {
	"tokenSetOrder": [
	"global"
	]
	}
	}

Rules References

Footnotes

1. 파일은 개행 문자로 끝나야 합니다. 이는 POSIX 호환성을 보장하고, 파일 결합이나 cat과 같은 도구 사용 시 발생할 수 있는 문제를 방지합니다. ↩