Repository navigation
[chore] Storybook 10.6.2 및 Chromatic 마이그레이션 - #526
Merged
Merged
Conversation
i-meant-to-be
added
the
chore
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
WalkthroughStorybook 8에서 10.6.2 계열로 이전했습니다. 의존성, 설정, Story 타입 import와 viewport 구성을 변경했습니다. 작성 규칙과 수동 검증 절차, 마이그레이션 및 후속 업그레이드 기록도 갱신했습니다. ChangesStorybook 10 마이그레이션
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~25 minutes Change: Other Merge Risk: ⚪ Minimal · up to
|
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Linked Issues check |  |
직접 연결된 활성 이슈는 #525입니다. 변경 요약은 Storybook 10.6.2 이전, 통합 addon 및 renderer import 변경, viewport 계약 보존, 타입 검사 설정, 주요 검증을 설명합니다. 변경된 코드와 문서는 #525 범위에 맞습니다. 그러나 #525는 lockfile 관리도 요구합니다. package-lock.json은 … |
제외된 package-lock.json의 #525 기준 변경 내용과 Storybook·Chromatic 잠금 버전을 검토 가능한 증거로 제공해야 최종 PASS 또는 FAIL을 결정할 수 있습니다. |
| Docstring Coverage | |
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 50 files. (7 skipped: 5… | Write docstrings for the functions missing them to satisfy the coverage threshold. |
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check PR 제목은 Storybook 10.6.2와 Chromatic 마이그레이션이라는 주요 변경 사항을 정확하고 간결하게 설명합니다. Out of Scope Changes check 변경은 Storybook 설정, Story import와 계약, 관련 개발 의존성 선언, 타입 검사 설정, 테스트·Storybook 문서와 진행 기록에 한정됩니다. 이 변경은 #525의마이그레이션 및 검증 요구를 지원합니다. 제품 API, 공용 타입, 화면 구현 변경이나 관련 없는 기능 변경은 요약에서 확인되지 않습니다.
Full details: Linked Issues check
-
Explanation
직접 연결된 활성 이슈는
#525입니다. 변경 요약은 Storybook 10.6.2 이전, 통합 addon 및 renderer import 변경, viewport 계약 보존, 타입 검사 설정, 주요 검증을 설명합니다. 변경된 코드와 문서는#525범위에 맞습니다. 그러나#525는lockfile 관리도 요구합니다.package-lock.json은!**/package-lock.json규칙으로 제외되어 실제 잠금 변경과 버전을 독립적으로 확인할 수 없습니다.
Full details: Docstring Coverage
-
Explanation
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 50 files. (7 skipped: 5 unsupported, 2 over the file limit.)
✨ Finishing Touches: 💡 1
-
📝 Generate docstrings: 💡
-
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
🔧 ESLint
-
If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
ESLint install failed due to a network error.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
토끼가 새 이야기를 펼쳐요
열 개의 별빛, 책장에 반짝여요
작은 화면도 제자리를 찾고
문서와 스토리가 함께 달려요
당근 한 입, 검증도 척척
새 장을 넘기며 깡총, 완료!
Comment @coderabbitai help to get the list of available commands.
🚀 Preview 배포 완료!
|
|
🧹 Preview 배포가 정리되었습니다. |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🚩 연관 이슈
Closes #525
📝 작업 내용
React 18·Vite 6을 유지하면서 Storybook 8.6.18을 10.6.2로 이전함. Node 24 환경 통일(PR #524)에 이어 개발·문서·상호작용 도구를 갱신하는 두 번째 단계임. 기존 Storybook의 패키지 관리자 탐지 경로에서 발생한 DEP0190을 다시 확인하고, v9·v10에서 통합된 addon·import·viewport 계약을 함께 반영함.
의존성과 설정
표는 lockfile 설치 버전 기준임. Storybook 계열은
^10.6.2, Chromatic addon·CLI는 각각^5.5.1·^18.12.1로 선언했음.@storybook/react-vite로 통일함.@storybook/react는 framework의 전이 의존성으로 설치됨. UpdateModal의 검증 도구는storybook/test,useArgs는storybook/preview-api를 사용함..storybook의 TS·TSX를 앱 타입 검사에 포함하고 사용하지 않는 React import를 제거함.Story 계약과 문서
기존
parameters.viewport.viewports를options로, Story의defaultViewport를globals.viewport = { value, isRotated: false }로 이전함. 예를 들어 UpdateModal Mobile은 390×844를 선택하고 MobileEnglish는 같은 화면에 영어를 적용함. 헬퍼가 parameters와 globals를 함께 반환해 언어·화면 크기를 조합함. 전역 기본은 반응형으로 유지하고 청중 모바일 Story는 375×812를 선택함.CSF3, Story 제목·export·ID와 기존 play 검증을 보존함. 제품 API·공용 타입·화면 구현은 변경하지 않았음. 테스트·Storybook 컨벤션에 새 경로와 수동 검증 기준을 기록하고 문서 지도·단계별 진행 기록을 갱신함. Vite·React 갱신, addon-vitest·CSF Next·일반 패키지 정리는 후속 작업임.
실제 검증
Windows·Node 24.21.0·npm 11.19.1에서 확인했음.
npm ls --depth=0가 통과했음. 코드 리뷰의 상·중·하·컨벤션 위반 발견 사항은 없음.npm ci --engine-strict --strict-peer-deps,npx --no-install storybook doctor, Storybook 정적 빌드가 통과했음. 이후 의존성·코드 변경 없음.앱·Storybook의 500 kB 초과 묶음 경고와 설치 시 ESLint 비권장 버전·설치 스크립트 허용 안내, npm 감사 7건(낮음 1·높음 6)은 남아 있음. 자동 수정이나 별도 패키지 정비는 수행하지 않았음.
🗣️ 리뷰 요구사항 (선택)
개발·정적 결과에서 UpdateModal의 화면 크기·긴 설명·이미지 비율·체크박스·닫기, Docs·Controls·Actions·Interactions와 청중 모바일 크기를 확인함. MSW 테이블 조회·투표·청중 시뮬레이터의 응답과 화면 조립을 확인하고 Storybook 빌드 후 앱 서버를 재시작함. 고정 viewport 검증은 미리보기 공간을 충분히 확보한 뒤 실제 iframe 크기를 확인함.
Chromatic 사전 검증은 아래 명령으로 재현함. 실제 시각 비교·게시는 별도 권한 범위임.
Linux·원격 CI, 실제 Chromatic 시각 비교·게시, 실제 API·소켓 서버, Sentry 업로드는 PR 생성 전 미실행임. TimerPage 전체 사용 흐름과 투표 제출 후 최종 완료 페이지 연결은 별도 확인이 필요하며, 이번 타이머 검증은 청중 시뮬레이터 범위임.
Summary by CodeRabbit