⚙️Setting : 컬러칩 활성화

[KongMezu]

🔥 작업 내용

• 커스텀 유틸리티 컬러칩 활성화

🔗 이슈

• close [setting] 컬러칩 활성화 #27 (comment)

PR Point (To Reviewer)

컬러칩 활성화

오늘 정말 많이 배워가네요.. 이전 PR 에서 컬러칩이 안뜨는 문제 해결했습니다. 이거 또 --color 를 붙여줘야 Tailwind에서 자동으로 인식해서 해준다고 하네요
이전 PR : #26 (comment))

global.css 컬러명 변경 -> Icon적용

Icon에 컬러 적용이 안되어서 깜짝 놀랐습니다. 다행이 svg 코드가 깔끔하게 잘되어있어서 금방 global.css 에서 맞춘 컬러명 대로 바꿔서 넣었더니 정상 작동합니다.
이자리를 빌어 깔끔하게 코드 적어준 정민님을 칭찬합니다. 왜냐면 저 또 헤매고 있었을테니까요

이전코드
style={{ ...(color && { color:var(--${color}) }), ...style }}

바뀐코드
style={{ ...(color && { color: var(--color-${color}) }), ...style }}

📸 피그마 스크린샷 or 기능 GIF

잘 됩니다 이젠 정말

Summary by CodeRabbit

• Refactor
  • Reorganized color variable naming scheme for improved consistency and maintainability throughout the design system. All public utilities and visual appearance remain unchanged.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Oct 16, 2025 10:51am

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[coderabbitai]

Walkthrough

Refactored color token naming from flat namespace (--mint-*, --pink-*) to a prefixed scheme (--color-mint-*, --color-pink-*) across stylesheets, utilities, and components. Updated VSCode settings to support Tailwind color decorators with new @theme wrapper. Updated Icon component to reference the new namespaced color variables.

Changes

Cohort / File(s)	Summary
VSCode Tooling Settings .vscode/settings.json	Added theme-related regex mapping to tailwindCSS.experimental.classRegex to capture theme color variables from @theme blocks. Enabled color decorator features (editor.colorDecorators, editor.defaultColorDecorators, tailwindCSS.colorDecorators).
Global Styles & Color Tokens src/styles/globals.css	Replaced :root variable block with @theme wrapper. Renamed all color variables to --color- prefixed scheme (e.g., --mint-50 → --color-mint-50). Updated utility class definitions (bg-*, text-*) to reference new variable names and marked with !important. Affected: Mint, Pink, Gray, Blue, and Red token families.
Icon Component src/shared/icons/components/icon.tsx	Updated CSS variable reference in inline style from var(--${color}) to var(--color-${color}) to align with new namespaced color variable scheme.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes follow a consistent and systematic pattern of color variable renaming across files. However, verification is needed to ensure all references to renamed tokens are properly updated, and the structural shift to @theme requires attention to confirm Tailwind integration compatibility.

Possibly related PRs

• ⚙️Style Setting : 디자인 시스템 1차 세팅 완료 #10: Introduces the original --color-* prefixed variable scheme that this PR standardizes and applies across the codebase.
• ⚙️Setting : 컬러 자동완성 및 우선순위 #26: Also modifies VSCode Tailwind settings and global styles to surface custom color tokens, directly overlapping with color decorator and @theme configuration.
• 🐛fix : Tailwind 적용 오류 및 토큰 재설정 #24: Updates global CSS color tokens and utility definitions similarly to this PR, requiring coordination on color token restructuring.

Suggested labels

setting

Suggested reviewers

• skyblue1232
• jjangminii

Poem

🐰 A rabbit hops through colors bright,
Namespaced tokens, perfectly right!
From flat to prefixed, clean and neat,
--color-* makes the scheme complete! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title accurately summarizes the main change of enabling the color-chip feature and directly relates to the modifications in the pull request, though it includes a minor cosmetic noise with the emoji.
Linked Issues Check	✅ Passed	The pull request fully addresses the linked issue #27 by enabling the custom color-chip feature through Tailwind and VS Code configuration updates, renaming color variables to the required “--color-” format, and adjusting the Icon component accordingly to ensure the color chips render correctly.
Out of Scope Changes Check	✅ Passed	All changes in this pull request directly support the color-chip activation objective by updating theme mappings, variable naming, and icon styling, with no unrelated or extraneous modifications detected.
Description Check	✅ Passed	The description follows the repository template by providing “🔥 작업 내용,” “🔗 이슈,” “PR Point (To Reviewer),” and visual asset sections but omits the “🤔 추후 작업 사항” section expected by the template.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#27/color-chip

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0bcacd4 and 2254502.

📒 Files selected for processing (3)

• .vscode/settings.json (2 hunks)
• src/shared/icons/components/icon.tsx (1 hunks)
• src/styles/globals.css (2 hunks)

🔇 Additional comments (5)

src/shared/icons/components/icon.tsx (1)

94-94: LGTM! Color variable reference updated correctly.

The inline style now correctly references the new namespaced color variables (var(--color-${color})) that align with the @theme block definitions in globals.css.

.vscode/settings.json (2)

24-26: LGTM! Color decorators enabled correctly.

Enabling color decorators enhances the development experience by showing color previews in the editor for the new theme-based color tokens.

---

4-5: Ignore @theme regex element-count concern
The pattern is correctly defined as a two-item tuple—container and class-list regex—where the parentheses denote capture groups, not additional array elements.

Likely an incorrect or invalid review comment.

src/styles/globals.css (2)

18-84: LGTM! Theme migration executed consistently.

The migration from :root to @theme with the new --color-* naming scheme is executed consistently across all color tokens (Mint, Pink, Gray, Blue, Red). Semantic tokens like --background and --foreground correctly remain unprefixed.

---

94-173: Verify !important on all color utilities doesn’t prevent intended overrides. Inline styles (e.g. src/shared/icons/components/icon.tsx:94) and component-level CSS/inline style overrides (e.g. pages/index.tsx bg-/text-class usages) may now be blocked by these utility classes.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[skyblue1232]

빠른 오류 수정 감사합니다~!!

[jjangminii]

진짜 테일윈드는 새로운게 많네요 ,, 다른 프로젝트에서 컬러칩과 자동완성 안되는 이슈로 많이 해맸었는데 이렇게 해결할 수 있는거군요 공식문서 열심히 봐야할것같네요..ㅜ