!!fix suspense 추가

primus-teoSprint · Apr 8, 2024 · ea3ad8b · ea3ad8b
1 parent 5e715fd
commit ea3ad8b
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 128 deletions.
diff --git a/app/(route)/main/page.tsx b/app/(route)/main/page.tsx
@@ -12,6 +12,7 @@ import Title from '../../_common/text/title'
 import Search from '../../_components/search'
 import { Root, Tool } from '../../_constants/toolcard'
 import S from './page.module.css'
+import { Suspense } from 'react'
 
 //TODO: 주석처리 사항들에 데이터 가져오기
 function Main() {
@@ -27,58 +28,60 @@ function Main() {
   const resData = data?.data.data.tool
 
   return (
-    <main className={S.wrapper}>
-      <Nav />
-      <div className={S.inWrapper}>
-        <Link href="/search">
-          <Search />
-        </Link>
-        <div className={S.marginWrapper}>
-          <Title title="인기 많은 툴" />
-        </div>
-        <div className={S.toolCardWrapper}>
-          <Swiper
-            spaceBetween={20}
-            slidesPerView={'auto'}
-            onSlideChange={() => console.log('slide change')}
-            onSwiper={(swiper) => console.log(swiper)}
-          >
-            {resData?.map((data: Tool, index: number) => {
+    <Suspense fallback={<div>...loading</div>}>
+      <main className={S.wrapper}>
+        <Nav />
+        <div className={S.inWrapper}>
+          <Link href="/search">
+            <Search />
+          </Link>
+          <div className={S.marginWrapper}>
+            <Title title="인기 많은 툴" />
+          </div>
+          <div className={S.toolCardWrapper}>
+            <Swiper
+              spaceBetween={20}
+              slidesPerView={'auto'}
+              onSlideChange={() => console.log('slide change')}
+              onSwiper={(swiper) => console.log(swiper)}
+            >
+              {resData?.map((data: Tool, index: number) => {
+                return (
+                  <SwiperSlide style={{ width: '390px' }} key={index}>
+                    <ToolCard
+                      title={data?.title || ''}
+                      subTitle={data?.subTitle || ''}
+                      description={data?.description || ''}
+                      toolImg={data?.toolImg || ''}
+                      toolId={index}
+                      company={data?.company}
+                    />
+                  </SwiperSlide>
+                )
+              })}
+            </Swiper>
+          </div>
+          <div className={S.rowWrapper}>
+            <Title title="검증 툴 리스트" />
+            <Link href="/list">자세히 보기</Link>
+          </div>
+          <div className={S.keyWordCardWrapper}>
+            {resData?.map((data: Tool, index) => {
               return (
-                <SwiperSlide style={{ width: '390px' }} key={index}>
-                  <ToolCard
-                    title={data?.title || ''}
-                    subTitle={data?.subTitle || ''}
-                    description={data?.description || ''}
-                    toolImg={data?.toolImg || ''}
-                    toolId={index}
-                    company={data?.company}
-                  />
-                </SwiperSlide>
+                <KeyWordTool
+                  title={data?.title || ''}
+                  subTitle={data?.subTitle || ''}
+                  toolImg={data?.toolImg || ''}
+                  key={index}
+                  toolId={index}
+                  keyword={data.keyword}
+                />
               )
             })}
-          </Swiper>
-        </div>
-        <div className={S.rowWrapper}>
-          <Title title="검증 툴 리스트" />
-          <Link href="/list">자세히 보기</Link>
-        </div>
-        <div className={S.keyWordCardWrapper}>
-          {resData?.map((data: Tool, index) => {
-            return (
-              <KeyWordTool
-                title={data?.title || ''}
-                subTitle={data?.subTitle || ''}
-                toolImg={data?.toolImg || ''}
-                key={index}
-                toolId={index}
-                keyword={data.keyword}
-              />
-            )
-          })}
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </Suspense>
   )
 }
 

diff --git a/app/(route)/mypage/page.tsx b/app/(route)/mypage/page.tsx
@@ -2,12 +2,13 @@ import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
 import IdeaCard from './_components/ideaCard'
 import S from './mypage.module.css'
+import { Suspense } from 'react'
 
 //TODO: 사용자 명, 아이디어 검증 수가 들어갑니다.
 //TODO: 완료된 아이디어, 입력 전 아이디어를 불러옵니다.(get)
 function Mypage() {
   return (
-    <>
+    <Suspense fallback={<div>로딩중...</div>}>
       <div className={S.wrapper}>
         <Nav />
         <Title title="아이디어" />
@@ -24,7 +25,7 @@ function Mypage() {
           <IdeaCard />
         </div>
       </div>
-    </>
+    </Suspense>
   )
 }
 

diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -3,9 +3,8 @@
 import Modal from '@/app/_common/modal'
 import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import S from './toolDetail.module.css'
-import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import axios, { AxiosResponse } from 'axios'
@@ -30,91 +29,93 @@ function ToolDetail() {
   const resData = data?.data.data.tool[Number(toolId)]
 
   return (
-    <div className={S.wrapper}>
-      <Nav />
-      <div className={S.introWrapper}>
-        <div className={S.imgWrapper}>
-          <Image
-            src={resData?.toolImg || ''}
-            alt="아이디어 툴 이미지"
-            width={80}
-            height={80}
-          />
+    <Suspense fallback={<div>로딩중...</div>}>
+      <div className={S.wrapper}>
+        <Nav />
+        <div className={S.introWrapper}>
+          <div className={S.imgWrapper}>
+            <Image
+              src={resData?.toolImg || ''}
+              alt="아이디어 툴 이미지"
+              width={80}
+              height={80}
+            />
+          </div>
+          <Title title={resData?.title || ''} />
+          <p> {resData?.createdBy}</p>
         </div>
-        <Title title={resData?.title || ''} />
-        <p> {resData?.createdBy}</p>
-      </div>
 
-      <div className={S.contentWrapper}>
-        <div className={S.btnWrapper}>
-          <button
-            className={`${S.btn} ${!clickBtn ? S.clickBtn : ''}`}
-            onClick={() => setClickBtn((prevState) => !prevState)}
-          >
-            Description
-          </button>
-          <button
-            className={`${S.btn} ${clickBtn ? S.clickBtn : ''}`}
-            onClick={() => setClickBtn((prevState) => !prevState)}
-          >
-            Company
-          </button>
-        </div>
+        <div className={S.contentWrapper}>
+          <div className={S.btnWrapper}>
+            <button
+              className={`${S.btn} ${!clickBtn ? S.clickBtn : ''}`}
+              onClick={() => setClickBtn((prevState) => !prevState)}
+            >
+              Description
+            </button>
+            <button
+              className={`${S.btn} ${clickBtn ? S.clickBtn : ''}`}
+              onClick={() => setClickBtn((prevState) => !prevState)}
+            >
+              Company
+            </button>
+          </div>
 
-        {!clickBtn ? (
-          <>
+          {!clickBtn ? (
+            <>
+              <div className={S.marginWrapper}>
+                <Title title="개요" />
+                <p>{resData?.content}</p>
+              </div>
+              <div className={S.marginWrapper}>
+                <Title title="검증 방식" />
+                <ul>
+                  {resData?.verificationMethod.map((method, index) => {
+                    return (
+                      <li className={S.li} key={index}>
+                        <div className={S.circle}></div>
+                        <div className={S.method}>{method}</div>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            </>
+          ) : (
             <div className={S.marginWrapper}>
-              <Title title="개요" />
-              <p>{resData?.content}</p>
-            </div>
-            <div className={S.marginWrapper}>
-              <Title title="검증 방식" />
-              <ul>
-                {resData?.verificationMethod.map((method, index) => {
+              <Title title="실제 사례" />
+
+              <div className={S.columnWrapper}>
+                {resData?.company.map((company, index) => {
                   return (
-                    <li className={S.li} key={index}>
-                      <div className={S.circle}></div>
-                      <div className={S.method}>{method}</div>
-                    </li>
+                    <div className={S.examplewrap} key={index}>
+                      <div className={S.img}>
+                        <Image
+                          src={company || ''}
+                          alt="아이디어 툴 이미지"
+                          width={120}
+                          height={40}
+                        />
+                      </div>
+                      <div className={S.examplecontent}>
+                        {resData.exampleContent[index]}
+                      </div>
+                    </div>
                   )
                 })}
-              </ul>
+              </div>
             </div>
-          </>
-        ) : (
-          <div className={S.marginWrapper}>
-            <Title title="실제 사례" />
-
-            <div className={S.columnWrapper}>
-              {resData?.company.map((company, index) => {
-                return (
-                  <div className={S.examplewrap} key={index}>
-                    <div className={S.img}>
-                      <Image
-                        src={company || ''}
-                        alt="아이디어 툴 이미지"
-                        width={120}
-                        height={40}
-                      />
-                    </div>
-                    <div className={S.examplecontent}>
-                      {resData.exampleContent[index]}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )}
+          )}
+        </div>
+        <Modal
+          open="검증하기"
+          title="아이디어 불패의 법칙"
+          subTitle="선택한 해당 아이디어 툴로 검사를 진행하시겠습니까? :)"
+          buttonTitle="해당 툴로 검증하기"
+          buttonLink="/verification/ibulsin?step=1"
+        ></Modal>
       </div>
-      <Modal
-        open="검증하기"
-        title="아이디어 불패의 법칙"
-        subTitle="선택한 해당 아이디어 툴로 검사를 진행하시겠습니까? :)"
-        buttonTitle="해당 툴로 검증하기"
-        buttonLink="/verification/ibulsin?step=1"
-      ></Modal>
-    </div>
+    </Suspense>
   )
 }