Skip to content

⚙️Setting : 컬러 자동완성 및 우선순위 #26

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
KongMezu merged 1 commit into from
Oct 16, 2025
Merged

⚙️Setting : 컬러 자동완성 및 우선순위 #26

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
23 changes: 23 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"tailwindCSS.experimental.classRegex": [
// @utility 뒤에 오는 클래스 이름을 자동완성에 포함
["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"]
],
Comment on lines +2 to +5
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

classRegex tuple is mis-specified; use a single-regex capture for @Utility names

The second regex will over-match tokens like “utility”, “bg”, “pink”, “100”. Use a single pattern that captures the class name after @Utility.

Apply:

-  "tailwindCSS.experimental.classRegex": [
-    ["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"]
-  ],
+  "tailwindCSS.experimental.classRegex": [
+    "@utility\\s+([a-zA-Z0-9-_]+)"
+  ],
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"tailwindCSS.experimental.classRegex": [
// @utility 뒤에 오는 클래스 이름을 자동완성에 포함
["@utility\\s+([a-zA-Z0-9-_]+)", "([a-zA-Z0-9-_]+)"]
],
// @utility 뒤에 오는 클래스 이름을 자동완성에 포함
"tailwindCSS.experimental.classRegex": [
"@utility\\s+([a-zA-Z0-9-_]+)"
],
🤖 Prompt for AI Agents 
In .vscode/settings.json around lines 2 to 5, the
tailwindCSS.experimental.classRegex entry currently uses a two-regex tuple which
over-matches; replace it with a single regex capture that only captures the
class name that follows "@utility" (remove the second regex element), and ensure
the capture group allows valid Tailwind class characters (letters, numbers,
hyphen, underscore and common separators like ":" and "/") so only the intended
class token is returned for autocompletion.

// Tailwind 자동완성 동장할 매핑
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"typescript": "typescript",
"typescriptreact": "html",
"javascriptreact": "html",
"css": "css",
"scss": "css"
},

// 문자열 안에서도 VSCode 자동완성 제안 표시
"editor.quickSuggestions": {
"strings": true
},
// 자동완성 추천 항목을 선택하기 전에 미리보기 표시
"tailwindCSS.emmetCompletions": true,
"editor.suggest.preview": true,
}
244 changes: 121 additions & 123 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "tailwindcss";
@import 'tailwindcss';
@import 'tailwindcss/preflight';
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face {
Expand Down Expand Up @@ -87,125 +88,122 @@ html, body {
}
}
/* 색상 */
@layer utilities {
/* Mint */
.bg-mint-50 { background-color: var(--mint-50); }
.bg-mint-100 { background-color: var(--mint-100); }
.bg-mint-200 { background-color: var(--mint-200); }
.bg-mint-300 { background-color: var(--mint-300); }
.bg-mint-400 { background-color: var(--mint-400); }
.bg-mint-500 { background-color: var(--mint-500); }
.bg-mint-600 { background-color: var(--mint-600); }
.bg-mint-700 { background-color: var(--mint-700); }
.bg-mint-800 { background-color: var(--mint-800); }
.bg-mint-900 { background-color: var(--mint-900); }
.text-mint-50 { color: var(--mint-50); }
.text-mint-100 { color: var(--mint-100); }
.text-mint-200 { color: var(--mint-200); }
.text-mint-300 { color: var(--mint-300); }
.text-mint-400 { color: var(--mint-400); }
.text-mint-500 { color: var(--mint-500); }
.text-mint-600 { color: var(--mint-600); }
.text-mint-700 { color: var(--mint-700); }
.text-mint-800 { color: var(--mint-800); }
.text-mint-900 { color: var(--mint-900); }

/* Pink */
.bg-pink-50 { background-color: var(--pink-50); }
.bg-pink-100 { background-color: var(--pink-100); }
.bg-pink-200 { background-color: var(--pink-200); }
.bg-pink-300 { background-color: var(--pink-300); }
.bg-pink-400 { background-color: var(--pink-400); }
.bg-pink-500 { background-color: var(--pink-500); }
.bg-pink-600 { background-color: var(--pink-600); }
.bg-pink-700 { background-color: var(--pink-700); }
.bg-pink-800 { background-color: var(--pink-800); }
.bg-pink-900 { background-color: var(--pink-900); }
.text-pink-50 { color: var(--pink-50); }
.text-pink-100 { color: var(--pink-100); }
.text-pink-200 { color: var(--pink-200); }
.text-pink-300 { color: var(--pink-300); }
.text-pink-400 { color: var(--pink-400); }
.text-pink-500 { color: var(--pink-500); }
.text-pink-600 { color: var(--pink-600); }
.text-pink-700 { color: var(--pink-700); }
.text-pink-800 { color: var(--pink-800); }
.text-pink-900 { color: var(--pink-900); }

/* Gray */
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }
.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

