🎉 로딩 구현 및 제안 가능한 카드 get 요청 버그 수정

package.json

@@ -39,6 +39,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
+    "react-lottie-player": "^1.5.5",
     "sharp": "^0.32.6",
     "swiper": "^11.0.3",
     "tailwind-merge": "^1.14.0",

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

@@ -2,22 +2,16 @@ import Image from 'next/image'
 import SuggestCard from '@/components/domain/card/suggest-card'
 import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/tabs'
 import Assets from '@/config/assets'
-import { AvailableCardSuggestionListRes } from '@/services/suggestion/suggestion'
+import useSuggestionsQuery from '@/hooks/api/queries/useSuggestionsQuery'
 
 type SuggestListProps = {
-  suggestionData: AvailableCardSuggestionListRes[]
   pokeAvailable: boolean
   toCardId: number
 }
 
-/**
- * TODO : 스크롤바 디자인 수정
- */
-const SuggestList = ({
-  suggestionData,
-  pokeAvailable,
-  toCardId,
-}: SuggestListProps) => {
+const SuggestList = ({ pokeAvailable, toCardId }: SuggestListProps) => {
+  const { data: suggestions } = useSuggestionsQuery(toCardId)
+
   return (
     <Tabs defaultValue="OFFER">
       <TabsList>
@@ -28,7 +22,7 @@ const SuggestList = ({
         <TabsContent
           key={type}
           value={type}
-          className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto"
+          className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto pr-2"
         >
           {!pokeAvailable && type === 'POKE' ? (
             <div className="flex flex-col items-center justify-start gap-4 p-8">
@@ -43,8 +37,8 @@ const SuggestList = ({
               </p>
             </div>
           ) : (
-            suggestionData
-              .filter((v) => v.suggestionInfo.suggestionType === type)
+            suggestions
+              ?.filter((v) => v.suggestionInfo.suggestionType === type)
               .map((v) => (
                 <SuggestCard
                   key={v.cardInfo.cardId}

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

@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { StaticImageData } from 'next/image'
 import { useRouter } from 'next/navigation'
-import NoData from '@/components/domain/no-data'
 import Button from '@/components/ui/button'
 import {
   Dialog,
@@ -14,7 +13,6 @@ import {
 import Assets from '@/config/assets'
 import { PRICE_RANGE_OBJS, TRADE_TYPE_OBJS } from '@/constants/card'
 import { useAuth } from '@/contexts/AuthProvider'
-import useSuggestionsQuery from '@/hooks/api/queries/useSuggestionsQuery'
 import { TradeTypeObjs } from '@/types/card'
 import { getValueByKey } from '@/utils/getValueByKey'
 import SuggestList from './SuggestList'
@@ -82,7 +80,6 @@ const TradeSection = ({
       setOpen(true)
     }
   }
-  const { data: suggestions } = useSuggestionsQuery(cardId, isMyItem)
 
   return (
     <section className="flex flex-col gap-2 w-full pt-4">
@@ -106,19 +103,7 @@ const TradeSection = ({
           <DialogHeader>
             <DialogTitle>제안 가능한 내 물건 보기</DialogTitle>
           </DialogHeader>
-          {suggestions?.length === 0 ? (
-            <NoData
-              title="제안 가능한 내 물건이 없습니다."
-              onClickButton={() => router.push('/cards/new')}
-              buttonContent="물건 등록하러 가기"
-            />
-          ) : (
-            <SuggestList
-              toCardId={cardId}
-              pokeAvailable={pokeAvailable}
-              suggestionData={suggestions}
-            />
-          )}
+          <SuggestList toCardId={cardId} pokeAvailable={pokeAvailable} />
         </DialogContent>
       </Dialog>
     </section>

src/app/(root)/(routes)/cards/[cardId]/page.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
-import NoData from '@/components/domain/no-data'
 import Slider from '@/components/domain/slider'
 import { useAuth } from '@/contexts/AuthProvider'
 import useCardInfoQuery from '@/hooks/api/queries/useCardInfoQuery'
@@ -17,14 +15,12 @@ type CardPageProps = {
 
 const CardPage = ({ params }: CardPageProps) => {
   const { isLoggedIn } = useAuth()
-  const router = useRouter()
   const { data } = useCardInfoQuery(Number(params.cardId), isLoggedIn)
   const cardData = data?.data
-  console.log(cardData)
 
   return (
     <main className="flex-col min-h-screen bg-background-color">
-      {cardData ? (
+      {cardData && (
         <>
           <Slider
             imageData={cardData.cardInfo.images}
@@ -50,12 +46,6 @@ const CardPage = ({ params }: CardPageProps) => {
             />
           </div>
         </>
-      ) : (
-        <NoData
-          title="물건 정보가 없습니다."
-          buttonContent="뒤로가기"
-          onClickButton={() => router.back()}
-        />
       )}
     </main>
   )

src/app/loading.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import Lottie from 'react-lottie-player'
+import lottieJson from '../../public/loading.json'
+
+const Loading = () => {
+  return (
+    <div className="w-full h-screen text-center">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute left-1/2 translate-y-[50%] translate-x-[-50%] ">
+        <Lottie
+          loop
+          animationData={lottieJson}
+          play
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
+        <p className="font- text-[20px]">잠시만 기다려 주세요.</p>
+      </div>
+    </div>
+  )
+}
+
+export default Loading

src/components/domain/exception-boundary/ExceptionBoundary.tsx

@@ -1,3 +1,5 @@
+import Loading from '@/app/loading'
+
 type ExceptionBoundaryProps = {
   isLoading: boolean
   isError: boolean
@@ -14,7 +16,7 @@ const ExceptionBoundary: React.FC<ExceptionBoundaryProps> = ({
   children,
 }: ExceptionBoundaryProps) => {
   if (isLoading) {
-    return <div>로딩 중...</div>
+    return <Loading />
   }
 
   if (isError) {

src/contexts/TanstackQueryContext.tsx

@@ -13,6 +13,7 @@ const TanstackQueryGlobalConfig = {
     queries: {
       retry: 3,
       retryDelay: 1000,
+      suspense: true,
     },
   },
 }

src/hooks/api/queries/useSuggestionsQuery.ts

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query'
 import { getAvailableCardSuggestionList } from '@/services/suggestion/suggestion'
 
-const useSuggestionsQuery = (cardId: number, isMyItem: boolean) => {
+const useSuggestionsQuery = (cardId: number) => {
   return useQuery({
     queryKey: [cardId, 'suggestions'] as const,
     queryFn: () => getAvailableCardSuggestionList(cardId),
-    enabled: !isMyItem,
   })
 }
 

src/services/suggestion/suggestion.ts

@@ -4,12 +4,13 @@ import { DirectionType, Suggestion, SuggestionType } from '@/types/suggestion'
 import apiClient from '../apiClient'
 
 export type AvailableCardSuggestionListRes = {
-  cardInfo: Card
-  suggestionInfo: Suggestion
+  code: string
+  message: string
+  data: { cardList: { cardInfo: Card; suggestionInfo: Suggestion }[] }
 }
 
 const getAvailableCardSuggestionList = async (cardId: number) => {
-  const response = await apiClient.get(
+  const response: AvailableCardSuggestionListRes = await apiClient.get(
     ApiEndPoint.getAvailableCardSuggestionList(cardId),
   )
   return response.data.cardList