feat/#77 로딩 컴포넌트 생성 #116
Open
feat/#77 로딩 컴포넌트 생성 #116
Conversation
This file contains 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
* 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 <[email protected]>
* 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
* 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>
* 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: 홍서현 <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
ShinYoung-Kim
requested review from
minai621,
gs0428 and
ghdtjgus76
as code owners
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=76 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
![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
🧹 Outside diff range and nitpick comments (2)
e2e/components/primitive/loading.test.ts (2)
7-13: 시각적 회귀 테스트 개선 제안현재 테스트 구조는 적절하지만, 더 명확한 실패 메시지를 위해
expect구문을 개선할 수 있습니다.다음과 같이 수정을 고려해 보세요:
await expect(page).toHaveScreenshot('loading-component-default.png', { animations: 'disabled', maxDiffPixelRatio: 0.01 });이렇게 하면 스크린샷 이름이 명시되고, 애니메이션으로 인한 오류를 방지하며, 약간의 픽셀 차이를 허용하여 false positive를 줄일 수 있습니다.
15-22: 접근성 테스트 개선 제안현재 테스트 구조는 적절하지만, 더 자세한 실패 메시지와 위반 사항 로깅을 추가하여 개선할 수 있습니다.
다음과 같이 수정을 고려해 보세요:
const accessibilityScanResults = await axeAccessibilityScan(page); expect(accessibilityScanResults.violations, '접근성 위반 사항이 없어야 합니다').toEqual([]); if (accessibilityScanResults.violations.length > 0) { console.log('접근성 위반 사항:', JSON.stringify(accessibilityScanResults.violations, null, 2)); }이렇게 하면 테스트 실패 시 더 명확한 메시지를 제공하고, 위반 사항이 있을 경우 자세한 정보를 로그에 기록할 수 있습니다.
📜 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 (1)
- e2e/components/primitive/loading.test.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (2)
e2e/components/primitive/loading.test.ts (2)
1-4: LGTM: 적절한 임포트 구문필요한 Playwright 함수와 타입, 그리고 커스텀 유틸리티 함수들이 올바르게 임포트되었습니다.
6-6: LGTM: 명확한 테스트 스위트 설명"loading 컴포넌트"라는 설명은 간결하고 명확하며, 테스트의 목적을 잘 나타내고 있습니다.
* 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 <[email protected]> * 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: 홍서현 <[email protected]> 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 <[email protected]> Co-authored-by: 홍서현 <[email protected]> Co-authored-by: MJ <[email protected]> Co-authored-by: GitHub Action <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
gs0428
reviewed
Oct 9, 2024
| } | ||
| ); | ||
|
|
||
| Loading.displayName = "Loading"; |
There was a problem hiding this comment.
Loading 컴포넌트는 WarrrUI.Loading으로 갈지 이대로 갈지 의논이 필요할 것 같네요!
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=78 🐱 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
package.json (1)
16-16: Changesets CLI 추가 승인 및 스크립트 제안
@changesets/cli를 dev 의존성으로 추가한 것은 좋은 선택입니다. 이는 버전 관리와 변경 로그 생성을 개선할 것입니다.하지만 이 도구를 효과적으로 사용하기 위해 관련 스크립트를
package.json의"scripts"섹션에 추가하는 것이 좋습니다. 예를 들어:"scripts": { ... "changeset": "changeset", "version": "changeset version", "release": "changeset publish" }이렇게 하면 팀원들이 Changesets를 더 쉽게 사용할 수 있습니다.
.github/workflows/release.yml (2)
10-13: 작업 이름을 더 구체적으로 지정하는 것이 좋습니다.현재 작업 이름인 "version"은 워크플로우의 전체 목적을 완전히 반영하지 않습니다. 작업의 전체 범위를 더 잘 설명하는 이름을 사용하는 것이 좋습니다.
다음과 같이 변경하는 것을 고려해보세요:
jobs: - version: + update-and-publish:이렇게 하면 이 작업이 버전 업데이트와 배포를 모두 수행한다는 것을 더 명확히 알 수 있습니다.
55-64: LGTM: 버전 업데이트 및 npm 배포 과정이 적절합니다.changesets를 사용하여 버전 관리와 npm 배포를 자동화하는 것은 좋은 방법입니다. 토큰 사용도 안전하게 처리되고 있습니다.
GitHub 릴리스를 자동으로 생성하는 단계를 추가하는 것을 고려해보세요. 예를 들어:
- name: GitHub 릴리스 생성 uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ steps.changelog.outputs.version }} release_name: Release ${{ steps.changelog.outputs.version }} body: ${{ steps.changelog.outputs.changelog }} draft: false prerelease: false이렇게 하면 npm 배포와 함께 GitHub 릴리스도 자동으로 생성되어 프로젝트 관리가 더욱 편리해질 것입니다.
.github/workflows/label-vrt-update.yml (2)
Line range hint
1-110: 워크플로우 개선 제안전반적으로 워크플로우가 잘 구성되어 있지만, 다음과 같은 개선 사항을 고려해 보시기 바랍니다:
오류 처리: Storybook 빌드나 스냅샷 업데이트 단계에서 오류가 발생했을 때의 처리 로직을 추가하면 좋겠습니다.
일관성: 일부 단계는 셸 스크립트를 사용하고 다른 단계는 인라인 명령어를 사용합니다. 가능하다면 접근 방식을 통일하는 것이 유지보수에 도움이 될 것 같습니다.
문서화: 각 단계의 목적을 설명하는 주석을 추가하면 워크플로우의 이해도를 높일 수 있을 것 같습니다.
이러한 개선 사항을 구현하시겠습니까? 구체적인 변경 사항에 대해 도움이 필요하시면 말씀해 주세요.
🧰 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)
액션 버전 업데이트 필요
워크플로우에서 사용 중인 다음 GitHub 액션들이 최신 버전이 아닙니다. 보안을 강화하기 위해 아래 액션들의 버전을 최신으로 업데이트하는 것을 권장합니다:
actions/checkout: 현재 버전v4→ 최신 버전v4.2.1actions/setup-node: 현재 버전v4→ 최신 버전v4.0.4pnpm/action-setup: 현재 버전v4→ 최신 버전v4.0.0actions/cache: 현재 버전v4→ 최신 버전v4.1.1actions/github-script: 현재 버전v6→ 최신 버전v7.0.1주의: 일부 액션의 현재 버전을 정확하게 파악하는 데 문제가 발생했습니다(
actions/cache및actions/github-script). 해당 액션들의 버전을 수동으로 확인하여 정확히 업데이트해 주시기 바랍니다.🔗 Analysis chain
Line range hint
1-110: 보안 고려사항워크플로우의 보안을 강화하기 위해 다음 사항을 고려해 보시기 바랍니다:
액션 버전 고정: 모든 액션에 대해 특정 버전을 사용하는 것이 좋습니다. 예를 들어,
actions/checkout@v4와 같이 모든 액션의 버전을 명시적으로 지정하세요.최소 권한 원칙:
GITHUB_TOKEN을 사용할 때 필요한 최소한의 권한만 부여하고 있는지 확인하세요. 현재 사용법은 적절해 보이지만, 이 원칙을 항상 염두에 두는 것이 중요합니다.액션 버전을 확인하고 필요한 경우 업데이트하기 위해 다음 스크립트를 실행해 보세요:
이 스크립트를 실행하여 사용 중인 액션의 최신 버전을 확인하고, 필요한 경우 업데이트를 고려하세요.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for the latest versions of GitHub Actions used in the workflow # List of actions to check (add more as needed) actions=( "actions/checkout" "actions/setup-node" "pnpm/action-setup" "actions/cache" "actions/github-script" ) for action in "${actions[@]}"; do echo "Checking latest version for $action" latest_version=$(gh api repos/$action/releases/latest --jq .tag_name) echo "Latest version: $latest_version" current_version=$(grep "uses: $action@" .github/workflows/label-vrt-update.yml | awk -F@ '{print $2}') echo "Current version: $current_version" if [ "$latest_version" != "$current_version" ]; then echo "Update recommended for $action" fi echo "---" doneLength of output: 3023
🧰 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)
📜 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 (6)
- .changeset/README.md (1 hunks)
- .changeset/big-eggs-crash.md (1 hunks)
- .changeset/config.json (1 hunks)
- .github/workflows/label-vrt-update.yml (1 hunks)
- .github/workflows/release.yml (1 hunks)
- package.json (1 hunks)
✅ Files skipped from review due to trivial changes (3)
- .changeset/README.md
- .changeset/big-eggs-crash.md
- .changeset/config.json
🧰 Additional context used
🔇 Additional comments (3)
.github/workflows/release.yml (2)
1-8: LGTM: 워크플로우 이름과 트리거가 적절합니다.워크플로우 이름이 목적을 명확히 설명하고 있으며, 메인 브랜치에 푸시될 때 트리거되는 것이 릴리스 워크플로우에 적합합니다.
36-48: LGTM: npmrc 파일 생성 및 의존성 캐싱이 적절합니다.NPM_TOKEN을 안전하게 사용하고 있으며, pnpm 의존성에 대한 캐싱 전략이 적절해 보입니다. 이는 빌드 시간을 단축하고 효율성을 높이는 데 도움이 될 것입니다.
.github/workflows/label-vrt-update.yml (1)
75-75: 프로세스 종료 명령어 개선프로세스 ID를 따옴표로 감싸는 것은 좋은 변경입니다. 이렇게 하면 PID에 공백이나 특수 문자가 포함되어 있을 때 발생할 수 있는 문제를 방지할 수 있습니다.
Comment on lines
+15
to
+34
| - name: 레포지토리 체크아웃 | ||
| uses: actions/checkout@v4 | ||
| with: | ||
| fetch-depth: 0 | ||
|
|
||
| - name: 환경 변수 설정 | ||
| id: set-env | ||
| run: | | ||
| chmod +x ./scripts/set-env.sh | ||
| ./scripts/set-env.sh | ||
|
|
||
| - name: node.js 설정 | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: ${{ env.NODE_VERSION }} | ||
|
|
||
| - name: pnpm 설치 | ||
| uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: ${{ env.PNPM_VERSION }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
환경 변수 설정을 인라인으로 처리하는 것이 좋습니다.
현재 환경 변수 설정을 위해 외부 스크립트를 사용하고 있습니다. 이는 워크플로우의 투명성을 낮출 수 있습니다.
환경 변수 설정을 워크플로우 파일 내에서 직접 처리하는 것을 고려해보세요. 예를 들어:
- name: 환경 변수 설정
run: |
echo "NODE_VERSION=18.x" >> $GITHUB_ENV
echo "PNPM_VERSION=8.x" >> $GITHUB_ENV이렇게 하면 워크플로우의 모든 설정을 한 곳에서 확인할 수 있어 관리와 디버깅이 더 쉬워집니다.
Comment on lines
+50
to
+53
| - name: 의존성 설치 | ||
| run: | | ||
| chmod +x ./scripts/install-dependencies.sh | ||
| ./scripts/install-dependencies.sh |
There was a problem hiding this comment.
🛠️ Refactor suggestion
의존성 설치 과정을 인라인으로 처리하는 것이 좋습니다.
현재 의존성 설치를 위해 외부 스크립트를 사용하고 있습니다. 이는 워크플로우의 투명성을 낮출 수 있습니다.
의존성 설치 과정을 워크플로우 파일 내에서 직접 처리하는 것을 고려해보세요. 예를 들어:
- name: 의존성 설치
run: pnpm install --frozen-lockfile이렇게 하면 워크플로우의 모든 단계를 한 곳에서 확인할 수 있어 관리와 디버깅이 더 쉬워집니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
예상 동작 (Expected Behavior)
고민했던 내용 (Considerations)
아티클을 참고해보면, 다음과 같은 사실을 알 수 있었습니다.
이를 위해 로딩 상태에 대한 웹 접근성을 지키는 것이 중요하다고 생각하게 되었고, 다음과 같은 속성들을 사용하게 되었습니다.
role="status": 스크린 리더에게 특정 요소가 상태 변경을 나타내는 중요한 정보를 담고 있다는 것을 알리는 역할입니다. 스크린 리더는 role="status"로 지정된 요소가 업데이트되었을 때, 해당 변경 내용을 사용자에게 자동으로 읽어줍니다. alert와는 다르게 긴급하지 않으므로 사용자 경험을 방해하지 않고도 상태 변화를 전달할 수 있습니다.aria-live="polite": 스크린 리더에게 해당 요소의 콘텐츠가 변경되었을 때 그 변화를 사용자에게 알려주도록 지시합니다. polite라는 값은 변경 사항이 긴급하지 않은 경우 사용되며, 스크린 리더는 현재 읽고 있는 내용을 끝낸 후에 변경된 내용을 읽어줍니다.aria-busy="true": 해당 요소 또는 영역이 현재 작업 중이며, 아직 준비되지 않았음을 알리는 속성입니다. 작업이 완료되면 aria-busy="false"로 변경되어, 스크린 리더가 해당 영역이 더 이상 바쁘지 않다는 사실을 사용자에게 전달합니다.기존에 고민하던 loading 컴포넌트는 loading 상태에 따라 fallback을 보일지, children을 그릴 지를 결정하는 형태였습니다.
다만, 이 형태를 유지하면 다음과 같이 웹 접근성 관련 속성이 필요한 컴포넌트는 fallbackUI 컴포넌트뿐이기 때문에, 로딩 컴포넌트 내부에서 전달받은 fallback UI를 다시 감싸야 합니다.
위 형태의 경우 문제는, isLoading props가 존재하지 않는다면 suspense를 사용하게끔 되어 있는데, 이럴 경우 해당 컴포넌트가 해줄 수 있는 기능은 단순히 fallback ui에 웹 접근성을 추가해주는 기능 뿐이라는 것입니다.
따라서,
을 분리하여 작업할 필요가 있다고 느꼈습니다.
이에 전자만을 담당하는 loading 컴포넌트를 만들게 되었고, fallback ui만을 감싸 로딩중이라는 것을 명시적으로 알려줄 수 있는 컴포넌트를 개발하게 되었습니다.
(후자의 기능은 loading에 대한 컴포넌트로 국한짓는 것보다는 이 라이브러리처럼 조건부 렌더링을 선언적인 컴포넌트로 관리할 수 있는 별도의 컴포넌트를 만들어 관리하는 것이 낫겠다고 판단하였습니다.)
네이밍
네이밍은 primer 디자인 시스템(github 디자인 시스템)에서 spinner, skeleton, loading indicator, 로딩 애니메이션 아이콘 등을 모두 통틀어
loading이라고 칭하고 있는 점을 참고하여 loading이라고 지었습니다.use client
해당 컴포넌트가 꼭 client 단에서만 돌아야 할 이유가 있을까라는 생각이 들어 tsup config 중 banner를 통해 'use client' 구문을 삽입하던 코드를 제거하였습니다.storybook의 as props option
해당 컴포넌트의 as props는 ElementType이라면 어떤 것이든 올 수 있기 때문에 storybook에서 자동으로 모든 ElementType에 대한 옵션을 테스트해볼 수 있게끔 설정하고 싶었으나
을 작성하였을 때,
라는 문제가 발생하였습니다.
이에 다음을 시도하였으나 두 방법 모두 문제를 해결하지 못했습니다.
-> 일부 element만 하드코딩하여 사용하였는데, 앞으로 다형성 컴포넌트를 생성하게 된다면 storybook에서 해당 컴포넌트에 대한 스토리 파일을 작성할 때 해당 작업이 반복되게 될 텐데 가능한 모든 element에 대해서 따로 상수화해놓고 사용할 수 있도록 변경할까요?
이전에 공유되었던 아티클을 참고하여 polymorphic한 컴포넌트를 생성하여 작업하였는데, 해당 아티클처럼 polymorphic한 컴포넌트를 위한 타입을 따로 정의하여 사용하였습니다.
앞으로 polymorphic한 컴포넌트가 계속 추가될 텐데 그 때마다 해당 타입을 재정의하기 보다는 공통 타입으로 분리하여 작성하면 좋을 것 같습니다!
관련 이슈
Summary by CodeRabbit
새로운 기능
Loading컴포넌트 추가.childrenprop 지원.문서화
Loading컴포넌트에 대한 자세한 README 문서 추가.테스트
Loading컴포넌트의 렌더링 및 접근성 기능을 검증하는 단위 테스트 및 E2E 테스트 추가.