diff --git a/src/components/common/TopBar.tsx b/src/components/common/TopBar.tsx index 1335020..4beb110 100644 --- a/src/components/common/TopBar.tsx +++ b/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 (
{isBackButton ? ( - + back ) : (
)} {mainMessage === 'main' ? ( - logo + logo ) : ( )} diff --git a/src/pages/question.tsx b/src/pages/question.tsx index 3d00228..d86165c 100644 --- a/src/pages/question.tsx +++ b/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( - 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 ( -
+ return ( +
+
+ handleProgressbarBackButton(currentPage)} + isBackButton={currentPage > 1} + /> +
+
+ +

{`Q. ${ + currentPage < 10 ? '0' + currentPage : currentPage + }`}

+
+
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} /> - -
- ); - - return ( - isSuccess && ( -
-
- handleProgressbarBackButton(currentPage)} - isBackButton={currentPage > 1} - /> +

+ {data[currentPage - 1].content.replace('000', nickname)} +

+
+ {data[currentPage - 1].answers.map(({ content, id }, index) => ( + + ))}
-
- -

{`Q. ${ - currentPage < 10 ? '0' + currentPage : currentPage - }`}

-
- {questionData?.data.test.questions[currentPage - 1] !== undefined && ( -
- image that explain Question -

- {questionData?.data.test.questions[ - currentPage - 1 - ].content.replace('000', localStorage.getItem('nickname') || '')} -

-
- {questionData?.data.test.questions[currentPage - 1].answers.map( - ({ content, id }, index) => ( - - ), - )} -
- -
- )} -
- ) + + +
); } diff --git a/src/types/getUserQuestion.ts b/src/types/getUserQuestion.ts index f079a67..01b7780 100644 --- a/src/types/getUserQuestion.ts +++ b/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[]; +// }[]; +// }; +// }; +// }