Conversation
SVGR 변환 스크립트에 사용
npm run build:icons
*sizeMap 추가 *type 제거
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughSVGR 설정과 아이콘 생성/매핑 스크립트, 타입 및 런타임 Icon 컴포넌트를 추가하여 SVG → TSX 아이콘 생성과 아이콘 맵(sizeMap/iconMap) 자동화를 도입합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as 개발자
participant SVGR as `@svgr/cli`
participant FS as 파일시스템
participant GenScript as scripts/generate-iconMap.js
participant App as 애플리케이션
Dev->>SVGR: SVG 파일 빌드 요청 (build:icons)
SVGR->>FS: `src/components/Icon/generated/*` TSX 아이콘 생성
Dev->>GenScript: gen:iconMap 실행
GenScript->>FS: generated 디렉토리 스캔
GenScript->>FS: `src/components/Icon/iconMap.ts` (헤더, sizeMap, iconMap) 생성/저장
App->>FS: 런타임에서 `iconMap`/`sizeMap` 임포트
App->>App: `Icon(name,size)` → `iconMap[name]` 조회 후 렌더링
Note over GenScript,App: 빌드 타임(생성)과 런타임(사용) 흐름 분리
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
package.json (1)
17-17: 불필요한--experimental-modules플래그
package.json에"type": "module"이 설정되어 있어 Node.js가 기본적으로 ES 모듈을 지원합니다. 해당 플래그는 제거해도 무방합니다.🔎 수정 제안
- "gen:iconMap": "node --experimental-modules ./scripts/generate-iconMap.js", + "gen:iconMap": "node ./scripts/generate-iconMap.js",src/components/Icon/iconMap.ts (1)
4-4: import 경로에서.tsx확장자 제거 권장TypeScript/번들러 설정에 따라
.tsx확장자를 명시하면 문제가 발생할 수 있습니다. 이 파일은 자동 생성되므로scripts/generate-iconMap.js에서 수정이 필요합니다.-import * as Icon from './generated/index.tsx'; +import * as Icon from './generated/index';위 변경은
generate-iconMap.jsLine 24에서 적용해야 합니다.scripts/generate-iconMap.js (1)
24-24: import 경로에서.tsx확장자 제거일부 번들러나 TypeScript 설정에서 확장자를 명시하면 모듈 해석 문제가 발생할 수 있습니다.
🔎 수정 제안
- const importLines = `import * as Icon from './generated/index.tsx'`; + const importLines = `import * as Icon from './generated/index'`;src/components/Icon/Icon.tsx (1)
14-14:color기본값이currentColor상속을 방해할 수 있음SVGR 설정에서
fill: "currentColor"를 사용하여 CSScolor속성 상속을 활성화했습니다. 그러나 여기서color ?? '#000'으로 항상 색상을 지정하면 부모 요소의 색상 상속이 무시됩니다.색상이 명시적으로 전달된 경우에만 스타일을 적용하는 것이 좋습니다:
🔎 수정 제안
return ( <IconComponent width={pixelSize} height={pixelSize} - style={{ color: color ?? '#000' }} + style={color ? { color } : undefined} {...rest} /> );이렇게 하면
colorprop이 없을 때 CSScolor속성이나 부모 요소의 색상을 자연스럽게 상속받습니다.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (14)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/assets/icons/add-line.svgis excluded by!**/*.svgsrc/assets/icons/bookmark.svgis excluded by!**/*.svgsrc/assets/icons/circuit.svgis excluded by!**/*.svgsrc/assets/icons/copy.svgis excluded by!**/*.svgsrc/assets/icons/link.svgis excluded by!**/*.svgsrc/assets/icons/logo.svgis excluded by!**/*.svgsrc/components/Icon/generated/AddLine.tsxis excluded by!**/generated/**src/components/Icon/generated/Bookmark.tsxis excluded by!**/generated/**src/components/Icon/generated/Circuit.tsxis excluded by!**/generated/**src/components/Icon/generated/Copy.tsxis excluded by!**/generated/**src/components/Icon/generated/Link.tsxis excluded by!**/generated/**src/components/Icon/generated/Logo.tsxis excluded by!**/generated/**src/components/Icon/generated/index.tsxis excluded by!**/generated/**
📒 Files selected for processing (6)
.svgrrc.jsonpackage.jsonscripts/generate-iconMap.jssrc/components/Icon/Icon.tsxsrc/components/Icon/Icon.types.tssrc/components/Icon/iconMap.ts
🧰 Additional context used
🧬 Code graph analysis (3)
src/components/Icon/Icon.types.ts (1)
src/components/Icon/iconMap.ts (2)
iconMap(14-21)sizeMap(6-12)
src/components/Icon/Icon.tsx (2)
src/components/Icon/Icon.types.ts (1)
IconProps(12-12)src/components/Icon/iconMap.ts (2)
sizeMap(6-12)iconMap(14-21)
src/components/Icon/iconMap.ts (1)
src/components/Icon/Icon.tsx (1)
Icon(4-18)
🔇 Additional comments (2)
.svgrrc.json (1)
1-10: LGTM!SVGR 설정이 잘 구성되어 있습니다.
fill: "currentColor"로 CSS 색상 상속을 지원하고,jsxRuntime: "automatic"으로 React 19와 호환됩니다.src/components/Icon/Icon.tsx (1)
4-8: LGTM!컴포넌트 구조가 깔끔합니다.
size기본값 설정과IconComponent존재 여부 확인이 잘 되어 있습니다.
| await fs.mkdir(path.dirname(OUTPUT_FILE), { recursive: true }); | ||
| await fs.writeFile(OUTPUT_FILE, fileContent, 'utf8'); | ||
|
|
||
| console.log(`iconMap이 정상적으로 생성되었습니다. total: ${tsxFiles.length}개`); |
There was a problem hiding this comment.
아이콘 개수 로그가 실제 생성 개수와 다를 수 있음
tsxFiles.length는 index.tsx를 포함하지만 실제 iconMap에는 제외됩니다. 정확한 개수를 표시하려면 필터링 후 개수를 사용하세요.
🔎 수정 제안
+ const iconFiles = tsxFiles.filter((file) => file.replace(/\.tsx$/, '') !== 'index');
+
const iconEntries = iconFiles
.map((file) => {
// ...
})
.join('\n');
// ...
- console.log(`iconMap이 정상적으로 생성되었습니다. total: ${tsxFiles.length}개`);
+ console.log(`iconMap이 정상적으로 생성되었습니다. total: ${iconFiles.length}개`);🤖 Prompt for AI Agents
In scripts/generate-iconMap.js around line 59, the console.log uses
tsxFiles.length which counts files like index.tsx that are later excluded from
the generated iconMap; update the log to use the length of the filtered array
used to build iconMap (i.e., compute/filter the files exactly as you do when
creating the map and log that filteredArray.length) so the printed total matches
the actual icons generated.
*TypeScript 컴파일 오류 발생 방지
*import 경로 .tsx 확장자 제거 *세미콜론 추가
*color 기본값이 currentColor 상속을 방해할 수 있음
Closed
1 task
This was referenced Dec 28, 2025
Merged
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ 체크리스트
📝 작업 상세 내용
1. SVGR 변환을 위한 라이브러리 설치 및 CLI 추가
> npm run build:icons2. iconMap 자동 생성을 위한 스크립트 추가
> npm run gen:iconMap> npm run build:icons:all3. Icon 컴포넌트 구현
📚 참고 자료 (선택 사항)
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
Icon 컴포넌트 만들기(with SVGR, 동적 import)
svgr을 활용하여 svg 파일 유연하게 사용하기
📸 스크린샷 (선택 사항)
✅ 셀프 체크리스트
이슈 번호: #4
Summary by CodeRabbit
새 기능
작업(Chores)
✏️ Tip: You can customize this high-level summary in your review settings.