🐛 거래성사된 물건 상세정보페이지 조회 안되는 버그 해결

src/app/(root)/(routes)/(home)/components/HistorySection.tsx

@@ -1,12 +1,20 @@
-'use client'
-
 import HistoryCard from '@/components/domain/card/trade-history-card'
-import useRecentHistoryQuery from '@/hooks/api/queries/useRecentHistoryQuery'
+import { RECENT_HISTORY_SIZE } from '@/constants/pageSize'
+import { getRecentTradeHistoryList } from '@/services/history/history'
 import { TradeHistory } from '@/types/tradeHistory'
 
-const HistorySection = () => {
-  const { data: historyData } = useRecentHistoryQuery()
-  const historyList = historyData?.data.historyList ?? []
+async function getRecentHistory() {
+  try {
+    const res = await getRecentTradeHistoryList(RECENT_HISTORY_SIZE)
+    const data = await res
+    return data.data.historyList
+  } catch (error: any) {
+    throw new Error(error)
+  }
+}
+
+const HistorySection = async () => {
+  const historyList = await getRecentHistory()
 
   return (
     historyList.length !== 0 && (

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

@@ -70,12 +70,15 @@ const MoreButton = ({ cardId, status }: MoreButtonProps) => {
     mutate({ cardId, status })
   }
 
+  const isCardCompleted = status === 'TRADE_COMPLETE'
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
+        {!isCardCompleted && (
         <Button className="ml-auto" size="icon_sm" variant={null}>
           <Image src={Assets.vMoreIcon} alt="more" quality={50} sizes="32px" />
         </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="min-w-[10rem] -right-4">
         <DropdownMenuGroup>
@@ -90,7 +93,7 @@ const MoreButton = ({ cardId, status }: MoreButtonProps) => {
               handleChangeStatus(cardStatusMap[status].statusToChange)
             }
           >
-            {cardStatusMap[status].text}
+            {cardStatusMap[status]?.text}
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>

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

@@ -53,21 +53,19 @@ const SuggestList = ({ pokeAvailable, toCardId }: SuggestListProps) => {
         <TabsTrigger value="OFFER">오퍼하기</TabsTrigger>
         <TabsTrigger value="POKE">찔러보기</TabsTrigger>
       </TabsList>
-      <Suspense fallback={<Loading />}>
-        {['OFFER', 'POKE'].map((type) => (
-          <TabsContent
-            key={type}
-            value={type}
-            className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto pr-2"
-          >
-            {!pokeAvailable && type === 'POKE' ? (
-              <PokeUnavailableInfo />
-            ) : (
-              filterData(type)
-            )}
-          </TabsContent>
-        ))}
-      </Suspense>
+      {['OFFER', 'POKE'].map((type) => (
+        <TabsContent
+          key={type}
+          value={type}
+          className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto pr-2"
+        >
+          {!pokeAvailable && type === 'POKE' ? (
+            <PokeUnavailableInfo />
+          ) : (
+            filterData(type)
+          )}
+        </TabsContent>
+      ))}
     </Tabs>
   )
 }

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

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { StaticImageData } from 'next/image'
 import { useRouter } from 'next/navigation'
+import Loading from '@/app/loading'
 import Button from '@/components/ui/button'
 import {
   Dialog,
@@ -100,11 +101,13 @@ const TradeSection = ({
       )}
 
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="p-4 pt-14 gap-6 h-full max-h-[576px]">
-          <DialogHeader>
+        <DialogContent className="flex flex-col p-4 pt-14 gap-6 h-full max-h-[576px]">
+          <DialogHeader className="h-fit">
             <DialogTitle>제안 가능한 내 물건 보기</DialogTitle>
           </DialogHeader>
-          <SuggestList toCardId={cardId} pokeAvailable={pokeAvailable} />
+          <Suspense fallback={<Loading />}>
+            <SuggestList toCardId={cardId} pokeAvailable={pokeAvailable} />
+          </Suspense>
         </DialogContent>
       </Dialog>
     </section>

src/app/(root)/(routes)/cards/new/components/PokeAvailable.tsx

@@ -32,7 +32,7 @@ const PokeAvailable = ({
           <FormControl>
             <Card className="flex flex-row items-center p-3 h-fit">
               <span className={'font-normal'}>
-                등록할 상품보다 낮은 금액의 상품 거래 제안을 허용합니다.
+                등록할 물건보다 낮은 금액의 물건 거래 제안을 허용합니다.
               </span>
               <Switch
                 id="pokeAvailable"

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

@@ -34,9 +34,11 @@ const CompleteRequestButton = ({
         variant: 'default',
         duration: 2000,
       })
-    } catch (error) {
+    } catch (error: any) {
+      const log = await error.response.json()
       toast({
         title: '거래성사 요청이 실패했습니다.',
+        description: log.message,
         variant: 'destructive',
         duration: 2000,
       })

src/app/(root)/(routes)/suggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx

@@ -43,12 +43,7 @@ const MyCardDescriptionSection = ({
           />
         </div>
 
-        <CardFlex
-          direction={'col'}
-          // justify={'between'}
-          gap={'space'}
-          className="w-full h-full"
-        >
+        <CardFlex direction={'col'} gap={'space'} className="w-full h-full">
           <CardFlex align={'center'} gap={'space'}>
             <CardText type={'title'} className="line-clamp-1">
               {cardTitle}
@@ -78,15 +73,9 @@ const MyCardDescriptionSection = ({
           <CardText type={'description'} className="flex justify-between">
             거래지역
             <Badge size={'sm'} variant={'information'}>
-              {tradeArea}
+              {tradeArea === '' ? '미입력' : tradeArea}
             </Badge>
           </CardText>
-          {/* <CardText type={'date'}>
-            {formatDistanceToNow(new Date(createdAt), {
-              addSuffix: true,
-              locale: koLocale,
-            })}
-          </CardText> */}
         </CardFlex>
       </CardFlex>
     </div>

src/app/loading.tsx

@@ -5,8 +5,8 @@ import lottieJson from '../../public/loading.json'
 
 const Loading = () => {
   return (
-    <div className="w-full h-full text-center">
-      <div className="flex flex-col items-center w-[320px] h-[360px] absolute left-1/2 translate-y-[50%] translate-x-[-50%] ">
+    <div className="w-full h-full text-center flex-1">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute top-0 left-1/2 translate-y-[50%] translate-x-[-50%] ">
         <Lottie
           loop
           animationData={lottieJson}

src/components/domain/badge/trade-complete-badge/TradeCompleteBadge.tsx

@@ -2,7 +2,7 @@ import Badge from '@/components/ui/badge'
 
 const TradeCompleteBadge = () => (
   <Badge variant={'gradation'} className="min-w-fit">
-    거래완료
+    거래성사
   </Badge>
 )
 export default TradeCompleteBadge

src/constants/card.ts

@@ -100,6 +100,7 @@ const COMPLETE_REQUEST_TYPE_OBJS = [
   { key: 'WAITING', value: '거래성사 대기중' },
   { key: 'ACCEPTED', value: '거래성사 확정' },
   { key: 'REFUSED', value: '거래성사 거절됨' },
+  { key: 'DELETED', value: '거래상대의 물건이 삭제되었습니다' },
 ]
 
 export {