From bba31a5cb22697793e4c0899da0d95196ee50a0b Mon Sep 17 00:00:00 2001 From: minchodang Date: Sun, 6 Oct 2024 22:22:03 +0900 Subject: [PATCH] =?UTF-8?q?wip:=20opeapi-spec=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ src/api/api.ts | 12 +++++++----- src/app/auth/components/AuthPageClient.tsx | 2 +- .../quiz-result/QuizResultHistoryGraphCard.tsx | 10 ++++++---- .../MyPageInformationEditModalScreen.tsx | 12 +++++++----- .../MyPagePasswordEditModalScreen.tsx | 15 +++++++++------ .../my-page/section/MyPageHeaderSection.tsx | 4 ++-- .../QuizAnswerExpectationForm.tsx | 9 ++++----- .../screens/quiz-result/QuizResultHeaderText.tsx | 8 +++----- .../screens/quiz-result/QuizResultScoreCard.tsx | 8 +------- 11 files changed, 55 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index bd00d69..74d3b6e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "next": "14.2.12", "next-intl": "^3.7.0", "openapi-fetch": "^0.12.2", + "openapi-react-query": "^0.2.0", "react": "^18", "react-cookie": "^7.1.4", "react-dom": "^18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 018bec1..872317d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ dependencies: openapi-fetch: specifier: ^0.12.2 version: 0.12.2 + openapi-react-query: + specifier: ^0.2.0 + version: 0.2.0(@tanstack/react-query@5.28.9)(openapi-fetch@0.12.2) react: specifier: ^18 version: 18.2.0 @@ -6204,6 +6207,17 @@ packages: openapi-typescript-helpers: 0.0.13 dev: false + /openapi-react-query@0.2.0(@tanstack/react-query@5.28.9)(openapi-fetch@0.12.2): + resolution: {integrity: sha512-LzkWdoJRtY4InZD5r3vRWwqKx672Q7wIwjhEzYesyBl8VHMYmBG0HW5y29cDtqD9XAHA/lJsCDt17VELdaHvWA==} + peerDependencies: + '@tanstack/react-query': ^5.0.0 + openapi-fetch: ^0.12.2 + dependencies: + '@tanstack/react-query': 5.28.9(react@18.2.0) + openapi-fetch: 0.12.2 + openapi-typescript-helpers: 0.0.13 + dev: false + /openapi-typescript-helpers@0.0.13: resolution: {integrity: sha512-z44WK2e7ygW3aUtAtiurfEACohf/Qt9g6BsejmIYgEoY4REHeRzgFJmO3ium0libsuzPc145I+8lE9aiiZrQvQ==} dev: false diff --git a/src/api/api.ts b/src/api/api.ts index 01ddbdf..52c26f3 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,10 +1,12 @@ import type { paths } from '@src/__generated__/api'; -import createClient from 'openapi-fetch'; +import createFetchClient from 'openapi-fetch'; +import createClient from 'openapi-react-query'; -const client = createClient({ +const client = createFetchClient({ baseUrl: `${process.env.NEXT_PUBLIC_META_TEST_SERVER_HOST_URL}`, + headers: { + authorization:`` + } }); -const { data, response } = await client.GET('/users'); - -console.log(data, 'data'); +export const $api = createClient(client); diff --git a/src/app/auth/components/AuthPageClient.tsx b/src/app/auth/components/AuthPageClient.tsx index 0724944..8f313a0 100644 --- a/src/app/auth/components/AuthPageClient.tsx +++ b/src/app/auth/components/AuthPageClient.tsx @@ -29,7 +29,7 @@ const toastService = ToastService.getInstance(); const processSocialLogin = async ({ code, socialType, loginPath }: SocialLoginRequestParameter) => { try { const { data } = await axios.post( - `${process.env.NEXT_PUBLIC_MATE_TEST_WEB_HOST_URL}/api/social-login`, + `${process.env.NEXT_PUBLIC_META_TEST_WEB_HOST_URL}/api/social-login`, { code, socialType, diff --git a/src/components/common/quiz-result/QuizResultHistoryGraphCard.tsx b/src/components/common/quiz-result/QuizResultHistoryGraphCard.tsx index 0bc2b9b..e4d0e77 100644 --- a/src/components/common/quiz-result/QuizResultHistoryGraphCard.tsx +++ b/src/components/common/quiz-result/QuizResultHistoryGraphCard.tsx @@ -9,6 +9,7 @@ import { QuizTestLevel } from '@src/types/api/test'; import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { FC, useState } from 'react'; import { QuizResultBarChart } from './QuizResultBarChart'; +import { $api } from '@src/api/api'; interface QuizResultHistoryGraphCardProps { isLogin: boolean; @@ -37,10 +38,11 @@ function isValidTestLevelType(value: unknown): value is QuizTestLevel { const QuizResultHistoryGraphCard: FC = ({ isLogin }) => { const [selectedLevel, setSelectedLevel] = useState('all'); - const { data: userData } = useQuery({ - queryKey: [API_GET_USER_PROFILE], - queryFn: () => getUserProfile(), - }); + // const { data: userData } = useQuery({ + // queryKey: [API_GET_USER_PROFILE], + // queryFn: () => getUserProfile(), + // }); + const { data: userData } = $api.useQuery('get', '/users'); const { data: chartData, hasNextPage, diff --git a/src/components/screens/my-page/components/MyPageInformationEdit/MyPageInformationEditModalScreen.tsx b/src/components/screens/my-page/components/MyPageInformationEdit/MyPageInformationEditModalScreen.tsx index c572186..4e080af 100644 --- a/src/components/screens/my-page/components/MyPageInformationEdit/MyPageInformationEditModalScreen.tsx +++ b/src/components/screens/my-page/components/MyPageInformationEdit/MyPageInformationEditModalScreen.tsx @@ -12,6 +12,7 @@ import { isAxiosError } from 'axios'; import { FormProvider, useForm } from 'react-hook-form'; import MyPageInformationEditEmailInput from './MyPageInformationEditEmailInput'; import MyPageInformationEditSubmitButton from './MyPageInformationEditSubmitButton'; +import { $api } from '@src/api/api'; interface MyPageInformationEditModalScreenProps {} @@ -34,10 +35,11 @@ const MyPageInformationEditModalScreen: FC

