feat:구매/참가자 승인 api 구현

Author: HSCHEOL

src/features/dashboard/api/participants.ts

@@ -6,3 +6,13 @@ export const getParticipants = async ({ eventId = 1, tags = 'all', page = 0, siz
   const response = await axiosClient.get('/host-channels/dashboard/participant-management', { params });
   return response.data.result;
 };
+
+export const approveParticipants = async ({ orderId }: { orderId: number }) => {
+  try {
+    const response = await axiosClient.post('/host-channels/dashboard/participant-management/approve', { orderId });
+
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};

src/features/dashboard/hook/useParticipants.ts

@@ -1,6 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { getParticipants } from '../../../features/dashboard/api/participants';
 import { useParams } from 'react-router-dom';
+import { ApiResponse } from '../../../shared/types/api/apiResponse';
+import { AxiosError } from 'axios';
+import { approveParticipants } from '../../../features/dashboard/api/participants';
+import { useParticipantStore } from '../model/ParticipantStore';
 
 export const useParticipants = (tags = 'all', page = 0, size = 10) => {
   const { id } = useParams();
@@ -21,3 +25,14 @@ export const useParticipants = (tags = 'all', page = 0, size = 10) => {
     error,
   };
 };
+
+export const useApproveParticipants = (orderId: number) => {
+  const { toggleApproveParticipant } = useParticipantStore();
+
+  return useMutation<ApiResponse<string>, AxiosError, { orderId: number }>({
+    mutationFn: () => approveParticipants({ orderId }),
+    onSuccess: () => {
+      toggleApproveParticipant(orderId);
+    },
+  });
+};

src/features/dashboard/ui/ParicipantCard.tsx

@@ -4,6 +4,7 @@ import { useParticipantStore } from '../model/ParticipantStore';
 import { participantsData } from '../../../shared/types/participantInfoType';
 import SecondaryButton from '../../../../design-system/ui/buttons/SecondaryButton';
 import { useNavigate } from 'react-router-dom';
+import { useApproveParticipants } from '../hook/useParticipants';
 
 interface ParticipantCardProps {
   participant: participantsData;
@@ -12,9 +13,11 @@ interface ParticipantCardProps {
 }
 
 const ParticipantCard = ({ participant, checked, onChange }: ParticipantCardProps) => {
-  const { approvedParticipants, toggleApproveParticipant } = useParticipantStore();
+  const { approvedParticipants } = useParticipantStore();
   const navigate = useNavigate();
 
+  const { mutate: approveParticipant } = useApproveParticipants(participant.orderNumber);
+
   return (
     <div className="flex items-center justify-between w-full text-xs bg-white px-2 md:px-3 py-2 shadow-sm">
       <div className="flex gap-2 md:gap-3">
@@ -56,7 +59,7 @@ const ParticipantCard = ({ participant, checked, onChange }: ParticipantCardProp
             type="button"
             size="small"
             color="pink"
-            onClick={() => toggleApproveParticipant(participant.orderNumber)}
+            onClick={() => approveParticipant({ orderId: participant.orderNumber })}
           />
         )}
       </div>