-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat/#39 changeset 세팅 및 npm 배포 CI/CD 설정 #67
Conversation
* feat: 반영되지 않은 패키지 변경사항 반영 * chore: 불필요한 gitkeep 파일 삭제 * feat: 컴포넌트 스토리 템플릿 추가 * feat: 컴포넌트 테스트 템플릿 추가 * feat: 컴포넌트 템플릿 추가 * feat: package.json 템플릿 추가 * feat: 리드미 템플릿 추가 * feat: tsconfig.json 템플릿 추가 * feat: tsup.config.ts 템플릿 추가 * rename: 테스트, 컴포넌트, 스토리 템플릿 폴더 구조 세팅 * feat: root devDependency에 tsup 설치 * docs: tsup config 파일 템플릿 추가 * docs: tsconfig 파일 템플릿 추가 * docs: 리드미 파일 템플릿 추가 * docs: 스토리 파일 템플릿 추가 * feat: root devDependency에 @testing-library/react 설치 * docs: 테스트 파일 템플릿 추가 * docs: 컴포넌트 파일 템플릿 추가 * docs: 컴포넌트 배럴 파일 템플릿 추가 * docs: 컴포넌트 package.json 템플릿 추가 * feat: root devDependency에 @turbo/gen 패키지 설치 * chore: 불필요한 파일 삭제 * feat: primitive 컴포넌트 base file generator 작동하도록 turbo gen 설정 * feat: primitive, themed 패키지 중 생성할 패키지 고를 수 있도록 기능 추가 * fix: tsconfig.json 템플릿 루트 tsconfig.json 경로 잘못 지정한 부분 수정 * fix: tsup.config.ts 템플릿 target es2020으로 수정 * chore: 테스트 파일 템플릿 수정 * chore: tsconfig.json 파일 템플릿 수정 * chore: 컴포넌트 파일 템플릿 수정 * chore: 컴포넌트 배럴 파일 템플릿 수정 * chore: 컴포넌트 스토리 파일 템플릿 수정 * chore: root tsconfig 설정 변경 * chore: 자잘한 오타 반영 * chore: package.json build 스크립트 수정 * chore: package.json peerDependency로 next 포함하도록 수정 * chore: 스토리북 예시 파일 복원 * chore: turbo gen prompts message 한글로 변경 * chore: component 템플릿 타입 추론되도록 수정 * chore: component package.json 템플릿 peerDependency에서 next 삭제 * chore: turbo gen generator name, description message 한글로 변경 * chore: package.json 템플릿 name primitive, themed 구분하도록 수정 * chore: package.json 템플릿 name 포맷 변경 * feat: 테스트 코드 템플릿 테스트 케이스 추가 * chore: props 타입 컨벤션 변경에 따른 변경사항 적용 * chore: prettierignore 목록에 turbo 폴더 추가 * feat: pnpm lock 파일 변경사항 반영 * feat: root format 스크립트 추가 * fix: 사라진 prettier 설정 수정 * feat: plop format 기능 추가 * feat: plop kebabCase helper 추가 * chore: plop 생성 파일명 kebabCase로 변경 * feat: root에 turbo gen 스크립트 추가 * feat: prettierignore에 pnpm-lock 파일 추가 * chore: eol 이슈 해결
* chore: playwright 설치 * feat: playwright e2e 테스트 (시각적 회귀 테스트, 웹접근성 테스트) * chore: playwright ci 테스트 * chore: ci 환경에서 의존성 설치 방식 변경 * chore: 워크플로우 ci환경에 playwright 브라우저 설치 * chore: 워크플로우 playwright ci 옵션 추가 * chore: playwright npx로 실행 명령어 변경 * chore: playwright --project 옵션 제거 * chore: 명령어 복구 * chore: playwright 환경 수정 * chore: playwright worker 옵션 변경 * chore: log 추가 * chore: 스토리북 빌드 방식으로 실행 * chore: button 스냅샷 업로드 * chore: playwright 설정 복원 * chore: pr comment 추가 * chore: fetch-depth 추가 * chore: 스냅샷 파일 수정 * chore: testDir path 설정 * chore: playwright 옵션 변경 * chore: 불필요한 테스트 삭제 * chore: checkout version 업데이트 * chore: 테스트 코드 변경 * chore: log 삭제 * chore: error 로그 추가 * chore: 로그 추가 * chore: --update-snapshots 옵션 추가 * chore: 폴더 확인 로직 수정 * chore: yml indent 수정 * chore: 디렉토리 확인 수정 * chore: update snapshot 옵션 삭제 * chore: 시각적 변경 테스트 * chore: update snapshot * chore: 디렉토리 구조 확인 * chore: 아티팩트 업로드 * chore: bold 처리 삭제 * chore: button font arial로 변경 * chore: font 업데이트 이후 actual 변경 * chore: font-weight 700 to bold * chore: web font로 변경 * chore: 폰트 로딩 상태 확인 * chore: roboto로 변경 * chore: font-weight 삭제 * chore: ci 환경에 폰트 설치 * chore: 변경되는 스냅샷 확인 * chore: plarywright 스크립트 변경 * chore: storybook 실행 명령어 수정 * chore: process 변경 * chore: local vrt 삭제 * chore: label flow 수정 * chore: .playwright의 하위에 있는 폴더만 pr에 반영되도록 수정 * Update VRT snapshots in .playwright folder * chore: button에 불필요한 텍스트 삭제 * Update VRT snapshots in .playwright folder * chore: Button 라인 분리 * chore: 실패시 아티팩트 업로드하도록 수정 * chore: 성공 comment 메시지 수정 * chore: chromatic action version 수정 * chore: pnpm action version 변경 * chore: vrt test에 permission 추가 * chore: 토큰 체커 --------- Co-authored-by: GitHub Action <action@github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨어요~
.github/workflows/release.yml
Outdated
- name: pnpm 설치 | ||
run: npm i pnpm@latest -g |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
latest 버전이 아니라 저희가 package.json에 지정한 버전이어야 할 거 같습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
action 파일 최적화 pr 참고해서 반영했습니다!
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=69 🐱 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굿굿
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (2)
.husky/pre-commit (1)
1-7
: 가독성 개선을 위한 제안스크립트의 가독성을 높이기 위해 명령어 사이에 구분선을 추가하고, 에러 메시지를 영어로 변경하는 것이 좋습니다.
다음과 같이 수정해 보세요:
pnpm lint +if [ $? -ne 0 ]; then + echo "Linting failed" + exit 1 +fi + +echo "Running tests..." pnpm test if [ $? -ne 0 ]; then - echo "테스트 실패" + echo "Tests failed" exit 1 fiscripts/set-env.sh (1)
8-8
: 오류 메시지를 더 구체적으로 개선할 수 있습니다.현재 오류 메시지는 "환경 변수 파일이 존재하지 않습니다."로 되어 있습니다. 이를 더 구체적으로 만들어 문제 해결에 도움이 되도록 할 수 있습니다.
다음과 같이 변경하는 것을 제안합니다:
- echo "환경 변수 파일이 존재하지 않습니다." + echo "오류: .github/environments/versions.env 파일을 찾을 수 없습니다. 이 파일이 존재하고 올바른 위치에 있는지 확인해주세요."이렇게 하면 사용자가 어떤 파일이 누락되었는지, 그리고 어디서 찾아야 하는지 더 명확하게 알 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
- .github/workflows/label-vrt-update.yml (1 hunks)
- .husky/pre-commit (1 hunks)
- .husky/pre-push (1 hunks)
- jest.config.ts (1 hunks)
- scripts/set-env.sh (1 hunks)
✅ Files skipped from review due to trivial changes (2)
- .husky/pre-push
- jest.config.ts
🧰 Additional context used
🪛 actionlint
.github/workflows/label-vrt-update.yml
78-78: "github.head_ref" is potentially untrusted. avoid using it directly in inline scripts. instead, pass it through an environment variable. see https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions for more details
(expression)
🔇 Additional comments (3)
scripts/set-env.sh (1)
1-10
: 구현이 잘 되었습니다. 이전 리뷰 의견이 반영되었습니다.스크립트가 GitHub Actions 워크플로우에 필요한 환경 변수를 설정하는 역할을 잘 수행하고 있습니다. 이전 리뷰에서 제안된 대로 4번 라인의 export 명령어에 따옴표를 추가하여 단어 분할 문제를 방지했습니다. 파일 존재 여부 확인, 변수 내보내기, 그리고 오류 처리가 모두 적절히 구현되어 있습니다.
.github/workflows/label-vrt-update.yml (2)
1-10
: 워크플로우 트리거 및 작업 설정이 적절합니다.워크플로우 이름, 트리거 조건, 그리고 작업 설정이 잘 구성되어 있습니다. 'VRT' 레이블이 추가될 때만 실행되도록 하여 불필요한 실행을 방지하고 있습니다.
85-107
: PR 코멘트 작성 및 레이블 제거 단계가 적절합니다.PR에 스냅샷 업데이트 완료 코멘트를 추가하고 'VRT' 레이블을 제거하는 단계가 잘 구현되어 있습니다. 이는 PR 리뷰어에게 유용한 피드백을 제공하고 워크플로우의 완료를 명확히 표시합니다.
.husky/pre-commit
Outdated
pnpm lint | ||
|
||
pnpm test | ||
if [ $? -ne 0 ]; then | ||
echo "테스트 실패" | ||
exit 1 | ||
fi |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
set -e 옵션 추가 고려
스크립트의 안정성을 높이기 위해 set -e
옵션을 추가하는 것이 좋습니다. 이 옵션은 명령어 실행 중 오류가 발생하면 즉시 스크립트를 종료합니다.
스크립트 시작 부분에 다음 줄을 추가하세요:
+#!/bin/sh
+set -e
+
pnpm lint
pnpm test
if [ $? -ne 0 ]; then
echo "테스트 실패"
exit 1
fi
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
pnpm lint | |
pnpm test | |
if [ $? -ne 0 ]; then | |
echo "테스트 실패" | |
exit 1 | |
fi | |
#!/bin/sh | |
set -e | |
pnpm lint | |
pnpm test | |
if [ $? -ne 0 ]; then | |
echo "테스트 실패" | |
exit 1 | |
fi |
.husky/pre-commit
Outdated
@@ -0,0 +1,7 @@ | |||
pnpm lint |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lint 명령어의 결과를 확인하세요
현재 스크립트는 lint 명령어의 실행 결과를 확인하지 않고 있습니다. lint 오류가 있어도 커밋이 진행될 수 있습니다.
다음과 같이 lint 명령어의 결과도 확인하는 것이 좋습니다:
-pnpm lint
+pnpm lint
+if [ $? -ne 0 ]; then
+ echo "린트 실패"
+ exit 1
+fi
Committable suggestion was skipped due to low confidence.
- name: 환경 변수 설정 | ||
id: set-env | ||
run: | | ||
chmod +x ./scripts/set-env.sh | ||
./scripts/set-env.sh | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
환경 설정 및 설치 단계의 투명성 개선 제안
현재 환경 변수 설정과 의존성 설치를 위해 별도의 셸 스크립트를 사용하고 있습니다. 워크플로우의 가독성과 유지보수성을 높이기 위해 이러한 단계를 인라인 명령으로 변경하는 것을 고려해보세요.
예를 들어:
- name: 환경 변수 설정
run: |
echo "NODE_VERSION=16" >> $GITHUB_ENV
echo "PNPM_VERSION=6.32.3" >> $GITHUB_ENV
- name: 의존성 설치
run: pnpm install
- name: playwright 설치
run: pnpm exec playwright install --with-deps
이렇게 하면 워크플로우 파일 내에서 모든 단계를 직접 확인할 수 있어 디버깅과 수정이 더 쉬워집니다.
Also applies to: 51-59
run: | | ||
npx serve -l 6006 packages/primitive/storybook-static & | ||
echo $! > .storybook-pid |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Storybook 실행 시 pnpm dlx
사용 제안
현재 Storybook을 실행하기 위해 npx serve
를 사용하고 있습니다. 프로젝트의 패키지 관리자인 pnpm과의 일관성을 위해 pnpm dlx serve
를 사용하는 것이 좋습니다.
다음과 같이 수정해 보세요:
- name: 스토리북 실행
run: |
pnpm dlx serve -l 6006 packages/primitive/storybook-static &
echo $! > .storybook-pid
이렇게 하면 프로젝트 전체에서 일관된 패키지 관리 방식을 유지할 수 있습니다.
- name: 변경된 스냅샷 커밋 및 푸시 | ||
run: | | ||
git config --local user.email "action@github.com" | ||
git config --local user.name "GitHub Action" | ||
git add .playwright | ||
git diff --staged --quiet || git commit -m "Update VRT snapshots in .playwright folder" | ||
git push origin HEAD:${{ github.head_ref }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
보안을 위한 github.head_ref
사용 방식 개선 필요
현재 스크립트에서 github.head_ref
를 직접 사용하고 있습니다. 이는 잠재적인 보안 위험이 될 수 있습니다. 대신 환경 변수를 통해 이 값을 전달하는 것이 좋습니다.
다음과 같이 수정해 보세요:
- name: 변경된 스냅샷 커밋 및 푸시
env:
HEAD_REF: ${{ github.head_ref }}
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add .playwright
git diff --staged --quiet || git commit -m "Update VRT snapshots in .playwright folder"
git push origin HEAD:$HEAD_REF
이렇게 하면 github.head_ref
의 값을 환경 변수로 전달하여 보안을 강화할 수 있습니다.
🧰 Tools
🪛 actionlint
78-78: "github.head_ref" is potentially untrusted. avoid using it directly in inline scripts. instead, pass it through an environment variable. see https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions for more details
(expression)
VRT 테스트 실패VRT 테스트가 실패했습니다. 자세한 내용은 첨부된 테스트 결과와 diff 이미지를 확인해주세요. 스냅샷 업데이트가 필요한 경우, PR에 "VRT" 레이블을 추가해주세요. |
VRT 테스트 실패VRT 테스트가 실패했습니다. 자세한 내용은 첨부된 테스트 결과와 diff 이미지를 확인해주세요. 스냅샷 업데이트가 필요한 경우, PR에 "VRT" 레이블을 추가해주세요. |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
* chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * c�hore/#25 husky, lint-staged 세팅 (#44) * chore: husky 라이브러리 설치 및 script 수정 * feat: pre-commit, pre-push 설정 * fix: gitignore에 .eslintcache 추가 * chore: lint-staged 적용 * chore: EOL 반영 * fix: 잘못된 lint-staged 위치 수정 * chore: prettier script 수정 및 husky 설정 수정 * chore: lint stage file로 분리 * feat/#54 패키지 매니저 버전 강제하도록 설정 (#57) * chore: settings.json prettier requireConfig 설정 추가 * feat: pnpm 패키지 매니저 버전 강제 설정 추가 * feat: pnpm lock 파일 변경사항 반영 * chore: vscode settings 변경 사항 삭제 * fix: eol 이슈 해결 * chore: pnpm lock 파일 변경 사항 반영 * chore/#37 jest 설정 (#43) * chore: jest 설치 preset으로 ts-jest 적용 * chore: button에 대한 예시 테스트 코드 추가 * chore: ts-node 의존성 설치 * chore: jest 설정 파일에 주석 제거 * chore: jest 설정 코멘트 삭제 * chore: Button 테스트 description 한글로 번역 * chore: 의존성 업데이트 * chore: commit 시 jest 테스트 실행 * feat/#12 Primitive UI codegen 세팅 (#42) * feat: 반영되지 않은 패키지 변경사항 반영 * chore: 불필요한 gitkeep 파일 삭제 * feat: 컴포넌트 스토리 템플릿 추가 * feat: 컴포넌트 테스트 템플릿 추가 * feat: 컴포넌트 템플릿 추가 * feat: package.json 템플릿 추가 * feat: 리드미 템플릿 추가 * feat: tsconfig.json 템플릿 추가 * feat: tsup.config.ts 템플릿 추가 * rename: 테스트, 컴포넌트, 스토리 템플릿 폴더 구조 세팅 * feat: root devDependency에 tsup 설치 * docs: tsup config 파일 템플릿 추가 * docs: tsconfig 파일 템플릿 추가 * docs: 리드미 파일 템플릿 추가 * docs: 스토리 파일 템플릿 추가 * feat: root devDependency에 @testing-library/react 설치 * docs: 테스트 파일 템플릿 추가 * docs: 컴포넌트 파일 템플릿 추가 * docs: 컴포넌트 배럴 파일 템플릿 추가 * docs: 컴포넌트 package.json 템플릿 추가 * feat: root devDependency에 @turbo/gen 패키지 설치 * chore: 불필요한 파일 삭제 * feat: primitive 컴포넌트 base file generator 작동하도록 turbo gen 설정 * feat: primitive, themed 패키지 중 생성할 패키지 고를 수 있도록 기능 추가 * fix: tsconfig.json 템플릿 루트 tsconfig.json 경로 잘못 지정한 부분 수정 * fix: tsup.config.ts 템플릿 target es2020으로 수정 * chore: 테스트 파일 템플릿 수정 * chore: tsconfig.json 파일 템플릿 수정 * chore: 컴포넌트 파일 템플릿 수정 * chore: 컴포넌트 배럴 파일 템플릿 수정 * chore: 컴포넌트 스토리 파일 템플릿 수정 * chore: root tsconfig 설정 변경 * chore: 자잘한 오타 반영 * chore: package.json build 스크립트 수정 * chore: package.json peerDependency로 next 포함하도록 수정 * chore: 스토리북 예시 파일 복원 * chore: turbo gen prompts message 한글로 변경 * chore: component 템플릿 타입 추론되도록 수정 * chore: component package.json 템플릿 peerDependency에서 next 삭제 * chore: turbo gen generator name, description message 한글로 변경 * chore: package.json 템플릿 name primitive, themed 구분하도록 수정 * chore: package.json 템플릿 name 포맷 변경 * feat: 테스트 코드 템플릿 테스트 케이스 추가 * chore: props 타입 컨벤션 변경에 따른 변경사항 적용 * chore: prettierignore 목록에 turbo 폴더 추가 * feat: pnpm lock 파일 변경사항 반영 * feat: root format 스크립트 추가 * fix: 사라진 prettier 설정 수정 * feat: plop format 기능 추가 * feat: plop kebabCase helper 추가 * chore: plop 생성 파일명 kebabCase로 변경 * feat: root에 turbo gen 스크립트 추가 * feat: prettierignore에 pnpm-lock 파일 추가 * chore: eol 이슈 해결 * chore: release action node 버전 변경 * chore/#38 playwright 테스트 설정 (#61) * chore: playwright 설치 * feat: playwright e2e 테스트 (시각적 회귀 테스트, 웹접근성 테스트) * chore: playwright ci 테스트 * chore: ci 환경에서 의존성 설치 방식 변경 * chore: 워크플로우 ci환경에 playwright 브라우저 설치 * chore: 워크플로우 playwright ci 옵션 추가 * chore: playwright npx로 실행 명령어 변경 * chore: playwright --project 옵션 제거 * chore: 명령어 복구 * chore: playwright 환경 수정 * chore: playwright worker 옵션 변경 * chore: log 추가 * chore: 스토리북 빌드 방식으로 실행 * chore: button 스냅샷 업로드 * chore: playwright 설정 복원 * chore: pr comment 추가 * chore: fetch-depth 추가 * chore: 스냅샷 파일 수정 * chore: testDir path 설정 * chore: playwright 옵션 변경 * chore: 불필요한 테스트 삭제 * chore: checkout version 업데이트 * chore: 테스트 코드 변경 * chore: log 삭제 * chore: error 로그 추가 * chore: 로그 추가 * chore: --update-snapshots 옵션 추가 * chore: 폴더 확인 로직 수정 * chore: yml indent 수정 * chore: 디렉토리 확인 수정 * chore: update snapshot 옵션 삭제 * chore: 시각적 변경 테스트 * chore: update snapshot * chore: 디렉토리 구조 확인 * chore: 아티팩트 업로드 * chore: bold 처리 삭제 * chore: button font arial로 변경 * chore: font 업데이트 이후 actual 변경 * chore: font-weight 700 to bold * chore: web font로 변경 * chore: 폰트 로딩 상태 확인 * chore: roboto로 변경 * chore: font-weight 삭제 * chore: ci 환경에 폰트 설치 * chore: 변경되는 스냅샷 확인 * chore: plarywright 스크립트 변경 * chore: storybook 실행 명령어 수정 * chore: process 변경 * chore: local vrt 삭제 * chore: label flow 수정 * chore: .playwright의 하위에 있는 폴더만 pr에 반영되도록 수정 * Update VRT snapshots in .playwright folder * chore: button에 불필요한 텍스트 삭제 * Update VRT snapshots in .playwright folder * chore: Button 라인 분리 * chore: 실패시 아티팩트 업로드하도록 수정 * chore: 성공 comment 메시지 수정 * chore: chromatic action version 수정 * chore: pnpm action version 변경 * chore: vrt test에 permission 추가 * chore: 토큰 체커 --------- Co-authored-by: GitHub Action <action@github.com> * feat/#51 공통 prettier 설정 불러오도록 설정 변경 (#56) * chore/#46 D-day Labeler workflow 추가 (#66) * feat: D-day Labeler workflow 추가 * chore: transfer action script personal repo to organization repo * chore: pr-dday-labeler action 버전 1.0.3으로 지정 * chore: PR D-day Labeler schedule 시간 한국 00:00으로 변경 * fix/#47 빌드 버그 해결 (#64) * fix: tsconfig 빌드 에러 해결 (feat/#41) * fix: tsconfig 및 eslint 설정 오류 수정 * fix: tsconfig 범위 수정 * fix: tsconfig 빌드 에러 해결 (feat/#41) * fix: tsconfig 및 eslint 설정 오류 수정 * fix: tsconfig 범위 수정 * chore/#65 jest.setup.ts 설정 (#72) * chore: jest.setup.ts와 관련 의존성 설정 * feat: button rtl 테스트 추가 * chore: @testing-library/jest-dom를 devDependencies로 수정 * chore: local github action test용 secret 파일 gitignore에 추가 (#68) * feat/#48 Divider 컴포넌트 개발 (#73) * chore: component 이슈 템플릿 생성 * chore: component 이슈 템플릿 생성 * chore: init @testing-library/jest-dom * chore: generate divider component * chore: prettier 적용 * feat: Divider 컴포넌트 구현 * feat: Divider 컴포넌트 스토리북 생성 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 labels 추가 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 내용 수정 * feat: orientation에 따른 태그 변경 및 displayName 수정 * docs: default에 있던 style 삭제 * test: orientation prop에 따른 테스트 코드 추가 * docs: Update Divider README.md * fix: 오타 수정 * chore: Divider Default 이름 변경 및 args 제거 * fix: JSX 형식으로 변경 및 ref 타입 수정 * docs: Divider description 추가 * refactor: 변수명 변경 및 unknown 제거 * chore: pnpm install * fix/#74 템플릿 수정 (#79) * fix: package.json version, author, homepage 추가 * chore: prettier ignore 추가 * chore: pnpm install * fix: 오타 및 이름 수정 * fix: root pakcage.json name 수정 * chore: template props 수정 * �docs/#75 컴포넌트 pr 템플릿 생성 (#80) * rename: pull request 파일 위치 이동 * chore: prettier ignore 추가 * docs: component용 pr 템플릿 작성 * rename: template 파일명 변경 * chore: pnpm install * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * test/#84 Divider vrt 테스트 추가 (#91) * test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 <ghdtjgus76@naver.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * chore: release action node 버전 변경 * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * chore: action 파일 최적화 반영 * chore: name 수정 * chore/#93 husky 오류 해결 (#112) * fix: pre-commit 오류 일으키는 코드 제거 * fix: jest testMatch 수정 * refactor: husky 구버전 관련 코드 pre push에서 제거 * chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * chore: release action node 버전 변경 * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * chore: changeset 설치 * chore: publish 명령어 생성 * chore: changeset github action 생성 * chore: action 파일 최적화 반영 * chore: name 수정 * chore: 코더레빗 코드리뷰 반영 * fix: script " 삭제 * fix: lock 파일 수정 --------- Co-authored-by: Gwang Soo <114225974+gs0428@users.noreply.github.com> Co-authored-by: 홍서현 <ghdtjgus76@naver.com> Co-authored-by: MJ <80272444+minai621@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
요약 (Summary)
효율적인 버저닝을 위해 changeset을 적용하고 자동으로 npm에 배포되도록 하기 위해 github action 파일을 작성하였습니다.
참고 action
배경 (Background)
changesets를 적용하여 다음과 같은 목적을 달성하고자 합니다.
효율적인 패키지 관리:
Changesets는 다중 패키지(Monorepo) 환경에서 패키지의 버전을 관리하고 배포하는 과정을 자동화합니다. 각 패키지의 변경 사항을 쉽게 추적하고, 필요한 경우에만 해당 패키지의 버전을 올리거나 배포할 수 있습니다.
자동 버전 관리:
커밋 메시지나 changeset 파일을 통해 패키지의 변경 사항을 기록하고, 이를 기반으로 자동으로 새로운 버전을 생성할 수 있습니다. 이를 통해 인간의 실수를 줄이고, 일관된 버전 관리가 가능합니다.
변경사항 기록:
Changesets는 패키지에 대한 변경 사항을 기록하고, 이를 자동으로 CHANGELOG 파일에 반영합니다. 개발자는 변경사항을 손쉽게 추적하고, 배포할 때 어떤 변화가 있었는지 명확하게 파악할 수 있습니다.
자동화된 배포:
Changesets는 GitHub Actions와 같은 CI/CD 도구와 통합하여, 패키지 변경 사항이 있을 때 자동으로 새로운 버전을 배포할 수 있습니다. 이로 인해 배포 과정이 간소화되고, 사람이 개입할 필요 없이 배포 프로세스를 자동화할 수 있습니다.
다중 패키지 지원:
모노레포(Monorepo) 구조에서 여러 패키지를 관리하는 경우, Changesets는 각 패키지별로 버전을 관리하고, 서로 의존성을 고려하여 올바르게 버전을 올릴 수 있도록 도와줍니다.
팀 협업 지원:
팀 내에서 여러 개발자가 작업할 때, 각각의 변경 사항을 changeset 파일로 남겨 관리하기 때문에, 충돌이나 실수를 줄이고 협업을 더 원활하게 진행할 수 있습니다.
목표 (Goals)
배포가 필요한 변경사항의 경우 develop 브랜치가 아닌 main 브랜치에 병합이 이루어질 것으로 예상하였습니다.
따라서, main 브랜치에 push가 발생할 경우, 이번에 작성한
release
액션이 트리거되어 버전의 업데이트 및 npm 배포가 발생할 예정입니다.이외 고려 사항들 (Other Considerations)
해당 action 파일이 잘 동작하는지 확인하기 위해 github action을 로컬 환경에서 테스트해본 결과(#49 이슈)
Error: authentication required
라는 에러가 발생하였습니다.관련 에러에 대한 정보가 별로 없어 해당 에러가 action 파일 자체의 문제인지 local 환경의 문제인지 확인하기 어려워 직접 PR 날려서 확인해보고자 합니다.
관련 이슈
Summary by CodeRabbit
Summary by CodeRabbit
New Features
.changeset/README.md
추가:@changesets/cli
도구에 대한 가이드 제공.big-eggs-crash.md
추가: 변경 사항 문서화 연습을 위한 내용 포함.VRT 스냅샷 업데이트
추가: 시각적 회귀 테스트 스냅샷 자동 업데이트.Divider
컴포넌트 추가: 콘텐츠 섹션을 시각적으로 구분하는 기능 제공.Divider
컴포넌트에 대한 문서화 및 테스트 파일 추가.PR D-day Labeler
추가: PR 자동 라벨링 기능 제공.pr-vrt.yml
추가: PR에 대한 시각적 회귀 테스트 자동화.install-dependencies.sh
및install-playwright.sh
추가: 의존성 및 Playwright 설치 관리.Chores
package.json
업데이트: 새로운 개발 의존성 추가 및 불필요한 항목 제거..gitignore
파일 업데이트: 테스트 결과 및 Playwright 관련 디렉토리 추가.