Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/shared/model/footerActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export const deleteActions = (fetchExpoList: () => Promise<void>) => ({
}
},
});

export const routeActions = (
router: ReturnType<typeof useRouter>,
navigation: string,
Expand Down
7 changes: 0 additions & 7 deletions src/shared/types/SignUp/type.ts

This file was deleted.

16 changes: 16 additions & 0 deletions src/shared/types/admin/type.ts
Original file line number Diff line number Diff line change
@@ -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;
}
File renamed without changes.
12 changes: 12 additions & 0 deletions src/widgets/admin/api/getAdminData.ts
Original file line number Diff line number Diff line change
@@ -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;
};
15 changes: 15 additions & 0 deletions src/widgets/admin/model/category.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const expoListCategories = [
'번호',
'박람회이름',
'박람회 설명',
'모집 시작 날짜',
'모집 종료 날짜',
];

export const requestSignUpCategories = [
'번호',
'성명',
'아이디',
'이메일',
'연락처',
];
19 changes: 19 additions & 0 deletions src/widgets/admin/model/useAdminData.ts
Original file line number Diff line number Diff line change
@@ -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 };
};
120 changes: 48 additions & 72 deletions src/widgets/admin/ui/AdminPageWrapper/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/widgets/main/api/getExpoList.ts
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/main/model/useExpoList.ts
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down
Loading