[Feat] Icon 컴포넌트 추가 #48
Conversation
|
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
apps/web/next.config.mjsOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 워크스루이 풀 리퀘스트는 웹 애플리케이션의 UI 및 테마 구성 요소를 개선하는 데 중점을 둡니다. Next.js 애플리케이션의 구성을 업데이트하고, 새로운 아이콘 컴포넌트를 도입하며, 패키지 종속성과 빌드 구성을 최적화했습니다. 주요 변경 사항은 변경 사항
제안된 리뷰어
관련될 수 있는 PR
시퀀스 다이어그램sequenceDiagram
participant Web App
participant UI Package
participant Theme Package
Web App->>UI Package: 아이콘 요청
UI Package->>Theme Package: 테마 색상 조회
Theme Package-->>UI Package: 색상 반환
UI Package-->>Web App: 스타일이 적용된 아이콘 렌더링
토끼의 시 🐰
Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (8)
packages/theme/src/themes/index.ts (1)
1-5: 테마 타입 정의가 명확합니다.타입 정의와 내보내기가 잘 구성되어 있습니다. 다만, 테마 변수와 계약에 대한 JSDoc 문서화를 추가하면 더 좋을 것 같습니다.
다음과 같이 문서화를 추가해보세요:
+/** 테마 변수 타입 정의 */ export type Vars = typeof vars;packages/ui/src/components/Icon/Icon.css.ts (1)
6-6: 빈 스타일 객체의 용도를 명확히 해주세요.현재 비어있는 parent 스타일 객체의 향후 사용 계획이나 목적을 주석으로 추가하면 좋을 것 같습니다.
apps/web/next.config.mjs (1)
4-5: TODO 주석을 이슈로 전환하는 것이 좋겠습니다.디자인 시스템 패키지 추가에 대한 TODO 주석을 GitHub 이슈로 전환하여 추적하면 좋을 것 같습니다.
이 TODO를 GitHub 이슈로 생성해드릴까요?
packages/theme/src/components/ThemeProvider.tsx (1)
9-16: 성능 최적화를 위한 제안이 있습니다.현재 구현은 잘 작동하지만, 다음과 같은 개선사항을 고려해보세요:
- 불필요한 리렌더링을 방지하기 위해 메모이제이션 적용
- Context API를 사용하여 테마 상태 관리
다음과 같이 개선할 수 있습니다:
-export function ThemeProvider({ +export const ThemeProvider = memo(function ThemeProvider({ children, theme = 'light', -}: ThemeProviderProps) { +}: ThemeProviderProps) { const themeClass = theme === 'light' ? lightThemeClass : darkThemeClass; return <div className={themeClass}>{children}</div>; -} +});packages/theme/esbuild.config.mjs (1)
23-24: 에러 처리 개선이 필요합니다현재 에러 처리가 단순히 프로세스를 종료하는 것으로 되어있습니다. 빌드 실패의 원인을 파악할 수 있도록 에러 로깅을 추가하는 것이 좋겠습니다.
- .catch(() => process.exit(1)); + .catch((error) => { + console.error('Build failed:', error); + process.exit(1); + });packages/ui/src/components/Icon/Icon.tsx (1)
16-20: 타입 안전성 개선이 필요합니다
IconProps인터페이스에서 SVG 속성과 충돌할 수 있는 속성들에 대한 처리가 필요합니다.interface IconProps extends SVGProps<SVGSVGElement> { name: IconName; - fill?: ColorType; - stroke?: ColorType; + fill?: ColorType | never; // SVG의 fill 속성과 구분 + stroke?: ColorType | never; // SVG의 stroke 속성과 구분 }packages/ui/src/scripts/generate-icon-map.ts (1)
18-24: 경로 설정의 유연성 개선 필요현재 하드코딩된 경로 대신 환경 변수나 설정 파일을 통해 경로를 관리하는 것이 더 유연할 것 같습니다.
-const ICONS_DIR: string = path.resolve(__dirname, '../../src/assets/icons'); -const OUTPUT_PATH: string = path.resolve( - __dirname, - '../../src/components/Icon/icons.ts' -); +const ICONS_DIR: string = path.resolve(process.env.ICONS_DIR || '../../src/assets/icons'); +const OUTPUT_PATH: string = path.resolve( + process.env.ICONS_OUTPUT_DIR || '../../src/components/Icon', + 'icons.ts' +);packages/theme/package.json (1)
9-14: exports 필드 구성이 명확합니다.스타일과 메인 엔트리포인트가 명확하게 구분되어 있어 좋습니다. 하지만 조건부 exports를 통해 CommonJS 지원도 고려해보시는 것은 어떨까요?
"exports": { ".": { - "import": "./dist/index.js" + "import": "./dist/index.js", + "require": "./dist/index.cjs" }, "./styles": "./dist/index.css" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (23)
packages/ui/src/assets/icons/IconArrowBottom.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowLeft.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowRight.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowTop.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconChat.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheck.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheckCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconDocument.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconLineThree.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconNotice.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPencil.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlus.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlusPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSend.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconShopping.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSmile.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStack.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconX.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconXCircle.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
apps/web/next.config.js(0 hunks)apps/web/next.config.mjs(1 hunks)apps/web/package.json(2 hunks)apps/web/src/app/layout.tsx(2 hunks)apps/web/src/app/page.tsx(1 hunks)next.config.js(0 hunks)package.json(1 hunks)packages/eslint-config/package.json(0 hunks)packages/theme/esbuild.config.js(0 hunks)packages/theme/esbuild.config.mjs(1 hunks)packages/theme/package.json(1 hunks)packages/theme/src/components/ThemeProvider.tsx(1 hunks)packages/theme/src/index.ts(1 hunks)packages/theme/src/sprinkles/index.ts(1 hunks)packages/theme/src/sprinkles/sprinkles.css.ts(1 hunks)packages/theme/src/themes/index.ts(1 hunks)packages/theme/src/themes/themes.css.ts(1 hunks)packages/typescript-config/base.json(1 hunks)packages/ui/esbuild.config.js(0 hunks)packages/ui/esbuild.config.mjs(1 hunks)packages/ui/global.d.ts(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/Icon/Icon.css.ts(1 hunks)packages/ui/src/components/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.ts(1 hunks)packages/ui/tsconfig.json(1 hunks)turbo.json(1 hunks)
💤 Files with no reviewable changes (5)
- next.config.js
- packages/ui/esbuild.config.js
- packages/eslint-config/package.json
- apps/web/next.config.js
- packages/theme/esbuild.config.js
✅ Files skipped from review due to trivial changes (3)
- packages/ui/global.d.ts
- packages/theme/src/sprinkles/index.ts
- packages/theme/src/sprinkles/sprinkles.css.ts
🔇 Additional comments (20)
packages/ui/tsconfig.json (1)
12-12: 설정이 올바르게 추가되었습니다!
global.d.ts를 include 항목에 추가함으로써 SVG 파일에 대한 전역 타입 선언을 TypeScript가 인식할 수 있게 되었습니다. 이는 Icon 컴포넌트 구현에 필요한 적절한 변경사항입니다.packages/ui/src/components/index.ts (1)
1-1: 배럴 파일이 잘 구성되어 있습니다!Icon 컴포넌트를 내보내는 구조가 깔끔하고 명확합니다.
packages/theme/src/index.ts (1)
1-4: 테마 관련 내보내기가 체계적으로 구성되어 있습니다!themes, sprinkles, tokens, ThemeProvider의 내보내기 순서가 의존성을 고려하여 잘 정리되어 있습니다.
packages/ui/src/components/Icon/Icon.css.ts (2)
3-4: CSS 변수명이 명확하고 잘 정의되어 있습니다!stroke와 fill 색상을 위한 CSS 변수를 분리하여 정의한 것이 좋습니다.
8-11: 글로벌 스타일 범위가 적절히 제한되어 있습니다!parent 클래스 내부의 path 요소에만 스타일을 적용하여 스코프가 잘 제한되어 있습니다.
packages/theme/src/themes/themes.css.ts (2)
1-4: 타입 안전성이 잘 고려되어 있습니다!ThemeContract 타입을 사용하여 테마 속성의 타입 안전성을 보장한 것이 좋습니다.
6-7: 테마 생성 로직이 깔끔합니다!라이트 테마에서 생성된 변수들을 다크 테마에서 재사용하는 방식이 효율적입니다.
apps/web/next.config.mjs (1)
6-8: transpilePackages 설정이 적절합니다!workspace 패키지들이 올바르게 transpile 대상으로 지정되어 있습니다.
packages/theme/src/components/ThemeProvider.tsx (1)
4-7: 타입 정의가 명확합니다!ThemeProviderProps 타입이 잘 정의되어 있으며, theme prop의 기본값 처리도 적절합니다.
packages/ui/esbuild.config.mjs (2)
12-12: platform 설정 검토가 필요합니다UI 컴포넌트 패키지에
platform: 'node'설정이 되어 있습니다. 브라우저에서 실행되는 UI 컴포넌트의 경우platform: 'browser'가 더 적절할 수 있습니다.
34-40: CommonJS 빌드 오류 해결이 필요합니다CommonJS 빌드 오류에 대한 해결이 필요합니다. 다양한 환경에서의 호환성을 위해 ESM과 CJS 모두 지원하는 것이 좋습니다.
이 문제를 해결하기 위한 분석이 필요하신가요? 도움이 필요하시다면 말씀해 주세요.
packages/ui/src/components/Icon/assets.ts (2)
24-47: 아이콘 네이밍 컨벤션이 잘 지켜졌습니다!일관된 네이밍 패턴을 사용하여 아이콘을 관리하고 있습니다. 카멜케이스로 키를 정의하여 JavaScript/TypeScript 컨벤션을 잘 따르고 있습니다.
1-21: 아이콘 임포트 경로 설정 확인 필요
@/assets별칭(alias)이 프로젝트 설정에서 올바르게 구성되어 있는지 확인해주세요. 현재 TypeScript와 번들러 설정에서 이 경로가 제대로 해석되는지 검증이 필요합니다.✅ Verification successful
경로 별칭 설정이 올바르게 구성되어 있습니다
packages/ui/tsconfig.json에서@/*경로 별칭이./src/*로 올바르게 매핑되어 있어, 아이콘 임포트 구문이 정상적으로 작동할 것으로 확인됩니다. 또한 일관된 네이밍 컨벤션을 잘 유지하고 있습니다. 👍🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify path alias configuration in tsconfig and build settings cat $(find . -name 'tsconfig*.json') | grep -A 5 "paths"Length of output: 504
packages/ui/src/scripts/generate-icon-map.ts (1)
4-15: 문서화가 잘 되어있습니다!한글로 작성된 주석과 예시가 코드의 의도를 잘 설명하고 있습니다. 특히
toCamelCase함수의 동작 방식과 예시가 명확합니다.turbo.json (1)
8-8: 빌드 출력 설정이 적절히 업데이트되었습니다
dist/**를 outputs에 추가한 것은 모노레포 구조에서 패키지 빌드 결과물을 적절히 캐시하기 위한 좋은 설정입니다.packages/typescript-config/base.json (1)
4-8: 타입스크립트 경로 설정이 적절합니다모노레포 구조에 맞게
@repo/theme와@repo/ui패키지의 경로 매핑이 잘 구성되어 있습니다. 이를 통해 패키지 간 임포트가 깔끔하게 처리될 수 있습니다.apps/web/package.json (2)
14-15: 워크스페이스 의존성 설정이 적절합니다.
@repo/theme와@repo/ui패키지의 워크스페이스 의존성이 올바르게 구성되었습니다. 개발 및 프로덕션 환경 모두에서 적절한 버전 지정자를 사용하고 있습니다.Also applies to: 23-24
5-5: 모듈 시스템 변경 검토 필요ESM으로의 전환이 프로젝트 전반에 영향을 미칠 수 있습니다. 기존 CommonJS 모듈을 사용하는 의존성들과의 호환성을 확인해주세요.
✅ Verification successful
ESM 호환성 검증 완료
프로젝트 전반에 걸쳐 ESM이 일관되게 적용되어 있으며, CommonJS 관련 호환성 문제가 발견되지 않았습니다. 모든 워크스페이스 패키지가 ESM을 사용하도록 올바르게 구성되어 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for potential CommonJS dependencies that might conflict with ESM rg -l "require\(" --type js --type tsLength of output: 39
Script:
#!/bin/bash # Check for CommonJS specific patterns echo "=== Checking for .cjs files ===" fd -e cjs echo "=== Checking for module.exports patterns ===" rg "module\.exports" --type js --type ts echo "=== Examining package.json files ===" fd package.json -x cat {}Length of output: 5068
packages/ui/package.json (2)
19-20: 아이콘 생성 스크립트가 잘 구성되어 있습니다.아이콘 맵 생성을 위한 빌드 및 생성 스크립트가 명확하게 분리되어 있습니다.
33-36: 빌드 도구 버전 주의 필요esbuild의 버전이 다운그레이드되었습니다(^0.21.0). 이는 의도적인 변경인지 확인이 필요합니다. 또한 새로 추가된 플러그인들의 호환성도 검증해주세요.
apps/web/next.config.mjs
Outdated
There was a problem hiding this comment.
트랜스파일 추가해 뒀어요! 머지 할 때 TODO 주석도 지우고 머지 할게요!!
| type ColorType = | ||
| | `primary.${keyof Colors['primary']}` | ||
| | `semantic.${keyof Colors['semantic']}` | ||
| | `grey.${keyof Colors['grey']}`; | ||
|
|
There was a problem hiding this comment.
keyof typeof tokens.colors 요렇게 사용하고 싶은데 색상 값들이 객체로 한 번씩 더 묶여 있어서 추론이 안 되더라구요! 그래서 요렇게 적긴 했는데... 앞으로도 스타일링 시에 color의 key값을 받아올 일이 있을 것 같아요!(Text 컴포넌트의 color prop이라든지...) 혹시 모든 색상을 객체로 묶지 않고 한 뎁스(?)로 나열해서 export 해 주는 건 어떨까요?
export const colors = {
primary: {
green100: '#F1FFB5',
green200: '#E6FF79',
green300: '#D0F141',
green400: '#D2F634',
},
semantic: {
warning300: '#FF724E',
warning500: '#FF3300',
blue: '#1662E3',
},
grey: {
0: '#FFFFFF',
25: '#F7F9FB',
50: '#EAEFF4',
'50B': '#E5EEF7',
100: '#D8E3ED',
200: '#C2CDDE',
300: '#A3ADBD',
400: '#788391',
500: '#5A6471',
600: '#3F4750',
700: '#293342',
800: '#1D222C',
900: '#14181F',
950: '#0E0F15',
1000: '#000000',
},
} as const;
| const getColor = (color?: ColorType): string => { | ||
| if (!color) return 'transparent'; | ||
| const [category, key] = color.split('.') as [keyof Colors, string]; | ||
| return tokens.colors[category][key as keyof Colors[typeof category]]; | ||
| }; |
There was a problem hiding this comment.
요 함수도 color 토큰이 객체로 한 번씩 묶여 있어서 풀어 주는 함수인데, 만약 객체로 묶지 않고 나열하게 되면 아예 없어도 되는 로직이라 훨씬 코드가 깔끔해지지 않을까 싶긴 해요!
kongnayeon
force-pushed
the
feat/#35e4bb559
branch
from
65cb829 to
33b4d38
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ui/src/components/Icon/Icon.tsx (1)
36-37: 중복된 'transparent' 기본값 제거
getColor함수가 이미undefined나null에 대해'transparent'를 반환하므로,|| 'transparent'는 불필요합니다.다음과 같이 수정할 수 있습니다:
- const resolvedFill = getColor(fill) || 'transparent'; - const resolvedStroke = getColor(stroke) || 'transparent'; + const resolvedFill = getColor(fill); + const resolvedStroke = getColor(stroke);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (23)
packages/ui/src/assets/icons/IconArrowBottom.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowLeft.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowRight.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowTop.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconChat.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheck.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheckCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconDocument.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconLineThree.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconNotice.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPencil.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlus.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlusPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSend.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconShopping.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSmile.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStack.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconX.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconXCircle.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
apps/web/next.config.mjs(1 hunks)apps/web/package.json(2 hunks)apps/web/src/app/layout.tsx(1 hunks)apps/web/src/app/page.tsx(1 hunks)package.json(1 hunks)packages/theme/package.json(1 hunks)packages/ui/esbuild.config.mjs(1 hunks)packages/ui/global.d.ts(1 hunks)packages/ui/package.json(3 hunks)packages/ui/src/components/Icon/Icon.css.ts(1 hunks)packages/ui/src/components/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.ts(1 hunks)packages/ui/tsconfig.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/ui/src/components/index.ts
- packages/ui/src/components/Icon/assets.ts
- apps/web/src/app/layout.tsx
- apps/web/next.config.mjs
- apps/web/src/app/page.tsx
- package.json
- packages/ui/src/components/Icon/Icon.css.ts
- packages/ui/src/scripts/generate-icon-map.ts
- packages/ui/tsconfig.json
- apps/web/package.json
- packages/theme/package.json
- packages/ui/esbuild.config.mjs
🔇 Additional comments (6)
packages/ui/package.json (4)
5-7: 모듈 구성이 적절히 설정되었습니다!ESM과 CommonJS를 모두 지원하도록 구성되어 있어 다양한 환경에서 패키지를 사용할 수 있습니다.
29-36: 의존성 버전 변경사항 검토가 필요합니다.esbuild가 다운그레이드(^0.21.0)되었습니다. 다음 사항들을 확인해주세요:
- 다운그레이드된 이유가 명확한지
- 현재 버전과의 호환성 문제는 없는지
특히
esbuild-plugin-svgr와의 호환성을 확인해주세요.
39-40: Peer Dependencies가 적절히 구성되었습니다!React 18 버전대를 사용하는 프로젝트에서 정상적으로 동작할 수 있도록 peer dependencies가 올바르게 설정되었습니다.
19-20: 아이콘 생성 스크립트 검증이 필요합니다.아이콘 맵 생성 스크립트가 추가되었습니다. 다음 사항들을 확인해주세요:
- 생성된 아이콘 맵의 출력 형식이 예상과 일치하는지
- 스크립트 실행 후 아이콘들이 올바르게 임포트되는지
packages/ui/src/components/Icon/Icon.tsx (1)
30-34:⚠️ Potential issue색상 값에 대한 안전한 분해 및 검증 필요
getColor함수에서color.split('.')를 사용할 때,color가 기대하지 않는 형식이거나'.'문자를 포함하지 않을 경우 에러가 발생할 수 있습니다. 이를 방지하기 위해color값에 대한 검증을 추가하는 것이 좋습니다.다음과 같이 수정할 수 있습니다:
const getColor = (color?: ColorType): string => { if (!color) return 'transparent'; + if (!color.includes('.')) { + console.warn(`Invalid color format: ${color}`); + return 'transparent'; + } const [category, key] = color.split('.') as [keyof Colors, string]; + if (!tokens.colors[category] || !tokens.colors[category][key]) { + console.warn(`Invalid color value: ${color}`); + return 'transparent'; + } return tokens.colors[category][key as keyof Colors[typeof category]]; };Likely invalid or redundant comment.
packages/ui/global.d.ts (1)
1-4: SVG 모듈 선언 추가 확인SVG 파일을 React 컴포넌트로 처리하기 위한 모듈 선언이 올바르게 추가되었습니다. 이는 TypeScript에서 SVG 파일을 import할 때 타입 오류를 방지하는 데 도움이 됩니다.
There was a problem hiding this comment.
그리고 파일 이름 Icon.tsx로 Icon.css.ts와 맞추는 게 좋을까요 아니면 index.tsx, icon.css.ts 이렇게 가는 게 좋을까요? 🧐
There was a problem hiding this comment.
Icon.tsx로 Icon.css.ts로 해요! index.ts, index.tsx는 베럴 파일 용도로 활용하는 게 어떨까요?
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/theme/src/tokens/colors.ts (3)
7-9: 색상 네이밍 컨벤션과 스케일의 일관성 개선이 필요합니다.
blue색상은 다른 색상들과 달리 명도를 나타내는 숫자가 없습니다.- warning 색상은 300과 500만 있어 중간 단계가 누락되어 있습니다.
다음과 같은 개선을 제안드립니다:
warning300: '#FF724E', + warning400: '#FF5327', // 중간 단계 추가 warning500: '#FF3300', - blue: '#1662E3', + blue500: '#1662E3', // 네이밍 컨벤션 통일
11-25: grey50B의 네이밍을 재고해주세요.grey50B는 기존의 명명 규칙을 따르지 않고 있습니다. 숫자만으로 구성된 다른 grey 색상들과의 일관성을 위해 새로운 이름을 고려해보세요.
예를 들어:
grey25: '#F7F9FB', grey50: '#EAEFF4', - grey50B: '#E5EEF7', + grey75: '#E5EEF7',
1-25: 타입 안정성 강화를 위한 제안현재
as const타입 단언을 사용하고 있어 좋습니다. 하지만 더 나은 타입 안정성과 문서화를 위해 명시적인 타입 정의를 추가하는 것을 고려해보세요.다음과 같은 개선을 제안드립니다:
+ type Colors = { + [K in keyof typeof colors]: string; + }; - export const colors = { + export const colors: Colors = {
kongnayeon
force-pushed
the
feat/#35e4bb559
branch
from
286dd73 to
df39275
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/ui/src/components/Icon/Icon.tsx (1)
29-36: 🛠️ Refactor suggestion불필요한 JSON 변환 제거가 필요합니다.
JSON.parse(JSON.stringify())는 불필요한 성능 오버헤드를 발생시킵니다.assignInlineVars를 직접 사용하는 것이 더 효율적입니다.- style={JSON.parse( - JSON.stringify( - assignInlineVars({ - [styles.strokeColor]: resolvedStroke, - [styles.fillColor]: resolvedFill, - }) - ) - )} + style={assignInlineVars({ + [styles.strokeColor]: resolvedStroke, + [styles.fillColor]: resolvedFill, + })}
🧹 Nitpick comments (3)
packages/theme/src/themes/dark.ts (1)
28-37: 색상 전환 토큰의 일관성이 향상되었습니다.새로운 토큰 구조에 맞춰 일관되게 적용되었습니다. 하지만 한 가지 제안사항이 있습니다:
// 색상 전환 토큰들을 별도의 네임스페이스로 그룹화하는 것을 고려해보세요 colors: { transitions: { grey0to950: tokens.colors.grey950, grey0to800: tokens.colors.grey800, // ...나머지 전환 관련 토큰들 } }이렇게 구조화하면 일반 색상과 전환용 색상을 더 명확하게 구분할 수 있습니다.
packages/theme/src/themes/light.ts (2)
6-8: 기본 색상 토큰의 명명 규칙 개선 필요
primary400to200와 같은 이름은 색상의 변화를 나타내는 것으로 보이나, 명확한 의도를 파악하기 어렵습니다. 색상의 용도나 상태를 더 명확하게 표현하는 이름을 사용하는 것이 좋겠습니다.다음과 같이 변경하는 것을 고려해보세요:
primary: tokens.colors.green200, - primary400to200: tokens.colors.green400, + primaryActive: tokens.colors.green400, primaryHover: tokens.colors.green300,
12-26: 회색 계열 색상 토큰의 체계적인 정리 필요회색 계열 색상이 0부터 1000까지 다양하게 정의되어 있습니다. 디자인 시스템의 일관성을 위해 다음 사항들을 검토해주세요:
- 회색 계열 색상의 단계가 너무 세분화되어 있지 않은지
grey50B와 같은 특수한 색상의 용도가 명확한지
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (23)
packages/ui/src/assets/icons/IconArrowBottom.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowLeft.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowRight.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconArrowTop.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconChat.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheck.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconCheckCalendar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconDocument.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconLineThree.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconNotice.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPencil.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlus.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconPlusPicture.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSend.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconShopping.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconSmile.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStack.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconStar.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconX.svgis excluded by!**/*.svgpackages/ui/src/assets/icons/IconXCircle.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (17)
apps/web/next.config.mjs(1 hunks)apps/web/package.json(2 hunks)apps/web/src/app/layout.tsx(1 hunks)apps/web/src/app/page.tsx(1 hunks)packages/theme/package.json(1 hunks)packages/theme/src/themes/dark.ts(1 hunks)packages/theme/src/themes/light.ts(1 hunks)packages/theme/src/tokens/colors.ts(1 hunks)packages/ui/esbuild.config.mjs(1 hunks)packages/ui/global.d.ts(1 hunks)packages/ui/package.json(3 hunks)packages/ui/src/components/Icon/Icon.css.ts(1 hunks)packages/ui/src/components/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.ts(1 hunks)packages/ui/tsconfig.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- apps/web/next.config.mjs
- packages/ui/src/components/Icon/assets.ts
- packages/ui/src/components/index.ts
- apps/web/src/app/layout.tsx
- packages/ui/global.d.ts
- packages/ui/esbuild.config.mjs
- packages/theme/src/tokens/colors.ts
- apps/web/src/app/page.tsx
- packages/ui/tsconfig.json
- packages/ui/src/components/Icon/Icon.css.ts
- packages/ui/src/scripts/generate-icon-map.ts
- apps/web/package.json
🔇 Additional comments (12)
packages/theme/src/themes/dark.ts (2)
6-10: 색상 토큰 참조 방식이 개선되었습니다! 👍토큰 구조가 단순화되어 더 직관적이고 유지보수하기 쉬워졌습니다.
12-26: 그레이스케일 색상 참조 방식이 개선되었습니다.배열 인덱싱 방식에서 직접 프로퍼티 접근 방식으로 변경되어 다음과 같은 장점이 있습니다:
- 코드의 가독성 향상
- 타입 안정성 강화
- 실수 가능성 감소
packages/ui/src/components/Icon/Icon.tsx (3)
1-8: 타입 정의가 깔끔합니다! 👍
keyof typeof를 활용한 타입 추론이 잘 되어있고, 필요한 모듈들이 잘 임포트되어 있습니다.
9-13: 색상 토큰 타입 구조 개선이 필요해 보입니다.현재 구조에서는
keyof typeof tokens.colors가 중첩된 객체 구조로 인해 타입 추론이 제한적입니다. 이전 논의된 대로 색상 토큰을 단일 레벨로 평탄화하는 것을 고려해보세요.
23-24: 색상 처리 로직 최적화가 필요합니다.색상 값 조회 시 매번 객체를 탐색하는 대신, 메모이제이션을 활용하여 성능을 개선할 수 있습니다.
packages/theme/src/themes/light.ts (1)
10-10: 경고 색상에 대한 문서화 필요경고 색상이 단일 값으로 정의되어 있습니다. 다른 상태(hover, active 등)에 대한 색상이 필요하지 않은지 확인이 필요합니다.
packages/theme/package.json (3)
5-7: 모듈 진입점 구성이 적절합니다.
"type": "module"과 함께main,module필드를 추가한 것은 ESM과 CJS 환경 모두를 지원하는 좋은 접근 방식입니다.
Line range hint
25-25: React 의존성 위치 조정 필요React를 직접적인 의존성으로 추가하는 것보다 peerDependencies로 이동하는 것이 더 적절할 수 있습니다. 이는 호스트 애플리케이션과의 버전 충돌을 방지합니다.
"dependencies": { "@vanilla-extract/css": "^1.17.0", "@vanilla-extract/next-plugin": "^2.4.8", "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3", - "react": "^18" }, +"peerDependencies": { + "react": "^18" +},
Line range hint
29-31: esbuild 버전 다운그레이드에 대한 검토 필요esbuild를
^0.24.0에서^0.21.0으로 다운그레이드한 이유가 명확하지 않습니다. 호환성 문제가 있는지 확인이 필요합니다.다음 스크립트를 실행하여 esbuild 관련 이슈를 확인해보세요:
✅ Verification successful
esbuild 버전 다운그레이드는 안전해 보입니다
의존성 분석 결과, esbuild v0.21.0으로의 다운그레이드는 프로젝트 전반에 걸쳐 일관되게 적용되어 있으며, @vanilla-extract/esbuild-plugin을 포함한 모든 관련 패키지들과 호환성 문제없이 잘 작동하고 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for esbuild compatibility issues and breaking changes # Check package-lock.json or yarn.lock for esbuild version conflicts rg "esbuild@" -A 5 # Check for esbuild related build errors in recent commits git log --grep="esbuild" -pLength of output: 5881
Script:
#!/bin/bash # Check for any compatibility requirements or issues between vanilla-extract and esbuild rg -A 5 "vanilla.*esbuild" packages/theme/package.json rg -A 5 "vanilla.*esbuild" README.mdLength of output: 228
packages/ui/package.json (3)
5-7: 모듈 타입과 진입점 설정이 적절합니다.
"type": "module"과 진입점 설정이 ECMAScript 모듈 시스템에 맞게 잘 구성되어 있습니다.
39-40: peer 의존성 설정이 적절합니다.React와 ReactDOM의 peer 의존성이 올바르게 설정되어 있습니다.
19-20: 아이콘 빌드 스크립트의 실행 순서를 검증해주세요.아이콘 맵 생성을 위한 스크립트가 추가되었습니다. 다만, 메인
build스크립트와의 실행 순서 관계가 명확하지 않습니다.빌드 프로세스에서 아이콘 생성이 올바른 시점에 실행되는지 확인이 필요합니다.
build스크립트에 아이콘 생성 단계를 포함하는 것을 고려해보세요."scripts": { - "build": "tsc && node esbuild.config.mjs", + "build": "pnpm run generate:icons && tsc && node esbuild.config.mjs", "dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch", "lint": "eslint . --max-warnings 0", "build:icons": "esbuild src/scripts/generate-icon-map.ts --bundle --platform=node --outdir=dist/scripts", "generate:icons": "pnpm run build:icons && node dist/scripts/generate-icon-map.js" }
| grey0to950: tokens.colors.grey0, | ||
| grey0to800: tokens.colors.grey0, | ||
| grey0to700: tokens.colors.grey0, | ||
| grey25to900: tokens.colors.grey25, | ||
| grey25to800: tokens.colors.grey25, | ||
| grey50Bto800: tokens.colors.grey50B, | ||
| grey100to700: tokens.colors.grey100, | ||
| grey100to700Hover: tokens.colors.grey200, | ||
| grey950toPrimary: tokens.colors.grey950, | ||
| grey1000to1000: tokens.colors.grey1000, |
There was a problem hiding this comment.
색상 전환 토큰의 네이밍 컨벤션 및 구조 개선 필요
현재 색상 전환을 나타내는 토큰들의 네이밍이 직관적이지 않고, 실제 구현된 값은 단일 색상을 참조하고 있습니다.
다음 사항들을 개선해주세요:
- 전환 효과가 필요한 경우 CSS 변수나 gradient 함수를 사용하는 것이 더 적절할 수 있습니다
- 단일 색상을 참조하는 경우, 해당 색상의 용도나 컨텍스트를 명확히 표현하는 이름을 사용해주세요
예시:
- grey0to950: tokens.colors.grey0,
+ backgroundDefault: tokens.colors.grey0,Committable suggestion skipped: line range outside the PR's diff.
| "@repo/theme": "workspace:*", | ||
| "@types/node": "^20.11.24", | ||
| "@types/react": "^18.2.0", | ||
| "@vanilla-extract/esbuild-plugin": "^2.3.5", | ||
| "esbuild": "^0.21.0", | ||
| "esbuild-plugin-preserve-directives": "^0.0.11" | ||
| "esbuild-plugin-preserve-directives": "^0.0.11", | ||
| "esbuild-plugin-svgr": "^3.1.0", | ||
| "ts-node": "^10.9.2" |
There was a problem hiding this comment.
💡 Codebase verification
@repo/theme 의존성 중복 및 esbuild 호환성 이슈
@repo/theme가dependencies와devDependencies모두에 정의되어 있습니다.devDependencies에서 제거하고dependencies의"workspace:^"버전만 유지하는 것이 좋습니다.esbuildv0.21.0으로의 다운그레이드가 확인되었습니다. 현재 사용 중인 플러그인들(@vanilla-extract/esbuild-plugin,esbuild-plugin-preserve-directives,esbuild-plugin-svgr)과의 호환성을 확인해주세요.
🔗 Analysis chain
의존성 버전 충돌 가능성을 확인해주세요.
@repo/theme가 dependencies와 devDependencies 모두에 정의되어 있으며, 버전 지정 방식이 다릅니다:
- dependencies:
"workspace:^" - devDependencies:
"workspace:*"
또한, esbuild의 버전이 다운그레이드(^0.24.0 → ^0.21.0)되었습니다.
다음 스크립트로 의존성 충돌 여부를 확인해보세요:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for dependency conflicts and compatibility issues
# Check for duplicate dependencies
jq -r '.dependencies + .devDependencies | keys[]' package.json | sort | uniq -d
# Check esbuild compatibility with plugins
jq -r '.devDependencies | with_entries(select(.key | startswith("esbuild")))' package.json
Length of output: 177
Script:
#!/bin/bash
# Find the ui package.json and show its contents
fd --type f "package.json" packages/ui/ --exec cat {}
Length of output: 1298
* [Feat] 프로젝트 스캐폴딩 (#2) * docs: 이슈, PR 템플릿 추가 * docs: codeoners 추가 * feat: web 앱 Next.js, React 버전 다운그레이드 * feat: eslint, tsconfig 종속성, prettier 추가 * feat: husky, lint-staged 설치 * feat: husky, lint-staged 테스트 * chore: husky, lint-staged 테스트 * chore: husky, lint-staged 테스트 2 * fix: eslint config 수정 * chore: husky, lint-staged 테스트 3 * chore: husky, lint-staged 테스트 4 * chore: husky, lint-staged 테스트 5 * feat: .nvmrc 추가 * feat: vanilla extract 설치, config 수정 * chore: web 앱 type: module 설정 제거 * chore: vanilla extract 설치, next.config.js 수정 * [Chore]: 리뷰어 선정 시 슬랙 알림 workflow 적용 (#33) * [Chore]: ui 패키지 초기 셋팅 (#34) * feat(packages/theme): theme 패키지를 생성해요. (#36) * [Chore]: build ci 추가 (#38) * feat: pnpm workspace 추가 (#42) * [Fix]: theme, ui 패키지의 vanilla-extract 빌드 설정 수정 (#45) * fix(apps/web, packages/theme, packages/ui): theme, ui 패키지의 vanilla-extract 빌드 설정, css 관련 수정 * chore(packages/theme, packages/ui): build 스크립트 수정 * chore(packages/theme, packages/ui): exports 수정 * chore(packages/theme, packages/ui): exports 수정 * wip * chore(packages/theme, packages/ui): 불필요 dependency 제거 * chore(packages/theme, packages/ui): 불필요 필드 제거 * fix: 공통 패키지 루트로 끌어올리기, 패키지 버전 의존성 적용 * fix: 테스트 컴포넌트 제거 * fix: 테스트 컴포넌트 제거 * chore(apps/web): 주석처리 * chore: 빌드 테스트 * chore: 테스트용 컴포넌트 제거 --------- Co-authored-by: kangnayeon <[email protected]> * [Feat]: theme 적용을 위한 Provider 추가 (#47) * [Feat] Spacing 컴포넌트 추가 (#49) * [Feat] Icon 컴포넌트 추가 (#48) * feat(packages/ui): Icon 컴포넌트 추가 * fix(packages/ui): 아이콘 속성 camelCase로 수정 * feat(packages/ui): svg 파일 import 스크립트, svgr 플러그인 설정 추가 * feat(packages/ui): Icon 컴포넌트 * fix(packages/theme): color 뎁스 낮추기 * [Feat] Spacing 컴포넌트 추가 (#49) * fix: resolve conflicts * fix(packages/theme): 컬러 토큰 변경에 따른 dark, theme 토큰 변경 * fix: resolve conflicts * chore: 주석 제거 --------- Co-authored-by: minseong <[email protected]> * [Fix] Icon 컴포넌트 수정 (#51) * fix(packages/ui): Icon 컴포넌트 수정 * chore(packages/ui): 색상 스타일 로직 개선 * fix(packages/ui): IconProps의 color 타입을 string으로 수정해요 * [Fix] 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 (#53) * fix(packages/ui): Icon 컴포넌트 수정 * chore(packages/ui): 색상 스타일 로직 개선 * fix(packages/ui): IconProps의 color 타입을 string으로 수정해요 * fix(packages/ui, apps/web): 컬러 시스템 내의 색상만 사용할 수 있도록 Icon 컴포넌트 수정 * [Fix] Spacing 컴포넌트 수정 (#54) * fix(packages/ui): Spacing 컴포넌트 수정 * chore: name import 하도록 수정 * chore: 배럴 파일 수정 * chore: empty file 삭제 * chore(packages/theme): 색상 추가 (#56) * [Feat] Text 컴포넌트 추가 (#57) * feat(packages/ui): Text 컴포넌트 * feat(packages/ui): 컴파운드 객체 추가 * chore(packages/ui): TypographyType theme에서 가져오도록 수정 * fix(packages/ui): TextCompoundType 선언 시 중복되는 구문 수정 * fix(packages/ui): Compound Text 컴포넌트 선언 시 중복되는 로직 수정 * feat(packages/ui): Text 컴포넌트 사용 시 대문자 사용하도록 수정 * [Feat] Toast 컴포넌트 추가 (#52) * chore(packages/ui): ovarlay-kit 의존성 추가 * feat(packages/ui): Toast 컴포넌트 구현 * test(apps/web): Toast 컴포넌트 사용 예시 추가 * fix(packages/ui): 접근성 개선 * chore(packages/ui): lock 파일 업데이트 * chore(packages/themes): violet 색상 추가 * chore(packages/ui): success일 경우의 색상 변경 * fix(apps/web): Providers 컴포넌트 분리, OverlayProvider 이동 * [Feat] Badge 컴포넌트 구현 (#58) * feat(packages/ui, apps/web): Badge 컴포넌트 구현 * fix(packages/ui, apps/web): Badge 컴포넌트 수정 * chore(packages/ui): named import 변경 * [Feat] Checkbox 컴포넌트 추가 (#60) * feat(packages/ui): 누름 상태 관리를 위한 usePress 추가 * chore(packages/ui): 체크박스 아이콘 추가 * feat(packages/ui): 체크박스 컴포넌트 추가 * chore(apps/web): 사용 예시 추가 * fix(packages/ui): 키보드 접근성 수정 * [Feat] Label 컴포넌트 구현 (#61) * feat(packages/ui): Label 컴포넌트 구현 * chore(packages/ui): Label 컴포넌트 예시 * [Feat] Button 컴포넌트 추가 (#59) * feat(packages/ui): Button 컴포넌트 * fix(packages/ui): Icon color 속성 없을 시 currentColor 적용되도록 수정 * chore(packages/ui): Button 컴포넌트 export * fix(packages/ui): Button 컴포넌트 스타일 * fix(packages/ui): Icon default size 100%로 변경 * fix(packages/ui): Button 컴포넌트의 leftIcon, rightIcon prop을 leftAddon, rightAddon으로 수정 * feat(packages/ui): twincle icon 추가 * fix(packages/ui): 기존 태그의 prop을 상속 받는 경우 ComponentPropsWithoutRef 사용하도록 수정 * [Feat] Breadcrumb 컴포넌트 추가 (#62) * chore(packages/ui): @radix-ui/react-slot 설치 * feat(packages/ui): Breadcrumb 컴포넌트 구현 * test(apps/web): 사용 예시 추가 * [Feat] px -> rem 변환 (#64) * fix: px 단위 rem으로 변환 * fix: body font-size 1.6rem으로 지정 * [Chore] Checkbox 컴포넌트의 label fontSize 변환 (#66) * chore(packages/ui): Checkbox 컴포넌트의 label fontSize 변환 * chore(packages/ui): className 빈 값 string 기본값 지정 * [Feat] LottieAnimation 컴포넌트 추가 (#63) * feat(packages/ui): 로티 파일, 생성 스크립트 추가 * feat(packages/ui): LottieAnimation 컴포넌트 추가 * fix(packages/ui): LottieAnimation 따로 export 하도록 수정, 에셋 상대경로로 수정 * fix(packages/ui): 스크립트 오타 수정 * feat(packages/ui): 코드리뷰 반영 * fix: 빌드 에러 수정 * [Feat] TextField 컴포넌트 구현 (#65) * chore(apps/web): react-hook-form 설치 * feat(packages/ui): isNill 함수 추가 * chore(packages/ui): isNill export * feat(packages/ui): TextField 컴포넌트 구현 * test(apps/web): 예시 추가 * fix(packages/ui): 디자인 요구사항 수정 * [Feat] 아이콘, 색상 변경 사항 반영 (#72) * feat(packages/theme): 아이콘 변경 사항 반영 * fix(packages/ui): 누락된 아이콘 추가 * [Feat] IconButton 컴포넌트 (#68) * [Feat] Spinner 컴포넌트 추가 (#69) * feat(packages/ui): Spinner 컴포넌트 * feat(packages/ui): Spinner span 태그로 감싸기 * fix(packages/ui): SpinnerColorType 추가 * [�Fix]: ThemeProvider 패키지 이동, 불필요 배럴 파일 정리 (#74) * wip * chore(apps/web): 파일 구조 변경 * chore(packages/theme, apps/web): 배럴파일 정리 및 provider 별도 export * chore(packages/theme): provider 별도 export * fix(packages/theme, packages/ui): ThemeProvider 이동 * remove(apps/web): 퍼블리싱 삭제 (별도 PR 예정) * [Feat] RadioCards 컴포넌트 추가 (#73) * feat(packages/ui): RadioCards 관리를 위한 context 추가 * feat(packages/ui): RadioCards 컴포넌트 구현 및 JSDoc 추가 * feat(packages/ui): RadioCards 사용 예시 추가 * fix(packages/ui): RadioCards 구조 변경 * test(packages/ui): RadioCards 예시 변경 * docs(packages/ui): JSDoc 업데이트 * fix(packages/ui): 키보드 접근성 개선 * [Feat] Modal 컴포넌트 추가 (#83) * feat(packages/ui): PortalConsumer 컴포넌트 * feat(packages/ui): PortalConsumer 컴포넌트 * feat(packages/ui): Modal로의 포커스를 위한 FocusTrap 구현 * feat(packages/ui): Modal 컴포넌트 구현 및 JSDoc 작성 * test(apps/web): Modal 컴포넌트 사용 예시 추가 * fix(packages/ui): overlay-kit에서 이미 제공하고 있으므로 PortalConsumer 제거 * [Feat] 스켈레톤 컴포넌트 (#84) * feat(packages/ui): 스켈레톤 컴포넌트 * feat: displayName 속성 추가 * feat: 리뷰 반영 * [Fix] ui 패키지 컴포넌트 사용 시 모든 컴포넌트가 암묵적으로 import 되는 현상 (#79) * fix(packages/ui): 아이콘 생성 스크립트 확장자 변경 * feat(packages/ui) 컴포넌트 별 배럴 파일 생성 * fix: 공통 로직 임포트 경로 수정 * fix(packages/ui): esm 방식만 지원하도록 수정 * chore: 사용되지 않는 컴포넌트 제거 * chore: 사용되지 않는 아이콘 제거 * fix(packages/ui): 사용되지 않는 플러그인 제거 * fix: 빌드 에러 * fix: 빌드 에러 * fix: 빌드 에러 수정 * feat: svgr 라이브러리 제거, 아이콘 컴포넌트 생성 스크립트 추가 * fix: build error * fix: icon 매핑 스크립트 수정 * feat(packages/ui): 컴포넌트 전체 export 추가 * [Feat] Chip 컴포넌트 추가 (#70) * feat(packages/ui): chip 컴포넌트 * [Feat] TextField 컴포넌트 구현 (#65) * chore(apps/web): react-hook-form 설치 * feat(packages/ui): isNill 함수 추가 * chore(packages/ui): isNill export * feat(packages/ui): TextField 컴포넌트 구현 * test(apps/web): 예시 추가 * fix(packages/ui): 디자인 요구사항 수정 * [Feat] 아이콘, 색상 변경 사항 반영 (#72) * feat(packages/theme): 아이콘 변경 사항 반영 * fix(packages/ui): 누락된 아이콘 추가 * feat(packages/ui): chip 컴포넌트 * feat(packages/ui): Chip에 사용되는 아이콘 추가 * fix(packages/ui): Text 컴포넌트 color prop 없을 때 inherit으로 지정, 기본 line height 값 지정 * fix(packages/ui): Icon 컴포넌트 color 상속 시 path 태그 외의 다른 태그들도 상속 받을 수 있도록 수정 * fix(packages/ui): Chip 컴포넌트 스타일 수정 * feat: x 아이콘 color 수정 * feat: onClose 추가 * fix: x 아이콘 호버링 시 cursor pointer로 지정 * feat: 리뷰 반영 * fix(packages/ui): closable 버튼 보이지 않는 문제 * fix: 리뷰 반영 --------- Co-authored-by: MINSEONG KIM <[email protected]> * [Refactor] Spinner 컴포넌트 css 방식으로 변경 (#92) * fix:(packages/ui): Spinner 컴포넌트 css 방식으로 구현 * fix(packages/ui): Button 컴포넌트 스타일 수정, isLoading 상태 스피너 추가 * [Feat] useToast 추가, DynamicLottie 컴포넌트 추가 (#89) * [Feat]: useModal 추가 (#91) * chore(packages/ui): overlay-kit 설치 * feat(packages/ui): useModal 추가 * test(apps/web): useModal 사용 예시 추가 * fix(packages/ui): 옵셔널로 치환 * fix(packages/ui): 자잘한 수정 * fix(packages/ui): 자잘한 수정 * docs(packages/ui): JSDoc 추가 * test(apps/web): 사용 예시 추가 * chore(packages/ui): 코드 간소화 * fix(packages/ui): 프로미스를 반환할 수 있도록 수정 * fix(packages/ui): isNil수정, isNotNill 추가, export 수정 * fix(package/ui): nullish 체크 * fix(packages/ui): 모달 doubleCTA의 각각 버튼 공간이 절반 차지하도록 수정 * test(packages/ui): 예시 수정 * chore: lock 파일 업데이트 * [Feat] ImageManager TypeA 컴포넌트 추가 (#94) * chore(apps/web): Provider -> provider로 변경 (네이밍 컨벤션 통일) * feat(apps/web): ImageManager TypeA 컴포넌트 구현 * chore(apps/web): 대소문자 git 이슈 해결 * chore(apps/web): baseUrl 설정 * fix(apps/web): 자잘한 수정, 접근성 개선 * chore(apps/web): 키 상수화 * fix(apps/web): 유효성 검사 수정 * chore(apps/web): 경로 수정 * [Feat] 주제 설정 페이지 퍼블리싱 및 폼 연동 (#95) * chore(apps/web): motion 추가 * chore(packages/ui): styles export 변경 * feat(packages/theme): 색상 추가 * feat(packages/theme): spacing 추가 * feat(apps/web): KeywordChip 컴포넌트 추가 * feat(apps/web): ImageManager 컴포넌트 추가 * feat(apps/web): 주제 설정 페이지 퍼블리싱 * refactor(apps/web): 컴포넌트 분리 및 자잘한 수정 * fix(apps/web): react-hook-form watch를 통한 조건부 렌더링 * feat(apps/web): react-hook-form을 통한 폼 관리 * fix(apps/web): ImageManager 컴포넌트 packages/ui로 이동 예정 * fix(apps/web): ImageManager TypeA css 수정 * fix(apps/web): GradientAnimatedTitle로 수정 * fix(apps/web): GradientAnimatedTitle로 수정 * feat(apps/web): isEmptyStringOrNil 유틸 추가 * fix(apps/web): ImageManager TypeA 제어형으로 사용 가능하도록 변경 * refactor(apps/web): 컴포넌트 분리 * chore(apps/web): px->rem 변경 * fix(app/web): defaultValues 수정 * fix(apps/web): css 수정 * fix(apps/web): placeholder 수정 * [Feat] ky, tanstack-query 설정, presigned-url 모듈, 뉴스 카테고리 api 연동 (#97) * fix(packages/ui): onClick 누락 수정 * fix(packages/ui): onClick 누락 수정 * feat(apps/web): 필수 항목 입력 후 홈 BreadCrumb 클릭 시 모달 * feat(apps/web): tanstack-query 셋팅 * fix(apps/web): tanstack-query 셋팅 수정 * feat(apps/web): ky 셋팅 * fix(apps/web): KeywordChipGroup 컴포넌트 수정 * feat(apps/web): 뉴스 카테고리 api 연듕 * feat(apps/web): put, patch, delete 추가 * feat(apps/web): put, patch, delete 추가 * fix(apps/web): nullish 검증 * chore(.github/workflows): env 추가 * fix(apps/web): staleTime, gcTime 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 토큰 string으로 관리 * chore(apps/web): shared로 폴더명 변경 * feat(apps/web): presigned-url 모듈 구현 및 연동 * [Feat] 주제 설정 페이지 api 연동, 디자인 추가 반영 (#100) * fix(apps/web): MainBreadcrumbItem 이미지 수정 * fix(apps/web): suspense 래핑 * remove(apps/web): 불필요 코드 제거 * feat(apps/web): 스크롤 감지 훅 추가 * feat(apps/web): 반투명 NavBar 추가 * fix(apps/web): 스타일링 수정 * fix(apps/web): 스타일링 수정 * fix(apps/web): ImageManager TypeA가 File이 아닌 이미지의 url로 받도록 수정 * feat(apps/web): 공통 타입 분리 * feat(apps/web): 게시물 그룹 및 게시물 생성 API 연동 * feat(apps/web): ImageManager TypeA 최적화 및 UI만 그리도록 관심사 분리 * fix: Images 폴더명을 images로 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 자잘한 수정 * fix(apps/web): 타입 개선 * fix(apps/web): ImageManager 단일로 관리 * [Feat] Accordion 컴포넌트 (#99) * fix(packages/ui): Chip 컴포넌트 개별 export * feat(packages/ui): Accordion 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * chore(packages/ui): displayName 추가 * fix: 코드리뷰 반영 * fix: resolve conflicts * [Fix] 컴포넌트 스타일 수정 (#102) * fix: 폴더명 Images를 images로 변경 * fix(apps/web): 간단한 레이아웃 수정 * fix(apps/web): NavBar 레이아웃 수정 * fix(packages/ui, apps/web): TextField 레이아웃 깨짐 수정 * fix(packages/ui): Checkbox width 수정 * docs(packages/ui): TextField JSDoc 수정 * [Feat] 결과 수정 - 상세 페이지 퍼블리싱 (#86) * feat(apps/web): ContentItem 컴포넌트 * feat(apps/web): getMinutesAgo 유틸 함수 추가 * feat(apps/web): ContentItem 컴포넌트 * fix(packages/ui): Chip 컴포넌트 개별 export * feat(packages/ui): Accordion 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * feat(apps/web): EditSidebar 추가 * feat(packages/ui): 아이콘 에셋 추가 * fix(apps/web): getMinutesAgo 함수 getTimesAgo 함수로 수정 * fix(packages/ui): IconButton 컴포넌트 props에서 type도 받도록 수정 * fix(apps/web): ContentItem 컴포넌트 디자인 수정 반영 * feat(apps/web): PostEditor 추가 * feat(apps/web): EditPromptField 추가 * feat(apps/web) EditPost 영역 추가 * feat(apps/web): ContentItem 컴포넌트 * chore: Accordion 컴포넌트 예시 추가 * fix: resolve conflicts * fix: resolve conflicts * fix: 빌드 에러 * fix: 빌드 에러 * fix(apps/web): TextField 수정 반영 * fix(packages/ui): Accordion 컴포넌트 스타일 수정 * [Feat] vercel 자동 배포 빌드 스크립트 (#105) --------- Co-authored-by: MINSEONG KIM <[email protected]> Co-authored-by: minseong <[email protected]>
관련 이슈
#39
변경 사항
Icon 컴포넌트 작성했습니다!
레퍼런스
Summary by CodeRabbit
새로운 기능
개선 사항
의존성 업데이트