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

* 🎉 로딩 구현 및 제안 가능한 카드 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,27 +2,23 @@ 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 { AvailableCardSuggestionListRes } from '@/services/suggestion/suggestion'
+import useSuggestionsQuery from '@/hooks/api/queries/useSuggestionsQuery'
 import PokeUnavailableInfo from './PokeUnavailableInfo'
 
 type SuggestListProps = {
-  suggestionData: AvailableCardSuggestionListRes[]
   pokeAvailable: boolean
   toCardId: number
 }
 
-const SuggestList = ({
-  suggestionData,
-  pokeAvailable,
-  toCardId,
-}: SuggestListProps) => {
+const SuggestList = ({ pokeAvailable, toCardId }: SuggestListProps) => {
+  const { data: suggestions } = useSuggestionsQuery(toCardId)
   const router = useRouter()
   const filterData = (type: string) => {
-    const filteredData = suggestionData.filter(
+    const filteredData = suggestions?.filter(
       (v) => v.suggestionInfo.suggestionType === type,
     )
 
-    if (filteredData.length === 0) {
+    if (filteredData?.length === 0) {
       return (
         <div className="h-full relative">
           <NoData
@@ -33,7 +29,7 @@ const SuggestList = ({
         </div>
       )
     } else {
-      return filteredData.map((v) => (
+      return filteredData?.map((v) => (
         <SuggestCard
           key={v.cardInfo.cardId}
           thumbnail={v.cardInfo.thumbnail}
@@ -59,7 +55,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' ? (
             <PokeUnavailableInfo />

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,
@@ -15,7 +14,6 @@ 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'
-import useSuggestionsQuery from '@/hooks/api/queries/useSuggestionsQuery'
 import { TradeTypeObjs } from '@/types/card'
 import { getValueByKey } from '@/utils/getValueByKey'
 import SuggestList from './SuggestList'
@@ -83,7 +81,6 @@ const TradeSection = ({
       setOpen(true)
     }
   }
-  const { data: suggestions } = useSuggestionsQuery(cardId, isMyItem)
 
   return (
     <section className="flex flex-col gap-2 w-full pt-4">
@@ -107,19 +104,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,13 +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
 
   return (
     <main className="flex-col min-h-screen bg-background-color">
-      {cardData ? (
+      {cardData && (
         <>
           <Slider
             imageData={cardData.cardInfo.images}
@@ -49,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/mutations/useSuggestionCreateMutation.ts

@@ -1,9 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from '@/hooks/useToast'
-import {
-  AvailableCardSuggestionListRes,
-  postSuggestion,
-} from '@/services/suggestion/suggestion'
+import { postSuggestion } from '@/services/suggestion/suggestion'
+import { Card } from '@/types/card'
+import { Suggestion } from '@/types/suggestion'
 
 const useSuggestionCreateMutation = (toCardId: number, fromCardId: number) => {
   const queryClient = useQueryClient()
@@ -21,10 +20,11 @@ const useSuggestionCreateMutation = (toCardId: number, fromCardId: number) => {
         await queryClient.cancelQueries({ queryKey })
 
         const updateSuggestions: any = structuredClone(previousSuggestions)
+        console.log(updateSuggestions)
         //낙관적 업데이트
         const indexToUpdate = updateSuggestions.findIndex(
-          (card: AvailableCardSuggestionListRes) =>
-            card.cardInfo.cardId === fromCardId,
+          (cardValue: { cardInfo: Card; suggestionInfo: Suggestion }) =>
+            cardValue.cardInfo.cardId === fromCardId,
         )
         updateSuggestions[indexToUpdate].suggestionInfo.suggestionStatus =
           'WAITING'

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