Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jan 18, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aff6de5
feat(packages/theme): 아이콘 변경 사항 반영
kongnayeon Jan 17, 2025
7c5d67f
fix(packages/ui): 누락된 아이콘 추가
kongnayeon Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/theme/src/themes/dark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const darkTheme: ThemeContract = {
colors: {
primary: tokens.colors.green200,
primary400to200: tokens.colors.green200,
primaryHover: tokens.colors.green100,
primaryHover: tokens.colors.green200, // TODO

warning: tokens.colors.warning300,

Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/themes/light.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const lightTheme: ThemeContract = {
colors: {
primary: tokens.colors.green200, // TODO: 삭제 예정
primary400to200: tokens.colors.green400, // TODO: 삭제 예정
primaryHover: tokens.colors.green300, // TODO: 삭제 예정
primaryHover: tokens.colors.green200, // TODO: 삭제 예정

warning: tokens.colors.warning500,

Expand Down
18 changes: 12 additions & 6 deletions packages/theme/src/tokens/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
export const colors = {
green100: '#F1FFB5', // TODO: 삭제 예정
green200: '#E6FF79', // TODO: 삭제 예정
green300: '#D0F141', // TODO: 삭제 예정
green400: '#D2F634', // TODO: 삭제 예정

primary500: '#7081F4',
primary600: '#5266EC',
primary700: '#3348D6',
primary800: '#2035BC',
primary800: '#2035BC', // TODO 삭제 예정
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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


warning300: '#FF724E',
warning500: '#FF3300',
Expand All @@ -16,6 +11,7 @@ export const colors = {

pink200: '#FFD6D6',
pink400: '#EAAEAE',
pink600: '#BF5E5E',
pink800: '#A63535',

orange200: '#FFEAD9',
Expand All @@ -26,12 +22,22 @@ export const colors = {
blue400: '#7698E2',
blue800: '#153C66',

purple200: '#E5CEFF',
purple400: '#B68AE7',
purple600: '#9365C5',
purple800: '#412274',

violet0: '#F2F3FF',
violet100: '#DFE1FE',
violet200: '#B7B4FF',
violet400: '#817ED5',
violet800: '#4A46A3',

green200: '#D1F9DF',
green400: '#76CE95',
green600: '#337B6E',
green800: '#224C38',

grey0: '#FFFFFF',
grey25: '#F7F9FB',
grey50: '#EAEFF4',
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowFillBottom.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/ui/src/assets/icons/IconArrowFillTop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/ui/src/assets/icons/IconCheck.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/ui/src/assets/icons/IconCheckbox.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions packages/ui/src/assets/icons/IconTwinkle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/ui/src/assets/icons/IconUnSelectedCheckbox.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/ui/src/assets/icons/_IconX.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 10 additions & 4 deletions packages/ui/src/components/Icon/assets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import IconArrowBottom from '@/assets/icons/IconArrowBottom.svg';
import IconArrowFillBottom from '@/assets/icons/IconArrowFillBottom.svg';
import IconArrowFillTop from '@/assets/icons/IconArrowFillTop.svg';
import IconArrowLeft from '@/assets/icons/IconArrowLeft.svg';
import IconArrowRight from '@/assets/icons/IconArrowRight.svg';
import IconArrowTop from '@/assets/icons/IconArrowTop.svg';
import IconCalendar from '@/assets/icons/IconCalendar.svg';
import IconChat from '@/assets/icons/IconChat.svg';
import IconCheck from '@/assets/icons/IconCheck.svg';
import IconCheckCalendar from '@/assets/icons/IconCheckCalendar.svg';
import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
import IconDocument from '@/assets/icons/IconDocument.svg';
import IconLineThree from '@/assets/icons/IconLineThree.svg';
import IconNotice from '@/assets/icons/IconNotice.svg';
Expand All @@ -19,20 +22,23 @@ import IconSmile from '@/assets/icons/IconSmile.svg';
import IconStack from '@/assets/icons/IconStack.svg';
import IconStar from '@/assets/icons/IconStar.svg';
import IconTwinkle from '@/assets/icons/IconTwinkle.svg';
import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
import IconX from '@/assets/icons/IconX.svg';
import IconXCircle from '@/assets/icons/IconXCircle.svg';
import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
import _IconX from '@/assets/icons/_IconX.svg';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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


export const icons = {
arrowBottom: IconArrowBottom,
arrowFillBottom: IconArrowFillBottom,
arrowFillTop: IconArrowFillTop,
arrowLeft: IconArrowLeft,
arrowRight: IconArrowRight,
arrowTop: IconArrowTop,
calendar: IconCalendar,
chat: IconChat,
check: IconCheck,
checkCalendar: IconCheckCalendar,
checkbox: IconCheckbox,
document: IconDocument,
lineThree: IconLineThree,
notice: IconNotice,
Expand All @@ -46,8 +52,8 @@ export const icons = {
stack: IconStack,
star: IconStar,
twinkle: IconTwinkle,
unSelectedCheckbox: IconUnSelectedCheckbox,
x: IconX,
xCircle: IconXCircle,
checkbox: IconCheckbox,
unSelectedCheckbox: IconUnSelectedCheckbox,
iconX: _IconX,
};
Loading