Merge pull request #53 from School-of-Company/refector/api

🔀 1차 api 변경 (tanstack query로 변경)

.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:prettier/recommended",
     "prettier",
     "plugin:@next/next/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "ignorePatterns": ["node_modules/**", "**/dist/**", ".next/**"],

package.json

@@ -45,6 +45,7 @@
     "@storybook/nextjs": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/test": "^8.3.5",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/api/expo/route.ts

@@ -19,10 +19,8 @@ export async function GET() {
     return NextResponse.json(response.data);
   } catch (error) {
     const axiosError = error as AxiosError<{ message: string }>;
-
     const status = axiosError.response?.status || 500;
     const message = axiosError.response?.data?.message || 'expoList failed';
-
     return NextResponse.json({ error: message }, { status });
   }
 }

src/shared/hocs/withLoading.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Loading } from '../ui';
+
+type WithLoadingProps = {
+  isLoading: boolean;
+  children: React.ReactNode;
+};
+
+const withLoading = ({ isLoading, children }: WithLoadingProps) => {
+  if (isLoading) return <Loading />;
+  return <>{children}</>;
+};
+
+export default withLoading;

src/shared/libs/TanstackProviders.tsx

@@ -1,7 +1,12 @@
 'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 const TanstackProviders = ({ children }: { children: React.ReactNode }) => {
   const [queryClient] = useState(
@@ -10,8 +15,16 @@ const TanstackProviders = ({ children }: { children: React.ReactNode }) => {
         defaultOptions: {
           queries: {
             staleTime: 60 * 1000,
+            gcTime: 60 * 5000,
+            retryDelay: 1500,
+            retry: 5,
           },
         },
+        queryCache: new QueryCache({
+          onError: (error) => {
+            toast.error(`Query failed: ${(error as Error).message}`);
+          },
+        }),
       }),
   );
 

src/shared/types/expo-detail/type.ts

@@ -0,0 +1,28 @@
+export interface ExpoDetail {
+  title: string;
+  description: string;
+  startedDay: string;
+  finishedDay: string;
+  location: string;
+  coverImage: string;
+  x: number;
+  y: number;
+}
+
+export interface ExpoTrainingDetail {
+  title: string;
+  startedAt: string;
+  endedAt: string;
+  category: 'ESSENTIAL' | 'CHOICE';
+}
+
+export interface ExpoTraining {
+  essential: ExpoTrainingDetail[];
+  choice: ExpoTrainingDetail[];
+}
+
+export interface ExpoStandard {
+  title: string;
+  startedAt: string;
+  endedAt: string;
+}

src/shared/ui/index.tsx

@@ -3,3 +3,4 @@ export { default as Input } from './Input';
 export { default as Modal } from './Modal';
 export { default as PageHeader } from './PageHeader';
 export { default as CheckBox } from './CheckBox';
+export { default as Loading } from './Loading';

src/widgets/expo-detail/api/getExpoDetail.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import {
+  ExpoDetail,
+  ExpoStandard,
+  ExpoTrainingDetail,
+} from '@/shared/types/expo-detail/type';
+
+export const getExpoDetail = async (id: number): Promise<ExpoDetail> => {
+  const response = await axios.get(`/api/expo/${id}`);
+  return response.data;
+};
+
+export const getExpoStandard = async (id: number): Promise<ExpoStandard[]> => {
+  const response = await axios.get(`/api/standard/program/${id}`);
+  return response.data;
+};
+
+export const getExpoTraining = async (
+  id: number,
+): Promise<ExpoTrainingDetail[]> => {
+  const response = await axios.get(`/api/training/program/${id}`);
+  return response.data;
+};

src/widgets/expo-detail/model/useExpoDetail.ts

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  ExpoDetail,
+  ExpoStandard,
+  ExpoTrainingDetail,
+} from '@/shared/types/expo-detail/type';
+import {
+  getExpoDetail,
+  getExpoStandard,
+  getExpoTraining,
+} from '../api/getExpoDetail';
+
+interface ExpoTraining {
+  essential: ExpoTrainingDetail[];
+  choice: ExpoTrainingDetail[];
+}
+
+export const useExpoQueries = (id: number) => {
+  const expoDetailQuery = useQuery<ExpoDetail, Error>({
+    queryKey: ['expoDetail', id],
+    queryFn: () => getExpoDetail(id),
+  });
+
+  const expoStandardQuery = useQuery<ExpoStandard[], Error>({
+    queryKey: ['expoStandard', id],
+    queryFn: () => getExpoStandard(id),
+  });
+
+  const expoTrainingQuery = useQuery<ExpoTrainingDetail[], Error, ExpoTraining>(
+    {
+      queryKey: ['expoTraining', id],
+      queryFn: () => getExpoTraining(id),
+      select: (data) => ({
+        essential: data.filter((item) => item.category === 'ESSENTIAL'),
+        choice: data.filter((item) => item.category === 'CHOICE'),
+      }),
+    },
+  );
+
+  const isLoading =
+    expoDetailQuery.isLoading ||
+    expoStandardQuery.isLoading ||
+    expoTrainingQuery.isLoading;
+
+  return { expoDetailQuery, expoStandardQuery, expoTrainingQuery, isLoading };
+};