프론트엔드
Storybook으로 만든 독립적인 UI 개발 환경
두줄요약
Storybook으로 UI 상태를 독립적으로 재현해 개발 환경 준비에 덜 의존하도록 구성했습니다. 실제 API 연동과 화면 흐름은 기존 개발 환경에서 분리해 확인했습니다.
문제 상황
- 퍼블리싱과 개발이 같은 리포지터리의 브랜치로 나뉘어 진행되며, 병합 전에는 완성된 화면 확인이 어려운 상황
- 로그인, API, 데이터 준비 여부에 따라 빈 상태·예외 상태·로딩 상태 재현 비용이 커지는 문제
- 특정 UI 상태를 확인하려면 전체 개발 환경 실행과 조건 수작업이 필요한 비효율
해결 방법
- Storybook으로 컴포넌트와 화면 상태를 애플리케이션과 분리해 독립적으로 렌더링
- Vite 설정과 alias, Provider 환경을 실제 프로젝트와 맞춰 차이 최소화
- fixtures와 handlers 기반 Mock 데이터로 기본 상태, 빈 상태, 에러 상태를 Story별로 분리
주의할 점
- 컴포넌트 리네이밍이나 경로 변경이 Story import 오류로 이어질 수 있음
- Storybook은 화면 단위 검증에 강하지만 화면 이동, 실제 API 연동, 전체 사용자 흐름까지 대체하지는 못함
- 모든 화면을 옮기기보다 확인 비용이 큰 영역부터 적용하는 편이 효율적
