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 ? (
-
+
) : (
)}
{mainMessage === 'main' ? (
-
+
) : (
)}
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 && (
-
-
-
- {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[];
+// }[];
+// };
+// };
+// }