Details

1. Problem identified with the Toast component
   • The design system Toast only defined the UI; each usage required its own separate behavior implementation
   • The toast logic was disproportionately long relative to usage frequency, occupying a large portion of page component logic
   • Resulted in duplicated code, inconsistent behavior across usages, and poor separation of concerns in page components
2. Planned and set goals for Toast component improvement
   • Defined the target state concretely: toast display should be triggerable like an event with no additional logic required at the call site
   • Selected a comparable reference and analyzed its code (Chakra UI's useToast)
   • Diagrammed the structure to present it clearly to teammates
   
3. Gathered requirements aligned with the product and implemented
   • To avoid over-engineering, prioritized minimal viable features first — excluded toast close, toast update, and toast position features
   • Replaced the Context API implementation with zustand, the global state library already in use across the product
   
4. Refined the code and applied to the product
   • Achieved the original goal: toast display is now triggerable with no extra logic at the call site
   • Unified toast behavior, reduced duplicated code, and simplified page component logic