정보수정

- {userInformationQuery.data?.userType === 'NORMAL' && ( + {userData?.userType === 'NORMAL' && (

아이디(이메일)

diff --git a/src/components/screens/my-page/components/MyPagePasswordEdit/MyPagePasswordEditModalScreen.tsx b/src/components/screens/my-page/components/MyPagePasswordEdit/MyPagePasswordEditModalScreen.tsx index aa6aaa9..272a8a3 100644 --- a/src/components/screens/my-page/components/MyPagePasswordEdit/MyPagePasswordEditModalScreen.tsx +++ b/src/components/screens/my-page/components/MyPagePasswordEdit/MyPagePasswordEditModalScreen.tsx @@ -11,6 +11,7 @@ import { FormProvider, useForm } from 'react-hook-form'; import MyPagePasswordEditNewPasswordConfirmInput from './MyPagePasswordEditNewPasswordConfirmInput'; import MyPagePasswordEditNewPasswordInput from './MyPagePasswordEditNewPasswordInput'; import MyPagePasswordEditSubmitButton from './MyPagePasswordEditSubmitButton'; +import { $api } from '@src/api/api'; interface MyPagePasswordEditModalScreenProps {} @@ -27,10 +28,12 @@ const MyPagePasswordEditModalScreen: FC = () const updatePassword = useMutation({ mutationFn: patchUsers, }); - const userInformation = useQuery({ - queryKey: [API_GET_USER_PROFILE], - queryFn: getUserProfile, - }); + // const userData?Query({ + // queryKey: [API_GET_USER_PROFILE], + // queryFn: getUserProfile, + // }); + + const { data: userData } = $api.useQuery('get', '/users'); const form = useForm({ defaultValues: { @@ -68,11 +71,11 @@ const MyPagePasswordEditModalScreen: FC = ()

아이디

- {userInformation.data?.email} + {userData?.email}

닉네임

- {userInformation.data?.nickname} + {userData?.nickname}
diff --git a/src/components/screens/my-page/section/MyPageHeaderSection.tsx b/src/components/screens/my-page/section/MyPageHeaderSection.tsx index 29d7e87..ddace1b 100644 --- a/src/components/screens/my-page/section/MyPageHeaderSection.tsx +++ b/src/components/screens/my-page/section/MyPageHeaderSection.tsx @@ -1,7 +1,6 @@ 'use client'; import { FC } from 'react'; -import { API_GET_USER_PROFILE } from '@src/api/getUserProfile'; import Button from '@src/components/common/Button'; import HomeIcon from '@src/components/common/Icons/HomeIcon'; import { ToastService } from '@src/service/ToastService'; @@ -10,6 +9,7 @@ import { useRouter } from 'next/navigation'; import { useCookies } from 'react-cookie'; import axios from 'axios'; import { renewAllCache } from '@src/app/actions/renewAllCache'; +import { $api } from '@src/api/api'; interface MyPageHeaderSectionProps { isLogin: boolean; @@ -26,7 +26,7 @@ const MyPageHeaderSection: FC = ({ isLogin }) => { await axios.delete(`${process.env.NEXT_PUBLIC_META_TEST_WEB_HOST_URL}/api/auth`); await renewAllCache(); await queryClient.removeQueries({ - queryKey: [API_GET_USER_PROFILE], + queryKey: $api.queryOptions('get', '/users').queryKey, }); await toastService.addToast('로그아웃 되었습니다.'); replace('/'); diff --git a/src/components/screens/quiz-answer/QuizAnswerExpectation/QuizAnswerExpectationForm.tsx b/src/components/screens/quiz-answer/QuizAnswerExpectation/QuizAnswerExpectationForm.tsx index 1914842..4fe6f29 100644 --- a/src/components/screens/quiz-answer/QuizAnswerExpectation/QuizAnswerExpectationForm.tsx +++ b/src/components/screens/quiz-answer/QuizAnswerExpectation/QuizAnswerExpectationForm.tsx @@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation'; import { FormProvider, useForm } from 'react-hook-form'; import QuizAnswerExpectationInput from './QuizAnswerExpectationInput'; import QuizAnswerExpectationSubmitButton from './QuizAnswerExpectationSubmitButton'; +import { $api } from '@src/api/api'; interface QuizAnswerExpectationFormProps { answers: string[]; @@ -32,10 +33,8 @@ const getQuizLevel = (array: string[]) => { const QuizAnswerExpectationForm: FC = ({ answers }) => { const { replace } = useRouter(); - const { data: userProfile } = useQuery({ - queryKey: [API_GET_USER_PROFILE], - queryFn: () => getUserProfile(), - }); + const { data: userData } = $api.useQuery('get', '/users'); + const modalService = ModalService.getInstance(); const quizService = QuizListService.getInstance(); const testSubmit = useMutation({ @@ -56,7 +55,7 @@ const QuizAnswerExpectationForm: FC = ({ answers const onValid = ({ expectationNumber }: QuizAnswerExpectationPopupFormValue) => { testSubmit.mutate( { - id: userProfile?.id, + id: userData?.id, level: getQuizLevel(quizService.getQuizList().flatMap((quiz) => quiz.word)), total_count: quizService.getQuizList().length, expected_count: Number(expectationNumber), diff --git a/src/components/screens/quiz-result/QuizResultHeaderText.tsx b/src/components/screens/quiz-result/QuizResultHeaderText.tsx index 52ef5fa..8f0082b 100644 --- a/src/components/screens/quiz-result/QuizResultHeaderText.tsx +++ b/src/components/screens/quiz-result/QuizResultHeaderText.tsx @@ -3,19 +3,17 @@ import { FC } from 'react'; import { API_GET_USER_PROFILE, getUserProfile } from '@src/api/getUserProfile'; import { useQuery } from '@tanstack/react-query'; +import { $api } from '@src/api/api'; interface QuizResultHeaderTitleProps {} const QuizResultHeaderTitle: FC = () => { - const { data } = useQuery({ - queryKey: [API_GET_USER_PROFILE], - queryFn: () => getUserProfile(), - }); + const { data: userData } = $api.useQuery('get', '/users'); return (

- {data?.nickname ?? 'ooo'}님의 테스트 결과 + {userData?.nickname ?? 'ooo'}님의 테스트 결과

diff --git a/src/components/screens/quiz-result/QuizResultScoreCard.tsx b/src/components/screens/quiz-result/QuizResultScoreCard.tsx index a4143e4..bfe7277 100644 --- a/src/components/screens/quiz-result/QuizResultScoreCard.tsx +++ b/src/components/screens/quiz-result/QuizResultScoreCard.tsx @@ -1,12 +1,10 @@ 'use client'; -import { randomUUID } from 'crypto'; -import { FC } from 'react'; -import { API_GET_USER_PROFILE, getUserProfile } from '@src/api/getUserProfile'; import { API_GET_USER_TEST_DETAIL, getUserTestDetail } from '@src/api/getUserTestDetail'; import StarIcon from '@src/components/common/Icons/StarIcon'; import { useQuery } from '@tanstack/react-query'; import { useSearchParams } from 'next/navigation'; +import { FC } from 'react'; interface QuizResultScoreCardProps {} @@ -51,10 +49,6 @@ const calculateFillRatio = ({ totalScore, maxScore, index }: StarIconFillRatioPr const QuizResultScoreCard: FC = () => { const queryParams = useSearchParams(); - const userProfileQuery = useQuery({ - queryKey: [API_GET_USER_PROFILE], - queryFn: () => getUserProfile(), - }); const userTestQuery = useQuery({ queryKey: [API_GET_USER_TEST_DETAIL],