Merge pull request #54 from School-of-Company/refector/admin-page-api

♻️ 어드민 페이지 api -> tanstack query로 변경

src/shared/model/footerActions.ts

@@ -49,6 +49,7 @@ export const deleteActions = (fetchExpoList: () => Promise<void>) => ({
     }
   },
 });
+
 export const routeActions = (
   router: ReturnType<typeof useRouter>,
   navigation: string,

src/shared/types/admin/type.ts

@@ -0,0 +1,16 @@
+export interface ExpoItem extends Record<string, unknown> {
+  id: number;
+  coverImage: string;
+  title: string;
+  description: string;
+  startedDay: string;
+  finishedDay: string;
+}
+
+export interface SignUpItem extends Record<string, unknown> {
+  id: number;
+  name: string;
+  nickname: string;
+  email: string;
+  phoneNumber: string;
+}

src/widgets/admin/api/getAdminData.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+import { ExpoItem, SignUpItem } from '@/shared/types/admin/type';
+
+export const getExpoList = async (): Promise<ExpoItem[]> => {
+  const response = await axios.get('/api/expo');
+  return response.data;
+};
+
+export const getRequestSignUp = async (): Promise<SignUpItem[]> => {
+  const response = await axios.get('/api/admin');
+  return response.data;
+};

src/widgets/admin/model/category.ts

@@ -0,0 +1,15 @@
+export const expoListCategories = [
+  '번호',
+  '박람회이름',
+  '박람회 설명',
+  '모집 시작 날짜',
+  '모집 종료 날짜',
+];
+
+export const requestSignUpCategories = [
+  '번호',
+  '성명',
+  '아이디',
+  '이메일',
+  '연락처',
+];

src/widgets/admin/model/useAdminData.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { ExpoItem, SignUpItem } from '@/shared/types/admin/type';
+import { getExpoList, getRequestSignUp } from '../api/getAdminData';
+
+export const useAdminData = () => {
+  const expoListData = useQuery<ExpoItem[], Error>({
+    queryKey: ['expoList'],
+    queryFn: getExpoList,
+  });
+
+  const requestSignUpData = useQuery<SignUpItem[], Error>({
+    queryKey: ['requestSignUp'],
+    queryFn: getRequestSignUp,
+  });
+
+  const isLoading = expoListData.isLoading || requestSignUpData.isLoading;
+
+  return { expoListData, requestSignUpData, isLoading };
+};

src/widgets/admin/ui/AdminPageWrapper/index.tsx

@@ -1,84 +1,60 @@
 'use client';
 
-import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import withLoading from '@/shared/hocs/withLoading';
 import { checkActions, deleteActions } from '@/shared/model/footerActions';
-import { SignUpItem } from '@/shared/types/\bSignUp/type';
-import { ExpoItem } from '@/shared/types/Expo/type';
 import { TableForm } from '@/shared/ui/Table';
+import {
+  expoListCategories,
+  requestSignUpCategories,
+} from '../../model/category';
+import { useAdminData } from '../../model/useAdminData';
 
 const AdminPageWrapper = () => {
-  const [expoList, setExpoList] = useState<ExpoItem[]>([]);
-  const [requestSignUp, setRequestSignUp] = useState<SignUpItem[]>([]);
-
-  const fetchExpoList = async () => {
-    const response = await axios.get('/api/expo');
-    setExpoList(
-      response.data.map(
-        ({ coverImage: _coverImage, ...rest }: ExpoItem) => rest,
-      ),
-    );
-  };
-
-  const fetchRequestSignUp = async () => {
-    const response = await axios.get('/api/admin');
-    setRequestSignUp(response.data);
-  };
-
-  useEffect(() => {
-    fetchExpoList();
-    fetchRequestSignUp();
-  }, []);
-
-  const expoListCategories = [
-    '번호',
-    '박람회이름',
-    '박람회 설명',
-    '모집 시작 날짜',
-    '모집 종료 날짜',
-  ];
-
-  const requestSignUpCategories = [
-    '번호',
-    '성명',
-    '아이디',
-    '이메일',
-    '연락처',
-  ];
-
-  const checkSignupActions = checkActions(fetchRequestSignUp);
-  const deleteExpoActions = deleteActions(fetchExpoList);
-
-  return (
-    <div className="space-y-[73px]">
-      <div className="space-y-[26px]">
-        <p className="text-h2 text-black">회원가입 요청</p>
-        <div className="h-auto">
-          <TableForm
-            categories={requestSignUpCategories}
-            data={requestSignUp}
-            maxHeight="270px"
-            footerType="check"
-            text="회원가입 요청"
-            actions={checkSignupActions}
-          />
+  const { expoListData, requestSignUpData, isLoading } = useAdminData();
+
+  const checkSignupActions = checkActions(async () => {
+    await requestSignUpData.refetch();
+  });
+  const deleteExpoActions = deleteActions(async () => {
+    await expoListData.refetch();
+  });
+
+  const expoList = expoListData.data || [];
+  const requestSignUp = requestSignUpData.data || [];
+
+  return withLoading({
+    isLoading,
+    children: (
+      <div className="space-y-[73px]">
+        <div className="space-y-[26px]">
+          <p className="text-h2 text-black">회원가입 요청</p>
+          <div className="h-auto">
+            <TableForm
+              categories={requestSignUpCategories}
+              data={requestSignUp}
+              maxHeight="270px"
+              footerType="check"
+              text="회원가입 요청"
+              actions={checkSignupActions}
+            />
+          </div>
         </div>
-      </div>
-      <div className="space-y-[26px]">
-        <p className="text-h2 text-black">등록된 박람회</p>
-        <div className="h-auto">
-          <TableForm
-            categories={expoListCategories}
-            data={expoList}
-            maxHeight="414px"
-            footerType="delete"
-            text="등록된 박람회"
-            actions={deleteExpoActions}
-          />
+        <div className="space-y-[26px]">
+          <p className="text-h2 text-black">등록된 박람회</p>
+          <div className="h-auto">
+            <TableForm
+              categories={expoListCategories}
+              data={expoList}
+              maxHeight="414px"
+              footerType="delete"
+              text="등록된 박람회"
+              actions={deleteExpoActions}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    ),
+  });
 };
 
 export default AdminPageWrapper;

src/widgets/main/api/getExpoList.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { ExpoItem } from '@/shared/types/Expo/type';
+import { ExpoItem } from '@/shared/types/main/type';
 
 export const getExpoList = async (): Promise<ExpoItem[]> => {
   const response = await axios.get('/api/expo');

src/widgets/main/model/useExpoList.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { ExpoItem } from '@/shared/types/Expo/type';
+import { ExpoItem } from '@/shared/types/main/type';
 import { getExpoList } from '../api/getExpoList';
 
 export const useExpoList = () => {