Storybook의 MSW mock 구조 개선

카카오스타일 파트너센터 팀은 UI 테스트 및 문서화를 위해 Storybook과 MSW를 사용하며 겪었던 문제점을 공유합니다. 기존에는 각 Storybook 스토리에 MSW GraphQL mock을 개별적으로 정의하여 코드 중복과 mock 누락으로 인한 오류가 빈번하게 발생했습니다.

이를 해결하기 위해, 모든 MSW mock을 한 곳에서 관리하는 새로운 구조를 제안하고, recast 라이브러리를 활용한 변환 스크립트 작성 및 마이그레이션 과정을 상세히 설명합니다. 이 개선을 통해 API mock 관리의 효율성을 높이고 오류 발생 가능성을 줄이는 것을 목표로 합니다.