프론트엔드
퍼블리셔와 개발자 협업을 위한 스토리북 깨짐 방지 방안
두줄요약
퍼블리셔와 개발자 협업에서 스토리북이 깨지는 원인을 분석하고 CIC 패턴으로 역할을 분리했습니다. 스토리북용 props와 실행 환경 분기를 정리해 무결성을 유지했습니다.
문제 상황
- 퍼블리셔와 개발자가 스토리북을 함께 사용하면서 디자인 검수와 웹 접근성 확인이 수시로 필요함
- API 연동, 쿠키, Hook, props 변경, 중첩 컴포넌트 구조 차이로 스토리북이 쉽게 깨지는 문제 발생
원인 분석
- 스토리북과 실제 서비스의 실행 환경 차이로 데이터와 내부 상태가 달라짐
- 퍼블리셔 산출물과 개발 산출물의 props 구조가 달라 스토리 수정 시 연쇄 영향 발생
- 하위 컴포넌트 props 변경이 상위 스토리까지 깨뜨리는 구조적 문제 존재
해결 방법
- Container In Component(CIC) 패턴 도입으로 Presentational Component와 Container Component 역할 분리
- StorybookShield로 스토리북 환경을 판별해 스토리북에서는 Presentational Component만 노출
- 스토리북용 샘플 props를 한 디렉토리에서 관리하고, 매칭되는 Container를 동일 파일에 배치