From 1db352d5beb199d2adb1612defb1a475c53a7ce5 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Fri, 16 Jun 2023 20:29:18 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor=20:=20SSG=EA=B5=AC=ED=98=84=20&=20?= =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/question.tsx | 154 +++++++++++++++++------------------------ 1 file changed, 62 insertions(+), 92 deletions(-) diff --git a/src/pages/question.tsx b/src/pages/question.tsx index 3d00228..5defd7a 100644 --- a/src/pages/question.tsx +++ b/src/pages/question.tsx @@ -20,53 +20,45 @@ interface QuestionDataType { content: string; id: number; imageUrl: string; + number: number; } -export default function question() { - const { data, isSuccess } = useQuery(['getUserQuestion'], getUserQuestion, { - staleTime: Infinity, - }); +export const getServerSideProps = async () => { + const { data } = await getUserQuestion(); + + return { + props: { + data: data.data.test.questions, + }, + }; +}; + +export default function question({ data }: { data: QuestionDataType[] }) { 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 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, + '규성', + // localStorage.getItem('nickname') as string, ); - 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,52 @@ export default function question() { return router.back(); }; - if (loading) - return ( -
- setImageLoadingComplete(e)} - loading="eager" - priority - className="mb-[2rem] hidden rounded-[1.25rem] px-4" - alt="image that explain Question" - width={450} - height={450} - src={ - questionData?.data.test.questions[currentPage - 1] - .imageUrl as string - } + return ( +
+
+ handleProgressbarBackButton(currentPage)} + isBackButton={currentPage > 1} /> -
- ); - - return ( - isSuccess && ( -
-
- handleProgressbarBackButton(currentPage)} - isBackButton={currentPage > 1} +
+ +

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

+
+ {data[currentPage - 1] !== undefined && ( +
+ image that explain Question -
-
- -

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

+

+ {data[currentPage - 1].content.replace( + '000', + '규성', + // localStorage.getItem('nickname') || '', + )} +

+
+ {data[currentPage - 1].answers.map(({ content, id }, index) => ( + + ))} +
+
- {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) => ( - - ), - )} -
- -
- )} -
- ) + )} +
); } From 55f364caac1bf8c0bdf899bb04e6802e68c77747 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sat, 17 Jun 2023 14:23:52 +0900 Subject: [PATCH 2/6] =?UTF-8?q?refactor=20:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20SSR=EC=97=90=EC=84=9C=20SSG=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/question.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/question.tsx b/src/pages/question.tsx index 5defd7a..8bfda4b 100644 --- a/src/pages/question.tsx +++ b/src/pages/question.tsx @@ -23,7 +23,7 @@ interface QuestionDataType { number: number; } -export const getServerSideProps = async () => { +export const getStaticProps = async () => { const { data } = await getUserQuestion(); return { @@ -44,6 +44,9 @@ export default function question({ data }: { data: QuestionDataType[] }) { const MAX_PAGE = 12; const setUserRecommendation = useSetRecoilState(UserRecommendation); + // const nickname = '규성'; + const nickname = localStorage.getItem('nickname') || ''; + const handleClickQuestion = (clickedIndex: number) => { setIsButtonClicked(true); if (currentPage === MAX_PAGE) { @@ -53,8 +56,7 @@ export default function question({ data }: { data: QuestionDataType[] }) { ...questionArray, { questionNumber: currentPage, answerNumber: clickedIndex + 1 }, ], - '규성', - // localStorage.getItem('nickname') as string, + nickname, ); const userId = resData.data.data.recommendation.id; setUserRecommendation(userId); @@ -103,11 +105,7 @@ export default function question({ data }: { data: QuestionDataType[] }) { src={data[currentPage - 1].imageUrl} />

- {data[currentPage - 1].content.replace( - '000', - '규성', - // localStorage.getItem('nickname') || '', - )} + {data[currentPage - 1].content.replace('000', nickname)}

{data[currentPage - 1].answers.map(({ content, id }, index) => ( From 0be8e2fe91eb2f17890e64cc40a6692748bc61a7 Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sat, 17 Jun 2023 14:27:45 +0900 Subject: [PATCH 3/6] =?UTF-8?q?refactor=20:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/question.tsx | 24 ++++++++++++------------ src/types/getUserQuestion.ts | 34 ++++++++++++++-------------------- 2 files changed, 26 insertions(+), 32 deletions(-) diff --git a/src/pages/question.tsx b/src/pages/question.tsx index 8bfda4b..b4ded18 100644 --- a/src/pages/question.tsx +++ b/src/pages/question.tsx @@ -1,19 +1,19 @@ 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[]; @@ -25,7 +25,6 @@ interface QuestionDataType { export const getStaticProps = async () => { const { data } = await getUserQuestion(); - return { props: { data: data.data.test.questions, @@ -34,6 +33,7 @@ export const getStaticProps = async () => { }; export default function question({ data }: { data: QuestionDataType[] }) { + console.log(data); const [currentPage, setCurrentPage] = useState(1); const [isButtonClicked, setIsButtonClicked] = useState(false); const [questionArray, setQuestionArray] = useState< @@ -44,8 +44,8 @@ export default function question({ data }: { data: QuestionDataType[] }) { const MAX_PAGE = 12; const setUserRecommendation = useSetRecoilState(UserRecommendation); - // const nickname = '규성'; - const nickname = localStorage.getItem('nickname') || ''; + const nickname = '규성'; + // const nickname = localStorage.getItem('nickname') || ''; const handleClickQuestion = (clickedIndex: number) => { setIsButtonClicked(true); 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[]; +// }[]; +// }; +// }; +// } From 21fac308fdaadced8398439259dcce5058edde3d Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sat, 17 Jun 2023 14:28:11 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=B2=84=ED=8A=BC=20disable=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/question.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/question.tsx b/src/pages/question.tsx index b4ded18..d1dc0e9 100644 --- a/src/pages/question.tsx +++ b/src/pages/question.tsx @@ -35,7 +35,6 @@ export const getStaticProps = async () => { 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 }[] >([]); @@ -48,7 +47,6 @@ export default function question({ data }: { data: QuestionDataType[] }) { // const nickname = localStorage.getItem('nickname') || ''; const handleClickQuestion = (clickedIndex: number) => { - setIsButtonClicked(true); if (currentPage === MAX_PAGE) { const getData = async () => { const resData = await getUserResult( @@ -110,7 +108,6 @@ export default function question({ data }: { data: QuestionDataType[] }) {
{data[currentPage - 1].answers.map(({ content, id }, index) => ( - ))} -
- - - )} +
+ image that explain Question +

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

+
+ {data[currentPage - 1].answers.map(({ content, id }, index) => ( + + ))} +
+ +
); } From cb147ef5cbe149ee03b602c989545a7f8aecf66b Mon Sep 17 00:00:00 2001 From: Kuesung Park Date: Sat, 17 Jun 2023 14:35:08 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor=20:=20back=20->=20next/image?= =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopBar.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) 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 ) : ( )}