[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, frontend/.gitignore |
Storybook을 @storybook/react-webpack5 → @storybook/react-vite로 전환. webpackFinal 제거, viteFinal 추가(동적 import로 vite·vite-tsconfig-paths, tsconfig-paths 플러그인 병합). 뷰포트 애드온 및 관련 preview 설정 제거. moduleResolution을 bundler로 변경. .gitignore에 /storybook-static 추가. |
새 스토리 추가 — 공통 컴포넌트 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이 여러 공통 컴포넌트 스토리를 추가하여 해당 목표와 일치함.
- [feature] MOA-390 공통 컴포넌트에 대해 스토리파일을 제작한다 #888 (벡터 검색으로 매칭된 항목) — Storybook 구성·스토리 추가 작업의 관련 사례로 연관 가능.
Possibly related PRs
- [feature] Spinner 컴포넌트 접근성 개선 및 높이 prop 추가 #391 — Spinner의
height전달 관련 변경과 중복/보완 가능성 있음. - [release] FE 1차 배포 #149 — Storybook 설정(webpackFinal→viteFinal) 및 경로 별칭 처리 변경과 직접적 코드 관련성 있음.
- [chore] 빌드 툴 Webpack to Vite 전환 #844 — Storybook Webpack→Vite 마이그레이션 관련 설정·의존성 변경과 연관됨.
Suggested labels
✨ Feature
Suggested reviewers
- lepitaaar
- suhyun113
- seongje973
- Zepelown
Pre-merge checks
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목이 풀 리퀘스트의 주요 변경사항을 정확히 반영합니다. 공통 컴포넌트 스토리 파일 제작이라는 핵심 목표를 명확하게 요약하고 있습니다. |
| Linked Issues check | ✅ Passed | 모든 코드 변경사항이 MOA-390의 요구사항을 충족합니다. 공통 폴더의 6개 컴포넌트(CustomDropDown, CustomTextArea, InputField, Modal, SearchField, Spinner)에 대한 스토리북 파일이 모두 제작되었습니다. |
| Out of Scope Changes check | ✅ Passed | Storybook 마이그레이션(Webpack → Vite), 패키지 업그레이드, tsconfig 변경 등이 포함되어 있으나, 이는 공통 컴포넌트 스토리 제작 구현을 위한 필수 인프라 변경으로 관련성이 높습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
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 설정으로 정확하게 전환되었습니다.
- vite 6버전과의 호환성을 위해 업그레이드
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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 (1)
frontend/package.json
🧰 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
🔇 Additional comments (2)
frontend/package.json (2)
102-102:@storybook/addon-docs추가는 적절합니다.문서 생성을 위한
@storybook/addon-docs를 추가한 것은 좋은 결정입니다. Storybook 10에서 이 애드온은 컴포넌트 문서화에 필수적입니다.
96-97: Vite 6 다운그레이드는 적절합니다. 검증 완료.@vitejs/plugin-react 5.1.1은 Vite 6과 완벽하게 호환되며, @storybook/react-vite 10.1.11은 Vite 7에 대한 공식 지원이 없습니다. Storybook 10은 Vite 5 이상을 요구하지만 Vite 7 호환성은 보장되지 않으므로, 현재의 Vite 6 유지는 안전한 선택입니다.
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
스토리 파일들 많이 추가해주셨네요!
수고하셨습니다 🔥
코멘트 몇 개 남겼는데 확인 부탁드려요~
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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 (2)
frontend/.gitignorefrontend/package.json
🧰 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
🔇 Additional comments (4)
frontend/.gitignore (1)
18-18: 좋습니다. Storybook 정적 빌드 출력을 올바르게 제외하고 있습니다.Vite 기반 Storybook으로 전환하면서 생성되는
/storybook-static디렉토리를 무시 목록에 추가한 것이 적절합니다. 기존 빌드 아티팩트 패턴(예:dist,build-storybook.log)과 일관성이 있습니다.frontend/package.json (3)
98-98: vite-tsconfig-paths 버전이 적절히 업그레이드되었습니다.vite-tsconfig-paths가 6.0.0으로 업그레이드되어 Vite 7과의 호환성을 고려한 것으로 보입니다. 다만 로컬 개발 및 빌드 환경에서 절대 경로 import가 정상적으로 해석되는지 확인하시기 바랍니다.
52-55: Storybook 10의 애드온 구조 변경을 확인해주세요.Storybook 10에서는 많은 애드온이 코어에 통합되었습니다. addon-essentials, addon-interactions, addon-viewport 등이 제거되었는데, 이들 기능이 Storybook 10 코어에 포함되어 있는지 또는 현재 추가된 addon-docs와 addon-onboarding만으로 충분한지 확인이 필요합니다.
특히 controls, actions, viewport와 같은 필수 기능들이 Storybook UI에서 정상적으로 작동하는지 로컬 환경에서 검증하시기 바랍니다.
69-69: @vitejs/plugin-react 5.1.1과 Vite 7.3.0의 버전 호환성은 문제가 없습니다.@vitejs/plugin-react v5.x 시리즈는 Vite 7+을 위해 설계된 현재 유지보수 중인 버전입니다. 버전 5.1.1은 Vite 7과 완전히 호환되므로 업그레이드가 필요하지 않습니다.
Likely an incorrect or invalid review comment.
lepitaaar
deleted the
feature/#888-common-components-storybook-MOA-390
branch
2 participants
#️⃣연관된 이슈
📝작업 내용
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.