feat/#39 changeset 세팅 및 npm 배포 CI/CD 설정 #67
Conversation
ShinYoung-Kim
requested review from
minai621,
gs0428 and
ghdtjgus76
as code owners
* 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>
.github/workflows/release.yml
Outdated
| - name: pnpm 설치 | ||
| run: npm i pnpm@latest -g |
There was a problem hiding this comment.
latest 버전이 아니라 저희가 package.json에 지정한 버전이어야 할 거 같습니다!
There was a problem hiding this comment.
action 파일 최적화 pr 참고해서 반영했습니다!
github-actions
bot
added
D-2
* 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
Walkthrough이 변경 사항은 새로운 파일을 추가하여 Changes
Possibly related PRs
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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (5)
- .changeset/README.md (1 hunks)
- .changeset/big-eggs-crash.md (1 hunks)
- .changeset/config.json (1 hunks)
- .github/workflows/release.yml (1 hunks)
- package.json (2 hunks)
Files skipped from review due to trivial changes (3)
- .changeset/README.md
- .changeset/big-eggs-crash.md
- .changeset/config.json
Additional context used
actionlint
.github/workflows/release.yml
33-33: shellcheck reported issue in this script: SC2086:info:1:27: Double quote to prevent globbing and word splitting
(shellcheck)
Additional comments not posted (9)
package.json (1)
11-11: 변경 사항이 PR 목표와 일치합니다.
@changesets/cli를 개발 의존성으로 추가한 것은 Changesets를 사용하여 버전 관리 및 배포를 자동화하려는 PR의 목표와 잘 부합합니다. 이는 원하는 기능을 구현하는 데 필요한 유효한 개발 의존성입니다..github/workflows/release.yml (8)
16-19: LGTM!레포지토리를 체크아웃하는 단계가 올바르게 구현되었습니다.
fetch-depth를 0으로 설정하여 모든 브랜치와 태그의 전체 히스토리를 가져오도록 한 것이 좋습니다.
21-24: LGTM!Node.js 20 버전을 설정하는 단계가 올바르게 구현되었습니다.
26-27: @ghdtjgus76 님의 이전 리뷰 코멘트가 여전히 유효해 보입니다:latest 버전이 아니라 저희가 package.json에 지정한 버전이어야 할 거 같습니다!
특정 버전을 사용하는 것이 좋겠습니다.
29-30: LGTM!npm 토큰을 사용하여
.npmrc파일을 생성하는 단계가 올바르게 구현되었습니다.
35-36: LGTM!pnpm을 사용하여 의존성을 설치하는 단계가 올바르게 구현되었습니다.
38-47: @ghdtjgus76 님의 이전 리뷰 코멘트가 여전히 유효해 보입니다:title: "[Chore] version packages"
commit: "chore: version packages"changeset 동작할 때 봇이 PR을 올려줄 때 위와 같이 PR 타이틀과 커밋 메시지도 지정할 수 있는데 그 부분도 저희 컨벤션에 맞게 지정해주면 좋을 거 같습니다!
PR 제목과 커밋 메시지를 팀 컨벤션에 맞게 업데이트하는 것이 좋겠습니다.
46-46: LGTM!
GITHUB_TOKEN시크릿을 환경 변수로 설정하는 단계가 올바르게 구현되었습니다.
47-47: LGTM!
NPM_TOKEN시크릿을 환경 변수로 설정하는 단계가 올바르게 구현되었습니다.
.github/workflows/release.yml
Outdated
| - name: pnpm 설정 | ||
| run: pnpm config set store-dir $PNPM_CACHE_FOLDER |
There was a problem hiding this comment.
변수를 따옴표로 감싸주세요.
shellcheck가 다음과 같은 이슈를 발견했습니다:
SC2086:info:1:27: Double quote to prevent globbing and word splitting
변수 주위에 따옴표를 추가하여 글로빙과 단어 분할을 방지해야 합니다.
다음과 같이 변경하는 것이 좋겠습니다:
- run: pnpm config set store-dir $PNPM_CACHE_FOLDER
+ run: pnpm config set store-dir "$PNPM_CACHE_FOLDER" 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.
| - name: pnpm 설정 | |
| run: pnpm config set store-dir $PNPM_CACHE_FOLDER | |
| - name: pnpm 설정 | |
| run: pnpm config set store-dir "$PNPM_CACHE_FOLDER" |
Tools
actionlint
33-33: shellcheck reported issue in this script: SC2086:info:1:27: Double quote to prevent globbing and word splitting
(shellcheck)
* 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>
넵! 워크 플로우 수정 후 다시 리뷰 요청드릴게요! 그리고 코더래빗 커멘트 보고 다른 yml 파일들 찾아봤는데 저랑 동일한 형태로 작성해놨더라고요! 그래서 이 버전이 제대로 된 버전이라고 생각했는데 추가로 yml 문법 찾아봐서 제대로 된 방법인지 검증해볼게요! |
* 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>
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=68 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (3)
scripts/install-dependencies.sh (1)
1-8: 잘 작성된 스크립트입니다!이 스크립트는 프로젝트 의존성 설치를 최적화하고 필요한 경우에만 설치 프로세스를 실행하여 효율성을 높입니다. 또한
--frozen-lockfile플래그를 사용하여 설치된 의존성이 lockfile에 지정된 버전과 일치하도록 합니다.개선을 위한 추가 제안 사항:
- 스크립트 시작 부분에 주석을 추가하여 스크립트의 목적과 동작을 설명하는 것이 좋습니다.
- 에러 처리를 위해
set -e를 추가하여 스크립트 실행 중 오류가 발생하면 즉시 종료되도록 할 수 있습니다.pnpm명령어 실행 전에pnpm패키지 관리자가 설치되어 있는지 확인하는 로직을 추가하면 더욱 안정적일 것 같습니다.packages/primitive/components/divider/stories/divider.stories.tsx (1)
5-40: Storybook 메타데이터가 잘 구성되었습니다!
Divider컴포넌트의 제목, 부제목, 태그, 매개변수 및 argTypes가 올바르게 정의되었습니다.componentSubtitle매개변수는 한국어로 컴포넌트의 목적을 명확하게 설명합니다.orientationargType을 통해 사용자는 가로 및 세로 구분선 방향을 선택할 수 있습니다.Horizontal스토리는 기본 구성을 나타냅니다.Vertical스토리에는 세로 구분선에 대한 특정 스타일 속성이 포함됩니다.추가 제안사항:
Vertical스토리의 스타일 속성을 테마와 일치하도록 조정하는 것이 좋습니다.- 다양한 사용 사례를 보여주기 위해 더 많은 스토리를 추가하는 것을 고려해 보세요.
e2e/test-utils/storybook.ts (1)
21-23: process.env.CI의 값 검사 방식 개선 필요
process.env.CI의 값은 문자열이므로, 현재 조건문에서는 값이 정의되어 있으면 참으로 평가됩니다. 그러나 CI 환경을 정확히 감지하기 위해서는'true'와 같은 특정 값과 비교하거나, boolean으로 변환하여 사용하는 것이 좋습니다.적용 가능한 수정 사항:
const url = process.env.CI === 'true' ? new URL(`${STORYBOOK_URL}/iframe`) : new URL(`${STORYBOOK_URL}/iframe.html`);또는
Boolean(process.env.CI)를 사용하여 boolean으로 변환할 수 있습니다.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (40)
- .github/ISSUE_TEMPLATE/component-template.md (1 hunks)
- .github/PULL_REQUEST_TEMPLATE/component_template.md (1 hunks)
- .github/environments/versions.env (1 hunks)
- .github/workflows/chromatic_auto_deploy.yml (1 hunks)
- .github/workflows/label-vrt-update.yml (1 hunks)
- .github/workflows/pr-dday-labeler.yml (1 hunks)
- .github/workflows/pr-vrt.yml (1 hunks)
- .gitignore (1 hunks)
- .playwright/results.json (1 hunks)
- .playwright/results/.last-run.json (1 hunks)
- .prettierignore (1 hunks)
- .vscode/settings.json (1 hunks)
- e2e/components/primitive/divider.test.ts (1 hunks)
- e2e/test-utils/a11y.ts (1 hunks)
- e2e/test-utils/storybook.ts (1 hunks)
- jest.config.ts (1 hunks)
- jest.setup.ts (1 hunks)
- package.json (3 hunks)
- packages/plugins/boilerplate/tsconfig.json (1 hunks)
- packages/plugins/boilerplate/vite.config.ts (1 hunks)
- packages/primitive/components/Button.stories.ts (0 hunks)
- packages/primitive/components/Button.tsx (0 hunks)
- packages/primitive/components/divider/README.md (1 hunks)
- packages/primitive/components/divider/tests/divider.test.tsx (1 hunks)
- packages/primitive/components/divider/package.json (1 hunks)
- packages/primitive/components/divider/src/divider.tsx (1 hunks)
- packages/primitive/components/divider/src/index.ts (1 hunks)
- packages/primitive/components/divider/stories/divider.stories.tsx (1 hunks)
- packages/primitive/components/divider/tsconfig.json (1 hunks)
- packages/primitive/components/divider/tsup.config.ts (1 hunks)
- playwright.config.ts (1 hunks)
- scripts/install-dependencies.sh (1 hunks)
- scripts/install-playwright.sh (1 hunks)
- scripts/set-env.sh (1 hunks)
- tsconfig.json (1 hunks)
- turbo/generators/config.ts (1 hunks)
- turbo/generators/templates/component/README.md.hbs (1 hunks)
- turbo/generators/templates/component/package.json.hbs (1 hunks)
- turbo/generators/templates/component/src/{{kebabCase componentName}}.tsx.hbs (1 hunks)
- turbo/generators/templates/e2e/test.ts.hbs (1 hunks)
Files not reviewed due to no reviewable changes (2)
- packages/primitive/components/Button.stories.ts
- packages/primitive/components/Button.tsx
Files skipped from review due to trivial changes (14)
- .github/environments/versions.env
- .gitignore
- .playwright/results.json
- .playwright/results/.last-run.json
- .prettierignore
- .vscode/settings.json
- packages/plugins/boilerplate/vite.config.ts
- packages/primitive/components/divider/README.md
- packages/primitive/components/divider/package.json
- packages/primitive/components/divider/tsconfig.json
- packages/primitive/components/divider/tsup.config.ts
- scripts/install-playwright.sh
- turbo/generators/templates/component/README.md.hbs
- turbo/generators/templates/component/package.json.hbs
Additional context used
actionlint
.github/workflows/label-vrt-update.yml
75-75: shellcheck reported issue in this script: SC2046:warning:1:6: Quote this to prevent word splitting
(shellcheck)
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)
.github/workflows/pr-vrt.yml
73-73: shellcheck reported issue in this script: SC2086:info:2:19: Double quote to prevent globbing and word splitting
(shellcheck)
73-73: shellcheck reported issue in this script: SC2086:info:4:19: Double quote to prevent globbing and word splitting
(shellcheck)
82-82: shellcheck reported issue in this script: SC2046:warning:1:6: Quote this to prevent word splitting
(shellcheck)
Shellcheck
scripts/set-env.sh
[warning] 4-4: Quote this to prevent word splitting.
(SC2046)
Additional comments not posted (57)
jest.setup.ts (2)
1-1: 좋은 선택입니다!
@testing-library/dom라이브러리를 사용하면 사용자 관점에서 DOM과 상호작용하는 테스트를 작성할 수 있습니다. 이는 테스트의 신뢰성과 가독성을 향상시키는 데 도움이 됩니다.
2-2: 훌륭한 추가사항입니다!
@testing-library/jest-dom라이브러리는 Jest의 기본 매처를 확장하여 DOM 노드에 특화된 추가 어설션을 제공합니다. 이를 통해 개발자는 요소의 존재 여부, 가시성 및 UI 상태 검증에 중요한 기타 속성을 확인하는 등 보다 표현력 있는 테스트를 작성할 수 있습니다.packages/primitive/components/divider/src/index.ts (1)
1-4: 잘 구현되었습니다!이 코드는
Divider컴포넌트와DividerProps타입을./divider모듈에서 가져와서 다시 내보내는 역할을 합니다. 이렇게 하면 패키지의 소비자가Divider컴포넌트와 그 속성을 더 쉽게 가져올 수 있습니다. 이 구조는 모듈성과 캡슐화를 향상시키고, 코드의 가독성과 유지 보수성을 높입니다. TypeScript 프로젝트에서 일반적으로 사용되는 방식을 따르고 있어 좋습니다.jest.config.ts (2)
6-6: 좋아 보입니다!
testMatch속성을 추가하여packages디렉토리 내의 모든 테스트 파일을 식별하는 패턴을 지정하는 것은 여러 패키지에 걸쳐 테스트 파일의 구조를 더 잘 조직화할 수 있게 해줍니다. 이 변경 사항은 테스트 파일 검색 메커니즘을 더 유연하게 만들어 줍니다.
7-7: 좋은 추가 사항입니다!
setupFilesAfterEnv속성을 추가하여 루트 디렉토리에 있는jest.setup.ts파일을 지정하는 것은 테스트 환경을 위한 전용 설정 단계를 제공합니다. 이 파일은 Jest가 설정된 후 테스트가 실행되기 전에 필요한 전역 구성이나 초기화를 수행하는 데 사용될 수 있습니다. 이는 테스트 환경의 구성 가능성을 향상시켜 줍니다.packages/plugins/boilerplate/tsconfig.json (1)
8-9: 잘 작성된 코드입니다!
include속성을 추가하여 TypeScript 컴파일러가 처리해야 할 파일과 디렉토리를 명시적으로 지정하는 것은 프로젝트의 TypeScript 구성을 개선하는 좋은 방법입니다. 이를 통해 관련 파일이 올바르게 처리되도록 하여 개발 경험을 향상시킬 수 있습니다.e2e/test-utils/a11y.ts (1)
5-12: 잘 작성된 접근성 검사 유틸리티 함수입니다!이 함수는 Playwright
Page에 대해 자동화된 접근성 검사를 수행하여 웹 애플리케이션의 접근성 표준 준수를 확인하는 데 도움이 됩니다. 특정 WCAG 표준을 대상으로 하고 "color-contrast" 규칙을 비활성화하는 기능은 유용할 것 같습니다.이 함수를 사용하여 end-to-end 테스트 워크플로우에 접근성 검사를 통합함으로써 프로젝트의 테스트 기능이 향상될 것입니다. 다만, 이 함수를 사용할 때는 다음 사항을 고려해야 합니다:
- 접근성 검사 결과를 적절히 처리하고 보고해야 합니다. 예를 들어, 결과를 로깅하거나 테스트 보고서에 포함시킬 수 있습니다.
- "color-contrast" 규칙을 비활성화하는 것이 적절한지 확인해야 합니다. 색상 대비가 중요한 경우에는 이 규칙을 활성화해야 할 수도 있습니다.
- 접근성 검사는 시간이 오래 걸릴 수 있으므로, 필요한 경우에만 실행하는 것이 좋습니다. 예를 들어, CI/CD 파이프라인에서 접근성 검사를 별도의 작업으로 실행할 수 있습니다.
전반적으로, 이 함수는 웹 애플리케이션의 접근성을 개선하는 데 기여할 것입니다. 잘 작성된 코드입니다!
turbo/generators/templates/component/src/{{kebabCase componentName}}.tsx.hbs (1)
7-8: 코드 가독성 개선
props를 직접 매개변수로 사용하는 것은 모든 props가<div>요소로 전달되고 있음을 명확하게 합니다. 이 변경은 코드의 유지보수성과 가독성을 향상시킵니다..github/workflows/pr-dday-labeler.yml (1)
1-22: 잘 구성된 워크플로우입니다!이 워크플로우는 PR의 D-day 라벨링을 자동화하는 데 효과적으로 설계되었습니다. 주요 사항은 다음과 같습니다:
- 워크플로우의 구조가 논리적이고 모범 사례를 따르고 있습니다.
- 트리거가 적절하게 정의되어 있어, 정기적인 일정과 관련 PR 이벤트에 따라 라벨링 프로세스가 실행됩니다.
- 권한이 적절하게 범위가 지정되어 보안 위험을 최소화합니다.
- 잘 정의된 액션을 사용하여 작업 구성이 간단명료합니다.
- 액션 입력이 저장소 비밀을 활용하여 필요한 토큰과 URL에 안전하게 액세스할 수 있도록 적절하게 구성되었습니다.
이 워크플로우는 PR 관리를 자동화하고 Slack과의 통합을 통해 팀 협업과 가시성을 향상시킬 것입니다. 잘 작성된 워크플로우입니다!
tsconfig.json (1)
22-29: 변경 사항이 적절해 보입니다!
include배열에 추가된 경로들은 엔드-투-엔드 테스트 디렉토리와 Playwright 및 Jest 설정 파일에 위치한 TypeScript 파일들을 컴파일에 포함시키는 것으로 보입니다. 이는 TypeScript 컴파일 범위를 테스트 관련 파일까지 확장하여 일관성을 유지하고 잠재적인 타입 오류를 사전에 발견하는 데 도움이 될 것입니다..github/PULL_REQUEST_TEMPLATE/component_template.md (1)
1-26: 컴포넌트 관련 풀 리퀘스트를 위한 템플릿 추가를 승인합니다.이 풀 리퀘스트 템플릿은 컴포넌트 관련 변경 사항을 문서화하는 과정을 표준화하고, 팀 구성원 간의 의사소통에 명확성과 완전성을 보장합니다. 템플릿의 각 섹션은 다음과 같은 이점을 제공합니다:
- "Expected Behavior" 섹션: 컴포넌트의 시각적 및 구조적 기능을 명확히 하여 레이아웃을 명확히 하고 정보 탐색을 돕습니다. 이는 사용자 경험을 향상시킵니다.
- "Considerations" 섹션: 개발자가 설계 선택, 대안 접근 방식 및 근거에 대해 숙고하도록 장려하여 개발 프로세스에 대한 이해를 높입니다.
- "Related Issues" 섹션: 관련 이슈를 연결하여 추적 가능성을 개선하고 변경 사항에 대한 맥락을 제공합니다.
이 템플릿은 변경 사항을 문서화하는 데 더 구조화되고 체계적인 접근 방식을 촉진하여 검토자가 각 풀 리퀘스트의 목적과 영향을 이해하기 쉽게 만듭니다.
turbo/generators/templates/e2e/test.ts.hbs (2)
7-13: 좋습니다!이 테스트 케이스는 시각적 회귀 테스트를 위한 모범 사례를 잘 따르고 있습니다.
visit유틸리티 함수를 사용하여 코드 재사용성과 유지 관리성을 높이고, 컴포넌트의 시각적 모양이 일관되게 유지되는지 확인합니다.
15-22: 잘 작성된 테스트입니다!이 테스트 케이스는 접근성 테스트를 위한 모범 사례를 잘 따르고 있습니다.
visit유틸리티 함수를 사용하여 코드 재사용성과 유지 관리성을 높이고, axe 라이브러리를 활용하여 컴포넌트가 접근성 표준을 준수하는지 확인합니다.packages/primitive/components/divider/stories/divider.stories.tsx (2)
1-4: 잘 작성된 import 문입니다!Storybook 설정에 필요한 타입과
Divider컴포넌트를 올바르게 가져왔습니다.
23-25: 기본 메타데이터 객체를 올바르게 내보냈습니다!
- export 문은 올바른 구문을 따릅니다.
satisfies키워드를 사용하여 메타데이터 객체의 타입 안전성을 보장합니다.packages/primitive/components/divider/__tests__/divider.test.tsx (4)
10-14: LGTM!이 테스트는
Divider컴포넌트가 문서에 올바르게 렌더링되는지 확인합니다. React Testing Library의render함수를 사용하여 컴포넌트를 렌더링하고,toBeInTheDocumentmatcher를 사용하여 렌더링된container가 문서에 존재하는지 검증합니다. 테스트 로직이 정확하게 구현되었습니다.
16-22: LGTM!이 테스트는
Divider컴포넌트에 ref를 전달할 수 있는지 확인합니다. React의createRef함수를 사용하여 ref를 생성하고, 생성된 ref를Divider컴포넌트에 전달하여 렌더링합니다. 그런 다음not.toBeNullmatcher를 사용하여 ref의current속성이 null이 아닌지 검증합니다. 테스트 로직이 정확하게 구현되었습니다.
24-28: LGTM!이 테스트는
orientationprop이 제공되지 않을 때(기본값)Divider컴포넌트가<hr>태그를 렌더링하는지 확인합니다. React Testing Library의render함수를 사용하여 prop 없이Divider컴포넌트를 렌더링하고,querySelector와toBeInTheDocumentmatcher를 사용하여 렌더링된container에<hr>태그가 포함되어 있는지 검증합니다. 테스트 로직이 정확하게 구현되었습니다.
30-34: LGTM!이 테스트는
orientationprop이 "vertical"로 설정되었을 때Divider컴포넌트가<div>태그를 렌더링하는지 확인합니다. React Testing Library의render함수를 사용하여orientationprop을 "vertical"로 설정하여Divider컴포넌트를 렌더링하고,querySelector와toBeInTheDocumentmatcher를 사용하여 렌더링된container에<div>태그가 포함되어 있는지 검증합니다. 테스트 로직이 정확하게 구현되었습니다.packages/primitive/components/divider/src/divider.tsx (1)
1-31: 잘 구현된 Divider 컴포넌트입니다!이 Divider 컴포넌트는 다음과 같은 장점이 있습니다:
orientationprop을 통해 가로 또는 세로 구분선으로 유연하게 렌더링할 수 있습니다.forwardRef를 사용하여 기본 DOM 요소에 ref를 전달할 수 있습니다.- TypeScript를 사용하여 타입 안전성을 확보하고,
div와hrHTML 요소의 속성을 확장한DividerProps를 정의했습니다.- 접근성을 위해 적절한 ARIA 속성을 설정했습니다.
이 컴포넌트는 재사용 가능하고 접근성이 높은 구분선을 제공하여 사용자 인터페이스에 쉽게 통합할 수 있습니다. TypeScript의 사용은 타입 안전성을 보장하고 런타임 오류 가능성을 줄입니다. 또한 접근성 기능은 보조 기술에서의 사용성을 향상시킵니다.
잘 작성된 코드입니다! 👍
.github/ISSUE_TEMPLATE/component-template.md (1)
1-46: 컴포넌트 개발을 위한 이슈 템플릿 도입을 환영합니다!이 이슈 템플릿은 컴포넌트 개발 과정에서 명확한 의사소통과 일관성을 유지하는 데 큰 도움이 될 것입니다. 템플릿의 각 섹션은 다음과 같은 이점을 제공합니다:
- "용도" 섹션: 컴포넌트의 목적과 역할을 명확히 설명하여 팀원들이 컴포넌트의 사용 맥락을 이해할 수 있도록 합니다.
- "기능" 섹션: 컴포넌트의 속성과 동작을 자세히 설명하여 개발자들이 컴포넌트를 올바르게 구현하고 사용할 수 있도록 안내합니다.
- "참고" 섹션: 컴포넌트 개발에 참고한 외부 리소스를 공유하여 팀원들이 추가 정보를 확인할 수 있도록 합니다.
- "마일스톤" 섹션: 컴포넌트 개발 단계별 일정을 제시하여 프로젝트 진행 상황을 추적하고 관리할 수 있도록 돕습니다.
이러한 구조화된 접근 방식은 컴포넌트 관련 이슈에 대한 문서화를 개선하고, 팀 협업을 향상시키는 데 기여할 것입니다. 잘 작성된 이슈 템플릿 도입을 높이 평가합니다!
e2e/components/primitive/divider.test.ts (4)
7-13: 좋습니다!이 테스트 케이스는 horizontal divider 컴포넌트의 시각적 회귀를 효과적으로 검사하고 있습니다. Storybook 엔트리를 방문하여 렌더링된 컴포넌트의 스크린샷을 캡처하고, 이를 기준 이미지와 비교하여 의도하지 않은 시각적 변경 사항을 감지합니다.
15-21: 잘 작성되었습니다!이 테스트 케이스는 vertical divider 컴포넌트의 시각적 회귀를 효과적으로 검사하고 있습니다. Storybook 엔트리를 방문하여 렌더링된 컴포넌트의 스크린샷을 캡처하고, 이를 기준 이미지와 비교하여 의도하지 않은 시각적 변경 사항을 감지합니다.
23-34: 훌륭한 접근성 테스트입니다!이 테스트 케이스는 axe 도구를 사용하여 horizontal divider 컴포넌트의 웹 접근성을 효과적으로 검사하고 있습니다. Storybook 엔트리를 방문하여 렌더링된 페이지에 대해 접근성 스캔을 실행하고, axe에서 보고된 접근성 위반 사항이 없음을 검증합니다. 이는 컴포넌트가 접근성 표준을 준수하는지 확인하는 중요한 단계입니다.
36-47: 잘 작성된 접근성 테스트입니다!이 테스트 케이스는 axe 도구를 사용하여 vertical divider 컴포넌트의 웹 접근성을 효과적으로 검사하고 있습니다. Storybook 엔트리를 방문하여 렌더링된 페이지에 대해 접근성 스캔을 실행하고, axe에서 보고된 접근성 위반 사항이 없음을 검증합니다. 이는 컴포넌트가 접근성 표준을 준수하는지 확인하는 데 중요한 역할을 합니다.
package.json (9)
2-2: 패키지 이름 변경이 적절해 보입니다.패키지 이름을
"warrr-ui"에서"@warrr-ui"로 변경하는 것은 관련 패키지를 그룹화하고 이름 충돌을 방지하는 스코프 패키지로의 전환을 나타냅니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
11-11: Playwright를 사용한 E2E 테스트 스크립트 추가가 좋아 보입니다.
"e2e": "playwright test"스크립트를 추가하여 Playwright를 사용한 엔드-투-엔드 테스트를 실행할 수 있게 되었습니다. Playwright는 웹 애플리케이션의 E2E 테스트에 널리 사용되는 도구입니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
12-12: 스냅샷 업데이트를 위한 Playwright 스크립트 추가가 유용해 보입니다.
"e2e:update": "playwright test --update-snapshots"스크립트를 추가하여 Playwright 테스트의 스냅샷을 업데이트할 수 있게 되었습니다. UI가 의도적으로 변경되었고 스냅샷을 새로운 상태로 업데이트해야 할 때 스냅샷 업데이트가 유용합니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
16-16: Changesets CLI 추가로 버전 관리 및 변경 로그 생성이 개선될 것 같습니다.
devDependencies에"@changesets/cli": "^2.27.7"을 추가하여 모노레포에서 버전 관리 및 변경 로그 생성을 위한 도구를 사용할 수 있게 되었습니다. Changesets는 릴리스 프로세스를 자동화하고 패키지 버전을 동기화하는 데 도움이 됩니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
17-17: axe-core를 사용한 접근성 테스트 플러그인 추가가 좋아 보입니다.
devDependencies에"@axe-core/playwright": "^4.9.1"을 추가하여 axe-core를 사용한 접근성 테스트를 위한 Playwright 플러그인을 사용할 수 있게 되었습니다. 이 플러그인은 E2E 테스트 중에 웹 애플리케이션의 접근성 문제를 식별하는 데 도움이 됩니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
18-18: Playwright 테스트 라이브러리 추가가 적절해 보입니다.
devDependencies에"@playwright/test": "^1.46.0"을 추가하여 Playwright를 위한 테스트 라이브러리를 사용할 수 있게 되었습니다. 이 라이브러리는 Playwright를 사용하여 E2E 테스트를 작성하고 실행하기 위한 프레임워크를 제공합니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
28-28: 접근성 테스트 엔진 axe-core 추가가 좋아 보입니다.
devDependencies에"axe-core": "^4.10.0"을 추가하여 웹 애플리케이션을 위한 접근성 테스트 엔진을 사용할 수 있게 되었습니다. axe-core는 애플리케이션의 접근성 문제를 식별하고 보고하는 데 도움이 됩니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.
41-41: TypeScript 프로젝트에 필요한 tsup 및 TypeScript 패키지 추가가 적절해 보입니다.
devDependencies에"tsup": "^8.2.1"과"typescript": "^5.4.5"를 추가하여 TypeScript 프로젝트에 일반적으로 사용되는 번들러와 타입 검사 도구를 사용할 수 있게 되었습니다. tsup은 TypeScript 프로젝트를 위한 제로 구성 번들러이고, typescript는 TypeScript 언어 패키지입니다. 이러한 변경 사항은 변경 사항 요약에 명시적으로 언급되지는 않았지만 TypeScript 프로젝트에 관련이 있습니다.Also applies to: 43-43
44-44: DOM 상태 테스트를 위한 사용자 정의 Jest 매처 추가가 좋아 보입니다.
devDependencies에"@testing-library/jest-dom": "^6.5.0"을 추가하여 DOM 상태를 테스트하기 위한 사용자 정의 Jest 매처를 사용할 수 있게 되었습니다. 이 패키지는 일반적으로 React 컴포넌트의 단위 테스트를 위해 다른 Testing Library 패키지와 함께 사용됩니다. 이 변경 사항은 요약에 나열된 내용과 일치합니다.playwright.config.ts (1)
5-69: 설정이 잘 구성되어 있습니다!Playwright 구성 객체가 테스트 실행을 위한 다양한 옵션을 적절하게 지정하고 있습니다. 주목할 만한 사항은 다음과 같습니다:
- CI 환경에서 조건부 재시도 및 작업자 프로세스 수를 설정하여 안정적인 테스트 실행을 보장합니다.
- 결과 및 스냅샷을 저장할 디렉토리를 명시적으로 지정하여 테스트 아티팩트를 체계적으로 관리합니다.
- CI 환경 여부에 따라 적응적으로 리포터 구성을 조정하여 적절한 테스트 결과 보고를 제공합니다.
- 다양한 브라우저에 대한 프로젝트를 정의하여 크로스 브라우저 테스트 적용 범위를 보장합니다.
전반적으로 이 구성은 포괄적이고 유연한 Playwright 테스트 설정을 제공하여 다양한 환경과 조건에서 테스트를 원활하게 실행할 수 있도록 합니다. 잘 작성된 구성입니다!
.github/workflows/chromatic_auto_deploy.yml (7)
19-19: LGTM!최신 버전의
actions/checkout액션을 사용하는 것은 좋은 방법입니다. 이를 통해 호환성을 보장하고 최신 기능과 버그 수정을 활용할 수 있습니다.
23-28: 좋아 보입니다!환경 변수를 설정하기 위해 쉘 스크립트를 실행하는 새로운 단계를 추가한 것은 훌륭한 아이디어입니다. 이를 통해 동적 구성이 가능해지고 코드 재사용성이 향상됩니다. 또한
chmod명령을 사용하여 스크립트를 실행 가능하게 만든 것도 좋은 방법입니다.
32-32: 잘 수정되었습니다!Node.js 버전에 하드코딩된 값 대신 환경 변수를 참조하도록 변경한 것은 유연성을 높이고 버전 관리를 용이하게 만듭니다. 이전 단계에서 환경 변수를 설정했으므로 사용 가능한 상태가 보장됩니다.
35-38: 훌륭한 선택입니다!pnpm 설치 방식을 Corepack에서
pnpm/action-setup액션으로 변경한 것은 pnpm 설치 과정을 단순화하고 올바른 버전이 설치되도록 보장합니다. 또한 pnpm 버전을 환경 변수에서 가져오도록 하여 버전 관리가 용이해집니다.
39-48: 효율성 향상을 위한 좋은 방법입니다!
actions/cache액션을 사용하여 pnpm 의존성을 캐싱하는 새로운 단계를 추가한 것은 후속 워크플로 실행 시 설치 시간을 크게 단축시켜 전반적인 효율성을 향상시킵니다. 캐시 키는 실행기의 OS와pnpm-lock.yaml파일의 해시를 기반으로 하므로 캐시 유효성이 보장됩니다. 또한 정확한 일치 항목이 없는 경우 가장 가까운 캐시로 폴백할 수 있도록 복원 키가 제공됩니다.
51-54: 유연성을 높이는 좋은 방법입니다!의존성 설치 단계를 직접적인 pnpm 명령 대신 사용자 정의 스크립트를 실행하도록 수정한 것은 필요한 경우 더 복잡한 설치 로직을 허용합니다. 또한
chmod명령을 사용하여 스크립트를 실행 가능하게 만든 것도 좋은 방법입니다.
55-61: 배포 프로세스의 견고성을 높이는 좋은 아이디어입니다!Chromatic 토큰의 존재 여부를 확인하고 피드백을 제공하는 새로운 단계를 추가한 것은 필요한 토큰이 설정되어 있는지 확인함으로써 배포 프로세스의 견고성을 향상시킵니다. 토큰의 존재 여부에 대한 피드백을 제공하면 문제 해결과 오류 처리에 도움이 됩니다.
turbo/generators/config.ts (1)
65-87: 잘 작성된 코드입니다!새로운 제너레이터 "컴포넌트 e2e 테스트 파일 생성기"가 기존 제너레이터와 유사한 구조로 잘 구현되었습니다. 사용자로부터 필요한 입력을 받아 템플릿을 사용하여 테스트 파일을 생성하는 로직이 명확하게 작성되었습니다. 컴포넌트 이름을 kebab-case로 변환하여 파일 경로를 생성하는 부분도 적절합니다.
이 제너레이터는 컴포넌트의 e2e 테스트 파일 생성을 자동화하여 프로젝트의 테스팅 구조를 일관성 있게 유지하는 데 도움이 될 것입니다.
.github/workflows/label-vrt-update.yml (1)
1-107: 전반적으로 잘 구성된 워크플로우입니다!이 GitHub Actions 워크플로우는 VRT 스냅샷 업데이트 프로세스를 자동화하는 데 중점을 두고 있으며, 다음과 같은 장점이 있습니다:
- "VRT" 레이블이 지정된 풀 리퀘스트에 의해 트리거되어 특정 작업을 자동화합니다.
- 레포지토리 체크아웃, 환경 설정, 의존성 설치, 스토리북 빌드 및 실행, 스냅샷 업데이트, 변경 사항 커밋 및 푸시 등 논리적인 단계 순서를 따릅니다.
- 의존성 및 브라우저 바이너리에 대한 캐싱을 사용하여 워크플로우의 성능을 최적화합니다.
- 스토리북 프로세스 종료 및 "VRT" 레이블 제거와 같은 정리 작업을 처리합니다.
- 풀 리퀘스트 주석을 통해 명확한 피드백을 제공합니다.
전반적으로 GitHub Actions의 모범 사례를 따르는 잘 구조화된 워크플로우입니다. 좋은 작업이었습니다!
Tools
actionlint
75-75: shellcheck reported issue in this script: SC2046:warning:1:6: Quote this to prevent word splitting
(shellcheck)
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)
.github/workflows/pr-vrt.yml (12)
14-15: LGTM!레포지토리를 체크아웃하는 표준 방식입니다. 최신 버전의
actions/checkout액션을 사용하고 있어 좋습니다.
17-21: 좋은 방식입니다!환경 변수를 설정하기 위해 별도의 스크립트를 사용하는 것은 재사용성과 유지보수성을 높이는 좋은 방법입니다. 스크립트에 실행 권한을 부여하는 것도 잊지 않으셨네요.
23-26: 잘하셨습니다!
actions/setup-node액션을 사용하여 Node.js를 설정하는 것이 GitHub Actions에서 권장하는 방식입니다. Node.js 버전을 환경 변수로 관리하는 것도 유지보수성을 높이는 좋은 방법이에요.
28-31: 훌륭합니다!
pnpm/action-setup액션을 사용하여 pnpm을 설치하는 것이 GitHub Actions에서 권장하는 방식입니다. pnpm 버전도 환경 변수로 관리하고 있어 유지보수성이 높아 보이네요.
33-42: 캐싱 설정이 완벽합니다!의존성 캐싱은 워크플로우 속도를 높이는 좋은 방법이에요.
actions/cache액션을 사용하는 것이 GitHub Actions에서 권장하는 방식이고, 캐시 키에 OS, pnpm 버전, 락 파일을 포함하여 필요할 때 캐시가 무효화되도록 하는 것도 좋습니다. pnpm 스토어와node_modules모두 캐싱하는 것도 잘 하셨어요.
44-50: Playwright 브라우저 캐싱도 완벽해요!Playwright 브라우저를 캐싱하는 것은 워크플로우 속도를 높이는 데 도움이 됩니다.
actions/cache액션을 사용하는 것이 GitHub Actions에서 권장하는 방식이고, 캐시 키에 OS, Playwright 버전, 락 파일을 포함하여 필요할 때 캐시가 무효화되도록 하는 것도 좋아요. 캐시 경로도 Playwright 브라우저에 맞게 설정되어 있네요.
52-55: 의존성 설치 방식이 좋네요!의존성 설치를 위해 별도의 스크립트를 사용하는 것은 재사용성과 유지보수성을 높이는 좋은 방법입니다. 스크립트에 실행 권한을 부여하는 것도 잊지 않으셨어요.
57-60: Playwright 설치도 깔끔합니다!Playwright 설치를 위해 별도의 스크립트를 사용하는 것은 재사용성과 유지보수성을 높이는 좋은 방법이에요. 스크립트에 실행 권한을 부여하는 것도 잘 하셨습니다.
62-64: 스토리북 빌드 설정이 좋아요!시각적 회귀 테스트를 실행하려면 스토리북 빌드가 필요하죠.
build-storybook스크립트를 사용하는 것은 표준적인 방법이에요. 작업 디렉토리를 설정하여 스크립트가 올바른 위치에서 실행되도록 한 것도 좋습니다.
66-69: 스토리북 실행 방식이 좋네요!시각적 회귀 테스트를 위해 스토리북을 실행하는 것은 필수적이에요.
npx serve를 사용하여 스토리북을 서빙하는 것은 좋은 방법입니다. 프로세스 ID를 저장하여 나중에 프로세스를 종료할 수 있도록 한 것도 좋아요.
71-78: VRT 테스트 실행이 잘 되어 있어요!이 워크플로우의 주요 목적은 시각적 회귀 테스트를 실행하는 것이죠.
e2e스크립트를 사용하여 테스트를 실행하는 것은 좋은 방법입니다. 테스트 결과를 출력 변수에 저장하여 후속 단계에서 사용할 수 있도록 한 것도 좋아요.정적 분석 도구에서 인수를 따옴표로 묶어 단어 분할을 방지하라고 제안하지만, 여기서는 인수가 없으므로 해당되지 않습니다.
Tools
actionlint
73-73: shellcheck reported issue in this script: SC2086:info:2:19: Double quote to prevent globbing and word splitting
(shellcheck)
73-73: shellcheck reported issue in this script: SC2086:info:4:19: Double quote to prevent globbing and word splitting
(shellcheck)
80-82: 스토리북 프로세스 종료는 좋은 생각이에요!정리를 위해 스토리북 프
Tools
actionlint
82-82: shellcheck reported issue in this script: SC2046:warning:1:6: Quote this to prevent word splitting
(shellcheck)
e2e/test-utils/storybook.ts (1)
21-23: URL 경로 설정에 대한 확인 필요CI 환경에서
${STORYBOOK_URL}/iframe을 사용하고, 로컬 환경에서${STORYBOOK_URL}/iframe.html을 사용하고 있습니다. 일반적으로 Storybook 개발 서버에서는/iframe.html을 사용하고, 빌드된 스토리북은/iframe를 사용합니다. 현재 설정이 의도한 동작인지 확인이 필요합니다.
| #!/bin/sh | ||
|
|
||
| if [ -f ".github/environments/versions.env" ]; then | ||
| export $(grep -v '^#' .github/environments/versions.env | xargs) | ||
| echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_ENV | ||
| echo "PNPM_VERSION=$PNPM_VERSION" >> $GITHUB_ENV | ||
| else | ||
| echo "환경 변수 파일이 존재하지 않습니다." | ||
| exit 1 | ||
| fi |
There was a problem hiding this comment.
스크립트의 목적과 구조가 명확합니다. 다만, 한 가지 개선 사항이 있습니다.
이 스크립트는 GitHub Actions 워크플로우에 필요한 환경 변수를 설정하는 역할을 잘 수행하고 있습니다. 파일의 존재 여부를 확인하고, 변수를 내보내며, 파일이 없는 경우 오류 메시지를 출력하고 실패 상태로 종료하는 로직이 잘 구성되어 있습니다.
다만, 4번 라인에서 $(grep -v '^#' .github/environments/versions.env | xargs) 부분을 따옴표로 감싸는 것이 좋겠습니다. 이는 단어 분할을 방지하고, 값에 공백이나 특수 문자가 포함된 경우에도 예기치 않은 동작을 막을 수 있습니다.
아래와 같이 수정하는 것을 제안드립니다:
- export $(grep -v '^#' .github/environments/versions.env | xargs)
+ export "$(grep -v '^#' .github/environments/versions.env | xargs)"이 외에도 잠재적인 문제나 예외 상황을 처리하는 데 도움이 필요하시다면 언제든 말씀해 주세요.
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.
| #!/bin/sh | |
| if [ -f ".github/environments/versions.env" ]; then | |
| export $(grep -v '^#' .github/environments/versions.env | xargs) | |
| echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_ENV | |
| echo "PNPM_VERSION=$PNPM_VERSION" >> $GITHUB_ENV | |
| else | |
| echo "환경 변수 파일이 존재하지 않습니다." | |
| exit 1 | |
| fi | |
| #!/bin/sh | |
| if [ -f ".github/environments/versions.env" ]; then | |
| export "$(grep -v '^#' .github/environments/versions.env | xargs)" | |
| echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_ENV | |
| echo "PNPM_VERSION=$PNPM_VERSION" >> $GITHUB_ENV | |
| else | |
| echo "환경 변수 파일이 존재하지 않습니다." | |
| exit 1 | |
| fi |
Tools
Shellcheck
[warning] 4-4: Quote this to prevent word splitting.
(SC2046)
|
|
||
| - name: 스토리북 프로세스 종료 | ||
| if: always() | ||
| run: kill $(cat .storybook-pid) |
There was a problem hiding this comment.
명령어 치환 시 따옴표 사용을 고려해 주세요.
kill 명령어에서 $(cat .storybook-pid)와 같은 명령어 치환 시, 프로세스 ID에 공백이나 특수 문자가 포함된 경우 단어 분할 문제가 발생할 수 있습니다. 이를 방지하기 위해 명령어 치환을 따옴표로 감싸는 것이 좋습니다.
다음과 같이 수정해 보세요:
-run: kill $(cat .storybook-pid)
+run: kill "$(cat .storybook-pid)"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.
| run: kill $(cat .storybook-pid) | |
| run: kill "$(cat .storybook-pid)" |
Tools
actionlint
75-75: shellcheck reported issue in this script: SC2046:warning:1:6: Quote this to prevent word splitting
(shellcheck)
| run: kill $(cat .storybook-pid) | ||
|
|
||
| - name: 변경된 스냅샷 커밋 및 푸시 | ||
| run: | |
There was a problem hiding this comment.
보안을 위해 "github.head_ref"를 환경 변수로 전달하는 것을 고려해 주세요.
인라인 스크립트에서 "github.head_ref"를 직접 사용하는 것은 잠재적으로 신뢰할 수 없는 입력이므로 보안 위험이 될 수 있습니다. 대신 환경 변수를 통해 값을 전달하는 것이 좋습니다. 자세한 내용은 GitHub Actions 보안 강화 가이드를 참조하세요.
다음과 같이 수정해 보세요:
run: |
+ PR_HEAD_REF=${{ github.head_ref }}
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 }}
+ git push origin HEAD:$PR_HEAD_REF
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.
| run: | | |
| run: | | |
| PR_HEAD_REF=${{ github.head_ref }} | |
| 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:$PR_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)
| const serializedArgs = Object.entries(args) | ||
| .map(([key, value]) => `${key}:${value}`) | ||
| .join(";"); | ||
| url.searchParams.set("args", serializedArgs); | ||
| } |
There was a problem hiding this comment.
키와 값을 URL 인코딩하여 특수 문자 처리 필요
args와 globals의 키와 값에 특수 문자가 포함된 경우 URL 파라미터에서 문제가 발생할 수 있습니다. encodeURIComponent 함수를 사용하여 키와 값을 인코딩하면 이러한 문제를 방지할 수 있습니다.
적용 가능한 수정 사항:
args 부분 수정:
const serializedArgs = Object.entries(args)
.map(([key, value]) => `${encodeURIComponent(key)}:${encodeURIComponent(serialize(value))}`)
.join(";");
serializeObject 함수 내 수정 (라인 66):
- return `${parentPath}.${key}:${serialize(value)}`;
+ return `${encodeURIComponent(parentPath)}.${encodeURIComponent(key)}:${encodeURIComponent(serialize(value))}`;
Also applies to: 62-67
args의 boolean 값을 올바르게 직렬화하도록 수정 필요
현재 args의 boolean 값이 문자열로 직렬화되고 있습니다. 이는 boolean 값이 제대로 전달되지 않을 수 있습니다. serialize 함수를 사용하여 boolean 값을 직렬화하면 globals와 일관성을 유지하고, boolean 값이 정확히 처리됩니다.
적용 가능한 수정 사항:
if (args) {
const serializedArgs = Object.entries(args)
- .map(([key, value]) => `${key}:${value}`)
+ .map(([key, value]) => `${key}:${serialize(value)}`)
.join(";");
url.searchParams.set("args", serializedArgs);
}
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.
| const serializedArgs = Object.entries(args) | |
| .map(([key, value]) => `${key}:${value}`) | |
| .join(";"); | |
| url.searchParams.set("args", serializedArgs); | |
| } | |
| const serializedArgs = Object.entries(args) | |
| .map(([key, value]) => `${key}:${serialize(value)}`) | |
| .join(";"); | |
| url.searchParams.set("args", serializedArgs); | |
| } |
해당 코드는 다른 action 파일과 동일하게 사용하기 위해서 제거하였습니다! 다만, 확인해본 결과 yml에서 변수를 "로 감싸야지 보다 안전하게 사용할 수 있다고 합니다! (감싸지 않으면 특수문자나 띄어쓰기가 존재할 경우 원하는 대로 동작하지 않을 가능성이 있다고 합니다!) |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=69 🐱 |
요약 (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 관련 디렉토리 추가.