배송지 입력 예제에서 카카오 주소 검색 SDK와 배송 가능 지역 판단이 컴포넌트에 섞이는 과정을 따라가며, 책임과 의존 방향을 차례로 정리합니다.
Figma MCP가 놓친 컴포넌트 이름과 속성을 API로 복원한 뒤, 디자인 시스템과 연결할 정보를 압축해 전달하는 훅을 만들었습니다.
컴포넌트에 흩어진 클릭·노출 트래킹을 data attribute와 이벤트 맵으로 옮기고, 브라우저 API로 감지하도록 만든 과정입니다.
API가 완성되기 전에도 화면을 개발할 수 있도록 도메인 모델과 어댑터를 만들고, MSW로 서버 응답을 재현한 과정을 담았습니다.
요구사항마다 props가 늘어나던 공통 컴포넌트를 HTML 속성 상속과 합성 패턴으로 고치고, 폴더 구조와 Storybook까지 정리한 과정입니다.
