From bdf4350d9a1437af933a348c432e18ff817c4a29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8F=84=EC=9D=80?= Date: Fri, 12 Jan 2024 20:44:39 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Toast=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#106)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: @radix-ui/react-portal 패키지 설치 * feat: Toast 컴포넌트 추가 * chore: position을 고정 * feat: ToastOptionAtom으로 position 관리할 수 있도록 * feat: 부가적인 옵션만을 받아 default + 부가옵션을 설정할 수 있도록 * refactor: sequance 대신 length로 id 부여 --- .pnp.cjs | 96 +++++++++++------- ...react-portal-npm-1.0.4-e4c93f6e90-10c0.zip | Bin 0 -> 14047 bytes package.json | 1 + src/assets/icons/toast-success.svg | 5 + src/assets/icons/toast-warning.svg | 3 + src/components/atoms/toast/Toast.atom.ts | 41 ++++++++ src/components/atoms/toast/Toast.stories.tsx | 38 +++++++ src/components/atoms/toast/Toast.tsx | 57 +++++++++++ src/components/atoms/toast/ToastProvider.tsx | 20 ++++ src/hooks/useToast.ts | 19 ++++ yarn.lock | 21 ++++ 11 files changed, 267 insertions(+), 34 deletions(-) create mode 100644 .yarn/cache/@radix-ui-react-portal-npm-1.0.4-e4c93f6e90-10c0.zip create mode 100644 src/assets/icons/toast-success.svg create mode 100644 src/assets/icons/toast-warning.svg create mode 100644 src/components/atoms/toast/Toast.atom.ts create mode 100644 src/components/atoms/toast/Toast.stories.tsx create mode 100644 src/components/atoms/toast/Toast.tsx create mode 100644 src/components/atoms/toast/ToastProvider.tsx create mode 100644 src/hooks/useToast.ts diff --git a/.pnp.cjs b/.pnp.cjs index 0ed6e791..af6faab2 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -28,6 +28,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@hookform/devtools", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:4.3.1"],\ ["@radix-ui/react-icons", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.3.0"],\ + ["@radix-ui/react-portal", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4"],\ ["@radix-ui/react-tabs", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4"],\ ["@sentry/nextjs", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:7.91.0"],\ ["@sentry/utils", "npm:7.91.0"],\ @@ -5915,7 +5916,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-arrow", "virtual:69770189d9e91adf1e2cac02abe339958e8b08e5b59aec6b226955e1a9b141bcf5facf290e3dc02c88c9102190575c83d61bcb5d32a525a5be32a4f9f5df32f7#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -5943,10 +5944,10 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-collection", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ - ["@radix-ui/react-slot", "virtual:077b407c90001b73813b3e73d3504c0b0a6e865cc0a1514c15ecdf8ca2c969293f71408963df9eab2c2ad0f6fc5345246293dfd58b6ed05be7ff4b5b41a7d9d2#npm:1.0.2"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ + ["@radix-ui/react-slot", "virtual:90ab930ccab92e3a39a298b50266285b96cd528144bf5bc1be5558c0117a148075649eb27ff3f52a5a6a78444d701355c13c01a30646f03812f315f8693ef5a9#npm:1.0.2"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -5969,10 +5970,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1", {\ - "packageLocation": "./.yarn/__virtual__/@radix-ui-react-compose-refs-virtual-283ea3c6e1/0/cache/@radix-ui-react-compose-refs-npm-1.0.1-02d1046f7d-10c0.zip/node_modules/@radix-ui/react-compose-refs/",\ + ["virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1", {\ + "packageLocation": "./.yarn/__virtual__/@radix-ui-react-compose-refs-virtual-0f1b1030ce/0/cache/@radix-ui-react-compose-refs-npm-1.0.1-02d1046f7d-10c0.zip/node_modules/@radix-ui/react-compose-refs/",\ "packageDependencies": [\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@babel/runtime", "npm:7.23.4"],\ ["@types/react", "npm:18.2.37"],\ ["react", "npm:18.2.0"]\ @@ -6044,8 +6045,8 @@ const RAW_RUNTIME_STATE = ["@radix-ui/react-dismissable-layer", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.4"],\ ["@babel/runtime", "npm:7.23.4"],\ ["@radix-ui/primitive", "npm:1.0.1"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-use-callback-ref", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.1"],\ ["@radix-ui/react-use-escape-keydown", "virtual:2adfb1a81a54f3ec70ccaa1339be74207a9ae33de34f3c7d3099ea423d617c1c73b6328af02379368e8c2b3ede38c375118c3abfc1f2d68b187becffe2afe332#npm:1.0.3"],\ ["@types/react", "npm:18.2.37"],\ @@ -6098,8 +6099,8 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-focus-scope", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-use-callback-ref", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ @@ -6176,9 +6177,9 @@ const RAW_RUNTIME_STATE = ["@babel/runtime", "npm:7.23.4"],\ ["@floating-ui/react-dom", "virtual:69770189d9e91adf1e2cac02abe339958e8b08e5b59aec6b226955e1a9b141bcf5facf290e3dc02c88c9102190575c83d61bcb5d32a525a5be32a4f9f5df32f7#npm:2.0.4"],\ ["@radix-ui/react-arrow", "virtual:69770189d9e91adf1e2cac02abe339958e8b08e5b59aec6b226955e1a9b141bcf5facf290e3dc02c88c9102190575c83d61bcb5d32a525a5be32a4f9f5df32f7#npm:1.0.3"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-use-callback-ref", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.1"],\ ["@radix-ui/react-use-layout-effect", "virtual:c1cdfbcfb0754cffde491f3d979f44e9565e6fd10c4a2425d4299c8a3b46e31357efdc2a1d1e9ac1a97c5013652de8a178015cf78f241274fd2663833c5b12d3#npm:1.0.1"],\ ["@radix-ui/react-use-rect", "virtual:69770189d9e91adf1e2cac02abe339958e8b08e5b59aec6b226955e1a9b141bcf5facf290e3dc02c88c9102190575c83d61bcb5d32a525a5be32a4f9f5df32f7#npm:1.0.1"],\ @@ -6206,12 +6207,38 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ + ["npm:1.0.4", {\ + "packageLocation": "./.yarn/cache/@radix-ui-react-portal-npm-1.0.4-e4c93f6e90-10c0.zip/node_modules/@radix-ui/react-portal/",\ + "packageDependencies": [\ + ["@radix-ui/react-portal", "npm:1.0.4"]\ + ],\ + "linkType": "SOFT"\ + }],\ ["virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.3", {\ "packageLocation": "./.yarn/__virtual__/@radix-ui-react-portal-virtual-e1a19b7c4e/0/cache/@radix-ui-react-portal-npm-1.0.3-4c59d6f96d-10c0.zip/node_modules/@radix-ui/react-portal/",\ "packageDependencies": [\ ["@radix-ui/react-portal", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ + ["@types/react", "npm:18.2.37"],\ + ["@types/react-dom", "npm:18.2.15"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:18.2.0"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }],\ + ["virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4", {\ + "packageLocation": "./.yarn/__virtual__/@radix-ui-react-portal-virtual-63796dde4d/0/cache/@radix-ui-react-portal-npm-1.0.4-e4c93f6e90-10c0.zip/node_modules/@radix-ui/react-portal/",\ + "packageDependencies": [\ + ["@radix-ui/react-portal", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4"],\ + ["@babel/runtime", "npm:7.23.4"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -6239,7 +6266,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-presence", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@radix-ui/react-use-layout-effect", "virtual:c1cdfbcfb0754cffde491f3d979f44e9565e6fd10c4a2425d4299c8a3b46e31357efdc2a1d1e9ac1a97c5013652de8a178015cf78f241274fd2663833c5b12d3#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ @@ -6263,12 +6290,12 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3", {\ - "packageLocation": "./.yarn/__virtual__/@radix-ui-react-primitive-virtual-077b407c90/0/cache/@radix-ui-react-primitive-npm-1.0.3-1983a5adc0-10c0.zip/node_modules/@radix-ui/react-primitive/",\ + ["virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3", {\ + "packageLocation": "./.yarn/__virtual__/@radix-ui-react-primitive-virtual-90ab930cca/0/cache/@radix-ui-react-primitive-npm-1.0.3-1983a5adc0-10c0.zip/node_modules/@radix-ui/react-primitive/",\ "packageDependencies": [\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-slot", "virtual:077b407c90001b73813b3e73d3504c0b0a6e865cc0a1514c15ecdf8ca2c969293f71408963df9eab2c2ad0f6fc5345246293dfd58b6ed05be7ff4b5b41a7d9d2#npm:1.0.2"],\ + ["@radix-ui/react-slot", "virtual:90ab930ccab92e3a39a298b50266285b96cd528144bf5bc1be5558c0117a148075649eb27ff3f52a5a6a78444d701355c13c01a30646f03812f315f8693ef5a9#npm:1.0.2"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -6298,11 +6325,11 @@ const RAW_RUNTIME_STATE = ["@babel/runtime", "npm:7.23.4"],\ ["@radix-ui/primitive", "npm:1.0.1"],\ ["@radix-ui/react-collection", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.3"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-direction", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-id", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-use-callback-ref", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.1"],\ ["@radix-ui/react-use-controllable-state", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ @@ -6335,7 +6362,7 @@ const RAW_RUNTIME_STATE = ["@radix-ui/number", "npm:1.0.1"],\ ["@radix-ui/primitive", "npm:1.0.1"],\ ["@radix-ui/react-collection", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.3"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-direction", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-dismissable-layer", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.4"],\ @@ -6344,8 +6371,8 @@ const RAW_RUNTIME_STATE = ["@radix-ui/react-id", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-popper", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.1.2"],\ ["@radix-ui/react-portal", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.3"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ - ["@radix-ui/react-slot", "virtual:077b407c90001b73813b3e73d3504c0b0a6e865cc0a1514c15ecdf8ca2c969293f71408963df9eab2c2ad0f6fc5345246293dfd58b6ed05be7ff4b5b41a7d9d2#npm:1.0.2"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ + ["@radix-ui/react-slot", "virtual:90ab930ccab92e3a39a298b50266285b96cd528144bf5bc1be5558c0117a148075649eb27ff3f52a5a6a78444d701355c13c01a30646f03812f315f8693ef5a9#npm:1.0.2"],\ ["@radix-ui/react-use-callback-ref", "virtual:85876a5d6296666ae7a86a407a1bc1132ad4356094bd396f920afd220f67b0f434f195dcae24ca0598af27a0153db02c5ceab2b57c587b511096bfe9aef91660#npm:1.0.1"],\ ["@radix-ui/react-use-controllable-state", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-use-layout-effect", "virtual:c1cdfbcfb0754cffde491f3d979f44e9565e6fd10c4a2425d4299c8a3b46e31357efdc2a1d1e9ac1a97c5013652de8a178015cf78f241274fd2663833c5b12d3#npm:1.0.1"],\ @@ -6380,7 +6407,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-separator", "virtual:fdf3c6948199b9b9eca9ef29cf1fb552bc53d9fe228685c5610f1a0b48a348d2337ff331f295e9cb105309813a8d9fc6dfcab9f6f5350896d079fe3eca28e45f#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -6403,12 +6430,12 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:077b407c90001b73813b3e73d3504c0b0a6e865cc0a1514c15ecdf8ca2c969293f71408963df9eab2c2ad0f6fc5345246293dfd58b6ed05be7ff4b5b41a7d9d2#npm:1.0.2", {\ - "packageLocation": "./.yarn/__virtual__/@radix-ui-react-slot-virtual-7b0652c201/0/cache/@radix-ui-react-slot-npm-1.0.2-b9078e9a0b-10c0.zip/node_modules/@radix-ui/react-slot/",\ + ["virtual:90ab930ccab92e3a39a298b50266285b96cd528144bf5bc1be5558c0117a148075649eb27ff3f52a5a6a78444d701355c13c01a30646f03812f315f8693ef5a9#npm:1.0.2", {\ + "packageLocation": "./.yarn/__virtual__/@radix-ui-react-slot-virtual-f2d8f87434/0/cache/@radix-ui-react-slot-npm-1.0.2-b9078e9a0b-10c0.zip/node_modules/@radix-ui/react-slot/",\ "packageDependencies": [\ - ["@radix-ui/react-slot", "virtual:077b407c90001b73813b3e73d3504c0b0a6e865cc0a1514c15ecdf8ca2c969293f71408963df9eab2c2ad0f6fc5345246293dfd58b6ed05be7ff4b5b41a7d9d2#npm:1.0.2"],\ + ["@radix-ui/react-slot", "virtual:90ab930ccab92e3a39a298b50266285b96cd528144bf5bc1be5558c0117a148075649eb27ff3f52a5a6a78444d701355c13c01a30646f03812f315f8693ef5a9#npm:1.0.2"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-compose-refs", "virtual:e7789d651dfd1851f2b426e285cfe7e57b9f2ab5ce27abef8f38dc98f0935f73268c2428d150b58c015f098f1c638a5712234411891b079a705a2085a55240fa#npm:1.0.1"],\ + ["@radix-ui/react-compose-refs", "virtual:f2d8f8743469d83163f71f8b2230a298b16a1e7c8e66453fedf61c46f937f123e8eb5bbdbbc0e0726eedbc62ea2a19b1bfe875ad55818ec32abac19959357e09#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ ["react", "npm:18.2.0"]\ ],\ @@ -6437,7 +6464,7 @@ const RAW_RUNTIME_STATE = ["@radix-ui/react-direction", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-id", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-presence", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-roving-focus", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.4"],\ ["@radix-ui/react-use-controllable-state", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ @@ -6468,7 +6495,7 @@ const RAW_RUNTIME_STATE = ["@radix-ui/react-toggle", "virtual:26e7add37626443864d7558baa77099ec863b6d65f48d37f190543d8cddd4c0891146ee16a5fce5dfb56917297a2c6afde5849d0279938e693673f70601375cf#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ ["@radix-ui/primitive", "npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-use-controllable-state", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ @@ -6500,7 +6527,7 @@ const RAW_RUNTIME_STATE = ["@radix-ui/primitive", "npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-direction", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-roving-focus", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.4"],\ ["@radix-ui/react-toggle", "virtual:26e7add37626443864d7558baa77099ec863b6d65f48d37f190543d8cddd4c0891146ee16a5fce5dfb56917297a2c6afde5849d0279938e693673f70601375cf#npm:1.0.3"],\ ["@radix-ui/react-use-controllable-state", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ @@ -6534,7 +6561,7 @@ const RAW_RUNTIME_STATE = ["@radix-ui/primitive", "npm:1.0.1"],\ ["@radix-ui/react-context", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ ["@radix-ui/react-direction", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.1"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@radix-ui/react-roving-focus", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.4"],\ ["@radix-ui/react-separator", "virtual:fdf3c6948199b9b9eca9ef29cf1fb552bc53d9fe228685c5610f1a0b48a348d2337ff331f295e9cb105309813a8d9fc6dfcab9f6f5350896d079fe3eca28e45f#npm:1.0.3"],\ ["@radix-ui/react-toggle-group", "virtual:fdf3c6948199b9b9eca9ef29cf1fb552bc53d9fe228685c5610f1a0b48a348d2337ff331f295e9cb105309813a8d9fc6dfcab9f6f5350896d079fe3eca28e45f#npm:1.0.4"],\ @@ -6730,7 +6757,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@radix-ui/react-visually-hidden", "virtual:1912b8abc724f76d62b3958334c9dbc4c679732064572ab5528cd01bacac6018e0db2a6e8ab39764b438ed1e2f61d83b8a839ee8ef5cd78828aede0046ceadc0#npm:1.0.3"],\ ["@babel/runtime", "npm:7.23.4"],\ - ["@radix-ui/react-primitive", "virtual:6ae0fb4b808e6eafd7034a3cc554d5ed4c8bc756dcd267d74736485c0714ada193c65147d612d7c5d5d695d8fa1c1857b25c1dc562bd4c6deafbf9701334a361#npm:1.0.3"],\ + ["@radix-ui/react-primitive", "virtual:63796dde4d35fa6a36aa1ca5dac46228f7e1ca443177d9cf89a8139812dd271d8d26ea1fdd1b294bc8a8d40291eb4ff194e82b382e9caf4b8f03a6bad0151e7a#npm:1.0.3"],\ ["@types/react", "npm:18.2.37"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ @@ -10774,6 +10801,7 @@ const RAW_RUNTIME_STATE = ["amazing3-fe", "workspace:."],\ ["@hookform/devtools", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:4.3.1"],\ ["@radix-ui/react-icons", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.3.0"],\ + ["@radix-ui/react-portal", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4"],\ ["@radix-ui/react-tabs", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:1.0.4"],\ ["@sentry/nextjs", "virtual:74868250102727df59d0c08f1ddb6630e6cd48640d8ad9d1ed80f220eee5d95c37bdc80e67cbbd686a520d72c8276bea707c0a77572e4e760d1051e7254c23b3#npm:7.91.0"],\ ["@sentry/utils", "npm:7.91.0"],\ diff --git a/.yarn/cache/@radix-ui-react-portal-npm-1.0.4-e4c93f6e90-10c0.zip b/.yarn/cache/@radix-ui-react-portal-npm-1.0.4-e4c93f6e90-10c0.zip new file mode 100644 index 0000000000000000000000000000000000000000..5f25d35b851e5ca776dd7a30cd49f42ad0655617 GIT binary patch literal 14047 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 LTfBh}opS#LDQ|uG literal 0 HcmV?d00001 diff --git a/package.json b/package.json index db81f322..9d99e0cf 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-portal": "^1.0.4", "@radix-ui/react-tabs": "^1.0.4", "@sentry/nextjs": "^7.91.0", "@sentry/utils": "^7.91.0", diff --git a/src/assets/icons/toast-success.svg b/src/assets/icons/toast-success.svg new file mode 100644 index 00000000..9ae6097e --- /dev/null +++ b/src/assets/icons/toast-success.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/toast-warning.svg b/src/assets/icons/toast-warning.svg new file mode 100644 index 00000000..c00c1a35 --- /dev/null +++ b/src/assets/icons/toast-warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/atoms/toast/Toast.atom.ts b/src/components/atoms/toast/Toast.atom.ts new file mode 100644 index 00000000..d8a4d3e4 --- /dev/null +++ b/src/components/atoms/toast/Toast.atom.ts @@ -0,0 +1,41 @@ +import { atom } from 'jotai'; + +import type { ToastProps } from './Toast'; + +type ToastsProps = ToastProps[]; + +export interface ToastOptionProps { + position?: string; +} + +export const toastsAtom = atom([]); + +export const toastOptionAtom = atom({ + position: 'bottom-[84px]', +}); + +export const removeToastAtom = atom(null, (get, set, id: number) => { + const prev = get(toastsAtom); + set( + toastsAtom, + prev.filter((toast) => toast.id !== id), + ); +}); + +export const toastAtom = atom( + (get) => get(toastsAtom), + (get, set, type: ToastProps['type']) => (title: string) => () => { + const prev = get(toastsAtom); + const newToast = { type, title, id: prev.length }; + set(toastsAtom, [...prev, newToast]); + }, +); + +export const toastOptionChangeAtom = atom( + (get) => get(toastOptionAtom), + (get, set, changeOption: ToastOptionProps) => { + const prev = get(toastOptionAtom); + const updatedOption = { ...prev, ...changeOption }; + set(toastOptionAtom, updatedOption); + }, +); diff --git a/src/components/atoms/toast/Toast.stories.tsx b/src/components/atoms/toast/Toast.stories.tsx new file mode 100644 index 00000000..ebf83d76 --- /dev/null +++ b/src/components/atoms/toast/Toast.stories.tsx @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { useToast } from '@/hooks/useToast'; + +import { Button } from '..'; + +import { Toast } from './Toast'; +import { ToastProvider } from './ToastProvider'; + +const meta: Meta = { + title: 'components/atoms/toast', + component: Toast, + decorators: [ + (Story) => ( +
+ + +
+ ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + title: '세부 목표를 삭제했어요.', + type: 'success', + }, +}; + +export const ClickToToast = () => { + const toast = useToast(); + + return ; +}; diff --git a/src/components/atoms/toast/Toast.tsx b/src/components/atoms/toast/Toast.tsx new file mode 100644 index 00000000..a3531b9d --- /dev/null +++ b/src/components/atoms/toast/Toast.tsx @@ -0,0 +1,57 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { useSetAtom } from 'jotai'; + +import SuccessIcon from '@/assets/icons/toast-success.svg'; +import WarningIcon from '@/assets/icons/toast-warning.svg'; + +import { Typography } from '../typography'; + +import { removeToastAtom } from './Toast.atom'; + +export interface ToastProps { + id: number; + title: string; + type?: 'success' | 'warning'; +} + +const toastIcon = { + success: , + warning: , +}; + +const TOAST_DURATION = 3000; +const ANIMATION_DURATION = 350; + +export const Toast = ({ id, title, type = 'success' }: ToastProps) => { + const [opacity, setOpacity] = useState('opacity-[0.2]'); + const removeToastItem = useSetAtom(removeToastAtom); + + useEffect(() => { + setOpacity('opacity-[0.8]'); + const timeoutForRemove = setTimeout(() => { + removeToastItem(id); + }, TOAST_DURATION); + + const timeoutForVisible = setTimeout(() => { + setOpacity('opacity-0'); + }, TOAST_DURATION - ANIMATION_DURATION); + + return () => { + clearTimeout(timeoutForRemove); + clearTimeout(timeoutForVisible); + }; + }, [id, removeToastItem]); + + return ( +
+ {toastIcon[type]} + + {title} + +
+ ); +}; diff --git a/src/components/atoms/toast/ToastProvider.tsx b/src/components/atoms/toast/ToastProvider.tsx new file mode 100644 index 00000000..4b59cec9 --- /dev/null +++ b/src/components/atoms/toast/ToastProvider.tsx @@ -0,0 +1,20 @@ +import * as Portal from '@radix-ui/react-portal'; +import { useAtomValue } from 'jotai'; + +import { Toast } from './Toast'; +import { toastOptionAtom, toastsAtom } from './Toast.atom'; + +export const ToastProvider = () => { + const toasts = useAtomValue(toastsAtom); + const { position } = useAtomValue(toastOptionAtom); + + return ( + +
+ {toasts.map((toast) => ( + + ))} +
+ + ); +}; diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts new file mode 100644 index 00000000..7f61beed --- /dev/null +++ b/src/hooks/useToast.ts @@ -0,0 +1,19 @@ +import { useEffect } from 'react'; +import { useSetAtom } from 'jotai'; + +import type { ToastOptionProps } from '@/components/atoms/toast/Toast.atom'; +import { toastAtom, toastOptionChangeAtom } from '@/components/atoms/toast/Toast.atom'; + +export const useToast = (option?: ToastOptionProps) => { + const addToast = useSetAtom(toastAtom); + const setOption = useSetAtom(toastOptionChangeAtom); + + useEffect(() => { + if (option) setOption(option); + }, [option, setOption]); + + return { + success: addToast('success'), + warning: addToast('warning'), + }; +}; diff --git a/yarn.lock b/yarn.lock index f8629693..672f9174 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3109,6 +3109,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-portal@npm:^1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: fed32f8148b833fe852fb5e2f859979ffdf2fb9a9ef46583b9b52915d764ad36ba5c958a64e61d23395628ccc09d678229ee94cd112941e8fe2575021f820c29 + languageName: node + linkType: hard + "@radix-ui/react-presence@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-presence@npm:1.0.1" @@ -6420,6 +6440,7 @@ __metadata: dependencies: "@hookform/devtools": "npm:^4.3.1" "@radix-ui/react-icons": "npm:^1.3.0" + "@radix-ui/react-portal": "npm:^1.0.4" "@radix-ui/react-tabs": "npm:^1.0.4" "@sentry/nextjs": "npm:^7.91.0" "@sentry/utils": "npm:^7.91.0"