토스트 메세지 관련 개발

[hyesungoh]

🤔 해결하려는 문제가 무엇인가요?

• closes #153

• toast 메세지를 그리는 wrapper와 fire 할 수 있는 hook을 개발

🎉 어떻게 해결했나요?

• 다음과 같은 규칙을 지키도록 했어요

- 한 번에 한 개의 토스트 메세지만 그릴 수 있음
- 같은 내용의 토스트가 fire 될 시 duration을 초기화
- 다른 내용의 토스트가 fire 될 시 기존 토스트가 내려감

사용 방법

const { fireToast } = useToast();

// 기본 duration 1500ms
<button onClick={() => fireToast({content: '토스트 내용'})}>fire toast</button>

<button onClick={() => fireToast({content: '토스트 내용', duration: 3000})}>fire toast</button>

📚 Attachment (Option)

• _app에서 ToastWrapper를 렌더링해요

  • ToastWrapper는 global state toast를 렌더링해요
  • key 값으로 toast.content를 사용해, 다른 메세지의 토스트는 다시 렌더링을 해야되는 것을 알려요 (이 때 애니메이션도 재생돼요)

• fireToast에서 id 값을 date getTime을 사용해요

  • setTimeout을 이용해 duration 이후에 removeToast 함수를 id와 함께 실행해요
  • removeToast는 현재 state의 id와 인자로 받은 id를 비교해요
  • 비교해서 같을 시 삭제해요 (한 가지 toast가 duration 만큼 유지되었기 때문에)
  • 같지 않을 시 기존 state를 유지해요 (삭제 이전에 토스트 메세지가 교체된 상태기 때문에 -> 다음 removeToast에 삭제 위임)

https://user-images.githubusercontent.com/26461307/206860514-f9a87fd0-4b71-4652-a22e-58209c161f88.mov

[codecov-commenter]

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage :thumbsup:

Coverage data is based on head (2060abd) compared to base (068de89). Patch has no changes to coverable lines.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #154 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 21 21 Lines 191 191 Branches 37 37 ========================================= Hits 191 191 ``` Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=depromeet). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=depromeet)

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[github-actions[bot]]

Bundle Sizes

Compared against c72d5fe34d60ef2acd2da036299caef83f53deba

Route	Size (gzipped)	Diff
/	87.08 KB	-4.87 KB
/_app	185.56 KB	+4.26 KB
/onboard/step1	74.19 KB	-2.99 KB
/onboard/step2	74.43 KB	-2.99 KB
/onboard/step3	76.19 KB	-2.98 KB
/template	82.1 KB	-4.84 KB
/test	106.05 KB	-4.78 KB

Dynamic import: No significant changes found

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	9ddf2cc
Status:	✅  Deploy successful!
Preview URL:	https://1b88315e.12-team3-web.pages.dev
Branch Preview URL:	https://issue-153.12-team3-web.pages.dev

View logs