refactor: 디자인 시스템 정리

[ljh130334]

📝작업 내용

디자인 시스템 정리했습니다.

• spacing, radius, breakpoints 등 제거 - 컴포넌트에서 직접 값 사용
• typography를 6개 주요 사이즈로 단순화 (xs, sm, base, lg, xl, 2xl)
• 색상 시스템은 그대로 유지 - 브랜딩 일관성을 위해 필수
• semanticColors도 유지 - 용도별로 색상을 쉽게 찾을 수 있도록

Summary by CodeRabbit

• Refactor
  • 글로벌 스타일 정의를 간소화하여 핵심 색상 및 타이포그래피 토큰만 유지합니다.
  • 불필요한 간격, 테두리 반경, 브레이크포인트 시스템을 제거하였습니다.
  • 타이포그래피 토큰을 핵심 폰트 크기 및 굵기로 축소하고, 키 이름을 더 직관적으로 변경하였습니다.
  • 배경 색상 토큰 구조를 단순화하였습니다.
  • 사용 예시 주석을 추가하였습니다.

[coderabbitai]

Walkthrough

글로벌 스타일 정의가 간소화되어 핵심 색상 및 타이포그래피 토큰만 남기고, 여백, 테두리 반경, 브레이크포인트 시스템이 모두 제거되었습니다. 색상 팔레트와 타이포그래피 시스템이 정리되었고, CSS 변수 export가 coreDesignTokens로 대체되었습니다. 사용 예시 주석이 추가되었습니다.

Changes

파일/경로	변경 요약
src/styles/global/global.ts	디자인 토큰(여백, 반경, 브레이크포인트) 전체 제거. 색상 팔레트 및 타이포그래피 시스템 간소화. CSS 변수 export를 coreDesignTokens로 변경. 사용 예시 주석 추가.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant GlobalStyles
    participant coreDesignTokens

    App->>GlobalStyles: 글로벌 스타일 적용
    GlobalStyles->>coreDesignTokens: 핵심 색상/타이포그래피 변수 주입
    App->>GlobalStyles: styled-components에서 coreDesignTokens 사용

Loading

Possibly related PRs

• feat: 컬러, 폰트 시스템 구성 #21: 상세 디자인 토큰 시스템과 글로벌 스타일을 추가한 PR로, 이번 변경에서 해당 기능들이 제거 또는 간소화되어 직접적으로 연관됨.

Suggested labels

✨ Feature, 🎨 Html&css

Poem

토끼가 춤추는 스타일의 밤,
토큰을 줄이고 핵심만 남겼지!
색과 글꼴만 쏙쏙 골라
여백과 반경은 안녕~
더 깔끔해진 글로벌 옷,
토끼 발자국처럼 가볍고 똑똑!
🐇✨

---

📜 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 48fc5a3 and 8810cac.

📒 Files selected for processing (1)

• src/styles/global/global.ts (4 hunks)

🔇 Additional comments (6)

src/styles/global/global.ts (6)

3-3: 주석 개선이 적절합니다.

"Primary Color Palette"에서 "Core Color Palette"로 변경된 것이 리팩토링 목적과 일치합니다.

---

78-152: 시맨틱 컬러 정리가 잘 되었습니다.

불필요한 주석 제거와 컬러 토큰 정리가 깔끔하게 이루어졌습니다. 브랜딩 일관성을 유지하면서도 가독성이 향상되었습니다.

---

208-209: 글로벌 스타일 업데이트가 적절히 반영되었습니다.

designTokens에서 coreDesignTokens로의 변경이 올바르게 적용되었습니다.

---

211-237: 사용 예시 추가가 도움이 됩니다.

개발자들이 새로운 토큰 시스템을 어떻게 사용해야 하는지 명확하게 보여주는 좋은 예시입니다. 특히 커스텀 spacing과 border-radius를 직접 적용하는 방법을 제시한 점이 유용합니다.

---

154-199: coreDesignTokens 적용 후 호환성 확인 완료

designTokens에서 coreDesignTokens로 변경한 후 기존 CSS 변수(--spacing, --gap, --padding, --margin, --radius, --border-radius, --breakpoint, --mobile, --tablet) 사용 패턴을 전역 검색했으나 어떠한 참조도 발견되지 않았습니다. 추가 조치 없이 변경을 그대로 반영해도 무방합니다.

---

55-76: 타이포그래피 시스템 변경 — 코드 사용 여부 확인 완료

• 제거된 fontSize 토큰(small01/02, medium01/02, large01/02)을 참조하는 TS/TSX 파일이 없습니다.
• 실제 사용 중인 typography.fontSize 키는 xs, sm, base, lg, xl(및 선언만 된 2xl)으로만 확인되었습니다.
• CSS/SCSS에서는 line-height를 직접 사용(src/reset.css), typography.lineHeight 토큰 참조는 없어 토큰 제거 영향이 없습니다.

따라서 코드 의존성 관점에서 이번 변경은 안전합니다.
디자인 관점(6개 크기로 모든 요구사항 충족 여부)은 별도 검토 부탁드립니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[ho0010]

LGTM!