⚙️Setting : border 오류 & 폰트 수정

[KongMezu]

🔥 작업 내용

• border 오류 해결
• 폰트 조건 수정(폰트& 사이즈만 fix)

PR Point (To Reviewer)

Border 오류 해결

@import 'tailwindcss/preflight'; 이거 제거함으로서 border 적용이 안되는 오류 해결했습니다.

폰트 수정

디자인 시스템 표대로 넣었더니 weight 값이랑 spacing 값을 고정해놓으니까 디자인대로 안나오더라고요
폰트랑 폰트 사이즈만 보냈습니다.
앞으로 이렇게 디자인 보면서 하심 될 거 같습니다..
className=('text-label-lg font-weight-500 line-height-[2rem] letter-spacing-[0.003rem]')

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

Summary by CodeRabbit

• Style

  • Updated typography and layout utilities for improved design system consistency

• Chores

  • Adjusted development environment configuration

[coderabbitai]

Walkthrough

This pull request modifies editor settings and CSS utilities by changing the color decorator setting type from boolean to string and refactoring typography and layout utilities in the global stylesheet, removing preflight styling and simplifying font definitions.

Changes

Cohort / File(s)	Summary
Editor Settings \.vscode/settings.json``	Changed editor.defaultColorDecorators value type from true (boolean) to "auto" (string)
CSS Utilities \src/styles/globals.css``	Removed Tailwind preflight import; simplified typography utilities by reducing font-weight, line-height, and letter-spacing properties; added new layout utilities (layout-block, layout-inline); restructured font-family and serif utility definitions

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• ⚙️Setting : 컬러 자동완성 및 우선순위 #26 — Both PRs modify .vscode/settings.json and src/styles/globals.css, changing Tailwind-related editor settings and utility definitions.
• ⚙️Setting : 컬러칩 활성화 #28 — Both PRs modify the editor.defaultColorDecorators property in .vscode/settings.json affecting color decorator behavior.
• 🐛 fix : 폰트 오류 해결 및 ZEN-SERIF 적용 #21 — Both PRs modify typography and serif font declarations in src/styles/globals.css.

Suggested labels

setting, style, fix

Suggested reviewers

• jjangminii
• skyblue1232

Poem

🐰 Colors shift from true to "auto" mode,
Tailwind's preflight unpacked, utilities fold.
Serifs and layouts get reorganized—
A cleaner canvas, minimized and blessed! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description includes the required ‘작업 내용’ and reviewer points but omits the mandatory ‘🤔 추후 작업 사항’ and ‘🔗 이슈’ sections and leaves the screenshot header empty, which reduces clarity and traceability.	Please add the missing ‘🤔 추후 작업 사항’ section with any upcoming tasks, fill in the ‘🔗 이슈’ section with the issue number or link, and either attach screenshots or remove the empty screenshot header to align with the repository template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly summarizes the primary changes (border fix and font adjustments) and aligns with the PR’s objectives, so it accurately reflects the main focus of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 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

---

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

[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 2:25pm

[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.

[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]

수고가 많으시네요

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/styles/globals.css (1)

182-201: Typography simplification LGTM; consider separate weight/leading utilities for flexibility.

Keeping only font-family and size reduces coupling to design tokens. If you later need weights/line-height, add dedicated utilities instead of re‑embedding them in text classes.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7643f2 and 0667b61.

📒 Files selected for processing (2)

• .vscode/settings.json (1 hunks)
• src/styles/globals.css (2 hunks)

🔇 Additional comments (3)

.vscode/settings.json (1)

25-26: VS Code setting: "auto" looks good, but verify team versions.

editor.defaultColorDecorators: "auto" is version‑dependent. If any teammate runs an older VS Code, fall back to true to avoid unknown setting warnings.

src/styles/globals.css (2)

210-215: New layout utilities look good.

layout-block and layout-inline align with your variable-driven approach and are consistent with existing flex/grid utilities.

---

203-209: Fix CSS comment typo for ZEN Serif

• Rename /* JEN Serif */ to /* ZEN Serif */.
• Asset /fonts/ZEN-SERIF-TTF-Regular.woff2 is present under public/fonts/.

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

Preflight likely still enabled via @import "tailwindcss"; intent may not be met.

In Tailwind v4, @import "tailwindcss" includes Preflight. Removing @import "tailwindcss/preflight" alone won’t disable it. If the goal is to drop Preflight (to fix border behavior), import only utilities.

Suggested change:

-@import 'tailwindcss';
+@import 'tailwindcss/utilities';

Note: Without Preflight, border utilities may need an explicit border-solid (since browser default border-style is none).

---

🏁 Script executed:

#!/bin/bash
sed -n '130,160p' src/styles/globals.css

Length of output: 1842

---

🏁 Script executed:

#!/bin/bash
rg -n "@import" src/styles/globals.css
rg -n "@tailwind" src/styles/globals.css

Length of output: 135

---

Disable Preflight by importing only utilities

src/styles/globals.css:1

-@import 'tailwindcss';
+@import 'tailwindcss/utilities';

Without Preflight, add border-solid to border utilities since the default border-style is none.

📝 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

	@import 'tailwindcss/utilities';

🤖 Prompt for AI Agents

In src/styles/globals.css around lines 139-140, Preflight has been disabled so
the default border-style is none; update the file to ensure the existing
`border` utility also applies a solid style by adding a rule that sets the
border-style to solid for the `border` utility (either by adding `border-style:
solid` to the `.border` selector or using `@apply border-solid`), so `border`
behaves as expected without Preflight.