[Setting/#141] 디자인 시스템 초기 세팅#142
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough두 개의 신규 CSS 파일을 통해 프로젝트의 초기 디자인 시스템을 구축합니다. 색상 팔레트, 텍스트 역할, 타이포그래피 스케일, 그리고 경계 반지름을 설계 토큰으로 정의하여 일관된 스타일 기준을 제공합니다. Changes디자인 시스템 기초 설정
📋 검토 포인트타이포그래피 토큰 살피기
색상 토큰 일관성
경계 반지름 매핑theme.css의 타이포그래피 유틸리티 호환성
🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/styles/typography.css (1)
46-87: ⚖️ Poor tradeoff유틸리티 클래스에서 CSS 변수를 활용하면 유지보수가 더 편할 거예요.
현재
.font-*클래스들이font-size,font-weight값을 하드코딩하고 있어요. 위에서 정의한 CSS 변수들을 활용하면 나중에 디자인 토큰 값을 한 곳에서만 수정할 수 있어요.예를 들어:
- 48번 줄:
font-size: 56px→:root의--text-hero: 56px와 중복- 49번 줄:
font-weight: 700→:root의--font-weight-bold: 700과 중복현재 방식도 동작하긴 하지만, 향후 디자인 시스템 확장을 고려하면 CSS 변수를 참조하는 게 더 나을 것 같아요.
♻️ 리팩터링 제안 (선택사항)
`@layer` utilities { .font-hero { - font-size: 56px; - font-weight: 700; + font-size: var(--text-hero); + font-weight: var(--font-weight-bold); line-height: 140%; } .font-heading1 { - font-size: 40px; - font-weight: 700; + font-size: var(--text-heading1); + font-weight: var(--font-weight-bold); line-height: 130%; } .font-heading2 { - font-size: 32px; - font-weight: 600; + font-size: var(--text-heading2); + font-weight: var(--font-weight-semibold); line-height: 130%; } .font-heading3 { - font-size: 24px; - font-weight: 400; + font-size: var(--text-heading3); + font-weight: var(--font-weight-regular); line-height: 130%; } .font-body1 { - font-size: 22px; - font-weight: 400; + font-size: var(--text-body1); + font-weight: var(--font-weight-regular); line-height: 130%; } .font-body2 { - font-size: 18px; - font-weight: 400; + font-size: var(--text-body2); + font-weight: var(--font-weight-regular); line-height: 130%; } .font-label { - font-size: 14px; - font-weight: 500; + font-size: var(--text-label); + font-weight: var(--font-weight-medium); line-height: 140%; } .font-caption { - font-size: 12px; - font-weight: 400; + font-size: var(--text-caption); + font-weight: var(--font-weight-regular); line-height: 130%; } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/styles/typography.css` around lines 46 - 87, Replace hardcoded font properties in the utility classes with the design-token CSS variables: for each class (.font-hero, .font-heading1, .font-heading2, .font-heading3, .font-body1, .font-body2, .font-label, .font-caption) swap font-size and font-weight values to reference the corresponding :root variables (e.g., replace 56px with var(--text-hero) and 700 with var(--font-weight-bold), and use appropriate line-height variables like var(--line-height-xxx) if available); ensure every occurrence of font-size and font-weight in those classes uses the token variables so updates to :root propagate consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/styles/theme.css`:
- Around line 50-52: The `@theme` block is missing the --radius-15 token declared
in :root; add --radius-15: 15px inside the `@theme` block so that the CSS variable
(--radius-15) is consistent with :root and other tokens (references:
--radius-15, `@theme`, :root).
- Line 52: 현재 :root에 정의되지 않은 CSS 변수 --radius-30을 참조하고 있어 오류가 납니다; 수정하려면
src/styles/theme.css에서 해당 참조(--radius-30)를 찾아서 1) :root에 --radius-30: 30px; 같은
값을 추가하거나(필요한 경우), 또는 2) 해당 라인이 의도된 값이 --radius-15(또는 기존 정의된
--radius-10/--radius-20)이라면 참조를 그 변수명으로 바꿔 오타를 바로잡으세요; 관련 식별자: --radius-30,
--radius-15, --radius-10, --radius-20, :root.
In `@src/styles/typography.css`:
- Line 31: There's a typo in the CSS custom property name: replace the
misspelled --font-koerean with --font-korean so it matches the :root definition
and any references; update the variable declaration (currently "--font-koerean")
to "--font-korean" and verify any usages (e.g., var(--font-korean)) align with
the corrected name.
- Around line 29-44: The `@theme` block is missing the font weight tokens; add the
same variables defined in :root—--font-weight-bold, --font-weight-semibold,
--font-weight-medium, and --font-weight-regular—into the `@theme` declaration so
they are exposed to Tailwind, e.g. include those four --font-weight-* entries
alongside the existing --font-* and --text-* variables in the `@theme` block
(refer to the `@theme` block and the --font-weight-* variable names to locate
where to add them).
---
Nitpick comments:
In `@src/styles/typography.css`:
- Around line 46-87: Replace hardcoded font properties in the utility classes
with the design-token CSS variables: for each class (.font-hero, .font-heading1,
.font-heading2, .font-heading3, .font-body1, .font-body2, .font-label,
.font-caption) swap font-size and font-weight values to reference the
corresponding :root variables (e.g., replace 56px with var(--text-hero) and 700
with var(--font-weight-bold), and use appropriate line-height variables like
var(--line-height-xxx) if available); ensure every occurrence of font-size and
font-weight in those classes uses the token variables so updates to :root
propagate consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a1261588-78e7-48ef-9d9d-5033b0266a5b
📒 Files selected for processing (2)
src/styles/theme.csssrc/styles/typography.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔢 관련 이슈 링크
📌 변경사항PR
💻 작업내용
🪧 미완성 작업
N/A
🤔 논의 사항 및 참고 사항
font, color, rounded 설정 해두었으니 앞으로 개발할때는 정해진 팔레트에서만 사용하면됩니다!
추가로 필요한 디자인은 컴포넌트 개발 작업하면서 점차 늘려나갈 예정입니다!
기존의 global.css는 수정작업을 통해서 점차 줄여나갈 예정입니다.
✅ 체크리스트
Summary by CodeRabbit
릴리스 노트