🚚 Merge develop

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

@@ -10,12 +10,16 @@ const HistorySection = () => {
 
   return (
     historyList.length !== 0 && (
-      <section className="flex flex-col w-full px-4 gap-6">
-        <div className="text-[24px] font-bold">최근 거래성사된 물건들</div>
-        {historyList.map((data: TradeHistory) => (
-          <HistoryCard key={data.historyId} history={data} />
-        ))}
-      </section>
+      <div className="flex flex-col w-full gap-2">
+        <div className="text-[24px] w-full px-4 font-bold">
+          최근 거래성사된 물건들
+        </div>
+        <section className="flex flex-col w-full gap-6 px-4">
+          {historyList.map((data: TradeHistory) => (
+            <HistoryCard key={data.historyId} history={data} />
+          ))}
+        </section>
+      </div>
     )
   )
 }

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

@@ -40,11 +40,11 @@ const PopularCardSlider = ({ cardData }: PopularCardSliderProps) => {
               height={0}
               alt="sliderImage"
               src={v.thumbnail}
-              sizes="100vw"
-              style={{ width: '100%' }}
+              sizes="80vw"
+              style={{ width: '80%' }}
               onClick={() => handleClick(v.cardId)}
             />
-            <div className="flex flex-col gap-1 items-center justify-center opacity-70 bg-black rounded-b-[5px] text-white w-full absolute inset-x-0 bottom-0 max-w-[240px] left-2/4 translate-x-[-50%] ">
+            <div className="flex flex-col items-start p-2 justify-center opacity-40 bg-black rounded-b-[5px] text-white w-full absolute inset-x-0 bottom-0 max-w-[240px] left-2/4 translate-x-[-50%] ">
               <p className={`${TYPOGRAPHY.title}`}>{v.itemName}</p>
               <p className={`${TYPOGRAPHY.description}`}>
                 {getValueByKey(PRICE_RANGE_OBJS, v.priceRange)}

src/app/(root)/(routes)/(home)/page.tsx

@@ -5,7 +5,7 @@ import PopularCardSection from './components/PopularCardSection'
 
 function HomePage() {
   return (
-    <main className="flex flex-col items-center min-h-screen gap-12 bg-background-color pb-8">
+    <main className="flex flex-col items-center min-h-screen gap-12 pb-8 bg-background-color">
       <BannerSection />
       <CategorySection />
       <PopularCardSection />

src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx

@@ -1,65 +1,25 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { useSearchParams } from 'next/navigation'
-import ExceptionBoundary from '@/components/domain/exception-boundary'
-import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
-import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
-import { CategoryObjs, PriceRangeObjs } from '@/types/card'
+import Loading from '@/app/loading'
+import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
 import CardFilterSection from '../card-filter-section'
 import CardList from '../card-list/CardList'
 
 const CardListContent = () => {
-  const searchParams = useSearchParams()
-
-  // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기
-  const {
-    data,
-    fetchNextPage,
-    isError,
-    isFetchingNextPage,
-    isLoading,
-    hasNextPage,
-  } = useCardsQuery({
-    category:
-      (searchParams.get('category') as CategoryObjs['key']) || undefined,
-    priceRange:
-      (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
-    cardTitle: searchParams.get('cardTitle' as string) || '',
-  })
-
-  const lastElementRef = useRef<HTMLDivElement | null>(null)
-  const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
-
-  useEffect(() => {
-    if (isFetchingNextPage || !hasNextPage) {
-      return
-    }
-
-    if (entry?.isIntersecting) {
-      fetchNextPage()
-    }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
-
-  // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정
-
-  const isEmpty = data?.pages[0].data.cardList.length === 0
-
   return (
     <>
       <CardFilterSection />
-      <ExceptionBoundary
-        isLoading={isLoading}
-        isError={isError}
-        isEmpty={isEmpty}
-        isFetchingNextPage={isFetchingNextPage}
+      <ErrorBoundary
+        fallback={
+          <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
+        }
       >
-        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+        <Suspense fallback={<Loading />}>
           <CardList />
-        </ErrorBoundary>
-      </ExceptionBoundary>
-      <div ref={lastElementRef} />
+        </Suspense>
+      </ErrorBoundary>
     </>
   )
 }

src/app/(root)/(routes)/cards/components/card-list/CardList.tsx

@@ -1,23 +1,54 @@
-import { Fragment } from 'react'
-import { useSearchParams } from 'next/navigation'
+import { Fragment, useEffect, useRef } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import TradeStatusCard from '@/components/domain/card/trade-status-card'
+import EmptyDataWrapper from '@/components/domain/empty-data-wrapper'
+import NoData from '@/components/domain/no-data'
+import AppPath from '@/config/appPath'
 import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
+import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { GetCardListRes } from '@/services/card/card'
 import { Card, CategoryObjs, PriceRangeObjs } from '@/types/card'
 
 const CardList = () => {
   const searchParams = useSearchParams()
+  const router = useRouter()
 
-  const { data } = useCardsQuery({
-    category:
-      (searchParams.get('category') as CategoryObjs['key']) || undefined,
-    priceRange:
-      (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
-    cardTitle: searchParams.get('cardTitle' as string) || '',
-  })
+  // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
+    useCardsQuery({
+      category:
+        (searchParams.get('category') as CategoryObjs['key']) || undefined,
+      priceRange:
+        (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
+      cardTitle: searchParams.get('cardTitle' as string) || '',
+    })
+
+  const lastElementRef = useRef<HTMLDivElement | null>(null)
+  const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
+
+  useEffect(() => {
+    if (isFetchingNextPage || !hasNextPage) {
+      return
+    }
+
+    if (entry?.isIntersecting) {
+      fetchNextPage()
+    }
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
+
+  const isEmpty = data?.pages[0].data.cardList.length === 0
 
   return (
-    <>
+    <EmptyDataWrapper
+      isEmpty={isEmpty}
+      fallback={
+        <NoData
+          title={'해당 물건이 없습니다.'}
+          buttonContent={'물건 등록하기'}
+          onClickButton={() => router.push(AppPath.newCard())}
+        />
+      }
+    >
       {data?.pages.map(({ data: { cardList } }: GetCardListRes, pageIndex) => (
         <Fragment key={pageIndex}>
           {cardList.map((card: Card) => (
@@ -27,7 +58,8 @@ const CardList = () => {
           ))}
         </Fragment>
       ))}
-    </>
+      <div ref={lastElementRef} />
+    </EmptyDataWrapper>
   )
 }
 

src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx

@@ -1,60 +1,31 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { Suspense, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import ExceptionBoundary from '@/components/domain/exception-boundary'
-import { useMyCardsQuery } from '@/hooks/api/queries/useMyCardsQuery'
-import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
+import Loading from '@/app/loading'
+import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
 import { TradeStatus } from '@/types/card'
 import MyCardList from '../my-card-list/MyCardList'
 import TradeStatusTabs from '../trade-status-tabs'
 
 const MyCardListContent = () => {
   const [tradeStatus, setTradeStatus] = useState<TradeStatus>('TRADE_AVAILABLE')
 
-  const {
-    data,
-    fetchNextPage,
-    isLoading,
-    isError,
-    isFetchingNextPage,
-    hasNextPage,
-  } = useMyCardsQuery({
-    tradeStatus,
-  })
-
-  const lastElementRef = useRef<HTMLDivElement | null>(null)
-  const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
-
-  useEffect(() => {
-    if (isFetchingNextPage || !hasNextPage) {
-      return
-    }
-
-    if (entry?.isIntersecting) {
-      fetchNextPage()
-    }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
-
-  const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
     <>
       <TradeStatusTabs
         tradeStatus={tradeStatus}
         setTradeStatus={setTradeStatus}
       />
-      <ExceptionBoundary
-        isLoading={isLoading}
-        isError={isError}
-        isEmpty={isEmpty}
-        isFetchingNextPage={isFetchingNextPage}
+      <ErrorBoundary
+        fallback={
+          <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
+        }
       >
-        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
-          <MyCardList data={data} />
-        </ErrorBoundary>
-      </ExceptionBoundary>
-
-      <div ref={lastElementRef} />
+        <Suspense fallback={<Loading />}>
+          <MyCardList tradeStatus={tradeStatus} />
+        </Suspense>
+      </ErrorBoundary>
     </>
   )
 }

src/app/(root)/(routes)/cards/my/components/my-card-list/MyCardList.tsx

@@ -1,16 +1,48 @@
-import { Fragment } from 'react'
-import { InfiniteData } from '@tanstack/react-query'
+import { Fragment, useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
+import EmptyDataWrapper from '@/components/domain/empty-data-wrapper/EmptyDataWrapper'
+import NoData from '@/components/domain/no-data'
+import AppPath from '@/config/appPath'
+import { useMyCardsQuery } from '@/hooks/api/queries/useMyCardsQuery'
+import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { GetMyCardListRes } from '@/services/card/card'
 import { Card } from '@/types/card'
 import MyCard from '../my-card'
 
-const MyCardList = ({
-  data,
-}: {
-  data: InfiniteData<GetMyCardListRes, unknown> | undefined
-}) => {
+const MyCardList = ({ tradeStatus }: { tradeStatus: any }) => {
+  const router = useRouter()
+  const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
+    useMyCardsQuery({
+      tradeStatus,
+    })
+
+  const lastElementRef = useRef<HTMLDivElement | null>(null)
+  const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
+
+  useEffect(() => {
+    if (isFetchingNextPage || !hasNextPage) {
+      return
+    }
+
+    if (entry?.isIntersecting) {
+      fetchNextPage()
+    }
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
+  const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
-    <>
+    <EmptyDataWrapper
+      isEmpty={isEmpty}
+      fallback={
+        tradeStatus === 'TRADE_AVAILABLE' && (
+          <NoData
+            title={'내 물건이 없습니다.'}
+            buttonContent={'물건 등록하기'}
+            onClickButton={() => router.push(AppPath.newCard())}
+            position={false}
+          />
+        )
+      }
+    >
       {data?.pages.map(
         ({ data: { cardList } }: GetMyCardListRes, pageIndex) => (
           <Fragment key={pageIndex}>
@@ -20,7 +52,8 @@ const MyCardList = ({
           </Fragment>
         ),
       )}
-    </>
+      <div ref={lastElementRef} />
+    </EmptyDataWrapper>
   )
 }
 

src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx

@@ -1,51 +1,23 @@
 'use client'
 
-import { useEffect, useRef, Fragment } from 'react'
+import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import ExceptionBoundary from '@/components/domain/exception-boundary'
-import { useChatRoomsQuery } from '@/hooks/api/queries/useChatRoomsQuery'
-import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
+import Loading from '@/app/loading'
+import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
 import ChatRoomList from '../chat-room-list'
 
 const ChatRoomListContent = () => {
-  const {
-    data,
-    fetchNextPage,
-    isLoading,
-    isError,
-    isFetchingNextPage,
-    hasNextPage,
-  } = useChatRoomsQuery()
-
-  const lastElementRef = useRef<HTMLDivElement | null>(null)
-  const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
-
-  useEffect(() => {
-    if (isFetchingNextPage || !hasNextPage) {
-      return
-    }
-
-    if (entry?.isIntersecting) {
-      fetchNextPage()
-    }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
-
-  const isEmpty = data?.pages[0].data.chatRoomList.length === 0
-
   return (
     <>
-      <ExceptionBoundary
-        isLoading={isLoading}
-        isError={isError}
-        isEmpty={isEmpty}
-        isFetchingNextPage={isFetchingNextPage}
+      <ErrorBoundary
+        fallback={
+          <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
+        }
       >
-        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
-          <ChatRoomList data={data} />
-        </ErrorBoundary>
-      </ExceptionBoundary>
-
-      <div ref={lastElementRef} />
+        <Suspense fallback={<Loading />}>
+          <ChatRoomList />
+        </Suspense>
+      </ErrorBoundary>
     </>
   )
 }