Merge pull request #177 from GDSC-DGU/refactor/#176

[Refactor] Notice, Admin 관련 API 코드 리팩토링

Author: dewbeeny

src/App.tsx

@@ -8,6 +8,7 @@ import { isInAppBrowser } from "./utils/isInApp";
 import dayjs from "dayjs";
 import "@/utils/dayjs";
 import { Wrapper } from "@googlemaps/react-wrapper";
+import GlobalLoading from "./components/common/GlobalLoading";
 
 export default function App() {
   const inApp = isInAppBrowser();
@@ -23,6 +24,7 @@ export default function App() {
           <>
             <GlobalFCMListener />
             <RouterProvider router={router} />
+            <GlobalLoading />
           </>
         )}
       </ThemeProvider>

src/api/admin/admin.ts

@@ -1,7 +1,5 @@
-import { useAuthStore } from "@/stores/useAuthStore";
 import { sendRequest } from "../request";
 import { adminInstance } from "../instance";
-import { Role } from "@/pages/admin/types/role";
 
 interface LoginResponse {
   accessToken: string;
@@ -13,20 +11,6 @@ interface LoginPayload {
   role: string;
 }
 
-export const loginAPI = async (payload: LoginPayload) => {
-  const response = await sendRequest<LoginResponse>(
-    adminInstance,
-    "POST",
-    "/login",
-    payload
-  );
-
-  if (response.success) {
-    useAuthStore
-      .getState()
-      .login(response.data.accessToken, payload.role as Role);
-    return response;
-  } else {
-    return response;
-  }
+export const adminLoginAPI = (payload: LoginPayload) => {
+  return sendRequest<LoginResponse>(adminInstance, "POST", "/login", payload);
 };

src/api/admin/hooks/useLogin.ts

@@ -0,0 +1,23 @@
+import { useMutation } from "@tanstack/react-query";
+import { adminLoginAPI } from "../admin";
+import { useAuthStore } from "@/stores/useAuthStore";
+import type { Role } from "@/pages/admin/types/role";
+
+interface LoginPayload {
+  loginId: string;
+  password: string;
+  role: string;
+}
+
+export const useAdminLogin = () => {
+  const login = useAuthStore((state) => state.login);
+
+  return useMutation({
+    mutationFn: (payload: LoginPayload) => adminLoginAPI(payload),
+    onSuccess: (response, variables) => {
+      if (response.success) {
+        login(response.data.accessToken, variables.role as Role);
+      }
+    },
+  });
+};

src/api/notice/adminLost.ts

@@ -0,0 +1,16 @@
+import { sendRequest } from "@/api/request";
+import { adminInstance } from "@/api/instance";
+
+export const LostPostAPI = async (formData: FormData) => {
+  return sendRequest<string>(adminInstance, "POST", `/festa/losts`, formData);
+};
+
+export const LostPatchAPI = async (formData: FormData) => {
+  return sendRequest<string>(adminInstance, "PATCH", `/festa/losts`, formData, {
+    "Content-Type": "multipart/form-data",
+  });
+};
+
+export const LostDeleteAPI = async (lostId: number) => {
+  return sendRequest<string>(adminInstance, "DELETE", `/festa/losts/${lostId}`);
+};

src/api/notice/adminNotice.ts

@@ -0,0 +1,26 @@
+import { sendRequest } from "@/api/request";
+import { adminInstance } from "@/api/instance";
+
+export const NoticePostAPI = async (formData: FormData) => {
+  return sendRequest<string>(adminInstance, "POST", `/festa/notices`, formData);
+};
+
+export const NoticePatchAPI = async (formData: FormData) => {
+  return sendRequest<string>(
+    adminInstance,
+    "PATCH",
+    `/festa/notices`,
+    formData,
+    {
+      "Content-Type": "multipart/form-data",
+    }
+  );
+};
+
+export const NoticeDeleteAPI = async (noticeId: number) => {
+  return sendRequest<string>(
+    adminInstance,
+    "DELETE",
+    `/festa/notices/${noticeId}`
+  );
+};

src/api/notice/hooks/useLost.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { LostListAPI, LostDetailAPI } from "../lost";
+import { withDelayedGlobalLoading } from "@/utils/delayedGlobalLoading";
+
+export const useLostList = () => {
+  const query = useQuery({
+    queryKey: ["lostList"],
+    queryFn: () => withDelayedGlobalLoading(LostListAPI()),
+    refetchInterval: 10000,
+    refetchOnWindowFocus: true,
+    staleTime: 0,
+  });
+
+  return query;
+};
+
+export const useLostDetail = (id: number) => {
+  const query = useQuery({
+    queryKey: ["lostDetail", id],
+    queryFn: () => withDelayedGlobalLoading(LostDetailAPI(id)),
+    enabled: !!id,
+    refetchOnWindowFocus: true,
+    staleTime: 10000,
+  });
+
+  return query;
+};

src/api/notice/hooks/useLostAdmin.ts

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { LostPostAPI, LostDeleteAPI, LostPatchAPI } from "../adminLost";
+import { withDelayedGlobalLoading } from "@/utils/delayedGlobalLoading";
+
+export const usePostLost = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (formData: FormData) =>
+      withDelayedGlobalLoading(LostPostAPI(formData)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["lostList"],
+      });
+    },
+  });
+};
+
+export const usePatchLost = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (formData: FormData) =>
+      withDelayedGlobalLoading(LostPatchAPI(formData)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["lostList"] });
+    },
+  });
+};
+
+export const useDeleteLost = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (noticeId: number) =>
+      withDelayedGlobalLoading(LostDeleteAPI(noticeId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["lostList"] });
+    },
+  });
+};

