[feature] 공통 컴포넌트 스토리 파일을 제작한다 #889
Conversation
- @storybook/react-webpack5를 @storybook/react-vite로 교체 - .storybook/main.ts 설정 업데이트 - 경로 별칭(alias) 해결을 위해 vite-tsconfig-paths 추가 - 컴포넌트에 React를 임포트하여 ReferenceError 수정
- Modal.stories.tsx 파일 생성하여 다양한 케이스(기본, 설명 없음, 긴 내용) 추가
- Spinner.stories.tsx 파일 생성 (기본, 커스텀 높이 예시) - height prop이 스타일 컴포넌트로 전달되지 않던 버그 수정
- InputField.stories.tsx 파일 생성 (기본, 라벨 포함, 비밀번호, 에러 상태 등 다양한 케이스 추가)
- 기본 상태, 초기값 설정, 커스텀 플레이스홀더 등 다양한 사용 예시 추가 - 인터랙티브한 테스트를 위해 useState를 활용한 상태 관리 로직 포함
- Compound Component 패턴을 활용한 드롭다운 스토리 구현 - 기본 드롭다운 및 메뉴 위치 조정(Top) 예시 추가 - 제네릭 타입 호환성을 위한 타입 캐스팅 적용
- CustomTextArea.stories.tsx 파일 생성 (기본, 라벨 포함, 에러 상태, 글자수 제한 등)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Storybook 설정 및 의존성 frontend/.storybook/main.ts, frontend/.storybook/preview.ts, frontend/package.json, frontend/tsconfig.json |
Storybook을 @storybook/react-webpack5 → @storybook/react-vite로 전환. webpackFinal 제거, viteFinal 추가(동적 import로 vite·vite-tsconfig-paths, tsconfig-paths 플러그인 병합). 뷰포트/불필요 애드온 제거 및 tsconfig.json의 moduleResolution을 bundler로 변경. |
새 스토리 추가 — 공통 컴포넌트 frontend/src/components/common/CustomDropDown/CustomDropDown.stories.tsx, frontend/src/components/common/CustomTextArea/CustomTextArea.stories.tsx, frontend/src/components/common/InputField/InputField.stories.tsx, frontend/src/components/common/Modal/Modal.stories.tsx, frontend/src/components/common/SearchField/SearchField.stories.tsx, frontend/src/components/common/Spinner/Spinner.stories.tsx |
각 컴포넌트에 대한 meta/argTypes와 여러 변형(Default 등) 스토리 추가. 로컬 상태와 actions/controls를 사용한 상호작용 시연을 포함. |
스토리 정리 및 컴포넌트 소소 변경 frontend/src/components/common/Header/Header.stories.tsx, frontend/src/components/common/Footer/Footer.stories.tsx, frontend/src/components/common/Modal/Modal.tsx, frontend/src/components/common/Spinner/Spinner.tsx |
Header/Footer에서 특정 뷰포트 스토리(Desktop/Tablet/Mobile) 제거. Modal은 포맷팅 수준의 변경만 있음. Spinner가 전달된 height prop을 Wrapper에 적용하도록 수정(동작 반영). |
Sequence Diagram(s)
sequenceDiagram
autonumber
participant SB as Storybook (main.ts)
participant Vite as Vite
participant TSPaths as vite-tsconfig-paths
participant Merge as mergeConfig
Note over SB,Vite: Storybook 초기화 시 `viteFinal` 실행 (동적 import)
SB->>Vite: import('vite') 및 전달된 config
SB->>TSPaths: import('vite-tsconfig-paths') -> tsconfigPaths()
Vite->>Merge: mergeConfig(config, { plugins: [tsconfigPaths()] })
Merge-->>Vite: 병합된 Vite 설정 반환
Vite-->>SB: 최종 설정 적용 및 스토리 로드
SB->>Components: 스토리 렌더링 요청
Components-->>SB: 렌더 결과 반환
sequenceDiagram
autonumber
participant User as 사용자
participant Story as Story 파일 (예: InputField)
participant State as 로컬 상태 (useState)
participant Component as InputField 컴포넌트
User->>Story: 입력/클릭 등 상호작용
Story->>State: 상태 업데이트
State->>Component: props 전달 (value 등)
Component->>Story: onChange/onClear 호출
Story->>State: 상태 동기화 및 UI 갱신
Story->>User: 변경된 UI 표시
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related issues
- [feature] MOA-390 공통 컴포넌트에 대해 스토리파일을 제작한다 #888 — 공통 컴포넌트 스토리 파일 작성 요청; 본 PR이 여러 공통 컴포넌트 스토리를 추가하여 해당 목표와 직접적으로 일치함.
Possibly related PRs
- [feature] Common 컴포넌트 스토리 파일 적용 #225 — Storybook 설정에서 webpackFinal→viteFinal 및 경로 별칭 처리 변경과 직접적 코드 관련성 있음.
- [chore] 빌드 툴 Webpack to Vite 전환 #844 — Storybook Webpack→Vite 마이그레이션 관련 설정·의존성 변경과 연관됨.
- [feature] Spinner 컴포넌트 접근성 개선 및 높이 prop 추가 #391 — Spinner의
height전달 관련 변경 사항과 코드 중복/보완 가능성 있음.
Suggested labels
✨ Feature
Suggested reviewers
- lepitaaar
- suhyun113
- PororoAndFriends
- Zepelown
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목 '[feature] 공통 컴포넌트 스토리 파일을 제작한다'는 PR의 주요 변경사항인 common 폴더 내 컴포넌트들의 Storybook 스토리 파일 작성을 명확하게 요약합니다. |
| Linked Issues check | ✅ Passed | PR은 MOA-390의 체크리스트 항목 'common 폴더 내에 있는 컴포넌트 스토리북 파일 제작'을 완료했으며, CustomDropDown, CustomTextArea, InputField, Modal, SearchField, Spinner 등 6개 컴포넌트에 대한 스토리 파일을 추가했습니다. |
| Out of Scope Changes check | ✅ Passed | Storybook 빌더 Webpack→Vite 전환, tsconfig.json moduleResolution 변경, .storybook 설정 파일 업데이트는 스토리 파일 작성을 지원하기 위한 필수 기반 작업이므로 범위 내 변경입니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
- 📝 Generate docstrings
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 and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
frontend/src/components/common/Modal/Modal.stories.tsx (1)
6-134: 모달 스토리 동작은 적절하지만, Controls 연동은 약간 개선 여지가 있습니다.
- 세 스토리 모두
useState(args.isOpen)으로 한 번만 초기화하기 때문에, Storybook Controls에서isOpen값을 변경해도 이후 렌더에서는 로컬 state가 우선되어 arg 변경이 곧바로 반영되지는 않습니다. 큰 문제는 아니지만, args 기반으로 상태를 제어하고 싶다면 로컬 state를 제거하거나, 별도 상호작용 전용 스토리/데코레이터로 분리하는 방법도 있습니다.children의control: 'text'설정은 LongContent처럼 JSX 노드를 args로 넘기는 케이스와 다소 어울리지 않습니다. 이 스토리는 control을 끄거나,children을 string 기반 예제로만 둘지 한 번 고민해 보셔도 좋겠습니다.현재 구현만으로도 기능 확인에는 충분해 보여 선택 사항으로 남겨두셔도 됩니다.
frontend/package.json (1)
47-58: 버전 호환성 정보를 확인하겠습니다.Storybook 8.5~8.6 혼용은 호환성 문제가 없습니다.
Storybook 8.6은 주요 breaking changes가 없으므로,
@storybook/react-vite(^8.6.14)과 핵심 패키지 (^8.5.0)를 혼용해도 안정성 측면에서 기술적 문제는 없습니다. Caret range(^)에 의해 npm은 8.5.0 이상 9.0.0 미만의 모든 버전을 허용하므로 버전 정렬은 필수가 아닙니다.다만 일관성을 위해 모든 Storybook 패키지를 동일 major·minor 버전으로 맞추는 것은 좋은 관행입니다. 현재 상태에서 즉시 수정이 필요하지는 않습니다.
frontend/src/components/common/CustomDropDown/CustomDropDown.stories.tsx (1)
86-86: 타입 단언을 고려해보세요.
optionsprop에 타입 단언(as readonly { label: string; value: string }[])을 사용하고 있습니다. 이는args.options의 타입이CustomDropDown이 기대하는 타입과 정확히 일치하지 않음을 시사합니다.가능하다면 argTypes 정의나 OPTIONS 상수의 타입을 조정하여 타입 단언을 제거하는 것이 타입 안전성 측면에서 더 좋습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (11)
frontend/.storybook/main.ts(1 hunks)frontend/package.json(1 hunks)frontend/src/components/common/CustomDropDown/CustomDropDown.stories.tsx(1 hunks)frontend/src/components/common/CustomTextArea/CustomTextArea.stories.tsx(1 hunks)frontend/src/components/common/Header/Header.stories.tsx(0 hunks)frontend/src/components/common/InputField/InputField.stories.tsx(1 hunks)frontend/src/components/common/Modal/Modal.stories.tsx(1 hunks)frontend/src/components/common/Modal/Modal.tsx(2 hunks)frontend/src/components/common/SearchField/SearchField.stories.tsx(1 hunks)frontend/src/components/common/Spinner/Spinner.stories.tsx(1 hunks)frontend/src/components/common/Spinner/Spinner.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/components/common/Header/Header.stories.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-05-09T08:11:51.820Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 388
File: frontend/src/components/common/Spinner/Spinner.tsx:1-31
Timestamp: 2025-05-09T08:11:51.820Z
Learning: 로딩 스피너(Spinner) 컴포넌트에는 웹 접근성을 위해 `role="status"` 및 `aria-label` 같은 ARIA 속성을 추가해야 합니다. 이는 스크린 리더와 같은 보조 기술이 로딩 상태를 사용자에게 적절히 전달할 수 있게 합니다.
Applied to files:
frontend/src/components/common/Spinner/Spinner.tsx
🧬 Code graph analysis (1)
frontend/src/components/common/CustomDropDown/CustomDropDown.stories.tsx (1)
frontend/src/components/common/CustomDropDown/CustomDropDown.tsx (1)
CustomDropDown(94-115)
🔇 Additional comments (11)
frontend/src/components/common/Modal/Modal.tsx (1)
15-31: 기능 변화 없음 – 포맷팅 정리만 확인했습니다.
useEffect블록과 헤더 영역 JSX 들여쓰기만 변경되었고, 모달의 열림/닫힘·백드롭 동작에는 영향이 없습니다. 그대로 머지해도 무방해 보입니다.frontend/src/components/common/Spinner/Spinner.tsx (1)
4-40:heightprop 전달 보완 및 접근성 유지 모두 적절합니다.
SpinnerWrapper가height를 받아 스타일에 반영하고,Spinner에서 이를 실제로 전달하도록 수정된 부분이 스토리(CustomHeight)와도 잘 맞습니다. 기존에 유지하던role="status",aria-label="로딩 중"도 그대로라 접근성 요구사항도 충족합니다.Based on learnings, 로딩 스피너에 ARIA 속성을 포함해야 한다는 이전 합의와도 일치합니다.
frontend/src/components/common/Spinner/Spinner.stories.tsx (1)
4-44: Spinner 높이 제어 스토리가 컴포넌트 변경과 잘 맞습니다.기본 스토리와
CustomHeight스토리가heightprop 사용법을 명확히 보여주고 있고, 테두리 박스 안에서 렌더링하는 예시도 실제 사용 시나리오를 잘 설명해 줍니다. 현재 구조로 충분히 직관적이라 추가 수정 없이 사용 가능해 보입니다.frontend/src/components/common/CustomDropDown/CustomDropDown.stories.tsx (5)
1-4: 임포트가 적절합니다.Storybook 스토리 파일에 필요한 모든 임포트가 올바르게 구성되어 있습니다.
6-35: 메타 설정이 잘 구성되어 있습니다.argTypes에 한글 설명이 명확하게 작성되어 있고, autodocs 태그와 layout 설정이 적절합니다.
40-50: 스토리용 스타일 컴포넌트가 적절합니다.스토리 파일 내에서 데모용 스타일 컴포넌트를 정의하는 것은 일반적인 패턴입니다.
52-56: 샘플 데이터가 적절합니다.드롭다운 테스트를 위한 옵션 데이터가 명확하게 정의되어 있습니다.
1-108: React 19와 Storybook 8.5.0의 호환성은 공식적으로 검증되었습니다.검증 결과, Storybook 8.5.0은 2025년 1월 21일 릴리스에서 React 19 지원을 공식 추가했습니다. CustomDropDown 컴포넌트는 React 19의 알려진 호환성 문제(element.ref 제거)와 관련된 패턴(element.ref, forwardRef 등)을 사용하지 않으므로 현재 구성에서 안전합니다.
frontend/.storybook/main.ts (3)
1-1: Vite 프레임워크로의 마이그레이션이 올바릅니다.
@storybook/react-webpack5에서@storybook/react-vite로 임포트를 변경한 것이 적절합니다.
13-13: 프레임워크 설정이 올바릅니다.Vite 기반 Storybook으로 프레임워크를 변경한 것이 적절합니다.
16-23: viteFinal 구성이 올바르게 구현되어 있으며 모든 의존성이 확인되었습니다.
vite-tsconfig-paths(^5.1.4)와vite(^7.2.2)가 모두devDependencies에 정상적으로 설치되어 있습니다. 동적 임포트와mergeConfig를 사용한 플러그인 추가 방식은 Vite 기반 Storybook의 권장 패턴이며, 이를 통해 tsconfig.json에 정의된 경로 별칭(예:@/...)이 Storybook에서 올바르게 작동합니다.
frontend/src/components/common/CustomTextArea/CustomTextArea.stories.tsx
Show resolved
Hide resolved
- Storybook ^8.6이 아직 Vite 7을 지원하지 않아 Vite를 ^6.0.0으로 다운그레이드 - 버전 일관성을 위해 모든 Storybook 관련 패키지를 ^8.6.14로 업그레이드 - 호환되지 않는 피어 의존성으로 인한 npm install 에러 해결
- Vite 6 호환성 확보를 위해 Storybook 10으로 업그레이드 - 더 이상 사용되지 않는 패키지 제거: - @storybook/blocks (v9부터 빈 패키지) - @storybook/test (addon-test로 통합) - @storybook/addon-essentials (통합됨) - @storybook/addon-interactions (통합됨) - @storybook/addon-viewport (통합됨) - @storybook/addon-docs 추가 - @chromatic-com/storybook 3.2.4 → 4.1.3 BREAKING CHANGE: Storybook 10은 ESM-only이며 Node.js 20.16+ 필요
- Storybook 10의 ESM-only 패키지 타입 인식을 위해 필요 - Vite 번들러와의 호환성 개선 - '@storybook/react-vite' 모듈 해석 오류 해결
- Storybook 기본 responsive 뷰로 충분하므로 커스텀 viewport 제거 - Footer, Header 스토리에서 Tablet/Mobile/Desktop 변형 제거 - 각 컴포넌트는 Default 스토리만 유지하여 간소화
- @storybook/addon-viewport 제거 (Storybook 10에서 통합됨) - @storybook/addon-essentials 제거 (통합됨) - @storybook/addon-interactions 제거 (통합됨) - addon 미설치 경고 해결
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/package.json (2)
100-101: 의존성 정렬 순서 확인.
@storybook/addon-docs가 devDependencies 목록의 맨 끝에 추가되어 알파벳 순서가 깨졌습니다. 일관성을 위해 다른@storybook/*패키지들과 함께 정렬하는 것을 고려해주세요.🔎 제안된 수정
@storybook/addon-docs를 Line 51-53의 다른 Storybook 패키지들 사이로 이동:"@storybook/addon-onboarding": "^10.1.11", + "@storybook/addon-docs": "^10.1.11", "@storybook/react": "^10.1.11", "@storybook/react-vite": "^10.1.11",그리고 Line 101에서 제거:
"webpack-merge": "^6.0.1", - "@storybook/addon-docs": "^10.1.11" }
95-95: Storybook 10과의 Vite 버전 재검토 필요.Storybook 10.1.11은 Vite 7과 호환되므로, Storybook 8.6 호환성을 위해 진행된 Vite ^7.2.2에서 ^6.0.0으로의 다운그레이드를 다시 검토하세요. Vite를 최신 메이저 버전으로 업그레이드하여 최신 기능과 보안 업데이트를 활용하는 것을 권장합니다. 업그레이드 전에 @storybook/react-vite와의 호환성을 확인하세요.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
frontend/.storybook/main.tsfrontend/.storybook/preview.tsfrontend/package.jsonfrontend/src/components/common/Footer/Footer.stories.tsxfrontend/src/components/common/Header/Header.stories.tsxfrontend/tsconfig.json
💤 Files with no reviewable changes (3)
- frontend/src/components/common/Footer/Footer.stories.tsx
- frontend/.storybook/preview.ts
- frontend/src/components/common/Header/Header.stories.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-15T08:13:58.854Z
Learnt from: lepitaaar
Repo: Moadong/moadong PR: 844
File: frontend/package.json:97-97
Timestamp: 2025-11-15T08:13:58.854Z
Learning: In frontend/package.json, the `tough-cookie` package is a dependency of `msw` (Mock Service Worker) used for cookie parsing and management. Both packages should be in devDependencies together.
Applied to files:
frontend/package.json
🧬 Code graph analysis (1)
frontend/.storybook/main.ts (1)
frontend/eslint.config.mjs (1)
config(7-52)
🔇 Additional comments (3)
frontend/tsconfig.json (1)
8-8: LGTM!
"moduleResolution": "bundler"는 Vite 기반 Storybook 설정에 적합한 선택입니다. TypeScript 5.0 이상에서 지원되며, package.json의exports필드를 올바르게 해석하고 Vite 번들러와의 호환성을 보장합니다.frontend/.storybook/main.ts (1)
10-17: LGTM!
viteFinal구현이 적절합니다. 동적 import를 사용하여vite와vite-tsconfig-paths를 로드하고,mergeConfig로 기존 설정과 병합하는 방식이 Storybook Vite 패턴을 잘 따르고 있습니다. 이를 통해tsconfig.json의 경로 별칭(@/*)이 Storybook에서도 올바르게 해석됩니다.frontend/package.json (1)
48-53: Storybook 10 업그레이드에 대한 Node.js 버전 요구사항을 확인해주세요.Storybook 10.1.11은 ESM 전용이며 Node.js 20.19+ 또는 22.12+ 이상이 필요합니다. 프로젝트의 CI/CD 환경과 로컬 개발 환경에서 Node.js 버전이 호환되는지 확인해주세요. (Vite 6.0.0과의 호환성은 문제없습니다.)
Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/package.json (1)
48-102: PR 설명의 버전 불일치를 확인하세요.PR 설명에는 "Storybook 8.6"이 언급되어 있지만, package.json에는 Storybook 10.1.11이 설치되어 있습니다. PR 설명을 업데이트하여 실제 설치된 버전을 반영하는 것이 좋습니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
frontend/package.jsonfrontend/src/components/common/Header/Header.stories.tsxfrontend/src/components/common/Modal/Modal.tsx
💤 Files with no reviewable changes (1)
- frontend/src/components/common/Header/Header.stories.tsx
🧰 Additional context used
📓 Path-based instructions (3)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/components/common/Modal/Modal.tsx
frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{tsx,jsx}: Abstract complex logic/interactions into dedicated components/HOCs
Separate significantly different conditional UI/logic into distinct components
Colocate simple, localized logic or use inline definitions to reduce context switching
Choose field-level or form-level cohesion based on form requirements when using form libraries like react-hook-form
Use Component Composition instead of Props Drilling to reduce coupling
Files:
frontend/src/components/common/Modal/Modal.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/components/common/Modal/Modal.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-15T08:13:58.854Z
Learnt from: lepitaaar
Repo: Moadong/moadong PR: 844
File: frontend/package.json:97-97
Timestamp: 2025-11-15T08:13:58.854Z
Learning: In frontend/package.json, the `tough-cookie` package is a dependency of `msw` (Mock Service Worker) used for cookie parsing and management. Both packages should be in devDependencies together.
Applied to files:
frontend/package.json
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{tsx,jsx} : Use Component Composition instead of Props Drilling to reduce coupling
Applied to files:
frontend/src/components/common/Modal/Modal.tsx
🔇 Additional comments (3)
frontend/src/components/common/Modal/Modal.tsx (1)
33-37: LGTM! 포맷팅 변경이 적절합니다.JSX 속성의 따옴표 스타일과 인라인 핸들러 포맷팅만 변경되었으며, 모달의 동작 로직은 그대로 유지됩니다. 접근성 속성(
aria-modal)과 이벤트 전파 제어(stopPropagation) 로직이 올바르게 유지되고 있습니다.frontend/package.json (2)
35-35: Storybook 10.1.11 버전 확인 필요 및 React 19 호환성 재평가Storybook 공개 릴리스에서 v10.1.11 태그를 찾을 수 없습니다(현재까지 10.1.0/10.1.1만 확인됨). 정확한 버전을 확인하시기 바랍니다.
React 19 호환성은 공식적으로 지원 중입니다(Storybook 8.5부터 지원 시작). 다만 일부 애드온 및 매니저 동작에 대한 미해결 이슈가 있으므로, 프로젝트에서 사용 중인 특정 Storybook 애드온들이 React 19와 호환되는지 테스트하여 확인하세요.
Also applies to: 48-54, 78-78, 90-90, 102-102
Likely an incorrect or invalid review comment.
96-96: Storybook 10.1.11은 Vite 7을 지원합니다.Storybook의 공식 요구사항은 "Vite ≥ 5"이므로 Vite 7은 호환됩니다. 실제 호환성 문제가 있었다면 Storybook이 아닌 @vitejs/plugin-react의 버전 때문일 가능성이 높으며, 프로젝트의 @vitejs/plugin-react ^5.1.1은 Vite 7을 지원합니다. Vite 6.0.0으로의 다운그레이드는 불필요했을 수 있습니다.
Likely an incorrect or invalid review comment.
…tps://github.com/Moadong/moadong into feature/#888-common-components-storybook-MOA-390
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/.storybook/main.ts
🔇 Additional comments (2)
frontend/.storybook/main.ts (2)
1-1: Vite 마이그레이션에 맞게 import가 올바르게 변경되었습니다.Webpack 기반 설정에서 Vite 기반 설정으로의 전환이 정확하게 반영되었습니다.
10-13: 프레임워크 설정이 올바르게 변경되었습니다.Vite 기반 Storybook 설정으로 정확하게 전환되었습니다.
| addons: [ | ||
| '@storybook/addon-viewport', | ||
| '@storybook/addon-webpack5-compiler-swc', | ||
| '@storybook/addon-onboarding', | ||
| '@storybook/addon-essentials', | ||
| '@chromatic-com/storybook', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-docs', | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check the actual content of main.ts
cd frontend/.storybook && pwd && cat -n main.ts | head -20Repository: Moadong/moadong
Length of output: 830
🏁 Script executed:
# Check the Storybook version and addon installations in package.json
cd frontend && cat package.json | grep -A 50 '"devDependencies"' | grep -E '"@storybook|@chromatic'Repository: Moadong/moadong
Length of output: 224
🏁 Script executed:
# Search for usage of Controls, Actions in story files
cd frontend && find src -name '*.stories.*' -type f | head -5Repository: Moadong/moadong
Length of output: 330
🏁 Script executed:
# Check if individual essential addons are installed
cd frontend && npm ls 2>/dev/null | grep -E '@storybook/addon-(actions|controls|backgrounds|viewport|docs)' || echo "Using npm list to check dependencies"Repository: Moadong/moadong
Length of output: 110
🌐 Web query:
Storybook 10 addon-essentials default addons required
💡 Result:
The Essentials preset (addon-essentials) registers these default addons (can be disabled via options): actions, backgrounds, controls, docs, viewport, toolbars, measure, outline, and highlight. [1][2]
Sources:
[1] Storybook Essentials docs (official). [2] @storybook/addon-essentials package README.
@storybook/addon-docs가 설치되지 않았습니다. 이를 수정해야 합니다.
main.ts의 addons 배열에 @storybook/addon-docs가 선언되어 있지만, npm ls 결과에서 "UNMET DEPENDENCY @storybook/addon-docs@^10.1.11"로 표시되어 package.json에 실제로 설치되지 않았습니다.
추가로, @storybook/addon-essentials가 완전히 제거되었으므로 Controls, Actions, Backgrounds, Viewport, Toolbars, Measure, Outline, Highlight 등 필수 기능들이 모두 누락된 상태입니다. 이는 story 파일들의 정상 작동을 방해할 것으로 예상됩니다.
다음을 수행해야 합니다:
- package.json에
@storybook/addon-docs@^10.1.11추가 @storybook/addon-essentials@^10.1.11설치 여부 검토 (또는 필요한 개별 addon 설치)- 설치 후
npm install실행
🤖 Prompt for AI Agents
In frontend/.storybook/main.ts around lines 5 to 9, the addons array references
@storybook/addon-docs but that package is not installed and
@storybook/addon-essentials was removed, so add @storybook/addon-docs@^10.1.11
to package.json, review whether to reinstall
@storybook/addon-essentials@^10.1.11 or add the specific missing addons
(controls, actions, backgrounds, viewport, toolbar, measure, outline, highlight)
as individual dependencies, then run npm install to restore dependencies and
verify stories work.
| viteFinal: async (config) => { | ||
| const { mergeConfig } = await import('vite'); | ||
| const { default: tsconfigPaths } = await import('vite-tsconfig-paths'); | ||
|
|
||
| return mergeConfig(config, { | ||
| plugins: [tsconfigPaths()], | ||
| }); | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd frontend && cat package.json | grep -A 50 '"dependencies"'Repository: Moadong/moadong
Length of output: 1834
🏁 Script executed:
cd frontend && cat package.json | grep -A 20 '"devDependencies"'Repository: Moadong/moadong
Length of output: 892
🌐 Web query:
Storybook 10.1.11 Vite 6 compatibility requirements
💡 Result:
Short answer — Storybook 10.1.11 works with Vite 5 and Vite 6; minimum supported Vite is v5 and some features/addons (notably the Vitest addon) expect Vite 6 for full compatibility. See Storybook Vite docs and the Vite‑support issues/discussions. [1][2][3]
Sources
- Storybook Vite builder docs. [1]
- Storybook 10.1 release notes (10.1.x changelog). [2]
- GitHub issues about Vite v6 support and Vitest-addon requiring Vite 6. [3]
🌐 Web query:
vite-tsconfig-paths Vite 6 support
💡 Result:
Short answer: Yes — vite-tsconfig-paths has a v6 pre-release with Vite‑6–oriented features (on‑demand tsconfig discovery, auto reloading, etc.). Install the beta via npm/pnpm (see notes below). [1][2]
How to try it
- Install the v6 beta: npm install --save-dev vite-tsconfig-paths@next (or use the specific beta tag). [1][2]
Notes and sources
- npm package page showing v6.0.0‑beta.4 and v6 changelog summary. [1]
- GitHub releases for v6 (beta tags / release notes). [2]
References
[1] vite-tsconfig-paths — npm (v6.0.0‑beta.4).
[2] aleclarson/vite-tsconfig-paths — Releases (v6 beta changelog).
🏁 Script executed:
cd frontend && cat package.json | grep -E '"vite|"@storybook'Repository: Moadong/moadong
Length of output: 462
🏁 Script executed:
cd frontend && npm ls vite vite-tsconfig-paths 2>&1 | head -20Repository: Moadong/moadong
Length of output: 114
🌐 Web query:
vite-tsconfig-paths 5.1.4 Vite 6.0.0 compatibility support
💡 Result:
Short answer: No — [email protected] is the v5 line and does not include the v6 compatibility features. Use the v6 release (6.0.0 or later / beta → stable) of vite-tsconfig-paths for Vite 6 support. [1][2]
Sources:
- README / v6 notes on the plugin repo. [1]
- Release history showing 5.1.4 (Dec 6, 2024) and v6 beta/6.x releases. [2]
🌐 Web query:
vite-tsconfig-paths version 5 Vite 6 requirements
💡 Result:
vite-tsconfig-paths v5 requires Vite 5+ (it’s ESM-only to align with Vite’s migration). It does not specifically require Vite 6 — if you need CJS support or older Vite, pin to v4. [1][2]
Sources:
- Release notes v5.0.0 (ESM-only / align with Vite migration). [1]
- package.json / older metadata (note on pinning to v4 if not using Vite v5+). [2]
vite-tsconfig-paths를 v6으로 업그레이드하세요.
viteFinal 구현 자체는 올바르지만, vite-tsconfig-paths v5.1.4는 Vite 6 호환성 기능을 포함하지 않습니다. Vite 6.0.0과 함께 사용하려면 vite-tsconfig-paths v6으로 업그레이드해야 합니다. 현재 버전 조합에서는 일부 tsconfig 경로 해석이 제대로 작동하지 않을 수 있습니다. package.json에서 "vite-tsconfig-paths": "^6.0.0"으로 변경하세요.
🤖 Prompt for AI Agents
In frontend/.storybook/main.ts around lines 14 to 21, the viteFinal
implementation is fine but the project depends on vite-tsconfig-paths v5 which
lacks Vite 6 compatibility; update package.json to set "vite-tsconfig-paths":
"^6.0.0", run your package manager install (npm/yarn/pnpm) to update lockfiles,
rebuild Storybook and verify tsconfig path resolution works with Vite 6; if any
type/import changes are required after upgrading, adjust imports/usages
accordingly.
#️⃣연관된 이슈
📝작업 내용
Storybook 빌더 변경 (Webpack → Vite)
Vite 설정 오버라이딩
vite-tsconfig-paths플러그인을 적용하기 위해 viteFinal 설정을 추가했습니다.공통 컴포넌트 스토리 추가
스토리북 배포링크
추가된 컴포넌트: CustomDropDown, CustomTextArea, InputField, Modal, SearchField, Spinner
🚀 트러블 슈팅
vercel preview에서 배포가 실패했습니다. (커밋 전
npm run build:dev습관 중요..)원인은 현재 vite는 7.2.2 이고 storybook은 8.6인데, 8.6 버전에서는 vite 7버전을 지원하지 않습니다.
그래서 vite 6.0.0으로 다운 그레이드하여 해결했습니다.
Storybook 8.6.14 → 10.1.11 업그레이드
목적
Vite 6과의 호환성 문제를 해결하고, Storybook의 최신 기능을 활용하기 위해 메이저 버전 업그레이드를 진행했습니다.
아래는 주요 변경사항들입니다.
1. 의존성 업그레이드
제거된 패키지:
2. TypeScript 설정 업데이트
3. Storybook 설정 간소화
.storybook/main.ts: 통합된 addon 참조 제거.storybook/preview.ts: 커스텀 viewport 설정 제거개선효과
중점적으로 리뷰받고 싶은 부분(선택)
vite 6버전으로 내렸을 때 문제가 생길만한 부분이 있을지 찾아봐야 할 것 같네요.
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
새로운 기능
버그 수정
Chores
✏️ Tip: You can customize this high-level summary in your review settings.