/* Blue */
.bg-blue-400 { background-color: var(--blue-400); }
.text-blue-400 { color: var(--blue-400); }

/* Red */
.bg-red-300 { background-color: var(--red-300); }
.bg-red-400 { background-color: var(--red-400); }
.text-red-300 { color: var(--red-300); }
.text-red-400 { color: var(--red-400); }

/* Background / Foreground */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.text-background { color: var(--background); }
.text-foreground { color: var(--foreground); }
}
/* 폰트 */
@layer utilities {
/* Pretendard */
.text-display-lg { font-size:5.7rem; font-weight:300; line-height:6.4rem; letter-spacing:-0.025rem; font-family: var(--font-sans); }
.text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
.text-display-sm { font-size:3.6rem; font-weight:300; line-height:4.4rem; font-family: var(--font-sans); }

.text-headline-lg { font-size:3.2rem; font-weight:200; line-height:4rem; font-family: var(--font-sans); }
.text-headline-md { font-size:2.8rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }
.text-headline-sm { font-size:2.4rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }

.text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
.text-title-md { font-size:1.6rem; font-weight:400; line-height:2.4rem; letter-spacing:0.015rem; font-family: var(--font-sans); }
.text-title-sm { font-size:1.4rem; font-weight:400; line-height:2rem; letter-spacing:0.01rem; font-family: var(--font-sans); }

.text-label-lg { font-size:1.4rem; font-weight:300; line-height:2rem; font-family: var(--font-sans); }
.text-label-md { font-size:1.2rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }
.text-label-sm { font-size:1.1rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }

/* JEN Serif */
.text-display-serif { font-size:3.6rem; font-weight:200; line-height:4.6rem; letter-spacing:0.6rem; font-family: var(--font-serif); }
.text-headline-lg-serif { font-size:3.2rem; font-weight:200; line-height:4rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
.text-headline-md-serif { font-size:2.4rem; font-weight:200; line-height:3.2rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
.text-headline-sm-serif { font-size:2rem; font-weight:200; line-height:2.4rem; letter-spacing:1.2rem; font-family: var(--font-serif); }
.text-label-serif { font-size:1.4rem; font-weight:200; line-height:2rem; letter-spacing:0.4rem; font-family: var(--font-serif); }
}
/*display, grid 참조 */
@layer utilities {

.layout-flex { display: var(--display-flex); }
.layout-grid { display: var(--display-grid); }

.grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
.grid-cols-4 { grid-template-columns: var(--grid-cols-4); }

.max-w-mobile { max-width: var(--max-w-mobile); }
.min-w-100 { min-width: var(--min-w-100); }
}

/* Mint */
@utility bg-mint-50 { background-color: var(--mint-50); }
@utility bg-mint-100 { background-color: var(--mint-100); }
@utility bg-mint-200 { background-color: var(--mint-200); }
@utility bg-mint-300 { background-color: var(--mint-300); }
@utility bg-mint-400 { background-color: var(--mint-400); }
@utility bg-mint-500 { background-color: var(--mint-500); }
@utility bg-mint-600 { background-color: var(--mint-600); }
@utility bg-mint-700 { background-color: var(--mint-700); }
@utility bg-mint-800 { background-color: var(--mint-800); }
@utility bg-mint-900 { background-color: var(--mint-900); }

@utility text-mint-50 { color: var(--mint-50); }
@utility text-mint-100 { color: var(--mint-100); }
@utility text-mint-200 { color: var(--mint-200); }
@utility text-mint-300 { color: var(--mint-300); }
@utility text-mint-400 { color: var(--mint-400); }
@utility text-mint-500 { color: var(--mint-500); }
@utility text-mint-600 { color: var(--mint-600); }
@utility text-mint-700 { color: var(--mint-700); }
@utility text-mint-800 { color: var(--mint-800); }
@utility text-mint-900 { color: var(--mint-900); }

/* Pink */
@utility bg-pink-50 { background-color: var(--pink-50)!important; }
@utility bg-pink-100 { background-color: var(--pink-100)!important; }
@utility bg-pink-200 { background-color: var(--pink-200)!important; }
@utility bg-pink-300 { background-color: var(--pink-300)!important; }
@utility bg-pink-400 { background-color: var(--pink-400)!important; }
@utility bg-pink-500 { background-color: var(--pink-500)!important;}
@utility bg-pink-600 { background-color: var(--pink-600)!important; }
@utility bg-pink-700 { background-color: var(--pink-700)!important; }
@utility bg-pink-800 { background-color: var(--pink-800)!important; }
@utility bg-pink-900 { background-color: var(--pink-900)!important; }

@utility text-pink-50 { color: var(--pink-50)!important; }
@utility text-pink-100 { color: var(--pink-100)!important; }
@utility text-pink-200 { color: var(--pink-200)!important; }
@utility text-pink-300 { color: var(--pink-300)!important;}
@utility text-pink-400 { color: var(--pink-400)!important; }
@utility text-pink-500 { color: var(--pink-500)!important; }
@utility text-pink-600 { color: var(--pink-600)!important; }
@utility text-pink-700 { color: var(--pink-700)!important; }
@utility text-pink-800 { color: var(--pink-800)!important; }
@utility text-pink-900 { color: var(--pink-900)!important; }

/* Gray */
@utility bg-gray-50 { background-color: var(--gray-50)!important; }
@utility bg-gray-100 { background-color: var(--gray-100)!important; }
@utility bg-gray-200 { background-color: var(--gray-200)!important; }
@utility bg-gray-300 { background-color: var(--gray-300)!important; }
@utility bg-gray-400 { background-color: var(--gray-400)!important; }
@utility bg-gray-500 { background-color: var(--gray-500)!important; }
@utility bg-gray-600 { background-color: var(--gray-600)!important; }
@utility bg-gray-700 { background-color: var(--gray-700)!important; }
@utility bg-gray-800 { background-color: var(--gray-800)!important; }
@utility bg-gray-900 { background-color: var(--gray-900)!important; }

@utility text-gray-50 { color: var(--gray-50)!important; }
@utility text-gray-100 { color: var(--gray-100)!important; }
@utility text-gray-200 { color: var(--gray-200)!important; }
@utility text-gray-300 { color: var(--gray-300)!important; }
@utility text-gray-400 { color: var(--gray-400)!important; }
@utility text-gray-500 { color: var(--gray-500)!important; }
@utility text-gray-600 { color: var(--gray-600)!important; }
@utility text-gray-700 { color: var(--gray-700)!important; }
@utility text-gray-800 { color: var(--gray-800)!important; }
@utility text-gray-900 { color: var(--gray-900)!important; }

/* Blue */
@utility bg-blue-400 { background-color: var(--blue-400)!important; }
@utility text-blue-400 { color: var(--blue-400)!important; }

/* Red */
@utility bg-red-300 { background-color: var(--red-300)!important; }
@utility bg-red-400 { background-color: var(--red-400)!important; }
@utility text-red-300 { color: var(--red-300)!important; }
@utility text-red-400 { color: var(--red-400)!important; }

/* Background / Foreground */
@utility bg-background { background-color: var(--background); }
@utility bg-foreground { background-color: var(--foreground); }
@utility text-background { color: var(--background); }
@utility text-foreground { color: var(--foreground); }


/* 폰트 *//* Pretendard */
@utility text-display-lg { font-size:5.7rem; font-weight:300; line-height:6.4rem; letter-spacing:-0.025rem; font-family: var(--font-sans); }
@utility text-display-md { font-size:5.2rem; font-weight:300; line-height:4.5rem; font-family: var(--font-sans); }
@utility text-display-sm { font-size:3.6rem; font-weight:300; line-height:4.4rem; font-family: var(--font-sans); }

@utility text-headline-lg { font-size:3.2rem; font-weight:200; line-height:4rem; font-family: var(--font-sans); }
@utility text-headline-md { font-size:2.8rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }
@utility text-headline-sm { font-size:2.4rem; font-weight:200; line-height:3.2rem; font-family: var(--font-sans); }

@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

text-title-lg line-height is smaller than font-size (clipping risk)

2.2rem font-size with 1.75rem line-height can crop glyphs and harm readability.

-@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
+@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:2.8rem; font-family: var(--font-sans); }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:1.75rem; font-family: var(--font-sans); }
@utility text-title-lg { font-size:2.2rem; font-weight:400; line-height:2.8rem; font-family: var(--font-sans); }
🤖 Prompt for AI Agents 
In src/styles/globals.css around line 186 the utility definition sets font-size:
2.2rem with line-height: 1.75rem which is smaller than the font size and risks
clipping; update the rule to use a line-height at or above the font-size (e.g.,
a unitless multiplier like 1.15–1.25 or an explicit rem value ≥ 2.2rem) so
glyphs aren’t clipped and readability is preserved, and ensure the font-family
and weight remain unchanged.