src/api/notice/hooks/useNotice.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { NoticeDetailAPI, NoticeListAPI } from "../notice";
+import { withDelayedGlobalLoading } from "@/utils/delayedGlobalLoading";
+
+export const useNoticeList = () => {
+  const query = useQuery({
+    queryKey: ["noticeList"],
+    queryFn: () => withDelayedGlobalLoading(NoticeListAPI()),
+    refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 5,
+  });
+
+  return query;
+};
+
+export const useNoticeDetail = (id: number) => {
+  const query = useQuery({
+    queryKey: ["noticeDetail", id],
+    queryFn: () => withDelayedGlobalLoading(NoticeDetailAPI(id)),
+    enabled: !!id,
+    refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 5,
+  });
+
+  return query;
+};

src/api/notice/hooks/useNoticeAdmin.ts

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { NoticePostAPI, NoticePatchAPI, NoticeDeleteAPI } from "../adminNotice";
+import { withDelayedGlobalLoading } from "@/utils/delayedGlobalLoading";
+
+export const usePostNotice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (formData: FormData) =>
+      withDelayedGlobalLoading(NoticePostAPI(formData)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["noticeList"],
+      });
+    },
+  });
+};
+
+export const usePatchNotice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (formData: FormData) =>
+      withDelayedGlobalLoading(NoticePatchAPI(formData)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["noticeList"] });
+    },
+  });
+};
+
+export const useDeleteNotice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (noticeId: number) =>
+      withDelayedGlobalLoading(NoticeDeleteAPI(noticeId)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["noticeList"] });
+    },
+  });
+};

src/api/notice/lost.ts

@@ -1,7 +1,6 @@
 import { sendRequest } from "../request";
-import { lambdaInstance, adminInstance } from "../instance";
+import { lambdaInstance } from "../instance";
 import type { LostItemType } from "@/pages/notice/types/lostItems";
-import { useLostStore } from "@/stores/useLostStore";
 import type { LostDetailType } from "@/pages/lost-detail/types/lostDetails";
 
 interface LostListResponse {
@@ -10,79 +9,9 @@ interface LostListResponse {
 }
 
 export const LostListAPI = async () => {
-  const response = await sendRequest<LostListResponse>(
-    lambdaInstance,
-    "GET",
-    "/losts"
-  );
-
-  if (response.success) {
-    useLostStore.getState().setLostList(response.data.item_lists);
-    return response.data;
-  } else {
-    return response.error;
-  }
+  return sendRequest<LostListResponse>(lambdaInstance, "GET", "/losts");
 };
 
 export const LostDetailAPI = async (lostId: number) => {
-  const response = await sendRequest<LostDetailType>(
-    lambdaInstance,
-    "GET",
-    `/losts/${lostId}`
-  );
-
-  if (response.success) {
-    useLostStore.getState().setLostDetail(response.data);
-    return response.data;
-  } else {
-    return response.error;
-  }
-};
-
-export const LostPostAPI = async (formData: FormData) => {
-  const response = await sendRequest<string>(
-    adminInstance,
-    "POST",
-    `/festa/losts`,
-    formData
-  );
-
-  if (response.success) {
-    await LostListAPI();
-    return { success: true };
-  } else {
-    return { success: false };
-  }
-};
-
-export const LostPatchAPI = async (formData: FormData) => {
-  const response = await sendRequest<string>(
-    adminInstance,
-    "PATCH",
-    `/festa/losts`,
-    formData,
-    { "Content-Type": "multipart/form-data" }
-  );
-
-  if (response.success) {
-    await LostListAPI();
-    return { success: true };
-  } else {
-    return { success: false };
-  }
-};
-
-export const LostDeleteAPI = async (lostId: number) => {
-  const response = await sendRequest<string>(
-    adminInstance,
-    "DELETE",
-    `/festa/losts/${lostId}`
-  );
-
-  if (response.data) {
-    const newList = await LostListAPI();
-    return { success: true, newList };
-  } else {
-    return { success: false };
-  }
+  return sendRequest<LostDetailType>(lambdaInstance, "GET", `/losts/${lostId}`);
 };