🎉 거래 제안 로직 구현

src/app/(root)/(routes)/items/[itemId]/components/trade-section/SuggestList.tsx

@@ -7,26 +7,32 @@ import { ItemSuggestion } from '@/types'
 type SuggestListProps = {
   suggestionData: ItemSuggestion[]
   pokeAvailable: boolean
+  toCardId: number
 }
 
 /**
  * TODO : 스크롤바 디자인 수정
  * TODO : 실제 API 연결(useMutation 사용해서)
  */
-const SuggestList = ({ suggestionData, pokeAvailable }: SuggestListProps) => {
+const SuggestList = ({
+  suggestionData,
+  pokeAvailable,
+  toCardId,
+}: SuggestListProps) => {
+  console.log(suggestionData)
   return (
-    <Tabs defaultValue="offer">
+    <Tabs defaultValue="OFFER">
       <TabsList>
-        <TabsTrigger value="offer">오퍼하기</TabsTrigger>
-        <TabsTrigger value="poke">찔러보기</TabsTrigger>
+        <TabsTrigger value="OFFER">오퍼하기</TabsTrigger>
+        <TabsTrigger value="POKE">찔러보기</TabsTrigger>
       </TabsList>
-      {['offer', 'poke'].map((type) => (
+      {['OFFER', 'POKE'].map((type) => (
         <TabsContent
           key={type}
           value={type}
           className=" data-[state=inactive]:hidden h-[402px] overflow-y-auto"
         >
-          {!pokeAvailable && type === 'poke' ? (
+          {!pokeAvailable && type === 'POKE' ? (
             <div className="flex flex-col justify-start items-center gap-4 p-8">
               <Image
                 width={200}
@@ -49,6 +55,9 @@ const SuggestList = ({ suggestionData, pokeAvailable }: SuggestListProps) => {
                   itemName={v.itemName}
                   priceRange={v.priceRange}
                   suggestionType={v.suggestionType}
+                  cardId={v.cardId}
+                  toCardId={toCardId}
+                  suggestionStatus={v.suggestionStatus}
                 />
               ))
           )}

src/app/(root)/(routes)/items/[itemId]/components/trade-section/TradeSection.tsx

@@ -1,16 +1,14 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useState } from 'react'
 import Button from '@/components/ui/Button'
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/Dialog'
-import { handleApiError } from '@/lib/handleApiError'
-import { getSuggestions } from '@/services/suggest/suggest'
+import useSuggestionsQuery from '@/hooks/api/queries/useSuggestionsQuery'
 import SuggestList from './SuggestList'
 import TradeInfo from './TradeInfo'
 
@@ -49,7 +47,6 @@ const TradeSection = ({
 
   const isLoggedIn = true
   const isMyItem = currentUser.userId === authorId
-  const [suggestions, setSuggestions] = useState([])
   const [open, setOpen] = useState(false)
 
   const tradeInfo: TradeInfo[] = [
@@ -63,11 +60,10 @@ const TradeSection = ({
       alert('제안확인 페이지로 이동하기')
     } else {
       setOpen(true)
-      const res = await getSuggestions(itemId)
-      setSuggestions(res.data.cardList)
     }
   }
 
+  const { data: suggestions } = useSuggestionsQuery(itemId)
   return (
     <section className="flex flex-col gap-2 w-full pt-4">
       {tradeInfo.map((v, i) => (
@@ -90,6 +86,7 @@ const TradeSection = ({
             <DialogTitle>제안 가능한 내 물건 보기</DialogTitle>
           </DialogHeader>
           <SuggestList
+            toCardId={itemId}
             pokeAvailable={pokeAvailable}
             suggestionData={suggestions}
           />

src/components/domain/card/suggest-card/SuggestCard.tsx

@@ -1,14 +1,20 @@
+'use client'
+
 import Button from '@/components/ui/Button'
 import Card from '@/components/ui/Card'
 import { CardFlex, CardImage, CardText } from '@/components/ui/Card/Card'
 import { DEFAULT_ITEM_THUMBNAIL_IMG } from '@/constants/image'
+import useSuggestMutation from '@/hooks/api/mutations/useSuggestMutation'
 
 type SuggestCardProps = {
   thumbNail?: string
   cardTitle: string
   itemName: string
   priceRange: string
   suggestionType: string
+  cardId: number
+  toCardId: number
+  suggestionStatus: string | null
 }
 
 const SuggestCard = ({
@@ -17,7 +23,20 @@ const SuggestCard = ({
   itemName,
   priceRange,
   suggestionType,
+  cardId,
+  toCardId,
+  suggestionStatus,
 }: SuggestCardProps) => {
+  const { mutate } = useSuggestMutation(toCardId, cardId)
+
+  const onClickSuggest = async (type: string) => {
+    mutate({
+      suggestionType: type,
+      fromCardId: cardId,
+      toCardId: toCardId,
+    })
+  }
+  console.log(suggestionStatus)
   return (
     <Card size="md">
       <CardFlex
@@ -40,8 +59,17 @@ const SuggestCard = ({
           <CardText type={'description'}>{itemName}</CardText>
           <CardText type={'description'}>{priceRange}</CardText>
           <div className="flex justify-end">
-            <Button variant={'gradation'} size={'sm'}>
-              {suggestionType === 'poke' ? '찔러보기' : '오퍼하기'}
+            <Button
+              variant={'gradation'}
+              size={'sm'}
+              onClick={() => onClickSuggest(suggestionType)}
+              disabled={suggestionStatus !== null}
+            >
+              {suggestionStatus === null
+                ? suggestionType === 'POKE'
+                  ? '찔러보기'
+                  : '오퍼하기'
+                : '제안됨'}
             </Button>
           </div>
         </CardFlex>

src/config/apiEndPoint.ts

@@ -7,10 +7,11 @@ const ApiEndPoint = {
   items: (cursorId: number) => `/items?cursorId=${cursorId}`,
   myItems: (cursorId: number) => `/my-items?cursorId=${cursorId}`,
   dibs: (itemId: number) => `/dib/${itemId}`,
-  suggestions: (itemId: string) => `/${itemId}/available-cards`,
+  suggestions: (itemId: number) => `/${itemId}/available-cards`,
   suggestChecks: (cursorId: number) => `/suggest-checks?cursorId=${cursorId}`,
   putUserProfile: () => '/users/profile-image',
   putUserNickname: () => '/users/nickname',
+  postSuggestion: (suggestionType: string) => `/${suggestionType}`,
   getMyDibs: (cursorId: number) => `/api/v1/dibs/?cursorId=${cursorId}`,
 } as const
 

src/hooks/api/mutations/useSuggestMutation.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { toast } from '@/hooks/useToast'
+import { handleApiError } from '@/lib/handleApiError'
+import { postSuggestion } from '@/services/suggest/suggest'
+import { ItemSuggestion } from '@/types'
+
+const useSuggestMutation = (toCardId: number, fromCardId: number) => {
+  const queryClient = useQueryClient()
+  const router = useRouter()
+
+  const queryKey = [toCardId, 'suggestions']
+  return useMutation({
+    mutationFn: postSuggestion,
+    onMutate: async () => {
+      // 롤백을 위한 이전 값 저장
+      const previousSuggestions = queryClient.getQueryData([
+        toCardId,
+        'suggestions',
+      ]) as ItemSuggestion[]
+
+      await queryClient.cancelQueries({ queryKey })
+
+      const updateSuggestions = previousSuggestions
+
+      //낙관적 업데이트
+      const indexToUpdate = previousSuggestions.findIndex(
+        (suggestion) => suggestion.cardId === fromCardId,
+      )
+      updateSuggestions[indexToUpdate].suggestionStatus = 'WAITING'
+      queryClient.setQueryData(queryKey, updateSuggestions)
+
+      return { previousSuggestions }
+    },
+    onError: (error, _, context) => {
+      queryClient.setQueryData(queryKey, context?.previousSuggestions)
+      const { shouldRedirect } = handleApiError(error)
+      if (shouldRedirect) {
+        router.push(shouldRedirect)
+      } else {
+        console.log(shouldRedirect, error)
+        toast({
+          title: '제안을 실패했습니다',
+          duration: 2000,
+        })
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey })
+    },
+  })
+}
+
+export default useSuggestMutation

src/hooks/api/queries/useSuggestionsQuery.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+import { getSuggestions } from '@/services/suggest/suggest'
+
+const useSuggestionsQuery = (itemId: number) => {
+  return useQuery({
+    queryKey: [itemId, 'suggestions'] as const,
+    queryFn: () => getSuggestions(itemId),
+  })
+}
+
+export default useSuggestionsQuery

src/lib/msw/mocks/itemHandlers.ts

@@ -31,7 +31,7 @@ export const itemHandlers = [
             cardTitle: '아이폰 16 팝니다',
             category: '전자기기',
             itemName: '아이폰 16',
-            pokeAvailable: false,
+            pokeAvailable: true,
             createdAt: '2023-10-23-20:08',
             modifiedAt: '2023-10-24-20:08',
             viewCount: 19,

src/lib/msw/mocks/suggestHandlers.ts

@@ -7,7 +7,7 @@ const baseUrl = Environment.apiAddress()
 
 export const suggestHandlers = [
   rest.get(
-    `${baseUrl}${ApiEndPoint.suggestions('3')}`,
+    `${baseUrl}${ApiEndPoint.suggestions(3)}`,
     async (_req, res, ctx) => {
       return res(
         ctx.status(200),
@@ -23,7 +23,8 @@ export const suggestHandlers = [
                 cardTitle: 'xxx',
                 itemName: '다이슨 청소기',
                 priceRange: '10만원대',
-                suggestionType: 'offer',
+                suggestionType: 'OFFER',
+                suggestionStatus: 'WAITING',
               },
               {
                 _id: 2,
@@ -32,7 +33,8 @@ export const suggestHandlers = [
                 cardTitle: 'xxx',
                 itemName: '애플 워치',
                 priceRange: '20만원대',
-                suggestionType: 'poke',
+                suggestionType: 'POKE',
+                suggestionStatus: null,
               },
               {
                 _id: 3,
@@ -41,7 +43,8 @@ export const suggestHandlers = [
                 cardTitle: 'xxx',
                 itemName: '에어팟 프로',
                 priceRange: '20만원대',
-                suggestionType: 'poke',
+                suggestionType: 'POKE',
+                suggestionStatus: null,
               },
               {
                 _id: 4,
@@ -50,7 +53,8 @@ export const suggestHandlers = [
                 cardTitle: 'xxx',
                 itemName: '에어팟 프로',
                 priceRange: '20만원대',
-                suggestionType: 'poke',
+                suggestionType: 'POKE',
+                suggestionStatus: null,
               },
               {
                 _id: 5,
@@ -59,12 +63,53 @@ export const suggestHandlers = [
                 cardTitle: 'xxx',
                 itemName: '에어팟 프로',
                 priceRange: '20만원대',
-                suggestionType: 'poke',
+                suggestionType: 'POKE',
+                suggestionStatus: 'WAITING',
               },
             ],
           },
         }),
       )
     },
   ),
+  rest.post(
+    `${baseUrl}${ApiEndPoint.postSuggestion('POKE')}`,
+    async (_req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          code: 'SUCCESS',
+          message: '성공하였습니다.',
+          data: {
+            suggestionId: 1,
+            suggestionType: 'POKE',
+            fromCardId: 1,
+            toCardId: 3,
+            suggestionStatus: 'WAITING',
+            createdAt: '2023-11-09T14:59:51',
+          },
+        }),
+      )
+    },
+  ),
+  rest.post(
+    `${baseUrl}${ApiEndPoint.postSuggestion('OFFER')}`,
+    async (_req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          code: 'SUCCESS',
+          message: '성공하였습니다.',
+          data: {
+            suggestionId: 1,
+            suggestionType: 'OFFER',
+            fromCardId: 1,
+            toCardId: 3,
+            suggestionStatus: 'WAITING',
+            createdAt: '2023-11-09T14:59:51',
+          },
+        }),
+      )
+    },
+  ),
 ]