@utility text-title-md { font-size:1.6rem; font-weight:400; line-height:2.4rem; letter-spacing:0.015rem; font-family: var(--font-sans); }
@utility text-title-sm { font-size:1.4rem; font-weight:400; line-height:2rem; letter-spacing:0.01rem; font-family: var(--font-sans); }

@utility text-label-lg { font-size:1.4rem; font-weight:300; line-height:2rem; font-family: var(--font-sans); }
@utility text-label-md { font-size:1.2rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }
@utility text-label-sm { font-size:1.1rem; font-weight:300; line-height:1.6rem; font-family: var(--font-sans); }

/* JEN Serif */
@utility text-display-serif { font-size:3.6rem; font-weight:200; line-height:4.6rem; letter-spacing:0.6rem; font-family: var(--font-serif); }
@utility text-headline-lg-serif { font-size:3.2rem; font-weight:200; line-height:4rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
@utility text-headline-md-serif { font-size:2.4rem; font-weight:200; line-height:3.2rem; letter-spacing:0.2rem; font-family: var(--font-serif); }
@utility text-headline-sm-serif { font-size:2rem; font-weight:200; line-height:2.4rem; letter-spacing:1.2rem; font-family: var(--font-serif); }
@utility text-label-serif { font-size:1.4rem; font-weight:200; line-height:2rem; letter-spacing:0.4rem; font-family: var(--font-serif); }

/* Layout */
@utility layout-flex { display: var(--display-flex); }
@utility layout-grid { display: var(--display-grid); }

@utility grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
@utility grid-cols-4 { grid-template-columns: var(--grid-cols-4); }

@utility max-w-mobile { max-width: var(--max-w-mobile); }
@utility min-w-100 { min-width: var(--min-w-100); }
Loading