상세 내용

1. Toast 컴포넌트 관련 문제 발생
   • 디자인 시스템의 토스트는 UI만 정의되어 있어서, 토스트를 사용하는 곳마다 따로 동작을 구현함
   • 토스트 사용 횟수에 비해 로직이 길어, 토스트를 사용하는 페이지 컴포넌트의 로직의 많은 부분을 차지하게 됨.
   • 반복 코드 발생 및 각각 세부 동작이 다른 문제, 페이지 컴포넌트의 관심사 분리가 제대로 이루어지지 않는 문제 발생
2. Toast 컴포넌트 개선 계획 수립 및 목표 설정
   • TO-BE 모습을 구체적으로 상상함.
추가 로직 작성 없이 토스트 노출을 이벤트처럼 trigger 할 수 있는 코드를 목표로 정함
   • 유사한 레퍼런스 선정 및 코드 분석. (Chakra-ui의 useToast)
   • 해당 코드의 구조를 정리하고 팀원들에게 설명하기 위해 도식화하여 표현
   
3. 제품에 맞춰 요구사항 정리 및 구현
   • 오버 엔지니어링을 주의하고 최소한의 기능을 먼저 개발하고자, 토스트 닫기, 토스트 업데이트, 토스트 위치 설정 기능 제외
   • Context API로 구현된 부분은 제품에서 사용하고 있는 전역 상태 라이브러리인 zustand로 대체
   
4. 코드 개선 및 적용
   • 초기에 구상한대로 토스트 노출을 trigger 할 수 있는 코드로 개선됨
   • 토스트의 동작 통일, 반복코드 감소, 토스트를 사용하는 페이지 컴포넌트의 로직 간소화