feat: 컬러, 폰트 시스템 구성

[ljh130334]

📝작업 내용

• 컬러 시스템 구성
• 폰트 시스템 구성

Summary by CodeRabbit

• New Features

  • 새로운 폰트("Pretendard Variable", "Paperlogy")가 추가되어 다양한 가중치와 스타일을 지원합니다.
  • 폰트 전용 유틸리티 클래스(.font-lock, .font-primary, .font-secondary)가 도입되었습니다.
  • 디자인 토큰 시스템(색상, 간격, 반응형 브레이크포인트, 타이포그래피 등)이 전역 스타일에 적용되어 일관된 디자인을 제공합니다.

• Style

  • 전체 폰트 패밀리 및 폰트 관련 스타일이 개선되었습니다.

[coderabbitai]

Walkthrough

이 변경 사항은 폰트 스타일을 위한 새로운 CSS 파일을 추가하고, 메인 CSS에 해당 폰트 스타일을 임포트합니다. 또한 글로벌 스타일 모듈에 디자인 토큰 시스템을 도입하여 색상, 간격, 반응형 브레이크포인트, 타이포그래피 등 다양한 스타일 속성을 구조화된 객체와 CSS 커스텀 프로퍼티로 정의합니다.

Changes

파일/경로	변경 요약
src/main.css	./styles/fonts.css를 임포트하여 폰트 스타일을 추가함
src/styles/fonts.css	Pretendard Variable, Paperlogy 폰트 및 유틸리티 폰트 클래스 정의, body 및 클래스별 폰트 패밀리 설정
src/styles/global/global.ts	색상, 간격, 반경, 타이포그래피, 브레이크포인트, 시맨틱 컬러 등 디자인 토큰 시스템 도입 및 CSS 커스텀 프로퍼티 적용

Poem

🐇
새로운 폰트가 춤을 추네,
디자인 토큰이 땅을 꾸미네.
색과 간격, 글자와 테두리,
모두 토큰 속에 담겨 있지!
토끼는 기뻐 깡총깡총,
스타일의 숲이 더욱 푸르러졌네.

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/styles/fonts.css (1)

11-81: Paperlogy 폰트 최적화 제안: 단일 Variable/WOFF2 사용 검토 필요

• Pretendard Variable(woff2) 파일: src/assets/fonts/PretendardVariable.woff2 확인됨
• Paperlogy TTF 파일(9개): src/assets/fonts/Paperlogy-1Thin.ttf … Paperlogy-9Black.ttf 확인됨

→ 네트워크 요청 수와 로딩 최적화를 위해 Paperlogy도 단일 Variable 폰트(.woff2) 또는 WOFF2 버전으로 제공 가능한지 확인해 주세요.

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

122-131: 브레이크포인트 구조 개선을 제안합니다

현재 구조는 mobile 객체와 tablet 단일 값이 혼재되어 일관성이 부족합니다.

다음과 같이 구조를 통일하는 것을 권장합니다:

export const breakpoints = {
  mobile: {
    min: '320px',
    standard: '360px',
    max: '767px',
  },
-  tablet: '768px',
+  tablet: {
+    min: '768px',
+    max: '1023px',
+  },
+  desktop: {
+    min: '1024px',
+  },
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b1212b and b227077.

⛔ Files ignored due to path filters (10)

• src/assets/fonts/Paperlogy-1Thin.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-2ExtraLight.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-3Light.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-4Regular.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-5Medium.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-6SemiBold.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-7Bold.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-8ExtraBold.ttf is excluded by !**/*.ttf
• src/assets/fonts/Paperlogy-9Black.ttf is excluded by !**/*.ttf
• src/assets/fonts/PretendardVariable.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (3)

• src/main.css (1 hunks)
• src/styles/fonts.css (1 hunks)
• src/styles/global/global.ts (1 hunks)

🔇 Additional comments (7)

src/styles/fonts.css (2)

84-101: 포괄적인 폰트 폴백 스택이 잘 구성되었습니다

한국어 사이트에 적합한 시스템 폰트들이 적절히 포함되어 있으며, 이모지 폰트까지 고려된 점이 훌륭합니다.

---

103-115: 폰트 유틸리티 클래스의 용도를 명확히 해주세요

.font-lock 클래스가 monospace 폴백을 사용하는 이유와 구체적인 사용 목적이 불분명합니다. 또한 .font-secondary가 serif 폴백을 사용하는 것이 의도된 것인지 확인이 필요합니다.

폰트 클래스들의 사용 목적을 문서화하거나 주석으로 명시해주시기 바랍니다.

src/main.css (1)

2-2: 폰트 스타일시트 임포트가 적절히 추가되었습니다

reset.css 이후에 폰트 정의를 로드하는 순서가 올바릅니다.

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

93-97: 타이포그래피 시스템과 fonts.css의 일관성을 확인했습니다

폰트 패밀리 정의가 fonts.css의 폰트 선언과 일치하여 좋습니다.

---

232-369: CSS 커스텀 프로퍼티 시스템이 포괄적으로 구성되었습니다

디자인 토큰을 CSS 변수로 변환하는 방식이 체계적이며, 반응형 브레이크포인트별 변수 설정도 잘 구현되었습니다.

---

354-368: 반응형 변수의 용도를 명확히 해주세요

--responsive-margin, --responsive-gutter, --responsive-columns 변수들이 정의되어 있지만, 이들이 어떻게 사용될지 명확하지 않습니다. 특히 모바일과 태블릿에서 동일한 margin 값(20px)을 사용하는 이유를 확인해주세요.

이러한 반응형 변수들의 사용 목적과 값 설정 근거를 문서화해주시기 바랍니다.

---

371-379: 글로벌 스타일과 디자인 토큰 통합이 우수합니다

typography.fontFamily.primary를 사용하여 일관성을 유지하고, designTokens CSS를 적절히 주입한 점이 훌륭합니다.

[ho0010]

LGTM!