핵심 요약
올라핀테크가 스토리북 도입으로 UI 상태를 시각화하고 컴포넌트 중복 및 협업 이슈를 해결하며 Shared(UI) → Widgets → Views 계층 구조를 정립했습니다.
구현 방법
- 스토리북 도입 및 구조 정의: Shared(UI) → Widgets → Views로 계층 구분
- 컴포넌트 스토리 컨벤션: 각 컴포넌트에 하나의 스토리로 모든 상태를 표현하고 API를 모킹
- API 모킹 및 픽스처 관리: storybook-addon-module-mock과 Zod 기반 픽스처로 다양한 시나리오 재현
- 뷰 스토리 도입: 화면 단위의 흐름을 스토리에 포함시켜 협업 피드백을 촉진
- 도구 활용 및 확장성: Next.js 환경에 맞춘 Storybook 구성 및 E2E 테스트 도입과의 연계
주요 결과
- 협업 효율 향상 및 UI 상태 확인 용이성 증가
- 코드 품질 및 유지보수성 개선
- 엣지 케이스 확인 및 버그 발견 용이성 확보
- E2E 테스트 도입으로 전반적 품질 관리 체계 강화
