[#47] Feat CheckSignUpPage

- ChackASignUp useQuery 생성 및 연동

src/apis/api.ts

@@ -19,7 +19,7 @@ const api = axios.create({
 });
 
 function getBaseUrl() {
-  return "https://www.developorderservice.store/";
+  return "http://www.developorderservice.store/";
 }
 
 api.interceptors.request.use(applyDefaultParams);

src/apis/controller/adminSignUp.api.ts

@@ -9,4 +9,8 @@ export const AdminSignUpAPI = {
     const response = await sendApi.get(`/orders/${id}`);
     return response.data;
   },
+  checkSignUp: async (id: number) => {
+    const response = await sendApi.put(`/orders/${id}/checked`);
+    return response.data;
+  },
 };

src/apis/sendApi.ts

@@ -84,7 +84,7 @@ export default {
           headers: {},
         });
   },
-  put: async (url: string, params: any) => {
+  put: async (url: string, params?: any) => {
     const token = await tokenService.getToken();
 
     return params !== undefined

src/components/adminPage/AdminDetailPage.tsx

@@ -8,8 +8,9 @@ import Router from "next/router";
 import { useQueryGetSignUpDetail } from "../../hooks/query/adminSignUp/useQueryGetSignUpDetail";
 import { ButtonForCheckOrDelete } from "./components/ButtonForCheckOrDelete";
 
-export const AdminDetailPage = (props: { isNew: boolean }) => {
+export const AdminDetailPage = () => {
   const { id } = Router.query;
+  const isNew = Router.query.isNew === "true";
   const { isLoading, data } = useQueryGetSignUpDetail(Number(id));
   return (
     <Wrapper>
@@ -40,7 +41,7 @@ export const AdminDetailPage = (props: { isNew: boolean }) => {
           isLoading={isLoading}
         />
       </WrapperInner>
-      {props.isNew && <ButtonForCheckOrDelete />}
+      {isNew && <ButtonForCheckOrDelete id={id} />}
     </Wrapper>
   );
 };

src/components/adminPage/SignUpAddInfo.tsx

@@ -148,7 +148,7 @@ const BoxItemContent = styled.div`
 `;
 const FileButton = styled.button`
   display: block;
-  width: calc(100vw - 402px);
+  width: calc(100vw - 420px);
   font-size: 14px;
   color: ${customColor.white};
   letter-spacing: -1px;

src/components/adminPage/components/ButtonForCheckOrDelete.tsx

@@ -1,11 +1,17 @@
 import styled from "styled-components";
+import { useMutationPutCheckSignUp } from "../../../hooks/query/adminSignUp/useMutationPutCheckSignUp";
 import { customColor } from "../../customColor";
 
-export const ButtonForCheckOrDelete = () => {
+export const ButtonForCheckOrDelete = (props: {
+  id: string | string[] | undefined;
+}) => {
+  const mutationCheckSignUp = useMutationPutCheckSignUp(Number(props.id));
   return (
     <Wrapper>
       <DeleteButton>신청취소</DeleteButton>
-      <CheckButton>신청접수</CheckButton>
+      <CheckButton onClick={() => mutationCheckSignUp.mutate()}>
+        신청접수
+      </CheckButton>
     </Wrapper>
   );
 };
@@ -20,25 +26,23 @@ const Wrapper = styled.div`
 
 const DeleteButton = styled.button`
   display: flex;
-  min-width: 280px;
-  height: 80px;
+  min-width: 240px;
+  height: 68px;
   background: ${customColor.red + "66"};
   align-items: center;
   justify-content: center;
   font-size: 16px;
   color: ${customColor.lightGray};
   border-radius: 2px;
-  font-weight: bold;
 `;
 const CheckButton = styled.button`
   display: flex;
-  min-width: 280px;
-  height: 80px;
-  background: ${customColor.blue + "99"};
+  min-width: 240px;
+  height: 68px;
+  background: ${customColor.blue + "77"};
   align-items: center;
   justify-content: center;
   font-size: 16px;
-  color: ${customColor.black};
+  color: ${customColor.lightGray};
   border-radius: 2px;
-  font-weight: bold;
 `;

src/components/adminPage/components/SignUpItem.tsx

@@ -18,7 +18,10 @@ export interface Props {
 
 export const SignUpItem = ({ data, isNew }: Props) => {
   const handleRouteDetail = (id: number) => {
-    Router.push(`${pathName.CHECK_SIGNUP.DETAIL.replace(":id", String(id))}`);
+    Router.push({
+      pathname: `${pathName.CHECK_SIGNUP.DETAIL.replace(":id", String(id))}`,
+      query: { isNew: isNew },
+    });
   };
 
   return (

src/components/header/AdminHeader.tsx

@@ -15,7 +15,7 @@ export const AdminHeader = () => {
       localStorage.getItem("token") === null ||
       localStorage.getItem("role") === "USER"
     ) {
-      // handleLogout();
+      handleLogout();
     }
   }, []);
 

src/hooks/query/adminSignUp/useMutationPutCheckSignUp.ts

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { useQueryClient, useMutation } from "react-query";
+import { AdminSignUpAPI } from "../../../apis/controller/adminSignUp.api";
+import Router from "next/router";
+
+export const useMutationPutCheckSignUp = (id: number) => {
+  const load = useCallback(async () => {
+    const response = await AdminSignUpAPI.checkSignUp(id);
+    return response;
+  }, [id]);
+  const queryClient = useQueryClient();
+
+  return useMutation("", load, {
+    onSuccess: (data) => {
+      Router.back();
+    },
+    onError: (error: any) => {
+      console.log("useMutationPutCheckSignUp 실패");
+    },
+  });
+};