Toast 구현 with Jotai

[sjoleee]

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

#91

🎉 변경 사항

Toast 컴포넌트를 Jotai로 구현했습니다.

🙏 여기는 꼭 봐주세요!

사용 방법

useToast의 fireToast로 toast를 띄울 수 있습니다.
아이콘과 문구가 동시에 들어가는 경우가 있는 것 같은데, 이때는 Toast.Text 컴포넌트를 사용해주세요~!
그리고 CTA와 같이 있는 화면에서는 highterThanCTA 를 true로 주시면 좀 더 높은 위치에 띄워집니다~!

  const { fireToast } = useToast();

  return (
    <div>
      // 예제 1
      <button type="button" onClick={() => fireToast({ content: '토스트 메세지 입니다' })}>
        토스트 발사
      </button>

      // 예제 2
      <button
        type="button"
        onClick={() =>
          fireToast({
            content: (
              <>
                <WarningIcon />
                <Toast.Text>토스트 메시지 with 아이콘</Toast.Text>
              </>
            ),
            higherThanCTA: true,
          })
        }
      >
        다른 토스트 발사
      </button>
    </div>
  );

🌄 스크린샷

📚 참고

[github-actions]

Bundle Sizes

Compared against be296b6

Route	Size (gzipped)	Diff
/	75.64 KB	-4.42 KB
/_app	185.72 KB	+6.09 KB
/review/[token]	76.47 KB	-4.41 KB
/survey	78.97 KB	-4.57 KB
/survey/create	82.68 KB	-4.43 KB
/survey/intro	78.97 KB	-4.57 KB

Dynamic import: No significant changes found

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	b9413d1
Status:	✅  Deploy successful!
Preview URL:	https://6faf5a91.na-lab.pages.dev
Branch Preview URL:	https://feat-toast-jotai.na-lab.pages.dev

View logs

[codecov-commenter]

Codecov Report

Patch and project coverage have no change.

Comparison is base (be296b6) 92.39% compared to head (b9413d1) 92.39%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #166   +/-   ##
=======================================
  Coverage   92.39%   92.39%           
=======================================
  Files          38       38           
  Lines         276      276           
  Branches       51       51           
=======================================
  Hits          255      255           
  Misses         21       21           

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[sumi-0011]

고생하셨습니다 👍🏻

전역상태 고려해주셔서 감사합니다 🙇

[hyesungoh]

고생하셨습니다 👍 👍 👍 💯

[hyesungoh]

컴파운드 맛있다 !! 👍 👍