Merge pull request #116 from coddingyun/fix#267.QA

Fix#267.qa
Central-MakeUs · Apr 2, 2024 · cce909d · cce909d
2 parents b357304 + c49438e
commit cce909d
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,9 @@
 			"prettier --write"
 		]
 	},
+	"resolutions": {
+		"strip-ansi": "6.0.1"
+	},
 	"dependencies": {
 		"@hookform/resolvers": "^3.3.4",
 		"@radix-ui/react-dialog": "^1.0.5",

diff --git a/src/components/atoms/ToastMessageLikeOrDelete.tsx b/src/components/atoms/ToastMessageLikeOrDelete.tsx
@@ -1,4 +1,5 @@
 import { Button } from 'konsta/react';
+import { useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
@@ -7,9 +8,13 @@ import colors from '@constants/colors';
 
 type ToastMessageLikeOrDeleteProps = {
 	like: boolean;
+	toastId: string;
 };
 
-const ToastMessageLikeOrDelete = ({ like }: ToastMessageLikeOrDeleteProps) => {
+const ToastMessageLikeOrDelete = ({
+	like,
+	toastId,
+}: ToastMessageLikeOrDeleteProps) => {
 	const navigate = useNavigate();
 
 	const handleClick = () => {
@@ -19,6 +24,12 @@ const ToastMessageLikeOrDelete = ({ like }: ToastMessageLikeOrDeleteProps) => {
 
 	const toastPadding = like ? 'px-3 py-1.5' : 'px-1.5 py-4 text-center';
 
+	useEffect(() => {
+		setTimeout(() => {
+			toast.remove(toastId);
+		}, 2000);
+	}, []);
+
 	return (
 		<div className={`w-full rounded-xl bg-White ${toastPadding}`}>
 			{like && (

diff --git a/src/components/atoms/button/HeartButton.tsx b/src/components/atoms/button/HeartButton.tsx
@@ -30,9 +30,7 @@ const HeartButton = ({ id, isDib, size, className }: HeartButtonProps) => {
 
 	const handleLikeHeart = () => {
 		if (isLogin()) {
-			toast(() => <ToastMessageLikeOrDelete like={!curLike} />, {
-				duration: 2000,
-			});
+			toast(t => <ToastMessageLikeOrDelete like={!curLike} toastId={t.id} />);
 			setCurLike(prev => !prev);
 			if (curLike) {
 				deleteWishList([id]);

diff --git a/src/stories/atoms/ToastMessageLikeOrDelete.stories.tsx b/src/stories/atoms/ToastMessageLikeOrDelete.stories.tsx
@@ -10,7 +10,7 @@ type ContainerType = {
 
 const Container = ({ like }: ContainerType) => {
 	const handleClick = () => {
-		toast(() => <ToastMessageLikeOrDelete like={like} />);
+		toast(t => <ToastMessageLikeOrDelete like={like} toastId={t.id} />);
 	};
 	return (
 		<>

diff --git a/yarn.lock b/yarn.lock
@@ -3758,11 +3758,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
-
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -8568,6 +8563,7 @@ string-convert@^0.2.0:
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8636,20 +8632,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1, strip-ansi@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
-  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
-  dependencies:
-    ansi-regex "^6.0.1"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"