[Fix] ui 패키지 컴포넌트 사용 시 모든 컴포넌트가 암묵적으로 import 되는 현상 #79
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/src/app/page.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs Walkthrough이 풀 리퀘스트는 UI 컴포넌트 라이브러리의 구조와 종속성을 재구성하는 광범위한 변경 사항을 포함하고 있습니다. 주요 변경 사항은 패키지 구성, 컴포넌트 내보내기 방식, 가져오기 경로 업데이트 등을 포함하며, 전반적인 프로젝트 모듈성과 가독성을 개선하는 데 중점을 두고 있습니다. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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? 🪧 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: 1
🧹 Nitpick comments (3)
packages/ui/src/scripts/generate-icon-map.mts (1)
65-67: 경로 처리 방식을 개선해주세요.상대 경로로 변경한 것은 좋은 접근이지만, 몇 가지 개선사항을 제안드립니다:
- 크로스 플랫폼 호환성을 위해
path.join사용- 파일 시스템 작업에 대한 에러 처리 추가
다음과 같이 수정을 제안드립니다:
- importStatements.push( - `import ${importName} from '../../assets/icons/${file}';` - ); + const relativePath = path.join('..', '..', 'assets', 'icons', file); + importStatements.push( + `import ${importName} from '${relativePath}';` + );apps/web/package.json (1)
16-16: 의존성 버전 제약 조건을 검토해주세요.현재
^를 사용한 느슨한 버전 제약이 설정되어 있습니다. 프로젝트의 안정성을 위해 더 엄격한 버전 제약을 고려해보세요.다음과 같이 수정을 제안드립니다:
- "@vanilla-extract/css": "^1.17.0", + "@vanilla-extract/css": "~1.17.0", - "@svgr/webpack": "^8.1.0", + "@svgr/webpack": "~8.1.0",Also applies to: 28-28
packages/ui/package.json (1)
9-71: 컴포넌트별 개별 내보내기 구조로 개선되었습니다! 👍각 컴포넌트를 개별적으로 내보내도록 변경하여 트리 쉐이킹이 가능해졌습니다. 이는 번들 크기를 최적화하고 'use client' 지시문 문제를 해결하는데 도움이 될 것입니다.
다만, 향후 새로운 컴포넌트가 추가될 때마다 수동으로 exports 필드를 업데이트해야 하는 점이 있습니다. 이를 자동화하는 것을 고려해보시는 것은 어떨까요?
자동으로 exports 필드를 생성하는 스크립트를 작성하는데 도움이 필요하시다면 말씀해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (27)
apps/web/package.json(1 hunks)apps/web/src/app/page.tsx(1 hunks)packages/ui/esbuild.config.mjs(2 hunks)packages/ui/package.json(2 hunks)packages/ui/src/components/Badge/index.ts(1 hunks)packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx(1 hunks)packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx(1 hunks)packages/ui/src/components/Breadcrumb/index.ts(1 hunks)packages/ui/src/components/Button/index.ts(1 hunks)packages/ui/src/components/Checkbox/Checkbox.tsx(2 hunks)packages/ui/src/components/Checkbox/index.ts(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/Icon/index.ts(1 hunks)packages/ui/src/components/IconButton/index.ts(1 hunks)packages/ui/src/components/Label/index.ts(1 hunks)packages/ui/src/components/LottieAnimation/index.ts(1 hunks)packages/ui/src/components/Spacing/index.ts(1 hunks)packages/ui/src/components/Spinner/index.ts(1 hunks)packages/ui/src/components/Text/index.ts(1 hunks)packages/ui/src/components/TextField/TextFieldInput.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldLabel.tsx(1 hunks)packages/ui/src/components/TextField/TextFieldSubmit.tsx(1 hunks)packages/ui/src/components/TextField/index.ts(1 hunks)packages/ui/src/components/Toast/Toast.tsx(1 hunks)packages/ui/src/components/Toast/compounds/Icon/Icon.tsx(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.mts(1 hunks)
✅ Files skipped from review due to trivial changes (22)
- packages/ui/src/components/Icon/assets.ts
- packages/ui/src/components/Spacing/index.ts
- packages/ui/src/components/Spinner/index.ts
- packages/ui/src/components/Button/index.ts
- packages/ui/src/components/Badge/index.ts
- packages/ui/src/components/Breadcrumb/index.ts
- packages/ui/src/components/TextField/TextFieldInput.tsx
- packages/ui/src/components/LottieAnimation/index.ts
- packages/ui/src/components/TextField/TextFieldSubmit.tsx
- packages/ui/src/components/IconButton/index.ts
- packages/ui/src/components/Label/index.ts
- packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx
- packages/ui/src/components/Toast/Toast.tsx
- packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
- packages/ui/src/components/TextField/TextFieldLabel.tsx
- apps/web/src/app/page.tsx
- packages/ui/src/components/Toast/compounds/Icon/Icon.tsx
- packages/ui/src/components/Checkbox/Checkbox.tsx
- packages/ui/src/components/TextField/index.ts
- packages/ui/src/components/Text/index.ts
- packages/ui/src/components/Checkbox/index.ts
- packages/ui/src/components/index.ts
🔇 Additional comments (5)
packages/ui/src/components/Icon/index.ts (1)
1-3: 모듈 내보내기가 깔끔하게 구성되었습니다!컴포넌트, 아이콘 에셋, 타입을 개별적으로 내보내는 구조가 트리 쉐이킹에 효과적이며, 모듈 구조가 명확합니다.
packages/ui/esbuild.config.mjs (2)
23-29: 에셋 복사 설정이 적절합니다.에셋 파일들을 dist 폴더로 복사하는 설정이 올바르게 구성되어 있습니다.
43-44: 번들 최적화 설정이 추가되었습니다.
minify와treeShaking옵션 활성화로 번들 크기가 최적화될 것으로 예상됩니다.packages/ui/package.json (2)
77-77: 빌드 스크립트의 확장자가 .mts로 변경되었습니다.TypeScript ESM 모듈을 위한 올바른 확장자 사용입니다.
87-89: 새로운 빌드 플러그인이 추가되었습니다.
esbuild-plugin-alias와esbuild-plugin-copy플러그인이 추가되었습니다. 이는 PR 목표에 맞게 에셋 파일들이 dist 폴더에 올바르게 복사되도록 하는데 도움이 될 것입니다.패키지 버전이 고정되어 있지 않은 것이 확인됩니다 (
^사용). 빌드 안정성을 위해 버전을 고정하는 것을 고려해보세요.다음 명령어로 현재 사용 중인 패키지들의 취약점을 확인해보시기 바랍니다:
Also applies to: 97-98
✅ Verification successful
패키지 버전 고정 권장
빌드 안정성을 위해 다음 패키지들의 버전을 고정하는 것이 좋습니다:
esbuild-plugin-alias: 0.2.1esbuild-plugin-copy: 2.1.1보안 취약점 검사 결과 현재 알려진 취약점은 없습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for vulnerabilities in newly added packages # Check npm advisories curl -s "https://registry.npmjs.org/-/npm/v1/security/advisories/search?package=esbuild-plugin-alias" curl -s "https://registry.npmjs.org/-/npm/v1/security/advisories/search?package=esbuild-plugin-copy" # Check GitHub advisories gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "esbuild-plugin-alias") { nodes { advisory { summary severity publishedAt } } } }' gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "esbuild-plugin-copy") { nodes { advisory { summary severity publishedAt } } } }'Length of output: 926
Script:
#!/bin/bash # Check if the mentioned plugins exist in package.json rg "esbuild-plugin-(alias|copy)" packages/ui/package.jsonLength of output: 134
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ui/package.json (1)
85-87: 의존성 목록 정리 및 추가 확인
@vanilla-extract/recipes등의 의존성이 추가되었으며, 이는 스타일링 관련 기능을 강화하는 데 도움이 됩니다. 그러나motion패키지가dependencies에 포함되어 있는데, 이는 런타임에만 필요한지, 아니면devDependencies로 이동해야 하는지 검토가 필요합니다.- "motion": "^11.17.0", + "motion": "^11.17.0", // 필요 시 devDependencies로 이동 고려
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/web/src/app/page.tsx(1 hunks)packages/ui/package.json(2 hunks)packages/ui/src/components/RadioCards/RadioCardsBadge.tsx(1 hunks)packages/ui/src/components/RadioCards/RadioCardsDescription.tsx(1 hunks)packages/ui/src/components/RadioCards/RadioCardsIcon.tsx(1 hunks)packages/ui/src/components/RadioCards/RadioCardsItem.tsx(1 hunks)packages/ui/src/components/RadioCards/RadioCardsLabel.tsx(1 hunks)packages/ui/src/components/RadioCards/index.ts(1 hunks)packages/ui/src/components/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (5)
- packages/ui/src/components/RadioCards/RadioCardsBadge.tsx
- packages/ui/src/components/RadioCards/RadioCardsIcon.tsx
- packages/ui/src/components/RadioCards/RadioCardsItem.tsx
- packages/ui/src/components/RadioCards/RadioCardsLabel.tsx
- packages/ui/src/components/RadioCards/RadioCardsDescription.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/app/page.tsx
🔇 Additional comments (6)
packages/ui/src/components/index.ts (1)
1-12: 모듈식 구성 요소 재정렬로 인한 개선각 컴포넌트를 개별적으로 재수출하는 방식으로 변경하여 모듈성을 향상시키고 불필요한 종속성을 줄였습니다. 이러한 구조는 트리 쉐이킹(tree-shaking)에 도움이 되어 번들 크기를 줄이는 데 기여합니다.
packages/ui/src/components/RadioCards/index.ts (1)
1-8: 새로운 RadioCards 컴포넌트 및 타입 추가 확인새로운
RadioCards컴포넌트와 그에 관련된 타입들이 올바르게 추가되었습니다. 이를 통해 해당 컴포넌트를 다른 모듈에서 사용할 수 있게 되었습니다.packages/ui/package.json (4)
11-21: exports 필드의 구조 개선으로 인한 패키지 관리 효율성 향상
exports필드에서 각 컴포넌트에 대해types와import를 명시적으로 지정하여 패키지의 접근성을 높였습니다. 이는 TypeScript 지원을 명확히 하고 번들링 시 불필요한 파일을 포함하지 않도록 도와줍니다.
22-69: 새로운 컴포넌트들의 exports 추가 확인
IconButton,Spacing,Icon등 여러 컴포넌트에 대한 exports가 올바르게 추가되었습니다. 이는 패키지를 사용하는 측에서 개별 컴포넌트를 효율적으로 가져올 수 있게 합니다.
75-77: 빌드 스크립트에서 파일 확장자 변경 확인
build:icons및build:lotties스크립트에서.ts에서.mts로 파일 확장자가 변경되었습니다. 이는 ES 모듈 사용을 위한 것으로 보이며, 빌드 프로세스에 영향을 줄 수 있으니 확인이 필요합니다.
95-96: esbuild 플러그인 추가로 인한 빌드 프로세스 개선
esbuild-plugin-alias와esbuild-plugin-copy플러그인이 추가되어 빌드 시 경로 별칭과 파일 복사 기능이 향상되었습니다. 이는 빌드 결과물의 구조와 내용에 영향을 미치므로, 예상한 대로 동작하는지 테스트가 필요합니다.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/ui/esbuild.config.mjs (1)
CommonJS 빌드 설정 수정이 필요합니다
현재 빌드 설정에서 다음 문제점들이 확인되었습니다:
platform: 'node'설정이 브라우저 기반 컴포넌트와 충돌할 수 있습니다- 복잡한 플러그인 구성이 CommonJS 빌드와 호환성 문제를 일으킬 수 있습니다
다음과 같이 수정하는 것을 제안드립니다:
// CommonJS 빌드용 별도 설정 const cjsBuildOptions = { ...buildOptions, platform: 'browser', // node 대신 browser 사용 format: 'cjs', }; // ESM 빌드 esbuild.build({ ...buildOptions, format: 'esm', }).catch(() => process.exit(1)); // CJS 빌드 esbuild.build(cjsBuildOptions).catch(() => process.exit(1));🔗 Analysis chain
Line range hint
44-50: CommonJS 빌드 오류에 대한 구체적인 조사가 필요합니다.TODO 주석만으로는 어떤 빌드 오류가 발생하는지 파악하기 어렵습니다. 이는 패키지의 호환성에 영향을 줄 수 있습니다.
다음 스크립트로 CommonJS 빌드 오류를 확인해보세요:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # CommonJS 빌드 시도 및 오류 로깅 NODE_ENV=development node -e " const esbuild = require('esbuild'); const config = require('./esbuild.config.mjs'); async function testBuild() { try { await esbuild.build({ ...config.buildOptions, format: 'cjs' }); } catch (error) { console.error('Build Error:', error); } } testBuild(); "Length of output: 1114
Script:
#!/bin/bash # Search for esbuild config files and related TODOs echo "=== Esbuild Config Files ===" fd -e mjs -e js -e ts -e json esbuild echo -e "\n=== Related TODO Comments ===" rg -i "todo.*commonjs|todo.*cjs|todo.*build.*error" -g '!node_modules' echo -e "\n=== Package.json Files in UI Package ===" find packages/ui -name "package.json" -type f -exec cat {} \;Length of output: 4047
Script:
#!/bin/bash echo "=== UI Package Esbuild Config ===" cat packages/ui/esbuild.config.mjs echo -e "\n=== Theme Package Esbuild Config ===" cat packages/theme/esbuild.config.mjsLength of output: 2074
🧹 Nitpick comments (1)
packages/ui/esbuild.config.mjs (1)
5-5: assets 복사 플러그인 구성을 개선하세요.copy 플러그인 구성이 기본적인 기능은 제공하지만, 다음과 같은 개선사항을 고려해보세요:
- 복사 실패 시 에러 처리
- 대상 파일 존재 여부 확인
- 복사 진행 상황 로깅
다음과 같이 개선할 수 있습니다:
copy({ assets: { resolveFrom: 'cwd', from: ['./src/assets/**/*'], to: ['./assets'], + watch: true, + verbose: true }, + hooks: { + 'done-copy': () => { + console.log('Assets copied successfully'); + }, + 'error-copy': (error) => { + console.error('Error copying assets:', error); + } + } }),Also applies to: 21-27
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (27)
packages/ui/public/icons/IconArrowBottom.svgis excluded by!**/*.svgpackages/ui/public/icons/IconArrowFillBottom.svgis excluded by!**/*.svgpackages/ui/public/icons/IconArrowFillTop.svgis excluded by!**/*.svgpackages/ui/public/icons/IconArrowLeft.svgis excluded by!**/*.svgpackages/ui/public/icons/IconArrowRight.svgis excluded by!**/*.svgpackages/ui/public/icons/IconArrowTop.svgis excluded by!**/*.svgpackages/ui/public/icons/IconCalendar.svgis excluded by!**/*.svgpackages/ui/public/icons/IconChat.svgis excluded by!**/*.svgpackages/ui/public/icons/IconCheck.svgis excluded by!**/*.svgpackages/ui/public/icons/IconCheckCalendar.svgis excluded by!**/*.svgpackages/ui/public/icons/IconCheckbox.svgis excluded by!**/*.svgpackages/ui/public/icons/IconDocument.svgis excluded by!**/*.svgpackages/ui/public/icons/IconLineThree.svgis excluded by!**/*.svgpackages/ui/public/icons/IconNotice.svgis excluded by!**/*.svgpackages/ui/public/icons/IconPencil.svgis excluded by!**/*.svgpackages/ui/public/icons/IconPicture.svgis excluded by!**/*.svgpackages/ui/public/icons/IconPlus.svgis excluded by!**/*.svgpackages/ui/public/icons/IconPlusPicture.svgis excluded by!**/*.svgpackages/ui/public/icons/IconSend.svgis excluded by!**/*.svgpackages/ui/public/icons/IconShopping.svgis excluded by!**/*.svgpackages/ui/public/icons/IconSmile.svgis excluded by!**/*.svgpackages/ui/public/icons/IconStack.svgis excluded by!**/*.svgpackages/ui/public/icons/IconStar.svgis excluded by!**/*.svgpackages/ui/public/icons/IconTwinkle.svgis excluded by!**/*.svgpackages/ui/public/icons/IconUnSelectedCheckbox.svgis excluded by!**/*.svgpackages/ui/public/icons/IconX.svgis excluded by!**/*.svgpackages/ui/public/icons/IconXCircle.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
packages/ui/esbuild.config.mjs(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.mts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ui/src/scripts/generate-icon-map.mts
🔇 Additional comments (3)
packages/ui/src/components/Icon/assets.ts (3)
Line range hint
29-56: 아이콘 객체 구조가 일관성있게 구성됨모든 import된 아이콘들이 적절하게 export되어 있으며, 명명 규칙이 일관성있게 적용되어 있습니다.
1-27: public 디렉토리 내 아이콘 파일 존재 여부 확인 필요모든 아이콘 import 경로가 'public/icons/'로 변경되었습니다. 빌드 프로세스에서 올바르게 처리되는지 확인이 필요합니다.
아래 스크립트를 실행하여 모든 아이콘 파일이 올바른 위치에 있는지 확인하세요:
✅ Verification successful
아이콘 파일 경로 검증 완료
모든 아이콘 파일이
packages/ui/public/icons/디렉토리에 정상적으로 존재하며, 빌드 설정에 SVG 처리를 위한esbuild-plugin-svgr이 포함되어 있어 import 문이 올바르게 처리될 것으로 확인됩니다.
- 모든 SVG 파일이 올바른 위치에 존재함
- 빌드 시스템이 SVG 파일을 올바르게 처리하도록 구성되어 있음
- import 경로가 일관성 있게 작성되어 있음
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify icon files existence in public directory # Check if public/icons directory exists if [ ! -d "public/icons" ]; then echo "Error: public/icons directory not found" exit 1 fi # Verify all imported icon files exist for icon in public/icons/Icon*.svg; do if [ ! -f "$icon" ]; then echo "Missing icon: $icon" fi doneLength of output: 127
Script:
#!/bin/bash # Search for icon files and related configurations # Find all SVG files echo "=== SVG Files ===" fd -e svg # Find potential configuration files echo -e "\n=== Config Files ===" fd -e config.js -e config.ts fd vite.config -e js -e ts fd next.config -e js -e ts # Check package.json in ui package echo -e "\n=== UI Package Config ===" cat packages/ui/package.jsonLength of output: 4961
Line range hint
1-56: 컴포넌트 트리쉐이킹 개선을 위한 구조 검증 필요아이콘 파일들의 상대 경로 변경이 트리쉐이킹 개선이라는 PR의 목적에 부합하는지 확인이 필요합니다.
빌드 결과물에서 개별 아이콘 임포트가 올바르게 처리되는지 확인하세요:
✅ Verification successful
아이콘 임포트 구조가 트리쉐이킹에 최적화되어 있음을 확인했습니다
현재 구조는 다음과 같은 이유로 트리쉐이킹에 최적화되어 있습니다:
- 개별 SVG 파일들이 독립적으로 임포트됨
- 절대 경로를 사용한 직접 임포트 방식 적용
- Icon 컴포넌트를 통한 일관된 사용 패턴 확인
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify build output for individual icon imports # Check build output for individual icon imports fd -e js -e mjs . dist/components/Icon -x grep -l "IconArrowBottom"Length of output: 175
Script:
#!/bin/bash # Check for any re-exports of icons that might affect tree-shaking rg "export.*from.*Icon" --type ts # Check how these icons are being used in components rg "import.*Icon.*from.*components/Icon" --type ts -A 2Length of output: 1159
kongnayeon
force-pushed
the
feat/#fcaed0cbc
branch
from
7467853 to
3ffca18
Compare
There was a problem hiding this comment.
Actionable comments posted: 19
🧹 Nitpick comments (41)
packages/ui/src/scripts/convert-svg-to-react.mts (5)
19-37: 파일 시스템 작업 최적화 필요
fs.readdirSync는 동기식 작업으로 대규모 디렉토리에서 성능 문제를 일으킬 수 있습니다. 비동기 버전인fs.promises.readdir을 사용하는 것이 권장됩니다.const getSvgFiles = async (dir: string): Promise<string[]> => { let svgFiles: string[] = []; - const files = fs.readdirSync(dir, { withFileTypes: true }); + const files = await fs.promises.readdir(dir, { withFileTypes: true });
50-54: SVG 처리 로직 개선 필요현재 구현은 기본적인 속성만 처리하고 있습니다. SVGO를 사용하여 더 안정적이고 포괄적인 SVG 최적화 및 변환을 구현하는 것을 권장드립니다.
SVGO 통합 구현에 도움이 필요하시다면 말씀해 주세요.
73-73: 디버그 코드 제거 필요프로덕션 코드에서
console.log('hihi')와 같은 디버그 메시지는 제거되어야 합니다.- console.log('hihi');
106-108: 에러 처리 개선 필요현재 에러 처리가 너무 일반적입니다. 구체적인 에러 타입에 따라 다른 처리를 하고, 사용자에게 더 명확한 에러 메시지를 제공하는 것이 좋습니다.
} catch (error) { - console.error('SVG 변환 중 오류 발생:', error); + if (error instanceof Error) { + console.error(`SVG 변환 중 오류 발생: ${error.message}`); + if (error.stack) { + console.debug('스택 트레이스:', error.stack); + } + } else { + console.error('알 수 없는 오류가 발생했습니다:', error); + } + process.exit(1); }
111-112: CLI 인터페이스 개선 필요스크립트의 유연성을 높이기 위해 입력/출력 디렉토리를 커맨드 라인 인자로 받는 것을 고려해보세요.
yargs나commander같은 라이브러리를 사용하면 쉽게 구현할 수 있습니다.import yargs from 'yargs'; const argv = yargs .option('input', { alias: 'i', description: 'SVG 파일이 있는 디렉토리', default: 'src/assets/icons' }) .option('output', { alias: 'o', description: '리액트 컴포넌트 출력 디렉토리', default: 'src/components/Icon/assets' }) .help() .argv; const SVG_DIR = argv.input; const COMPONENTS_DIR = argv.output;packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconArrowFillTopProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.-interface IconArrowFillTopProps extends React.SVGProps<SVGSVGElement> {}
7-17: SVG 속성의 재사용성 개선fill 색상과 크기가 하드코딩되어 있어 재사용성이 제한됩니다. props를 통해 이러한 값들을 설정할 수 있도록 개선하는 것이 좋습니다.
<svg - width="20" - height="20" + width={props.width || "20"} + height={props.height || "20"} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path d="M8.652 5.3568C9.04367 4.73013 9.95633 4.73013 10.348 5.3568L16.0437 14.47C16.46 15.136 15.9812 16 15.1958 16H3.80425C3.01881 16 2.53997 15.136 2.95625 14.47L8.652 5.3568Z" - fill="#5A6471" + fill={props.color || "#5A6471"} />packages/ui/src/components/Icon/assets/IconX.tsx (1)
3-3: 사용되지 않는 인터페이스 선언 제거
IconXProps인터페이스가 선언되었지만 사용되지 않습니다.-interface IconXProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconArrowFillBottomProps인터페이스가 선언되었지만 사용되지 않습니다.-interface IconArrowFillBottomProps extends React.SVGProps<SVGSVGElement> {}
7-17: SVG 속성의 재사용성 개선다른 아이콘 컴포넌트들과 마찬가지로, fill 색상과 크기가 하드코딩되어 있습니다.
<svg - width="20" - height="20" + width={props.width || "20"} + height={props.height || "20"} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path d="M10.348 14.6432C9.95633 15.2699 9.04367 15.2699 8.652 14.6432L2.95625 5.53C2.53997 4.86395 3.01881 4 3.80425 4L15.1958 4C15.9812 4 16.46 4.86395 16.0438 5.53L10.348 14.6432Z" - fill="#5A6471" + fill={props.color || "#5A6471"} />packages/ui/src/components/Icon/assets/IconCalendar.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconCalendarProps인터페이스가 선언되었지만 사용되지 않습니다.-interface IconCalendarProps extends React.SVGProps<SVGSVGElement> {}
1-23: 아이콘 컴포넌트 구조 개선을 위한 제안모든 아이콘 컴포넌트에 대한 일관된 구조 개선이 필요합니다:
- 불필요한 인터페이스 제거
- 공통 props 타입 정의
- 색상, 크기 등의 기본값 중앙화
다음과 같은 구조로 개선하는 것을 제안합니다:
// types/icon.ts export interface IconProps extends SVGProps<SVGSVGElement> { width?: string | number; height?: string | number; color?: string; } // constants/icon.ts export const ICON_DEFAULTS = { color: '#A3ADBD', width: '24', height: '24', } as const; // components/Icon/assets/IconCalendar.tsx import { IconProps } from '../../../types/icon'; import { ICON_DEFAULTS } from '../../../constants/icon'; const IconCalendar = ({ width = ICON_DEFAULTS.width, height = ICON_DEFAULTS.height, color = ICON_DEFAULTS.color, ...props }: IconProps) => ( // ... SVG implementation );packages/ui/src/components/Icon/assets/IconSend.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconSendProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 컴포넌트는 직접SVGProps<SVGSVGElement>를 사용하고 있습니다.-interface IconSendProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconUnSelectedCheckboxProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다.-interface IconUnSelectedCheckboxProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconArrowBottom.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconArrowBottomProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다.-interface IconArrowBottomProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconArrowTop.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconArrowTopProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다.-interface IconArrowTopProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconArrowRight.tsx (1)
3-23: 화살표 아이콘 최적화 제안좌/우 화살표 아이콘이 매우 유사한 구조를 가지고 있습니다. 다음과 같은 최적화를 제안드립니다:
- 불필요한 인터페이스 제거
- React 스타일의 camelCase 속성명 사용
- 색상을 props로 커스터마이즈 가능하도록 수정
- 좌/우 화살표를 하나의 기본 컴포넌트로 통합하고 방향을 props로 전달
-interface IconArrowRightProps extends React.SVGProps<SVGSVGElement> {} const IconArrowRight = (props: SVGProps<SVGSVGElement>) => ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path - fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd" d="M8.62382 20.1004C8.27882 20.1004 7.93382 19.9654 7.66382 19.7104C7.41193 19.4574 7.27051 19.1149 7.27051 18.7579C7.27051 18.4009 7.41193 18.0584 7.66382 17.8054L13.4688 12.0004L7.66382 6.21043C7.41193 5.95742 7.27051 5.61494 7.27051 5.25793C7.27051 4.90091 7.41193 4.55843 7.66382 4.30543C7.91683 4.05353 8.25931 3.91211 8.61632 3.91211C8.97334 3.91211 9.31582 4.05353 9.56882 4.30543L16.3188 11.0554C16.5707 11.3084 16.7121 11.6509 16.7121 12.0079C16.7121 12.3649 16.5707 12.7074 16.3188 12.9604L9.56882 19.7104C9.31382 19.9654 8.96882 20.1004 8.62382 20.1004Z" - fill="#A3ADBD" + fill={props.fill || "#A3ADBD"} /> </svg> );packages/ui/src/components/Icon/assets/IconDocument.tsx (1)
7-8: 아이콘 크기와 색상의 일관성 개선 필요다른 아이콘들과 비교하여 크기(16x16)와 색상(#788391)이 다릅니다. 아이콘 시스템의 일관성을 위해 다음 사항들을 고려해주세요:
- 아이콘 크기를 통일하거나 size prop으로 관리
- 색상 팔레트를 일관되게 사용하거나 theme 시스템 도입
<svg - width="16" - height="16" + width={props.size || "24"} + height={props.size || "24"} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >Also applies to: 18-18, 24-24
packages/ui/src/components/Icon/assets/IconStar.tsx (1)
1-23: 아이콘 시스템 전반적 개선사항 제안모든 아이콘 컴포넌트에 공통적으로 적용될 수 있는 개선사항들입니다:
- 불필요한 인터페이스 제거
- 공통 props 타입 정의 (size, fill, etc.)
- React 스타일의 camelCase 속성 사용
- 테마 시스템 연동
다음과 같은 공통 인터페이스 사용을 제안드립니다:
// packages/ui/src/components/Icon/types.ts export interface IconProps extends SVGProps<SVGSVGElement> { size?: string | number; fill?: string; } // 각 아이콘 컴포넌트에서 사용 import { IconProps } from '../types'; const IconStar = ({ size = "24", fill = "#A3ADBD", ...props }: IconProps) => ( <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M13.1537 1.92696L15.4807 6.64196C15.6677 7.02096 16.0297 7.28396 16.4487 7.34496L21.6517 8.10096C22.7057 8.25396 23.1277 9.55096 22.3637 10.294L18.5987 13.964C18.4495 14.1095 18.3378 14.2891 18.2734 14.4873C18.2089 14.6856 18.1936 14.8965 18.2287 15.102L19.1177 20.284C19.2977 21.335 18.1957 22.135 17.2527 21.64L12.5987 19.193C12.4143 19.0959 12.2091 19.0452 12.0007 19.0452C11.7923 19.0452 11.5871 19.0959 11.4027 19.193L6.74868 21.64C5.80468 22.135 4.70268 21.335 4.88268 20.284L5.77168 15.102C5.80669 14.8965 5.79131 14.6856 5.72686 14.4874C5.66242 14.2892 5.55083 14.1096 5.40168 13.964L1.63668 10.294C0.873683 9.55096 1.29468 8.25396 2.34968 8.10096L7.55168 7.34496C7.97068 7.28396 8.33368 7.02096 8.52068 6.64196L10.8467 1.92696C11.3187 0.970961 12.6817 0.970961 13.1537 1.92696Z" fill={fill} /> </svg> );packages/ui/src/components/Icon/assets/IconPencil.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconPencilProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.-interface IconPencilProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconNotice.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconNoticeProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.-interface IconNoticeProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconPlus.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconPlusProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.-interface IconPlusProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconCheck.tsx (2)
3-3: 사용되지 않는 인터페이스 제거
IconCheckProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.-interface IconCheckProps extends React.SVGProps<SVGSVGElement> {}
1-23: 아이콘 컴포넌트 최적화 제안모든 아이콘 컴포넌트에 대해 다음과 같은 최적화를 고려해보세요:
- 공통 SVG 속성을 별도의 상수로 추출하여 재사용
- 메모이제이션을 통한 불필요한 리렌더링 방지
- 타입 안전성을 위해 color prop을 추가하고 fill 속성과 연동
예시 구현:
import { memo } from 'react'; const commonProps = { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", } as const; interface IconProps extends SVGProps<SVGSVGElement> { color?: string; } const IconCheck = memo(({ color = '#3348D6', ...props }: IconProps) => ( <svg {...commonProps} fill="none" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="..." fill={color} /> </svg> )); IconCheck.displayName = 'IconCheck';packages/ui/src/components/Icon/assets/IconShopping.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconShoppingProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 불필요한 코드를 제거하는 것이 좋습니다.-interface IconShoppingProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconCheckbox.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconCheckboxProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 불필요한 코드를 제거하는 것이 좋습니다.-interface IconCheckboxProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconSmile.tsx (2)
3-3: 사용되지 않는 인터페이스 제거
IconSmileProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 불필요한 코드를 제거하는 것이 좋습니다.-interface IconSmileProps extends React.SVGProps<SVGSVGElement> {}
1-23: 아이콘 컴포넌트 생성 자동화 제안여러 아이콘 컴포넌트에서 동일한 패턴과 이슈가 반복되고 있습니다. SVGR과 같은 도구를 사용하여 SVG 파일을 React 컴포넌트로 자동 변환하는 것을 고려해보세요.
packages/ui/src/components/Icon/assets/IconLineThree.tsx (1)
3-3: 사용되지 않는 인터페이스 제거
IconLineThreeProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 불필요한 코드를 제거하는 것이 좋습니다.-interface IconLineThreeProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconCheckCalendar.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconCheckCalendarProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 제거해도 됩니다.-interface IconCheckCalendarProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconChat.tsx (1)
3-3: 사용되지 않는 인터페이스 제거 필요
IconChatProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 제거해도 됩니다.-interface IconChatProps extends React.SVGProps<SVGSVGElement> {}packages/ui/src/components/Icon/assets/IconStack.tsx (2)
3-3: 사용되지 않는 인터페이스 제거 필요
IconStackProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 제거해도 됩니다.-interface IconStackProps extends React.SVGProps<SVGSVGElement> {}
6-32: SVG 최적화 필요
- SVG 속성들이 React 컨벤션에 맞지 않습니다 (camelCase 사용 필요).
- 모든 path가 동일한 검은색을 사용하고 있으므로, 이 색상을 SVG 레벨로 이동하면 코드를 더 간결하게 만들 수 있습니다.
<svg width="24" height="24" viewBox="0 0 24 24" - fill="none" + fill="black" xmlns="http://www.w3.org/2000/svg" {...props} > <path - fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd" d="M21.2103 16.1049L19.6773 15.3379L13.5653 18.3939C13.0792 18.636 12.5434 18.7617 12.0003 18.7609C11.4572 18.7616 10.9214 18.6359 10.4353 18.3939L4.32329 15.3379L2.78929 16.1049C2.62288 16.1878 2.48289 16.3155 2.38504 16.4736C2.28719 16.6317 2.23535 16.814 2.23535 16.9999C2.23535 17.1858 2.28719 17.3681 2.38504 17.5262C2.48289 17.6843 2.62288 17.812 2.78929 17.8949L11.1063 22.0519C11.3839 22.191 11.6902 22.2634 12.0008 22.2634C12.3113 22.2634 12.6176 22.191 12.8953 22.0519L21.2113 17.8939C21.3774 17.8109 21.5172 17.6832 21.6148 17.5252C21.7125 17.3672 21.7642 17.1851 21.7642 16.9994C21.7642 16.8137 21.7125 16.6316 21.6148 16.4736C21.5172 16.3156 21.3774 16.1879 21.2113 16.1049" - fill="black" />packages/ui/src/components/Icon/assets/IconTwinkle.tsx (2)
3-3: 사용되지 않는 인터페이스 제거 필요
IconTwinkleProps인터페이스가 정의되어 있지만 실제로 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 제거해도 됩니다.-interface IconTwinkleProps extends React.SVGProps<SVGSVGElement> {}
1-37: 아이콘 컴포넌트 표준화 및 자동화 도구 도입 제안모든 아이콘 컴포넌트에서 동일한 패턴과 이슈가 발견됩니다. 다음과 같은 개선을 제안드립니다:
- SVGR과 같은 도구를 사용하여 SVG 파일을 자동으로 React 컴포넌트로 변환
- 공통 타입과 유틸리티를 포함하는 기본 아이콘 컴포넌트 템플릿 작성
- SVG 최적화 도구(예: SVGO)를 빌드 파이프라인에 통합
이를 통해 코드 일관성을 유지하고 수동 작업으로 인한 오류를 방지할 수 있습니다.
packages/ui/src/components/Icon/assets/IconXCircle.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconXCircleProps인터페이스가 선언되었지만 사용되지 않습니다. 컴포넌트가 직접SVGProps<SVGSVGElement>를 사용하고 있으므로 이 인터페이스는 불필요합니다.
15-17: SVG 속성을 React 네이밍 컨벤션으로 변경SVG 속성들이 kebab-case로 작성되어 있습니다. React에서는 camelCase를 사용하는 것이 권장됩니다.
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"packages/ui/src/components/Icon/assets/IconPlusPicture.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconPlusPictureProps인터페이스가 선언되었지만 사용되지 않습니다.
15-16: SVG 속성 네이밍 및 최적화
- kebab-case 속성들을 camelCase로 변경해야 합니다.
- stroke 색상이 배경색과 동일한 경우 제거하는 것이 좋습니다.
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd" d="M16.6638 6.25H4.713C4.05977 6.25 3.4333 6.50949 2.9714 6.9714C2.50949 7.4333 2.25 8.05977 2.25 8.713V23.287C2.25 23.9402 2.50949 24.5667 2.9714 25.0286C3.4333 25.4905 4.05977 25.75 4.713 25.75H19.287C19.9402 25.75 20.5667 25.4905 21.0286 25.0286C21.4905 24.5667 21.75 23.9402 21.75 23.287V11.2265C21.7335 11.2275 21.717 11.2279 21.7004 11.2279C21.5892 11.2279 21.4791 11.206 21.3764 11.1635C21.2736 11.1209 21.1803 11.0586 21.1017 10.9799C21.023 10.9013 20.9607 10.808 20.9181 10.7052C20.8756 10.6025 20.8537 10.4924 20.8537 10.3812V7.0361L17.5086 7.0361C17.3973 7.03642 17.287 7.01474 17.1841 6.97229C17.0813 6.92985 16.9878 6.8675 16.9091 6.7888C16.8304 6.71011 16.7681 6.61664 16.7256 6.51376C16.6909 6.42962 16.6701 6.34054 16.6638 6.25ZM15.3059 14.5441C15.5277 14.6314 15.7647 14.6736 16.003 14.668C16.4698 14.6571 16.9137 14.464 17.24 14.1301C17.5663 13.7962 17.7491 13.3479 17.7492 12.881C17.7494 12.4141 17.5669 11.9657 17.2407 11.6316C16.9146 11.2975 16.4708 11.1042 16.004 11.093C15.7657 11.0873 15.5287 11.1293 15.3069 11.2165C15.085 11.3038 14.8829 11.4345 14.7123 11.601C14.5417 11.7675 14.4062 11.9664 14.3136 12.186C14.221 12.4057 14.1733 12.6416 14.1732 12.88C14.1732 13.1183 14.2207 13.3543 14.3132 13.574C14.4057 13.7937 14.5411 13.9927 14.7116 14.1593C14.8821 14.3259 15.0841 14.4567 15.3059 14.5441ZM8.255 20.78H14.279C14.4913 20.7801 14.6997 20.723 14.8823 20.6148C15.065 20.5065 15.2151 20.3511 15.3169 20.1648C15.4187 19.9785 15.4684 19.7682 15.4609 19.556C15.4533 19.3438 15.3888 19.1376 15.274 18.959L12.263 14.264C12.1561 14.097 12.0089 13.9595 11.8349 13.8644C11.6609 13.7692 11.4658 13.7193 11.2675 13.7193C11.0692 13.7193 10.8741 13.7692 10.7001 13.8644C10.5261 13.9595 10.3789 14.097 10.272 14.264L7.259 18.959C7.14418 19.1377 7.07963 19.344 7.07212 19.5562C7.06462 19.7685 7.11445 19.9789 7.21637 20.1652C7.31828 20.3515 7.46853 20.507 7.6513 20.6152C7.83407 20.7233 8.04261 20.7803 8.255 20.78Z" fill="#A3ADBD" - stroke="#F7F9FB"Also applies to: 21-23
packages/ui/src/components/Icon/assets/IconPicture.tsx (2)
3-3: 사용되지 않는 인터페이스 선언 제거
IconPictureProps인터페이스가 선언되었지만 사용되지 않습니다.
15-16: SVG 속성을 React 네이밍 컨벤션으로 변경SVG 속성들이 kebab-case로 작성되어 있습니다. React의 컨벤션에 맞게 camelCase로 변경해야 합니다.
- fill-rule="evenodd" - clip-rule="evenodd" + fillRule="evenodd" + clipRule="evenodd"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (31)
packages/ui/esbuild.config.mjs(2 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/Icon/assets.ts(1 hunks)packages/ui/src/components/Icon/assets/IconArrowBottom.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconArrowLeft.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconArrowRight.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconArrowTop.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconCalendar.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconChat.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconCheck.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconCheckCalendar.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconCheckbox.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconDocument.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconLineThree.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconNotice.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconPencil.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconPicture.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconPlus.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconPlusPicture.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconSend.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconShopping.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconSmile.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconStack.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconStar.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconTwinkle.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconX.tsx(1 hunks)packages/ui/src/components/Icon/assets/IconXCircle.tsx(1 hunks)packages/ui/src/scripts/convert-svg-to-react.mts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/ui/esbuild.config.mjs
- packages/ui/package.json
🔇 Additional comments (4)
packages/ui/src/components/Icon/assets/IconSend.tsx (1)
5-19: 컴포넌트 구현이 잘 되었습니다!SVG 구현이 깔끔하고, props spreading이 올바르게 적용되어 있습니다.
packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx (1)
5-19: 컴포넌트 구현이 잘 되었습니다!체크박스 아이콘의 SVG 구현이 적절하며, props spreading이 올바르게 적용되어 있습니다.
packages/ui/src/components/Icon/assets.ts (2)
1-27: 아이콘 임포트 구조가 잘 개선되었습니다!상대 경로를 사용하여 각 아이콘을 개별적으로 임포트하도록 변경한 것이 좋습니다. 이는 PR의 목적인 "암묵적 임포트 문제 해결"에 잘 부합합니다.
Line range hint
29-56: 아이콘 객체 구조가 깔끔합니다.모든 아이콘이 일관된 네이밍 컨벤션으로 export되어 있어 사용하기 편리할 것 같습니다.
|
@minseong0324 빌드 에러 잡았습니다~~!.. 확인 부탁드려요! |
There was a problem hiding this comment.
기존 컴포넌트들은 하나의 배럴 파일에서 export 되고 있어 트리쉐이킹이 제대로 되지 않았고, Next.js 앱에서 ui 패키지의 컴포넌트들 사용 시 클라이언트 컴포넌트를 사용하는 게 아님에도 'use client'를 붙여야만 하는 문제를 해결했습니다!
ui 패키지는 기본적으로 prop을 모두 열어두었기 때문에 클라이언트 컴포넌트로 활용되어야 해요! 요건 문제가 아닙니다! 이 PR에서 해결합니다!
기존의 하나로 사용되던 배럴 파일을 분리하고, packages/ui의 packages.json에서 컴포넌트들을 개별적으로 export 할 수 있도록 수정
흠.. 이것도 의문입니다! packages/ui/src/components/index.ts 에서 필요한 컴포넌트와 타입을 개별적으로 named export를 하고 있기 때문에 트리쉐이킹에 문제가 없을 것으로 판단됩니다.
packages/ui의 dist 파일에서 플러그인을 사용했음에도 불구하고 절대경로를 인식하지 못하는 문제가 있어 packages/ui 내부에서는 모든 경로를 상대경로로 바꿔 뒀습니다 😇
이건 저도 esbuild.config.mjs에서 해결을 해보려했으나 방법을 찾지 못했네요.. 일단은 상대경로로 바꾸는 것으로 해요! 추후에 개선하는 방향으로 갑시다!
packages/ui의 dist 파일에 assets(lotties, icons)가 들어가도록 esbuild copy 플러그인 설치
요 변경사항은 보이지 않는데, 아래 방법으로 해결하면서 사라진건가요?
dist 파일에서는 svgr 플러그인이 제대로 동작하지 않아 아이콘 생성 스크립트를 추가했습니다. 리액트 컴포넌트로 아이콘을 감싸는 스크립트를 작성했고, package.json에 스크립트 추가해 뒀으니 기존과 같은 방식으로 새로운 svg가 추가되면, packages/ui/assets에 svg 파일을 놓고 pnpm run generate:icons 스크립트만 실행하면 돼요!
요 문제인가요?
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/ui/src/components/index.ts (1)
1-14: 배럴 파일의 구조가 개선되었습니다!각 컴포넌트를 개별적으로 내보내는 방식으로 변경하여 트리 쉐이킹이 가능하도록 개선되었습니다. 다만, 각 컴포넌트 디렉토리에 README.md 파일을 추가하여 해당 컴포넌트의 사용법과 API를 문서화하는 것을 추천드립니다.
packages/ui/package.json (1)
86-88: 아이콘 및 로티 생성 스크립트가 개선되었습니다.SVG를 React 컴포넌트로 변환하고 prettier로 포맷팅하는 과정이 자동화되었습니다. 다만, 스크립트 실행 결과물에 대한 검증 단계를 추가하는 것을 고려해보세요.
다음과 같은 검증 스크립트 추가를 제안드립니다:
"scripts": { "generate:icons": "tsx src/scripts/convert-svg-to-react.mts && tsx src/scripts/generate-icon-map.mts && prettier --write ./src/components/Icon/*", + "validate:icons": "tsx src/scripts/validate-generated-icons.mts", "build:lotties": "esbuild src/scripts/generate-lottie-map.mts --bundle --platform=node --outdir=dist/scripts", "generate:lotties": "pnpm run build:lotties && node dist/scripts/generate-lottie-map.js", + "validate:lotties": "tsx src/scripts/validate-generated-lotties.mts" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web/src/app/page.tsx(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/Modal/compounds/CTA/CTA.tsx(1 hunks)packages/ui/src/components/Modal/compounds/Description/Description.tsx(1 hunks)packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx(1 hunks)packages/ui/src/components/Modal/compounds/Icon/Icon.tsx(1 hunks)packages/ui/src/components/Modal/compounds/Title/Title.tsx(1 hunks)packages/ui/src/components/Modal/index.ts(1 hunks)packages/ui/src/components/Skeleton/index.tsx(1 hunks)packages/ui/src/components/index.ts(1 hunks)packages/ui/src/scripts/generate-icon-map.mts(3 hunks)
✅ Files skipped from review due to trivial changes (3)
- packages/ui/src/components/Skeleton/index.tsx
- packages/ui/src/components/Modal/compounds/Description/Description.tsx
- packages/ui/src/components/Modal/compounds/Icon/Icon.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/src/app/page.tsx
- packages/ui/src/scripts/generate-icon-map.mts
🔇 Additional comments (7)
packages/ui/src/components/Modal/compounds/CTA/CTA.tsx (1)
2-2: 상대 경로로의 변경이 트리셰이킹에 유리합니다.
Button을 상대 경로로 임포트하는 방식은 패키지 분리에 따른 트리셰이킹 관점에서 적합하며, 다른 파일들과의 일관성도 유지합니다. 특별한 문제 없으니 그대로 진행하셔도 좋을 것 같습니다.packages/ui/src/components/Modal/index.ts (1)
1-8: 모달 컴포넌트 및 타입의 명시적 내보내기 구조가 트리셰이킹에 유리합니다
Modal과 관련된 여러 타입들을 한 번에 재노출하면서도, 파일 경로를 단순화하여 재사용성을 높였습니다. 전반적으로 구조가 더욱 직관적이고 명확해 보입니다.packages/ui/src/components/Modal/compounds/Title/Title.tsx (1)
1-1: 절대 경로 대신 상대 경로를 사용해 프로젝트 구조의 일관성을 확보했습니다
Text컴포넌트 불러올 때 상대 경로 도입으로 모듈 간 의존 관계가 명료해졌습니다.packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx (3)
2-2: 상대 경로 도입을 통한 컴포넌트 참조 방식 통일
버튼 컴포넌트도 상대 경로를 사용함으로써 모듈 구조가 명확하게 정돈되었습니다.
5-8: ButtonProps를 선택적으로 확장하는OptionalButtonProps도입
size와variant를 선택적으로 허용하도록 하여 컴포넌트 사용 시 유연성이 크게 향상되었습니다.
11-12:cancelProps와confirmProps에OptionalButtonProps적용
버튼 옵션을 좀 더 자유롭게 설정할 수 있어, 다양한 UI 시나리오에 대응이 가능합니다.packages/ui/package.json (1)
14-80: 컴포넌트 export 구조가 최적화되었습니다!각 컴포넌트별로 타입과 구현체를 명시적으로 분리하여 export하도록 변경되었습니다. 이는 트리 쉐이킹을 가능하게 하고 'use client' 지시어 문제를 해결합니다.
|
~ 카톡으로 논의 완료 ~ |
* [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]>
관련 이슈
close #78
변경 사항
기존 컴포넌트들은 하나의 배럴 파일에서 export 되고 있어 트리쉐이킹이 제대로 되지 않았고, Next.js 앱에서 ui 패키지의 컴포넌트들 사용 시 클라이언트 컴포넌트를 사용하는 게 아님에도 'use client'를 붙여야만 하는 문제를 해결했습니다!
수정 사항은 아래와 같습니다.
pnpm run generate:icons스크립트만 실행하면 돼요!레퍼런스
Summary by CodeRabbit
릴리즈 노트
새로운 기능
RadioCards컴포넌트 및 관련 타입 추가Badge,Button,Checkbox,IconButton,Label,LottieAnimation,Spacing,Spinner,Text,TextField컴포넌트 및 관련 타입 추가IconArrowBottom,IconArrowFillBottom,IconArrowFillTop,IconArrowLeft,IconArrowRight,IconArrowTop,IconCalendar,IconChat,IconCheck,IconCheckCalendar,IconCheckbox,IconDocument,IconLineThree,IconNotice,IconPencil,IconPicture,IconPlus,IconPlusPicture,IconSend,IconShopping,IconSmile,IconStack,IconStar,IconTwinkle,IconUnSelectedCheckbox,IconX,IconXCircle종속성 업데이트
@vanilla-extract/css및@svgr/webpack패키지 추가개선 사항
기타