wip: opeapi-spec으로 전환중

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",

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<paths>({
+const client = createFetchClient<paths>({
     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);

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,

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<QuizResultHistoryGraphCardProps> = ({ isLogin }) => {
     const [selectedLevel, setSelectedLevel] = useState<QuizTestLevel>('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,

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<MyPageInformationEditModalScreenProps
         isSuccessAuthorization: false,
         request_id: undefined,
     });
-    const userInformationQuery = useQuery({
-        queryKey: [API_GET_USER_PROFILE],
-        queryFn: getUserProfile,
-    });
+    const { data: userData } = $api.useQuery('get', '/users');
+    // const userInformationQuery = useQuery({
+    //     queryKey: [API_GET_USER_PROFILE],
+    //     queryFn: getUserProfile,
+    // });
 
     const toastService = ToastService.getInstance();
     const modalService = ModalService.getInstance();
@@ -153,7 +155,7 @@ const MyPageInformationEditModalScreen: FC<MyPageInformationEditModalScreenProps
             >
                 <p className="text-2xl font-bold">정보수정</p>
                 <section className="mt-5 flex flex-col gap-6">
-                    {userInformationQuery.data?.userType === 'NORMAL' && (
+                    {userData?.userType === 'NORMAL' && (
                         <section className="flex w-full flex-col gap-3">
                             <section>
                                 <p className="text-base font-bold text-gray-400">아이디(이메일)</p>

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<MyPagePasswordEditModalScreenProps> = ()
     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<MyPagePasswordEditForm>({
         defaultValues: {
@@ -68,11 +71,11 @@ const MyPagePasswordEditModalScreen: FC<MyPagePasswordEditModalScreenProps> = ()
                     <section className="flex w-full flex-col gap-3">
                         <section className="flex w-full gap-3">
                             <p className="text-base font-bold text-gray-400">아이디</p>
-                            <span>{userInformation.data?.email}</span>
+                            <span>{userData?.email}</span>
                         </section>
                         <section className="flex gap-3">
                             <p className="text-base font-bold text-gray-400">닉네임</p>
-                            <span>{userInformation.data?.nickname}</span>
+                            <span>{userData?.nickname}</span>
                         </section>
                     </section>
                     <section className="flex w-full flex-col gap-3">

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<MyPageHeaderSectionProps> = ({ 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('/');

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<QuizAnswerExpectationFormProps> = ({ 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<QuizAnswerExpectationFormProps> = ({ 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),

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<QuizResultHeaderTitleProps> = () => {
-    const { data } = useQuery({
-        queryKey: [API_GET_USER_PROFILE],
-        queryFn: () => getUserProfile(),
-    });
+    const { data: userData } = $api.useQuery('get', '/users');
 
     return (
         <section>
             <h1 className="font-sans text-4xl font-bold">
-                {data?.nickname ?? 'ooo'}님의 테스트 결과
+                {userData?.nickname ?? 'ooo'}님의 테스트 결과
             </h1>
             <hr className="mt-4 border-2 border-violet-400" />
         </section>

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<QuizResultScoreCardProps> = () => {
     const queryParams = useSearchParams();
-    const userProfileQuery = useQuery({
-        queryKey: [API_GET_USER_PROFILE],
-        queryFn: () => getUserProfile(),
-    });
 
     const userTestQuery = useQuery({
         queryKey: [API_GET_USER_TEST_DETAIL],