fix: like and favorite function

src/app/showcase/page.tsx

@@ -107,6 +107,7 @@ const Showcase = () => {
           message={message}
           addCard={addCard}
           addDisabled={draggedCardList.length === 0}
+          mutate={setCardList}
         />
       </Stack>
     )
@@ -118,6 +119,7 @@ const Showcase = () => {
       removeCard={removeCard}
       message={message}
       addCard={addCard}
+      mutate={setCardList}
     />
   )
 }

src/app/showcase/panel/CardContainer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 import useMedia from '@/hook/useMedia'
 import { IconButton, Stack, Typography } from '@mui/material'
 import * as containerStyle from './CardContainer.style'
@@ -16,12 +16,14 @@ const CardContainer = ({
   message,
   addCard,
   addDisabled,
+  mutate,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
   message: string
   addCard?: () => void
   addDisabled?: boolean
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
   const { isPc, isTablet } = useMedia()
   return (
@@ -62,6 +64,7 @@ const CardContainer = ({
             cardList={cardList}
             removeCard={removeCard}
             addCard={addCard}
+            mutate={mutate}
           />
         ) : (
           <Typography variant="CaptionEmphasis">{message}</Typography>

src/app/showcase/panel/CardStack.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Box } from '@mui/material'
-import React, { useState } from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import * as style from './ShowcaseCard.style'
 import { ICardData } from '@/app/showcase/panel/types'
@@ -18,10 +18,12 @@ const CardStack = ({
   cardList,
   removeCard,
   addCard,
+  mutate,
 }: {
   cardList: Array<ICardData>
   removeCard: (recruit_id: number) => void
   addCard?: () => void
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
   const [dragged, setDragged] = useState(false)
 
@@ -119,6 +121,7 @@ const CardStack = ({
                   data={card}
                   dragged={dragged}
                   setDragged={setDragged}
+                  mutate={mutate}
                 />
               </motion.div>
             )

src/app/showcase/panel/PostCard.tsx

@@ -31,14 +31,21 @@ function PostCard({
   liked,
   isFavorite,
   onClick,
+  mutate,
 }: IPostCardShowcase) {
   const ref = React.useRef<HTMLDivElement>(null)
   const [currentCardWidth, setCurrentCardWidth] = useState<number>(0)
-  const [favorite, setFavorite] = useState<boolean>(isFavorite)
-  const [likeNum, setLikeNum] = useState<number>(like)
-  const [isLiked, setIsLiked] = useState<boolean>(liked)
+  const [favorite, setFavorite] = useState<boolean>(false)
+  const [likeNum, setLikeNum] = useState<number>(0)
+  const [isLiked, setIsLiked] = useState<boolean>(false)
   const axiosWithAuth = useAxiosWithAuth()
 
+  useEffect(() => {
+    setFavorite(isFavorite)
+    setLikeNum(like)
+    setIsLiked(liked)
+  }, [like, liked, isFavorite])
+
   useEffect(() => {
     if (ref.current) {
       setCurrentCardWidth(ref.current.clientWidth)
@@ -59,28 +66,58 @@ function PostCard({
       )
       .then((res) => {
         if (res.status === 200) {
-          setFavorite(!favorite)
+          mutate((prev) => {
+            return prev.map((card) => {
+              if (card.id === postId) {
+                return {
+                  ...card,
+                  favorite: !favorite,
+                }
+              }
+              return card
+            })
+          })
         }
       })
       .catch(() => {})
-  }, [setFavorite, axiosWithAuth])
+  }, [favorite, setFavorite, mutate])
 
   const clickLike = useCallback(() => {
     axiosWithAuth
       .post(`${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/like/${postId}`)
       .then((res) => {
         if (res.status === 200) {
-          if (liked === false) {
-            setIsLiked(true)
-            setLikeNum(likeNum + 1)
+          if (isLiked === false) {
+            mutate((prev) => {
+              return prev.map((card) => {
+                if (card.id === postId) {
+                  return {
+                    ...card,
+                    like: likeNum + 1,
+                    liked: !isLiked,
+                  }
+                }
+                return card
+              })
+            })
           } else {
-            setIsLiked(false)
-            setLikeNum(likeNum - 1)
+            mutate((prev) => {
+              return prev.map((card) => {
+                if (card.id === postId) {
+                  return {
+                    ...card,
+                    like: likeNum - 1,
+                    liked: !isLiked,
+                  }
+                }
+                return card
+              })
+            })
           }
         }
       })
       .catch(() => {})
-  }, [setIsLiked, setLikeNum, axiosWithAuth])
+  }, [isLiked, likeNum, setLikeNum, setIsLiked])
 
   return (
     <Card

src/app/showcase/panel/ShowcaseCard.tsx

@@ -15,7 +15,13 @@ import {
   Box,
 } from '@mui/material'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import DropdownMenu from '@/components/DropdownMenu'
 import * as style from './ShowcaseCard.style'
 import { ICardData } from '@/app/showcase/panel/types'
@@ -237,11 +243,13 @@ const ShowcaseCard = ({
   data,
   dragged,
   setDragged,
+  mutate,
 }: {
   data: ICardData
   sx?: SxProps
   dragged: boolean
   setDragged: React.Dispatch<React.SetStateAction<boolean>>
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }) => {
   const [isFlipped, setIsFlipped] = useState(false)
   const [currentDomain, setCurrentDomain] = useState('')
@@ -285,6 +293,7 @@ const ShowcaseCard = ({
           transform: 'translate(-50%, 0)',
         }}
         onClick={handleMouseUp}
+        mutate={mutate}
       />
       <ShowcaseCardBack
         postId={data.id}

src/types/IPostCard.ts

@@ -1,6 +1,7 @@
 import { SxProps } from '@mui/material'
 import { ITag } from './IPostDetail'
-import { IShowcaseTag } from '@/app/showcase/panel/types'
+import { ICardData, IShowcaseTag } from '@/app/showcase/panel/types'
+import { Dispatch, SetStateAction } from 'react'
 
 export interface IPostCard {
   authorImage: string // 글 작성자 프로필 이미지
@@ -36,6 +37,7 @@ export interface IPostCardShowcase {
   liked: boolean
   sx?: SxProps
   onClick?: (e: React.MouseEvent) => void
+  mutate: Dispatch<SetStateAction<ICardData[]>>
 }
 
 export interface IHitchhikingCardBack {