토스트가 화면 오른쪽으로 이동하면서 사라져야 하기 때문에, 토스트의 지속 시간이 끝나면 다시 500ms 동안 애니메이션을 줄 수 있도록 토스트의 지속 시간 동안의 setTimeout이 끝나면 Promise가 resolve 되도록 하였습니다.
context API 사용
토스트를 표시하고 사라지게 하는 등의 처리를 context API 로 관리하였습니다.
💥 트러블 슈팅
지속시간과 사라지는 시간 상태 관리
처음에는 토스트의 지속시간만 컨트롤 하면 될 것으로 생각했지만, 토스트가 사라지는 자연스러운 동작을 위해 두 가지 상태가 필요했습니다. 이를 위해 Promise를 활용하였고 setTimeout 완료시 resolve 되고, 그 후 다시 500ms의 setTimeout이 발동되는 구조로 해결했습니다.
객체 상태 관리 및 useId 사용
토스트 정보 state 를 하나의 객체로 관리하고, 각각의 field에 useId를 적용 후 switch 문을 통해 setState 하여, state 및 함수를 각각 하나씩만 사용할 수 있었습니다.
