feat(script): 컴포넌트 생성 스크립트 #62
Conversation
- Updated devDependencies in package.json to include: - @clack/[email protected] - [email protected] - [email protected] - Updated pnpm-workspace.yaml to include new testing libraries with Catalog Protocol.
- Introduced a new script in package.json for creating components: `create:component`. - Added a new TypeScript file `.script/createComponent.ts` that implements a CLI command for generating component templates. - Updated component template files to include new configurations and dependencies: - Modified package.json in the component template to use a placeholder for package name. - Added vitest.setup.ts for global test configurations. - Enhanced vitest.config.ts with additional settings for globals and CSS support. - Updated Storybook configuration by removing an unused addon. - Added a title to the component stories for better organization.
synuns
requested review from
kimdaeyeobbb,
hy57in,
developerjhp,
bae-sh,
noahluftyang,
froggy1014 and
heeji289
as code owners
|
워크스루이 풀 리퀘스트는 컴포넌트 생성 및 테스트 도구 개선에 중점을 둡니다. Storybook 구성을 간소화하고, 새로운 CLI 도구를 도입하여 컴포넌트 생성 프로세스를 자동화했습니다. 테스트 라이브러리 의존성을 추가하고, 패키지 메타데이터를 업데이트하여 개발 워크플로우를 개선했습니다. 변경 사항
제안된 관련 PR
제안된 리뷰어
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 (
|
Codecov ReportAttention: Patch coverage is
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
.templates/component/src/Component.stories.tsx (1)
6-6: Storybook 타이틀을 좀 더 구체적으로 지정해주세요
다른 컴포넌트와 혼동되지 않도록 Storybook 카테고리 경로를 보다 명확히 기술하는 것을 추천드립니다. 예:"title: 'Components/MyComponent'".templates/component/vitest.config.ts (1)
6-10: 테스트 환경 설정 개선 제안
해당 설정(globals,setupFiles,css) 모두 Vitest 테스트 환경을 한층 편리하게 만듭니다. 다만,css: true의 경우 테스트 시 불필요한 오버헤드를 유발할 수 있으므로, CSS 처리가 꼭 필요한 상황인지 검토하면 좋겠습니다..script/createComponent.ts (1)
22-29: replacePatterns 및 excludePatterns 점검
replacePatterns는 필요한 치환 키를 적절히 관리하고,excludePatterns도 최적의 디렉터리 및 파일을 배제하는 로직으로 보입니다. 다만, 추후 커스텀 구성이 늘어날 경우를 대비해 옵션을 외부에서 주입받는 구조로 확장도 고려할 수 있습니다.🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 22-27: .script/createComponent.ts#L22-L27
Added lines #L22 - L27 were not covered by tests
[warning] 29-29: .script/createComponent.ts#L29
Added line #L29 was not covered by tests
📜 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 (8)
.script/createComponent.ts(1 hunks).templates/component/.storybook/main.ts(0 hunks).templates/component/package.json(2 hunks).templates/component/src/Component.stories.tsx(1 hunks).templates/component/vitest.config.ts(1 hunks).templates/component/vitest.setup.ts(1 hunks)package.json(2 hunks)pnpm-workspace.yaml(1 hunks)
💤 Files with no reviewable changes (1)
- .templates/component/.storybook/main.ts
✅ Files skipped from review due to trivial changes (1)
- .templates/component/vitest.setup.ts
🧰 Additional context used
🪛 GitHub Check: codecov/patch
.script/createComponent.ts
[warning] 2-6: .script/createComponent.ts#L2-L6
Added lines #L2 - L6 were not covered by tests
[warning] 8-9: .script/createComponent.ts#L8-L9
Added lines #L8 - L9 were not covered by tests
[warning] 11-13: .script/createComponent.ts#L11-L13
Added lines #L11 - L13 were not covered by tests
[warning] 15-20: .script/createComponent.ts#L15-L20
Added lines #L15 - L20 were not covered by tests
[warning] 22-27: .script/createComponent.ts#L22-L27
Added lines #L22 - L27 were not covered by tests
[warning] 29-29: .script/createComponent.ts#L29
Added line #L29 was not covered by tests
[warning] 31-37: .script/createComponent.ts#L31-L37
Added lines #L31 - L37 were not covered by tests
[warning] 39-41: .script/createComponent.ts#L39-L41
Added lines #L39 - L41 were not covered by tests
[warning] 43-44: .script/createComponent.ts#L43-L44
Added lines #L43 - L44 were not covered by tests
[warning] 46-48: .script/createComponent.ts#L46-L48
Added lines #L46 - L48 were not covered by tests
[warning] 50-69: .script/createComponent.ts#L50-L69
Added lines #L50 - L69 were not covered by tests
[warning] 71-73: .script/createComponent.ts#L71-L73
Added lines #L71 - L73 were not covered by tests
[warning] 75-76: .script/createComponent.ts#L75-L76
Added lines #L75 - L76 were not covered by tests
[warning] 78-79: .script/createComponent.ts#L78-L79
Added lines #L78 - L79 were not covered by tests
[warning] 81-89: .script/createComponent.ts#L81-L89
Added lines #L81 - L89 were not covered by tests
[warning] 91-91: .script/createComponent.ts#L91
Added line #L91 was not covered by tests
[warning] 93-93: .script/createComponent.ts#L93
Added line #L93 was not covered by tests
[warning] 95-96: .script/createComponent.ts#L95-L96
Added lines #L95 - L96 were not covered by tests
[warning] 98-102: .script/createComponent.ts#L98-L102
Added lines #L98 - L102 were not covered by tests
[warning] 104-108: .script/createComponent.ts#L104-L108
Added lines #L104 - L108 were not covered by tests
[warning] 110-115: .script/createComponent.ts#L110-L115
Added lines #L110 - L115 were not covered by tests
[warning] 117-118: .script/createComponent.ts#L117-L118
Added lines #L117 - L118 were not covered by tests
[warning] 120-130: .script/createComponent.ts#L120-L130
Added lines #L120 - L130 were not covered by tests
[warning] 132-135: .script/createComponent.ts#L132-L135
Added lines #L132 - L135 were not covered by tests
[warning] 137-138: .script/createComponent.ts#L137-L138
Added lines #L137 - L138 were not covered by tests
🔇 Additional comments (12)
.script/createComponent.ts (5)
1-10: 노드 모듈 경로와 기본 Import 설정
node: 프리픽스로 내장 모듈을 명시적으로 import하는 것은 최신 Node.js 스타일이며, 향후 충돌 가능성을 줄이는 데 유용합니다. 현재 구조상 문제가 없으며 유지해도 무방해 보입니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 2-6: .script/createComponent.ts#L2-L6
Added lines #L2 - L6 were not covered by tests
[warning] 8-9: .script/createComponent.ts#L8-L9
Added lines #L8 - L9 were not covered by tests
15-20: kebabToPascal 메서드 명확성 확인
kebabToPascal 메서드는 kebab-case를 PascalCase로 잘 변환하고 있습니다. 현재 로직상 오탈자는 없어 보이며, 가독성 및 유지보수성도 양호합니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 15-20: .script/createComponent.ts#L15-L20
Added lines #L15 - L20 were not covered by tests
31-73: copyRecursive 함수 검토
재귀적으로 템플릿 폴더를 복사하고, 파일명 및 파일 내용 치환을 수행하는 로직이 잘 구현되어 있습니다. 예외적으로 대규모 템플릿을 다룰 때 성능 문제가 생길 가능성이 있지만, 현재 규모에서는 충분히 간단하고 직관적인 접근으로 보입니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 31-37: .script/createComponent.ts#L31-L37
Added lines #L31 - L37 were not covered by tests
[warning] 39-41: .script/createComponent.ts#L39-L41
Added lines #L39 - L41 were not covered by tests
[warning] 43-44: .script/createComponent.ts#L43-L44
Added lines #L43 - L44 were not covered by tests
[warning] 46-48: .script/createComponent.ts#L46-L48
Added lines #L46 - L48 were not covered by tests
[warning] 50-69: .script/createComponent.ts#L50-L69
Added lines #L50 - L69 were not covered by tests
[warning] 71-73: .script/createComponent.ts#L71-L73
Added lines #L71 - L73 were not covered by tests
75-129: execute 메서드 흐름 검토
- 컴포넌트 이름을 입력받고 형식 검증을 수행.
- 템플릿 디렉터리 존재 여부 확인 후 복사 진행.
- 에러 발생 시 사용자에게 메시지 출력.
로직 구조가 충분히 명확하며 유저 입장에서 사용하기 편리해 보입니다. 다만, kebabCaseName이 없는 경우나 예외 상황을 더욱 세분화하여 안내 메시지를 개선할 수 있습니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 75-76: .script/createComponent.ts#L75-L76
Added lines #L75 - L76 were not covered by tests
[warning] 78-79: .script/createComponent.ts#L78-L79
Added lines #L78 - L79 were not covered by tests
[warning] 81-89: .script/createComponent.ts#L81-L89
Added lines #L81 - L89 were not covered by tests
[warning] 91-91: .script/createComponent.ts#L91
Added line #L91 was not covered by tests
[warning] 93-93: .script/createComponent.ts#L93
Added line #L93 was not covered by tests
[warning] 95-96: .script/createComponent.ts#L95-L96
Added lines #L95 - L96 were not covered by tests
[warning] 98-102: .script/createComponent.ts#L98-L102
Added lines #L98 - L102 were not covered by tests
[warning] 104-108: .script/createComponent.ts#L104-L108
Added lines #L104 - L108 were not covered by tests
[warning] 110-115: .script/createComponent.ts#L110-L115
Added lines #L110 - L115 were not covered by tests
[warning] 117-118: .script/createComponent.ts#L117-L118
Added lines #L117 - L118 were not covered by tests
132-138: CLI 초기화 및 커맨드 등록
cli 인스턴스를 만들어 CreateComponentCommand를 등록하는 구조가 깔끔합니다. CLI 실행 흐름도 직관적이어서 유지보수에 용이합니다.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 132-135: .script/createComponent.ts#L132-L135
Added lines #L132 - L135 were not covered by tests
[warning] 137-138: .script/createComponent.ts#L137-L138
Added lines #L137 - L138 were not covered by tests
pnpm-workspace.yaml (1)
14-15: 테스트 라이브러리 의존성 추가
@testing-library/jest-dom과 @testing-library/react가 추가되어, 컴포넌트 테스트에 필요한 주요 기능을 지원하게 되었습니다. 전체적인 CI/CD 파이프라인에서 추가 의존성도 문제없이 동작하는지 확인해 보시길 권장드립니다.
package.json (4)
7-8: 새로운 CLI 스크립트 등록
"create:component" 스크립트가 추가되어, tsx .script/createComponent.ts create 명령으로 빠르게 컴포넌트를 생성할 수 있습니다. 사용자 가이드를 README 등에 명시해 두면 다른 팀원들도 손쉽게 사용할 수 있습니다.
13-13: @clack/prompts 의존성 활용
@clack/prompts 라이브러리는 사용자 상호작용을 보다 편리하게 만들어 주므로, CLI 내에서 양질의 UX를 제공할 수 있을 것으로 기대됩니다.
25-25: clipanion 버전 확인
clipanion의 4.0.0-rc.x는 아직 정식 버전이 아니므로, 추후 정식 버전으로 업데이트하는 시점을 모니터링하는 것이 좋겠습니다.
29-29: tsx 의존성 추가
tsx는 TypeScript 실행에 편리하며, Node.js 환경 설정을 별도로 하지 않고도 빠르게 테스트할 수 있어 유용합니다.
.templates/component/package.json (2)
2-3: 패키지 이름과 설명이 적절히 구성되었습니다.
컴포넌트 생성 CLI의 템플릿으로 적합하게 구성되어 있으며, kebab-case 네이밍 규칙을 잘 따르고 있습니다.
31-32: 테스트 환경이 적절히 구성되었습니다.
React 컴포넌트 테스트에 필수적인 라이브러리들이 추가되었습니다:
@testing-library/jest-dom: DOM 관련 테스트 매처@testing-library/react: React 컴포넌트 테스트 유틸리티
카탈로그 기반 버전 관리를 사용하여 워크스페이스 전체의 일관성을 유지하고 있습니다.
다만, 테스트 환경 설정을 위해 vitest.setup.ts 파일에서 이러한 라이브러리들을 올바르게 import하고 설정했는지 확인이 필요합니다.
✅ Verification successful
테스트 환경이 완벽하게 구성되었습니다
모든 컴포넌트 패키지에서:
vitest.setup.ts파일에서@testing-library/jest-dom을 올바르게 import하고 있습니다vitest.config.ts에서setupFiles를 통해 설정 파일이 정확하게 연결되어 있습니다happy-dom환경이 설정되어 있어 DOM 테스트가 가능합니다- CSS 테스트 지원이 활성화되어 있습니다
- 글로벌 테스트 환경이 설정되어 있습니다
테스트 라이브러리 설치와 환경 구성이 모두 적절하게 이루어져 있어 React 컴포넌트 테스트를 즉시 시작할 수 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# vitest.setup.ts 파일에서 테스트 라이브러리 설정 확인
# vitest.setup.ts 파일 검색
fd -t f "vitest.setup.ts" -x cat {}
Length of output: 361
Script:
#!/bin/bash
# 테스트 설정 파일의 전체 경로와 내용을 확인
fd -t f "vitest.setup.ts" -x realpath {} -x echo "=== {} ===" -x cat {}
# vitest.config 파일도 확인
fd -t f "vitest.config" -x realpath {} -x echo "=== {} ===" -x cat {}
Length of output: 909
Script:
#!/bin/bash
# 테스트 설정 파일들의 위치와 내용 확인
echo "=== vitest.setup.ts 파일 목록 ==="
fd -t f "vitest.setup.ts"
echo -e "\n=== vitest.setup.ts 파일 내용 ==="
fd -t f "vitest.setup.ts" -x cat {}
echo -e "\n=== vitest.config 파일 목록 ==="
fd -t f "vitest.config"
echo -e "\n=== vitest.config 파일 내용 ==="
fd -t f "vitest.config" -x cat {}
Length of output: 4430
- Renamed .script folder to scripts
…ion and improved error handling - Added cancellation functionality to the component name prompt, allowing users to exit gracefully. - Updated error messages for better clarity and user experience. - Improved template directory access check with more descriptive error handling. - Enhanced success messages to include the generated component name for better feedback.
- Introduced a new method `validateTemplateDir` to streamline template directory validation.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
scripts/createComponent.ts (3)
30-36: 템플릿 디렉토리 유효성 검증 로직이 좋습니다.
다만, 사용자 에러 메시지(한국어)가 예외 처리 후에 한 번 더 로깅되거나 친절한 안내가 추가되면 UX가 향상될 수 있습니다.
38-80: 재귀적 디렉토리 복사 로직이 잘 구성되었습니다.
excludePatterns를 사용해 불필요한 디렉토리나 파일을 건너뛰는 방식이 효과적입니다.replaceAll을 통해 템플릿 내 문자열을 치환하는 로직 역시 직관적입니다.추가 제안:
- 대규모 템플릿을 복사할 때, 파일 수가 많으면 성능 이슈가 발생할 수 있으므로, 필요한 경우 스트리밍 또는 비동기 제어 흐름 최적화를 고려해 볼 수 있습니다.
82-130: 명령어 실행 흐름 및 사용자 인터랙션이 직관적입니다.
kebab-case검증으로 올바른 입력만 허용하고, 사용자가 취소했을 때 즉시 종료하는 로직이 편리합니다.- 로딩 스피너와 완료 메시지(
outro)로 사용자에게 진행 상황을 친절히 안내합니다.- 예외 처리 시 오류 메시지를 명확히 출력해 디버깅이 수월합니다.
추가 제안:
- 컴포넌트가 성공적으로 생성된 뒤에 자동으로 생성된 디렉토리 경로를 안내하거나, 후속 작업(예:
npm install)을 제안해주면 더 좋을 것 같습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
package.json(2 hunks)scripts/createComponent.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🔇 Additional comments (1)
scripts/createComponent.ts (1)
16-21: 함수명 변환 로직이 간결하고 명확합니다.
중복된 로직 없이 kebab-case 문자열을 PascalCase로 변환하는 과정이 직관적입니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.templates/component/package.json (1)
2-3: 패키지 이름 플레이스홀더를 더 명확하게 개선하세요현재 플레이스홀더인 "package-name"을 "component-name"으로 변경하는 것이 컴포넌트 생성 도구의 목적에 더 부합할 것 같습니다. 이는 템플릿의 용도를 더 명확하게 전달할 수 있습니다.
- "name": "@sipe-team/package-name", + "name": "@sipe-team/component-name",
📜 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 (3)
.templates/component/package.json(2 hunks)package.json(2 hunks)pnpm-workspace.yaml(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- pnpm-workspace.yaml
- package.json
🔇 Additional comments (1)
.templates/component/package.json (1)
31-32: 테스트 라이브러리 추가 승인
React 컴포넌트 테스트에 필수적인 @testing-library 패키지들이 적절하게 추가되었습니다. catalog 버전 관리 방식도 프로젝트의 다른 의존성들과 일관성 있게 적용되었습니다.
변경사항
.templates디렉토리를 기반으로 한 컴포넌트 템플릿 시스템 도입CLI 도구
@clack/prompts를 사용한 대화형 CLI 인터페이스 구현clipanion을 활용한 명령어 처리 시스템 구축템플릿 시스템
네이밍 규칙
my-component)사용 방법
시각자료
커맨드 실행
컴포넌트 생성 결과
kebab-case대로 입력하지 않은 경우
추가 논의사항
참고자료
Summary by CodeRabbit
새로운 기능
개발 도구
테스트