🐛 fix: 찜 버튼 2회 이상 클릭 시 요청이 제대로 가지 않는 이슈 수정 #301

codestates-seb · Apr 7, 2023 · 1fc40e6 · 1fc40e6
1 parent f586438
commit 1fc40e6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/client/src/components/Buttons/WishlistButton.tsx b/client/src/components/Buttons/WishlistButton.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { FaHeart } from 'react-icons/fa';
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { usePost } from '../../hooks/useFetch';
 import { WishlistBtnProps } from '../../types/button.type';
 
@@ -14,15 +14,21 @@ function WishlistButton({
 	const token = localStorage.getItem('accessToken');
 	const { mutate } = usePost(`/wishes/${itemId}?wish=${request}`);
 
-	const handleHeartClick = useCallback(() => {
+	const handleHeartClick = () => {
 		if (!token && setOpenLoginModal) {
 			setOpenLoginModal(true);
 			return;
 		}
+
 		mutate();
+
 		if (setIsChecked) {
-			setIsChecked(isChecked ? 0 : 1);
+			setIsChecked(!isChecked);
 		}
+	};
+
+	useEffect(() => {
+		setRequest(isChecked ? 0 : 1);
 	}, [isChecked]);
 
 	return (
@@ -37,16 +43,11 @@ function WishlistButton({
 
 const WishBox = styled.div`
 	display: inline-flex;
-	z-index: 99;
-	.red-heart {
-		path {
-			color: #ff555f;
-			opacity: 100%;
-			stroke-width: 0;
-		}
-	}
+	z-index: 2;
+
 	& > svg {
 		font-size: 18px;
+
 		path {
 			cursor: pointer;
 			stroke: var(--gray-300);
@@ -55,6 +56,14 @@ const WishBox = styled.div`
 			opacity: 30%;
 		}
 	}
+
+	.red-heart {
+		path {
+			color: #ff555f;
+			opacity: 100%;
+			stroke-width: 0;
+		}
+	}
 `;
 
 export default WishlistButton;
diff --git a/client/src/components/ItemSummary/ItemSummary.tsx b/client/src/components/ItemSummary/ItemSummary.tsx
@@ -1,5 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import WishlistButton from '../Buttons/WishlistButton';
 import Tag from '../Etc/Tag';
@@ -57,17 +57,14 @@ function ItemSummary({
 		'/wishes/item',
 		`detail/wishs`,
 	);
+
 	const [isCheckedWish, setIsCheckedWish] = useState(
-		WishData?.data?.data.includes(itemId) ? 1 : 0,
+		!!WishData?.data?.data.includes(itemId),
 	);
 
 	useEffect(() => {
-		if (WishData?.data?.data.includes(itemId)) {
-			setIsCheckedWish(1);
-		} else {
-			setIsCheckedWish(0);
-		}
-	}, []);
+		setIsCheckedWish(!!WishData?.data?.data.includes(itemId));
+	}, [WishData]);
 
 	const { mutate: cartMu } = usePost(`/carts/${itemId}`);
 	const { mutate: purMu } = usePurchase('/orders/single', path);
@@ -301,15 +298,13 @@ const TagsBox = styled.div`
 const RateBox = styled.div`
 	display: flex;
 	justify-content: space-between;
-	/* align-items: center; */
 	width: 100%;
 	margin-bottom: 10px;
 `;
 
 const ButtonBox = styled.div`
 	display: flex;
 	justify-content: space-between;
-	/* width: 100%; */
 `;
 
 const slide = keyframes`

diff --git a/client/src/types/button.type.ts b/client/src/types/button.type.ts
@@ -35,8 +35,8 @@ export interface PriceButtonProps {
 }
 
 export interface WishlistBtnProps {
-	isChecked: boolean | number;
+	isChecked: boolean;
 	itemId: number;
-	setIsChecked?: React.Dispatch<React.SetStateAction<number>>;
+	setIsChecked?: React.Dispatch<React.SetStateAction<boolean>>;
 	setOpenLoginModal?: React.Dispatch<React.SetStateAction<boolean>>;
 }