🐛 거래성사 제안/수락 버그 해결

src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image'
+import Assets from '@/config/assets'
+
+const PokeUnavailableInfo = () => {
+  return (
+    <div className="flex flex-col items-center justify-start gap-4 p-8">
+      <Image
+        width={200}
+        height={200}
+        alt="unavailable"
+        src={Assets.unavailableIcon}
+      />
+      <p className="text-sm font-normal">찔러보기가 허용되지 않은 물건입니다</p>
+    </div>
+  )
+}
+
+export default PokeUnavailableInfo

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

@@ -1,23 +1,54 @@
-import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import SuggestCard from '@/components/domain/card/suggest-card'
+import NoData from '@/components/domain/no-data'
 import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/tabs'
-import Assets from '@/config/assets'
 import { AvailableCardSuggestionListRes } from '@/services/suggestion/suggestion'
+import PokeUnavailableInfo from './PokeUnavailableInfo'
 
 type SuggestListProps = {
   suggestionData: AvailableCardSuggestionListRes[]
   pokeAvailable: boolean
   toCardId: number
 }
 
-/**
- * TODO : 스크롤바 디자인 수정
- */
 const SuggestList = ({
   suggestionData,
   pokeAvailable,
   toCardId,
 }: SuggestListProps) => {
+  const router = useRouter()
+  const filterData = (type: string) => {
+    const filteredData = suggestionData.filter(
+      (v) => v.suggestionInfo.suggestionType === type,
+    )
+
+    if (filteredData.length === 0) {
+      return (
+        <div className="h-full relative">
+          <NoData
+            title="제안 가능한 내 물건이 없습니다."
+            onClickButton={() => router.push('/cards/new')}
+            buttonContent="물건 등록하러 가기"
+          />
+        </div>
+      )
+    } else {
+      return filteredData.map((v) => (
+        <SuggestCard
+          key={v.cardInfo.cardId}
+          thumbnail={v.cardInfo.thumbnail}
+          cardTitle={v.cardInfo.cardTitle}
+          itemName={v.cardInfo.itemName}
+          priceRange={v.cardInfo.priceRange}
+          suggestionType={v.suggestionInfo.suggestionType}
+          fromCardId={v.cardInfo.cardId}
+          toCardId={toCardId}
+          suggestionStatus={v.suggestionInfo.suggestionStatus}
+        />
+      ))
+    }
+  }
+
   return (
     <Tabs defaultValue="OFFER">
       <TabsList>
@@ -31,33 +62,9 @@ const SuggestList = ({
           className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto"
         >
           {!pokeAvailable && type === 'POKE' ? (
-            <div className="flex flex-col items-center justify-start gap-4 p-8">
-              <Image
-                width={200}
-                height={200}
-                alt="unavailable"
-                src={Assets.unavailableIcon}
-              />
-              <p className="text-sm font-normal">
-                찔러보기가 허용되지 않은 물건입니다
-              </p>
-            </div>
+            <PokeUnavailableInfo />
           ) : (
-            suggestionData
-              .filter((v) => v.suggestionInfo.suggestionType === type)
-              .map((v) => (
-                <SuggestCard
-                  key={v.cardInfo.cardId}
-                  thumbnail={v.cardInfo.thumbnail}
-                  cardTitle={v.cardInfo.cardTitle}
-                  itemName={v.cardInfo.itemName}
-                  priceRange={v.cardInfo.priceRange}
-                  suggestionType={v.suggestionInfo.suggestionType}
-                  fromCardId={v.cardInfo.cardId}
-                  toCardId={toCardId}
-                  suggestionStatus={v.suggestionInfo.suggestionStatus}
-                />
-              ))
+            filterData(type)
           )}
         </TabsContent>
       ))}

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

@@ -11,6 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import AppPath from '@/config/appPath'
 import Assets from '@/config/assets'
 import { PRICE_RANGE_OBJS, TRADE_TYPE_OBJS } from '@/constants/card'
 import { useAuth } from '@/contexts/AuthProvider'
@@ -77,7 +78,7 @@ const TradeSection = ({
 
   const onClickButton = async () => {
     if (isMyItem) {
-      router.push(`/mypage/suggestions/${cardId}`)
+      router.push(AppPath.mySuggestions(cardId))
     } else {
       setOpen(true)
     }

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import Image from 'next/image'
 import Button from '@/components/ui/button'
 import {
@@ -22,9 +23,12 @@ const CompleteRequestButton = ({
   myCardId,
   otherCardId,
 }: CompleteRequestButtonProps) => {
+  const [isCompleteRequested, setIsCompleteRequested] = useState(false)
+
   const handleRequestButton = async () => {
     try {
       await postCompleteRequest(myCardId, otherCardId)
+      setIsCompleteRequested(true)
       toast({
         title: '거래성사를 요청하였습니다',
         variant: 'default',
@@ -42,9 +46,11 @@ const CompleteRequestButton = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button className="ml-auto" size="icon_sm" variant={null}>
-          <Image src={Assets.vMoreIcon} alt="more" />
-        </Button>
+        {!isCompleteRequested && (
+          <Button className="ml-auto" size="icon_sm" variant={null}>
+            <Image src={Assets.vMoreIcon} alt="more" />
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="min-w-[8rem]">
         <DropdownMenuGroup>

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx

@@ -1,4 +1,8 @@
+'use client'
+
+import { useState } from 'react'
 import Image from 'next/image'
+import Badge from '@/components/ui/badge'
 import Button from '@/components/ui/button'
 import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card/Card'
 import Assets from '@/config/assets'
@@ -35,14 +39,15 @@ const CompleteRequestCard = ({
   myCardData,
   otherCardData,
 }: CompleteRequestCardProps) => {
+  const [completeRequestStatus, setCompleteRequestStatus] = useState('')
   const handleCompleteRequestUpdate = async (isAccepted: boolean) => {
     try {
       await putCompleteRequest(
         otherCardData.cardId,
         myCardData.cardId,
         isAccepted,
       )
-      window.location.reload()
+      setCompleteRequestStatus(isAccepted ? '거래성사 확정' : '거래성사 거절')
       toast({
         title: `거래성사 요청을 ${isAccepted ? '수락' : '거절'}하였습니다.`,
         variant: 'default',
@@ -71,24 +76,30 @@ const CompleteRequestCard = ({
             >
               거래성사 요청이 왔습니다. 거래를 하셨나요?
             </CardText>
-            <CardFlex direction={'row'} gap={'space'}>
-              <Button
-                className="ml-auto"
-                size="icon_sm"
-                variant={null}
-                onClick={() => handleCompleteRequestUpdate(true)}
-              >
-                <Image src={Assets.checkCircle} alt="accept" />
-              </Button>
-              <Button
-                className="ml-auto"
-                size="icon_sm"
-                variant={null}
-                onClick={() => handleCompleteRequestUpdate(false)}
-              >
-                <Image src={Assets.quitCircle} alt="refuse" />
-              </Button>
-            </CardFlex>
+            {completeRequestStatus === '' ? (
+              <CardFlex direction={'row'} gap={'space'}>
+                <Button
+                  className="ml-auto"
+                  size="icon_sm"
+                  variant={null}
+                  onClick={() => handleCompleteRequestUpdate(true)}
+                >
+                  <Image src={Assets.checkCircle} alt="accept" />
+                </Button>
+                <Button
+                  className="ml-auto"
+                  size="icon_sm"
+                  variant={null}
+                  onClick={() => handleCompleteRequestUpdate(false)}
+                >
+                  <Image src={Assets.quitCircle} alt="refuse" />
+                </Button>
+              </CardFlex>
+            ) : (
+              <Badge variant={'gradation'} size={'sm'}>
+                {completeRequestStatus}
+              </Badge>
+            )}
           </CardFlex>
           <CardItem
             thumbnail={otherCardData.thumbnail}

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx

@@ -18,13 +18,12 @@ const CompleteReqeustTemplate = ({
   currentUser,
   completeRequestData: { fromCard, toCard, status },
 }: CompleteReqeustTemplateProps) => {
-  //NOTE -  현재 로그인한 사람이 거래성사 요청 받은 사람인경우 + 요청 상태가 waiting인 경우 - 거래성사요청 카드가 보인다.
   const isRequestedUser =
     toCard.userInfo.userId === currentUser.userId && status === 'WAITING'
   return isRequestedUser ? (
     <CompleteRequestCard
-      myCardData={fromCard.cardInfo}
-      otherCardData={toCard.cardInfo}
+      myCardData={toCard.cardInfo}
+      otherCardData={fromCard.cardInfo}
     />
   ) : (
     <Badge variant={'gradation'} size={'lg'} className="self-end mr-4">

src/hooks/api/mutations/useCardStatusUpdateMutation.ts

@@ -1,6 +1,4 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import Cookies from 'js-cookie'
-import { Environment } from '@/config/environment'
 import { toast } from '@/hooks/useToast'
 import { putCardStatus } from '@/services/card/card'
 import { TradeStatusObjs } from '@/types/card'
@@ -10,9 +8,8 @@ const useCardStatusUpdateMutation = (
   status: TradeStatusObjs['key'],
 ) => {
   const queryClient = useQueryClient()
-  const token = Cookies.get(Environment.tokenName())
 
-  const queryKey = [cardId, 'cardInfo', token]
+  const queryKey = [cardId, 'cardInfo']
   return useMutation({
     mutationFn: putCardStatus,
     onMutate: async () => {

src/services/complete-request/completeRequest.ts

@@ -18,7 +18,7 @@ const putCompleteRequest = async (
   toCardId: number,
   isAccepted: boolean,
 ) => {
-  const response = await apiClient.post(
+  const response = await apiClient.put(
     ApiEndPoint.putCompleteRequest(),
     { fromCardId, toCardId, isAccepted },
     {},