2025 . 오은

repo

토스트 UI 스터디

2024.05.29 ~ 2024.05.31

개인React
detail image

🗝️ 주요 기능 및 특징

  • - 내용과 제목 설정 하여 토스트 표시 기능
  • - 토스트 지속시간 설정 기능

🤔 기술적 의사결정

  • setTimeout 과 Promise 사용
  • 토스트가 화면 오른쪽으로 이동하면서 사라져야 하기 때문에, 토스트의 지속 시간이 끝나면 다시 500ms 동안 애니메이션을 줄 수 있도록 토스트의 지속 시간 동안의 setTimeout이 끝나면 Promise가 resolve 되도록 하였습니다.

  • context API 사용
  • 토스트를 표시하고 사라지게 하는 등의 처리를 context API 로 관리하였습니다.

💥 트러블 슈팅

  • 지속시간과 사라지는 시간 상태 관리
  • 처음에는 토스트의 지속시간만 컨트롤 하면 될 것으로 생각했지만, 토스트가 사라지는 자연스러운 동작을 위해 두 가지 상태가 필요했습니다. 이를 위해 Promise를 활용하였고 setTimeout 완료시 resolve 되고, 그 후 다시 500ms의 setTimeout이 발동되는 구조로 해결했습니다.

  • 객체 상태 관리 및 useId 사용
  • 토스트 정보 state 를 하나의 객체로 관리하고, 각각의 field에 useId를 적용 후 switch 문을 통해 setState 하여, state 및 함수를 각각 하나씩만 사용할 수 있었습니다.