fix: build 에러 수정

Kernel360 · Dec 6, 2024 · 88b6d5b · 88b6d5b
1 parent 9485f31
commit 88b6d5b
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 76 deletions.
diff --git a/src/apis/queryHooks/Auth/useLogin.ts b/src/apis/queryHooks/Auth/useLogin.ts
@@ -1,7 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
+// useSearchParams
 import setTokenCookies from '@/apis/queryFunctions/setTokenCookies';
 import { LoginParams } from '@/apis/types/Auth';
 import { Response } from '@/apis/types/common';
@@ -10,9 +11,10 @@ import { useToast } from '@/provider/toastProvider';
 
 function useLogin() {
   const router = useRouter();
-  const searchParams = useSearchParams();
+  // const searchParams = useSearchParams();
+  // searchParams를 쓰면 서스펜스가 걸려서 에러가 발생함ㄴ
 
-  const prevUrl = searchParams.get('prevUrl');
+  // const prevUrl = searchParams.get('prevUrl');
   const { showToast } = useToast();
   const { setIsLoggedIn } = useAuth();
 
@@ -23,11 +25,11 @@ function useLogin() {
       localStorage.setItem('refreshToken', data.refreshToken);
       setIsLoggedIn(true);
       showToast('success', '로그인 되었습니다.');
-      if (prevUrl?.startsWith('/join') || prevUrl?.startsWith('/login')) {
-        router.push('/');
-      } else {
-        router.push(prevUrl || '/');
-      }
+      // if (prevUrl?.startsWith('/join') || prevUrl?.startsWith('/login')) {
+      router.push('/');
+      // } else {
+      //   router.push(prevUrl || '/');
+      // }
     },
     onError: (e: AxiosError<Response<string>>) => {
       if (e.response) {

diff --git a/src/app/basicauction/[id]/BasicAuctionInfo.tsx b/src/app/basicauction/[id]/BasicAuctionInfo.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import dynamic from 'next/dynamic';
 
@@ -49,7 +49,9 @@ function BasicAuctionInfo({ id }: BasicAuctionInfoProps) {
 
   return (
     <div className={S.auctionWrapper}>
-      <BreadcrumbSection />
+      <Suspense fallback={<>Loading...</>}>
+        <BreadcrumbSection />
+      </Suspense>
       <div className={S.auctionInfoWrapper}>
         <AuctionImageInfo imageList={data.result_data.image_paths} />
         <AuctionInfo

diff --git a/src/app/basicauction/page.tsx b/src/app/basicauction/page.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import { Metadata } from 'next';
 
 import AuctionDropDown from '@/app/basicauction/components/auctiondropdown';
@@ -19,14 +21,16 @@ interface GenerateMetadataProps {
 export const generateMetadata = async ({
   searchParams,
 }: GenerateMetadataProps): Promise<Metadata> => {
+  const queryValue = searchParams.categoryId;
+
+  if (!queryValue) {
+    return getMetadata({
+      title: 'ALL',
+      asPath: '/basicauction?page=1',
+    });
+  }
+
   try {
-    const queryValue = searchParams.categoryId;
-    if (!queryValue) {
-      return getMetadata({
-        title: 'ALL',
-        asPath: '/basicauction?page=1',
-      });
-    }
     const categoryListTree = await fetch(
       `${process.env.NEXT_PUBLIC_SERVER_API_URL}/api/v2/categories/${queryValue}`,
     )
@@ -39,15 +43,12 @@ export const generateMetadata = async ({
     return getMetadata({
       title: `${categoryName}`,
       asPath: `/basicauction?categoryId=${queryValue}&page=1`,
-      // TODO 예쁜 사진이 있다면 그것으로 카테고리를 나타내서 openGraphImage를 설정하면 좋을 듯함.
     });
   } catch (error) {
     console.error(error);
     return getMetadata({
       title: 'Auction Detail',
       asPath: `/basicauction`,
-
-      // 잘못 되었을 떄
     });
   }
 };
@@ -56,17 +57,25 @@ function Home() {
   return (
     <MaxLayout>
       <div className={S.basicAuctionContainer}>
-        <AuctionCategoryLeftSection />
+        <Suspense fallback={<>AuctionCategoryLeftSection</>}>
+          <AuctionCategoryLeftSection />
+        </Suspense>
         <section className={S.rightSection}>
-          <BreadcrumbSection />
+          <Suspense fallback={<>BreadcrumbSection</>}>
+            <BreadcrumbSection />
+          </Suspense>
           <div className={S.topInfoSection}>
-            <MobileAuctionCategoryLeftSection />
+            <Suspense fallback={<>MobileAuctionCategoryLeftSection</>}>
+              <MobileAuctionCategoryLeftSection />
+            </Suspense>
             <div className={S.optionSection}>
               <Checkbox />
               <AuctionDropDown />
             </div>
           </div>
-          <BasicAuctionClientPage />
+          <Suspense fallback={<>BasicAuctionClientPage</>}>
+            <BasicAuctionClientPage />
+          </Suspense>
         </section>
       </div>
     </MaxLayout>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,7 @@
+// import { Suspense } from 'react';
+
+import { Suspense } from 'react';
+
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Roboto } from 'next/font/google';
@@ -49,11 +53,14 @@ export default async function RootLayout({
       <body suppressHydrationWarning>
         <ToastProvider>
           <TanstackProviders>
-            <NavigationEvents />
+            <Suspense fallback={<div>Loading...NavigationEvents</div>}>
+              <NavigationEvents />
+            </Suspense>
             <AuthProvider>
               <HydrationBoundary state={dehydrate(queryClient)}>
                 <HeaderSection />
                 <div className={S.container}>
+                  {/* <Suspense fallback={<div>Loading...</div>}></Suspense> */}
                   {children}
                   <ChattingIconButton />
                   <ScrollToTopButton />

diff --git a/src/app/mypage/heart/page.tsx b/src/app/mypage/heart/page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Suspense } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import useGetAuctionLikeList from '@/apis/queryHooks/User/useGetAuctionLikeList';
@@ -55,18 +57,20 @@ function Home() {
           <ListLayout>
             {data?.pages.map(page =>
               page.result_data.content.map(item => (
-                <AuctionCard
-                  key={item.auction_id}
-                  id={item.auction_id}
-                  thumbnailImage={item.thumbnail_path}
-                  title={item.title}
-                  isLike={!!item.liked_date}
-                  auctionStatus={item.auction_status}
-                  startPrice={item.start_price}
-                  startTime={item.start_date}
-                  endTime={item.end_date}
-                  nowPrice={item.now_price}
-                />
+                <Suspense key={item.auction_id} fallback={<>AuctionCard</>}>
+                  <AuctionCard
+                    key={item.auction_id}
+                    id={item.auction_id}
+                    thumbnailImage={item.thumbnail_path}
+                    title={item.title}
+                    isLike={!!item.liked_date}
+                    auctionStatus={item.auction_status}
+                    startPrice={item.start_price}
+                    startTime={item.start_date}
+                    endTime={item.end_date}
+                    nowPrice={item.now_price}
+                  />
+                </Suspense>
               )),
             )}
           </ListLayout>

diff --git a/src/components/AuctionList/index.tsx b/src/components/AuctionList/index.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Suspense } from 'react';
+
 import { ArrowRightIcon } from 'lucide-react';
 import Link from 'next/link';
 
@@ -44,19 +46,21 @@ export default function AuctionList({ sort, direction, pathname, path }: Auction
       <div className={S.listWrapper}>
         <ListLayout>
           {data.result_data.content.map(item => (
-            <AuctionCard
-              key={item.auction_id}
-              id={item.auction_id}
-              thumbnailImage={item.thumbnail_path}
-              title={item.title}
-              isLike={item.is_liked}
-              startPrice={item.start_price}
-              startTime={item.start_date}
-              endTime={item.end_date}
-              nowPrice={item.now_price}
-              auctionStatus={item.auction_status}
-              instantBuyPrice={item.instant_buy_price}
-            />
+            <Suspense key={item.auction_id} fallback={<>AuctionCard</>}>
+              <AuctionCard
+                key={item.auction_id}
+                id={item.auction_id}
+                thumbnailImage={item.thumbnail_path}
+                title={item.title}
+                isLike={item.is_liked}
+                startPrice={item.start_price}
+                startTime={item.start_date}
+                endTime={item.end_date}
+                nowPrice={item.now_price}
+                auctionStatus={item.auction_status}
+                instantBuyPrice={item.instant_buy_price}
+              />
+            </Suspense>
           ))}
         </ListLayout>
       </div>

diff --git a/src/components/BasicAuctionClientPage/index.tsx b/src/components/BasicAuctionClientPage/index.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Suspense } from 'react';
+
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import useGetBasicAuctionList from '@/apis/queryHooks/basicAuction/useGetBasicAuctionList';
@@ -57,19 +59,21 @@ function BasicAuctionClientPage() {
         ) : (
           <ListLayout>
             {data.result_data.content.map(item => (
-              <AuctionCard
-                key={item.auction_id}
-                id={item.auction_id}
-                thumbnailImage={item.thumbnail_path}
-                title={item.title}
-                isLike={item.is_liked}
-                startPrice={item.start_price}
-                startTime={item.start_date}
-                endTime={item.end_date}
-                nowPrice={item.now_price}
-                auctionStatus={item.auction_status}
-                instantBuyPrice={item.instant_buy_price}
-              />
+              <Suspense key={item.auction_id} fallback={<>AuctionCard</>}>
+                <AuctionCard
+                  key={item.auction_id}
+                  id={item.auction_id}
+                  thumbnailImage={item.thumbnail_path}
+                  title={item.title}
+                  isLike={item.is_liked}
+                  startPrice={item.start_price}
+                  startTime={item.start_date}
+                  endTime={item.end_date}
+                  nowPrice={item.now_price}
+                  auctionStatus={item.auction_status}
+                  instantBuyPrice={item.instant_buy_price}
+                />
+              </Suspense>
             ))}
           </ListLayout>
         )}

diff --git a/src/components/Category/AuctionCategory/AuctionCategory.tsx b/src/components/Category/AuctionCategory/AuctionCategory.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import { Category } from '@/apis/types/category';
 import CategoryUnit from '@/components/Category/CategoryUnit/CategoryUnit';
 import useSetSearchParams from '@/hooks/useSetSearchParam';
@@ -29,7 +31,10 @@ function AuctionCategory({ categoryData }: AuctionCategoryProps) {
         <span className={unitButtonStyle()}>ALL</span>
       </button>
       {categoryData.map(category => (
-        <CategoryUnit key={category.category_id} unit={category} />
+        // eslint-disable-next-line react/jsx-key
+        <Suspense fallback={<>CategoryUnit</>}>
+          <CategoryUnit unit={category} key={category.category_id} />
+        </Suspense>
       ))}
     </div>
   );

diff --git a/src/components/HeaderSection/components/CategoryHeader/index.tsx b/src/components/HeaderSection/components/CategoryHeader/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import Link from 'next/link';
 
 import { Category } from '@/apis/types/category';
@@ -25,7 +27,9 @@ function CategoryHeader({ data }: CategoryHeaderProps) {
         ))}
       </div>
       <div className={S.searchBarWrapper}>
-        <SearchBar />
+        <Suspense fallback={<>SearchBar</>}>
+          <SearchBar />
+        </Suspense>
       </div>
     </section>
   );

diff --git a/src/components/HeaderSection/components/Header/Header.tsx b/src/components/HeaderSection/components/Header/Header.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Suspense } from 'react';
+
 import useGetCategory from '@/apis/queryHooks/category/useGetCategory';
 import { Category } from '@/apis/types/category';
 import MaxLayout from '@/components/MaxLayout';
@@ -18,7 +20,9 @@ function Header() {
     <header className={S.stickyHeader}>
       <MaxLayout>
         <div className={S.container}>
-          <UserHeader />
+          <Suspense fallback={<>UserHeader</>}>
+            <UserHeader />
+          </Suspense>
           <CategoryHeader data={data as Category[]} />
         </div>
       </MaxLayout>

diff --git a/src/components/HeaderSection/components/MobileHeader/MobileHeader.tsx b/src/components/HeaderSection/components/MobileHeader/MobileHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 
 import useGetUser from '@/apis/queryHooks/User/useGetUser';
 import useGetCategory from '@/apis/queryHooks/category/useGetCategory';
@@ -37,15 +37,18 @@ function MobileHeader() {
         <div className={S.container}>
           <MobileUserHeader openNav={openNav} />
           <CategoryHeader data={data as Category[]} />
+
           <SlideSideNav isOpen={navState} onClose={closeNav} type="mobile">
-            <MobileSlideNav
-              isLogin={!!userInfo}
-              userProfileImage={userInfo?.profile_image_url}
-              userNickname={userInfo?.nickname}
-              userEmail={userInfo?.email}
-              userHeartCount={userInfo?.like_count}
-              onClose={closeNav}
-            />
+            <Suspense fallback={<>MobileSlideNav Loading...</>}>
+              <MobileSlideNav
+                isLogin={!!userInfo}
+                userProfileImage={userInfo?.profile_image_url}
+                userNickname={userInfo?.nickname}
+                userEmail={userInfo?.email}
+                userHeartCount={userInfo?.like_count}
+                onClose={closeNav}
+              />
+            </Suspense>
           </SlideSideNav>
         </div>
       </MaxLayout>

diff --git a/src/components/HeaderSection/components/MobileUserHeader/index.tsx b/src/components/HeaderSection/components/MobileUserHeader/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import { MenuIcon } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -17,7 +19,9 @@ function MobileUserHeader({ openNav }: MobileUserHeaderProps) {
     <section className={S.topHeader}>
       <div className={S.IconWrapper}>
         <MenuIcon stroke={colors.gray10} onClick={openNav} />
-        <SearchBar />
+        <Suspense fallback={<>SearchBar</>}>
+          <SearchBar />
+        </Suspense>
       </div>
       <Link href="/" scroll={false} className={S.topHeaderLogo}>
         <Image width={24} height={24} src={logoIcon} alt="logo" className={S.logo} />