[Feat] 아이콘, 색상 변경 사항 반영

[kongnayeon]

관련 이슈

#71

변경 사항

디자인 시안에서 변경된 아이콘과 theme color를 추가했습니다.

레퍼런스

Summary by CodeRabbit

• 새로운 기능

  • 테마의 색상 팔레트 업데이트
  • 새로운 색상 추가: 핑크, 퍼플, 그린 계열의 다양한 음영
  • 새로운 아이콘 추가: IconArrowFillBottom, IconArrowFillTop, IconCheckbox, IconUnSelectedCheckbox

• 스타일 변경

  • 다크 및 라이트 테마의 primaryHover 색상 조정
  • 기존 그린 색상 항목 제거 및 새로운 그린 색상 도입
  • 아이콘 구조 변경 및 아이콘 이름 변경: IconX → _IconX

[coderabbitai]

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/ui/src/components/Icon/assets.ts

Oops! Something went wrong! :(

ESLint: 9.17.0

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs
at packageResolve (node:internal/modules/esm/resolve:839:9)
at moduleResolve (node:internal/modules/esm/resolve:908:18)
at defaultResolve (node:internal/modules/esm/resolve:1038:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
at ModuleJob._link (node:internal/modules/esm/module_job:126:49)

워크스루

이 풀 리퀘스트는 테마 패키지의 색상 토큰과 다크 및 라이트 테마의 primaryHover 속성을 업데이트합니다. 색상 팔레트가 재정의되어 green100, green200, green300, green400 항목이 제거되고 새로운 색상 항목(예: green200, green400, purple200, purple400 등)이 추가되었습니다. 또한 아이콘 관리 방식이 변경되어 몇 가지 아이콘이 추가되고, 이름이 변경되었습니다.

변경 사항

파일	변경 요약
packages/theme/src/tokens/colors.ts	색상 항목 제거 및 새로운 색상 추가
packages/theme/src/themes/dark.ts	primaryHover 속성을 tokens.colors.green100에서 tokens.colors.green200으로 변경
packages/theme/src/themes/light.ts	primaryHover 속성을 tokens.colors.green300에서 tokens.colors.green200으로 변경
packages/ui/src/components/Icon/assets.ts	아이콘 추가 및 기존 아이콘 이름 변경

관련 가능성 있는 PR

• [Fix]: Icon 컴포넌트 수정 #51: Icon 컴포넌트의 색상 속성 업데이트
• [Fix] 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 #53: 색상 시스템 내 색상 사용 보장
• [Chore] theme color 업데이트, 타입 export #56: 새로운 색상 속성 추가

제안된 레이블

enhancement

제안된 리뷰어

• minseong0324

시퀀스 다이어그램

sequenceDiagram
    participant Colors as Color Tokens
    participant DarkTheme as Dark Theme
    participant LightTheme as Light Theme
    participant Icons as Icon Management
    
    Colors->>DarkTheme: Update primaryHover
    Colors->>LightTheme: Update primaryHover
    Colors->>Colors: Add new color tokens
    Icons->>Icons: Add new icons
    Icons->>Icons: Rename existing icons

Loading

토끼의 시 🐰

🌈 색상의 춤, 테마의 노래
초록빛 물결 흐르는 곳
보라와 분홍 새로운 빛
코드는 계속 춤을 추네
🎨 변화의 아름다움이여! 🌟

Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate unit testing code.
  • @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.

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. (Beta)
• @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: 1

🧹 Nitpick comments (1)

packages/theme/src/themes/light.ts (1)

6-8: 테마 시스템 개선을 위한 종합적인 계획 수립 권장

현재 진행 중인 색상 시스템 변경에 대한 추가 제안사항:

1. 변경사항 추적을 위한 이슈 생성
2. 디자인 시스템 문서 업데이트
3. 테마 전환 테스트 계획 수립

이러한 변경사항들을 추적하기 위한 GitHub 이슈를 생성해드릴까요?

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2124a91 and aff6de5.

⛔ Files ignored due to path filters (7)

• packages/ui/src/assets/icons/IconArrowFillBottom.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconArrowFillTop.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconCheck.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconCheckbox.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconTwinkle.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconUnSelectedCheckbox.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/_IconX.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• packages/theme/src/themes/dark.ts (1 hunks)
• packages/theme/src/themes/light.ts (1 hunks)
• packages/theme/src/tokens/colors.ts (3 hunks)

🔇 Additional comments (3)

packages/theme/src/tokens/colors.ts (1)

25-28: 새로운 색상 팔레트 적용 검토 필요

새로 추가된 색상들(purple200-800, green200-800)이 디자인 시스템의 의도와 일치하는지 확인이 필요합니다. 특히:

• 색상 값들이 일관된 채도와 명도 스케일을 따르는지
• 접근성 기준(WCAG)을 충족하는지

Also applies to: 36-39

packages/theme/src/themes/dark.ts (1)

8-8: 테마 전환 계획 수립 필요

primaryHover 색상이 green200으로 변경되었으나 TODO 주석이 남아있습니다. 다음 사항들을 명확히 해야 합니다:

• 최종적으로 사용할 hover 색상 결정
• 다크 모드에서의 대비(contrast) 검증
• light 테마와의 일관성 확인

packages/theme/src/themes/light.ts (1)

6-8: 테마 정리 작업 필요

여러 속성들이 삭제 예정으로 표시되어 있습니다:

• primary
• primary400to200
• primaryHover

이러한 변경사항들을 통합적으로 관리하기 위한 제안사항:

1. 삭제 예정인 속성들의 현재 사용처 파악
2. 대체 구현 방안 문서화
3. 마이그레이션 계획 수립

✅ Verification successful

테마 속성 정리 가능 확인됨

해당 속성들(primary, primary400to200, primaryHover)은 실제 컴포넌트에서 사용되지 않는 것으로 확인되었습니다. 다음 단계로 진행하시면 됩니다:

1. 테마 정의 파일들에서 해당 속성들 제거
2. contract.ts의 테마 인터페이스에서도 관련 정의 제거
3. 다크/라이트 테마 파일의 TODO 주석 정리

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 삭제 예정인 속성들의 사용처 검색
rg "primary400to200|primaryHover" --type ts

Length of output: 526

---

Script:

#!/bin/bash
# Search for theme property usage in styled-components and other patterns
rg "theme\.(primary400to200|primaryHover|primary)[^a-zA-Z]" --type ts -A 2

Length of output: 76

---

Script:

#!/bin/bash
# Search with broader patterns including destructuring and styled-components usage
rg "(primary400to200|primaryHover)(\s|[\"'\`]|;|,|\}|\))" --type ts -A 2

Length of output: 75

[coderabbitai]

💡 Codebase verification

primary800 색상 토큰 제거 가능

이 색상 토큰은 현재 테마 시스템 파일들에서만 참조되고 있으며, 실제 컴포넌트에서는 사용되지 않는 것으로 확인됩니다. 다음과 같이 정리가 필요합니다:

• packages/theme/src/tokens/colors.ts에서 primary800 정의 제거
• packages/theme/src/themes/light.ts와 dark.ts에서 참조 제거
• packages/theme/src/themes/contract.ts에서 타입 정의 제거

🔗 Analysis chain

TODO 주석 처리된 색상 정리 필요

primary800 색상이 삭제 예정으로 표시되어 있습니다. 이 색상을 사용하는 모든 곳을 확인하고 적절한 대체 색상으로 마이그레이션하는 계획이 필요합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# primary800 색상의 사용처를 검색
rg "primary800|#2035BC" --type ts

Length of output: 325

---

Script:

#!/bin/bash
# Search for theme-based usage of primary800
rg "theme.*primary800|primary800.*theme" --type ts -A 2

Length of output: 57

[coderabbitai]

Actionable comments posted: 1

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between aff6de5 and 7c5d67f.

⛔ Files ignored due to path filters (3)

• packages/ui/src/assets/icons/IconCheckbox.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconTwinkle.svg is excluded by !**/*.svg
• packages/ui/src/assets/icons/IconUnSelectedCheckbox.svg is excluded by !**/*.svg

📒 Files selected for processing (1)

• packages/ui/src/components/Icon/assets.ts (3 hunks)

🔇 Additional comments (3)

packages/ui/src/components/Icon/assets.ts (3)

2-3: 새로운 화살표 아이콘 추가 확인

새로운 IconArrowFillBottom과 IconArrowFillTop 아이콘이 추가되었습니다. 디자인 시스템의 일관성을 위해 잘 반영되었습니다.

---

11-11: 체크박스 아이콘 업데이트 확인

새로운 IconCheckbox 컴포넌트가 추가되고 icons 객체에 정상적으로 매핑되었습니다.

Also applies to: 41-41

---

25-25: 미선택 체크박스 아이콘 업데이트 확인

새로운 IconUnSelectedCheckbox 컴포넌트가 추가되고 icons 객체에 정상적으로 매핑되었습니다.

Also applies to: 55-55

[coderabbitai]

💡 Codebase verification

아이콘 네이밍 컨벤션 불일치 확인됨

프로젝트의 모든 아이콘 파일들이 'Icon' 접두사를 사용하는 일관된 네이밍 패턴을 따르고 있습니다. '_IconX.svg'는 이 패턴을 벗어나는 유일한 파일이며, 같은 디렉토리에 'IconX.svg'가 이미 존재합니다.

• packages/ui/src/assets/icons/_IconX.svg 파일명을 기존 컨벤션에 맞춰 수정하거나, 변경 이유에 대한 문서화가 필요합니다.
• 동일한 아이콘에 대해 IconX.svg와 _IconX.svg 두 파일이 존재하는 것으로 보이므로, 중복 여부 확인이 필요합니다.

🔗 Analysis chain

IconX 네이밍 변경 검토 필요

IconX를 _IconX로 변경한 이유가 명확하지 않습니다. 언더스코어 prefix를 사용하는 네이밍 컨벤션이 프로젝트에 있는지 확인이 필요합니다.

다음 스크립트로 프로젝트의 아이콘 네이밍 패턴을 확인해보겠습니다:

Also applies to: 58-58

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 프로젝트 내 SVG 아이콘 파일의 네이밍 패턴 확인
fd -e svg . assets/icons/ -x basename {} \; | sort

Length of output: 156

---

Script:

#!/bin/bash
# Find all SVG files in the project
echo "=== All SVG files ==="
fd -e svg . 

echo -e "\n=== Files with 'Icon' in name ==="
fd -e svg -g "*Icon*.svg" .

echo -e "\n=== Check for documentation files ==="
fd -e md -g "*naming*.md" -g "*convention*.md" .

Length of output: 3003

[minseong0324]

고생하셨어요! 나연님!