feat(KL-178/좋아요 버튼 MutateAsync 적용): apply mutate async

src/components/Button/CollapseButton.jsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { BiPlus, BiMinus } from 'react-icons/bi'
+import IconTextButton from './IconTextButton'
+
+function CollapseButton({
+  isOpen = false,
+  setIsOpen = null,
+  iconSize = '1.3rem',
+}) {
+  const toggleOpen = () => setIsOpen((prev) => !prev)
+  const iconValue = useMemo(
+    () => ({ color: 'silver', size: iconSize }),
+    [iconSize]
+  )
+
+  return (
+    <div>
+      <IconTextButton
+        value={iconValue}
+        icon={isOpen ? <BiMinus /> : <BiPlus />}
+        handleClick={toggleOpen}
+      />
+    </div>
+  )
+}
+
+CollapseButton.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func,
+  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+export default CollapseButton

src/components/Button/IconTextButton.jsx

@@ -1,29 +1,40 @@
 import React from 'react'
-import styled from 'styled-components'
+import { Button } from 'antd'
 import PropTypes from 'prop-types'
 import { IconContext } from 'react-icons'
 
-const ButtonBox = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-`
-
-function IconTextButton({ iconValue = null, Icon = null, text = null }) {
+function IconTextButton({
+  value = null,
+  type = 'text',
+  shape = 'default',
+  size = 'small',
+  icon = null,
+  iconPosition = 'start',
+  handleClick = null,
+  text = null,
+}) {
   return (
-    <IconContext.Provider value={iconValue}>
-      <ButtonBox>
-        {Icon}
-        {text}
-      </ButtonBox>
-    </IconContext.Provider>
+    <Button
+      type={type}
+      shape={shape}
+      size={size}
+      icon={<IconContext.Provider value={value}>{icon}</IconContext.Provider>}
+      iconPosition={iconPosition}
+      onClick={handleClick}
+    >
+      {text}
+    </Button>
   )
 }
 
 IconTextButton.propTypes = {
-  iconValue: PropTypes.shape({}),
-  Icon: PropTypes.element,
+  value: PropTypes.shape({}),
+  type: PropTypes.oneOf(['primary', 'dashed', 'link', 'text', 'default']),
+  shape: PropTypes.oneOf(['circle', 'round', 'default']),
+  size: PropTypes.oneOf(['small', 'middle', 'large']),
+  icon: PropTypes.element,
+  iconPosition: PropTypes.oneOf(['start', 'end']),
+  handleClick: PropTypes.func,
   text: PropTypes.string,
 }
 

src/components/Button/LikeButton.jsx

@@ -1,58 +1,71 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import styled from 'styled-components'
+import React, {
+  // useState,
+  useEffect,
+} from 'react'
 import PropTypes from 'prop-types'
 import { FaHeart, FaRegHeart } from 'react-icons/fa6'
 import useUserData from '../../hooks/useUserData'
-import { kyInstance } from '../../hooks/kyInstance'
+import { method } from '../../hooks/kyInstance'
+import useKyQuery from '../../hooks/useKyQuery'
+import useKyMutation from '../../hooks/useKyMutation'
 import IconTextButton from './IconTextButton'
-import theme from '../../styles/theme'
 
-const LikeButtonContainer = styled.div`
-  color: ${(props) => (props.$isLiked ? 'red' : theme.color.lineGrey)};
-  gray-scale: ${(props) => (props.$isLiked ? '0' : '100%')};
-  mix-blend-mode: ${(props) => (props.$isLiked ? 'normal' : 'plus-darker')};
-`
-
-function LikeButton({ productId, iconSize = '1.3rem' }) {
+function LikeButton({
+  productId,
+  // likeContent = false,
+  iconSize = '1.3rem',
+}) {
   const { data: userData } = useUserData()
-  const [isLiked, setIsLiked] = useState(false)
+  // const [isLiked, setIsLiked] = useState(likeContent)
+  const { data: isLiked, refetch: getLike } = useKyQuery(
+    `products/${productId}/likes`,
+    null,
+    [`products/likes`, productId],
+    {
+      enabled: !!userData,
+      refetchOnWindowFocus: false,
+      initialData: { data: { isLiked: false } },
+      select: (data) => data.data.isLiked,
+    }
+  )
+  const { mutateAsync: postLike } = useKyMutation(
+    method.POST,
+    `products/${productId}/likes`,
+    ['products/likes', productId]
+  )
+  const { mutateAsync: deleteLike } = useKyMutation(
+    method.DELETE,
+    `products/${productId}/likes`,
+    ['products/likes', productId]
+  )
 
   useEffect(() => {
-    const fetchLikeContent = async (product) => {
+    const fetchLikeContent = async () => {
       try {
-        const responseData = await kyInstance
-          .get(`products/${product}/likes`)
-          .json()
-        setIsLiked(responseData.data.isLiked)
+        await getLike()
       } catch (error) {
-        alert(
-          '좋아요 정보를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.'
-        )
+        console.error(error)
       }
     }
 
     if (!userData) return
-    fetchLikeContent(productId)
+    fetchLikeContent()
   }, [])
 
-  const handleLiked = useCallback(() => {
-    const postLikeContent = async (product) => {
+  const handleLike = () => {
+    const postLikeContent = async () => {
       try {
-        const responseData = await kyInstance
-          .post(`products/${product}/likes`)
-          .json()
-        setIsLiked(responseData.data.isLiked)
+        await postLike()
+        // setIsLiked((prev) => !prev)
       } catch (error) {
         alert('문제가 발생했습니다. 잠시 후 다시 시도해주세요.')
       }
     }
 
-    const deleteLikeContent = async (product) => {
+    const deleteLikeContent = async () => {
       try {
-        const responseData = await kyInstance
-          .delete(`products/${product}/likes`)
-          .json()
-        setIsLiked(responseData.isLiked)
+        await deleteLike()
+        // setIsLiked((prev) => !prev)
       } catch (error) {
         alert('문제가 발생했습니다. 잠시 후 다시 시도해주세요.')
       }
@@ -62,29 +75,28 @@ function LikeButton({ productId, iconSize = '1.3rem' }) {
       alert('로그인이 필요합니다.')
       return
     }
+    if (!isLiked) postLikeContent()
+    else deleteLikeContent()
+  }
 
-    if (!isLiked) postLikeContent(productId)
-    else deleteLikeContent(productId)
-    setIsLiked((prev) => !prev)
-  }, [isLiked])
-
-  const iconAttr = { onClick: handleLiked }
-  const iconValue = useMemo(
-    () => ({ size: iconSize, attr: iconAttr }),
-    [iconSize, iconAttr]
-  )
+  const iconValue = {
+    color: isLiked ? 'red' : 'darkgray',
+    size: iconSize,
+  }
 
   return (
-    <LikeButtonContainer $isLiked={isLiked}>
+    <div>
       <IconTextButton
-        iconValue={iconValue}
-        Icon={isLiked ? <FaHeart /> : <FaRegHeart />}
+        value={iconValue}
+        icon={isLiked ? <FaHeart /> : <FaRegHeart />}
+        handleClick={handleLike}
       />
-    </LikeButtonContainer>
+    </div>
   )
 }
 
 LikeButton.propTypes = {
+  // likeContent: PropTypes.bool.isRequired,
   productId: PropTypes.number.isRequired,
   iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }

src/components/PreviewContent/PreviewContent.jsx

@@ -28,7 +28,8 @@ function PreviewContent({ productData }) {
         </Link>
         <LikeButton
           productId={productData.id}
-          iconSize="1.3rem"
+          // likeContent={productData.isLiked}
+          iconSize="1.2rem"
         />
       </ThumbnailContainer>
       <Link
@@ -74,6 +75,7 @@ PreviewContent.propTypes = {
     image: PropTypes.shape({
       url: PropTypes.string,
     }),
+    // isLiked: PropTypes.bool.isRequired,
     countryName: PropTypes.string.isRequired,
     categoryName: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,

src/pages/FeedPage/components/BasicFilter/CountrySection.jsx

@@ -3,8 +3,7 @@ import { useLoaderData } from 'react-router-dom'
 import { Radio } from 'antd'
 import PropTypes from 'prop-types'
 import useFeedStore from '../../../../stores/useFeedStore'
-import ShowHideButton from '../../../../components/Button/ShowHideButton'
-import theme from '../../../../styles/theme'
+import CollapseButton from '../../../../components/Button/CollapseButton'
 import {
   SectionContainer,
   RegionContainer,
@@ -66,7 +65,6 @@ CountryArray.propTypes = {
 function RegionCollapse({ region }) {
   const [isOpen, setIsOpen] = useState(false)
   const defaultOpenRegion = useFeedStore((state) => state.defaultOpenRegion)
-  const toggleRegion = () => setIsOpen((prev) => !prev)
 
   useEffect(() => {
     setIsOpen(region.id === defaultOpenRegion)
@@ -76,10 +74,9 @@ function RegionCollapse({ region }) {
     <>
       <SubTitle className="region">
         <div className="region">{region.name}</div>
-        <ShowHideButton
-          handleClick={toggleRegion}
-          iconColor={theme.color.lineGrey}
-          isOption={isOpen}
+        <CollapseButton
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
         />
       </SubTitle>
       {isOpen && (