로딩 개선

src/components/common/TopBar.tsx

@@ -1,7 +1,7 @@
 import Back from '@public/static/back.svg';
 import MainLogo from '@public/static/main_logo.svg';
 import TestResultLogo from '@public/static/test_result_logo.svg';
-import Router from 'next/router';
+import Router, { useRouter } from 'next/router';
 import React from 'react';
 import Image from 'next/image';
 
@@ -21,15 +21,24 @@ export default function TopBar({
   return (
     <div className="flex w-full justify-between py-6">
       {isBackButton ? (
-        <button>
-          <Back onClick={onBackButton} />
-        </button>
+        <Image
+          src="/static/back.svg"
+          width={30}
+          height={30}
+          alt="back"
+          onClick={onBackButton}
+        />
       ) : (
         <div />
       )}
 
       {mainMessage === 'main' ? (
-        <Image alt="logo" src="/static/logo_main.png" width="100" height="0" />
+        <Image
+          alt="logo"
+          src="/static/logo_main.png"
+          width={100}
+          height={100}
+        />
       ) : (
         <TestResultLogo />
       )}

src/pages/question.tsx

@@ -1,72 +1,64 @@
 import Button from '@components/common/Button';
+import GoogleAd from '@components/common/GoogleAd';
 import ProgressBar from '@components/common/ProgressBar';
 import TopBar from '@components/common/TopBar';
+import { getUserQuestion, getUserResult } from 'api/getUserQuestion';
 import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { useQuery } from 'react-query';
-import {
-  GetUserQuestionType,
-  QuestionContentType,
-} from 'types/getUserQuestion';
+import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { UserRecommendation } from 'store/atom';
-import { getUserQuestion, getUserResult } from 'api/getUserQuestion';
-import Loader from '@components/common/Loader';
-import GoogleAd from '@components/common/GoogleAd';
+
+interface QuestionContentType {
+  id: number;
+  content: string;
+  number: number;
+}
 
 interface QuestionDataType {
   answers: QuestionContentType[];
   content: string;
   id: number;
   imageUrl: string;
+  number: number;
 }
 
-export default function question() {
-  const { data, isSuccess } = useQuery(['getUserQuestion'], getUserQuestion, {
-    staleTime: Infinity,
-  });
+export const getStaticProps = async () => {
+  const { data } = await getUserQuestion();
+  return {
+    props: {
+      data: data.data.test.questions,
+    },
+  };
+};
+
+export default function question({ data }: { data: QuestionDataType[] }) {
+  console.log(data);
   const [currentPage, setCurrentPage] = useState(1);
-  const [isButtonClicked, setIsButtonClicked] = useState(false);
   const [questionArray, setQuestionArray] = useState<
     { questionNumber: number; answerNumber: number }[]
   >([]);
-  const [questionData, setQuestionData] = useState<GetUserQuestionType | null>(
-    null,
-  );
+
   const router = useRouter();
   const MAX_PAGE = 12;
   const setUserRecommendation = useSetRecoilState(UserRecommendation);
 
-  const [loading, setLoading] = useState(false);
-
-  const setImageLoadingComplete = (e: any) => {
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    setLoading(true);
-  }, [currentPage]);
-
-  useEffect(() => {
-    if (data !== undefined) {
-      setQuestionData(data?.data);
-    }
-  }, [data, isSuccess]);
+  const nickname = '규성';
+  // const nickname = localStorage.getItem('nickname') || '';
 
   const handleClickQuestion = (clickedIndex: number) => {
-    setIsButtonClicked(true);
     if (currentPage === MAX_PAGE) {
       const getData = async () => {
-        const data = await getUserResult(
+        const resData = await getUserResult(
           [
             ...questionArray,
             { questionNumber: currentPage, answerNumber: clickedIndex + 1 },
           ],
-          localStorage.getItem('nickname') as string,
+          nickname,
         );
-        setUserRecommendation(data.data.data.recommendation.id);
-        router.push(`/result?id=${data.data.data.recommendation.id}`);
+        const userId = resData.data.data.recommendation.id;
+        setUserRecommendation(userId);
+        router.push(`/result?id=${userId}`);
       };
       return getData();
     }
@@ -87,74 +79,45 @@ export default function question() {
     return router.back();
   };
 
-  if (loading)
-    return (
-      <div>
+  return (
+    <div className="pb-[3rem]">
+      <div className="px-4">
+        <TopBar
+          onBackButton={() => handleProgressbarBackButton(currentPage)}
+          isBackButton={currentPage > 1}
+        />
+      </div>
+      <section className="mb-[1.75rem] flex flex-col items-center">
+        <ProgressBar order={currentPage} />
+        <p className="mt-[1rem] font-AppleB text-[1.5rem] leading-[1.875rem] text-gray-6">{`Q.  ${
+          currentPage < 10 ? '0' + currentPage : currentPage
+        }`}</p>
+      </section>
+      <section className="flex flex-col items-center ">
         <Image
-          onLoadingComplete={(e) => setImageLoadingComplete(e)}
-          loading="eager"
-          priority
-          className="mb-[2rem] hidden rounded-[1.25rem]  px-4"
+          className="mb-[2rem] rounded-[1.25rem]  px-4"
           alt="image that explain Question"
           width={450}
           height={450}
-          src={
-            questionData?.data.test.questions[currentPage - 1]
-              .imageUrl as string
-          }
+          src={data[currentPage - 1].imageUrl}
         />
-        <Loader />
-      </div>
-    );
-
-  return (
-    isSuccess && (
-      <div className="pb-[3rem]">
-        <div className="px-4">
-          <TopBar
-            onBackButton={() => handleProgressbarBackButton(currentPage)}
-            isBackButton={currentPage > 1}
-          />
+        <p className="mb-8 flex h-[5.75rem] items-center text-center text-[1.25rem] leading-7">
+          {data[currentPage - 1].content.replace('000', nickname)}
+        </p>
+        <div className="mb-13 flex w-full flex-col gap-4">
+          {data[currentPage - 1].answers.map(({ content, id }, index) => (
+            <Button
+              key={id}
+              onClick={() => handleClickQuestion(index)}
+              type="button"
+              property="question"
+            >
+              {content}
+            </Button>
+          ))}
         </div>
-        <section className="mb-[1.75rem] flex flex-col items-center">
-          <ProgressBar order={currentPage} />
-          <p className="mt-[1rem] font-AppleB text-[1.5rem] leading-[1.875rem] text-gray-6">{`Q.  ${
-            currentPage < 10 ? '0' + currentPage : currentPage
-          }`}</p>
-        </section>
-        {questionData?.data.test.questions[currentPage - 1] !== undefined && (
-          <section className="flex flex-col items-center ">
-            <Image
-              className="mb-[2rem] rounded-[1.25rem]  px-4"
-              alt="image that explain Question"
-              width={450}
-              height={450}
-              src={questionData?.data.test.questions[currentPage - 1].imageUrl}
-            />
-            <p className="mb-8 flex h-[5.75rem] items-center text-center text-[1.25rem] leading-7">
-              {questionData?.data.test.questions[
-                currentPage - 1
-              ].content.replace('000', localStorage.getItem('nickname') || '')}
-            </p>
-            <div className="mb-13 flex w-full flex-col gap-4">
-              {questionData?.data.test.questions[currentPage - 1].answers.map(
-                ({ content, id }, index) => (
-                  <Button
-                    disabled={isButtonClicked}
-                    key={id}
-                    onClick={() => handleClickQuestion(index)}
-                    type="button"
-                    property="question"
-                  >
-                    {content}
-                  </Button>
-                ),
-              )}
-            </div>
-            <GoogleAd />
-          </section>
-        )}
-      </div>
-    )
+        <GoogleAd />
+      </section>
+    </div>
   );
 }

src/types/getUserQuestion.ts

@@ -1,20 +1,14 @@
-export interface QuestionContentType {
-  id: number;
-  content: string;
-  imageUrl: string;
-}
-
-export interface GetUserQuestionType {
-  data: {
-    test: {
-      id: number;
-      version: number;
-      questions: {
-        id: number;
-        content: string;
-        imageUrl: string;
-        answers: QuestionContentType[];
-      }[];
-    };
-  };
-}
+// export interface GetUserQuestionType {
+//   data: {
+//     test: {
+//       id: number;
+//       version: number;
+//       questions: {
+//         id: number;
+//         content: string;
+//         imageUrl: string;
+//         answers: QuestionContentType[];
+//       }[];
+//     };
+//   };
+// }