[feature] 여러명의 지원상태를 변경할 수 있다.

frontend/src/apis/application/updateApplicantDetail.ts

@@ -1,25 +1,20 @@
 import API_BASE_URL from '@/constants/api';
 import { secureFetch } from '@/apis/auth/secureFetch';
-import { ApplicationStatus } from '@/types/applicants';
+import { UpdateApplicantParams } from '@/types/applicants';
 
 export const updateApplicantDetail = async (
-  memo: string,
-  status: ApplicationStatus,
+  applicant: UpdateApplicantParams[],
   clubId: string,
-  applicantId: string,
 ) => {
   try {
     const response = await secureFetch(
-      `${API_BASE_URL}/api/club/${clubId}/apply/${applicantId}`,
+      `${API_BASE_URL}/api/club/${clubId}/applicant`,
       {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({
-          memo,
-          status
-        })
+        body: JSON.stringify(applicant),
       },
     );
 

frontend/src/hooks/queries/applicants/useUpdateApplicant.ts

@@ -1,18 +1,18 @@
-import { updateApplicantDetail } from "@/apis/application/updateApplicantDetail";
-import { ApplicationStatus } from "@/types/applicants";
-import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { updateApplicantDetail } from '@/apis/application/updateApplicantDetail';
+import { UpdateApplicantParams } from '@/types/applicants';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-export const useUpdateApplicant = (clubId: string, applicantId: string) => {
+export const useUpdateApplicant = (clubId: string) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({memo, status}: { memo: string, status: ApplicationStatus }) => 
-      updateApplicantDetail(memo, status, clubId, applicantId),
+    mutationFn: (applicant: UpdateApplicantParams[]) =>
+      updateApplicantDetail(applicant, clubId!),
     onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ["clubApplicants"] });
+      queryClient.invalidateQueries({ queryKey: ['clubApplicants'] });
     },
     onError: (error) => {
       console.log(`Error updating applicant detail: ${error}`);
-    }
-  })
-}
+    },
+  });
+};

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.tsx

@@ -38,11 +38,13 @@ const ApplicantDetailPage = () => {
   const { questionId } = useParams<{ questionId: string }>();
   const navigate = useNavigate();
   const [applicantMemo, setAppMemo] = useState('');
-  const [applicantStatus, setApplicantStatus] = useState<ApplicationStatus>(ApplicationStatus.SUBMITTED);
+  const [applicantStatus, setApplicantStatus] = useState<ApplicationStatus>(
+    ApplicationStatus.SUBMITTED,
+  );
   const { applicantsData, clubId } = useAdminClubContext();
 
   const { data: formData, isLoading, isError } = useGetApplication(clubId!);
-  const { mutate: updateApplicant } = useUpdateApplicant(clubId!, questionId!);
+  const { mutate: updateApplicant } = useUpdateApplicant(clubId!);
 
   const applicantIndex =
     applicantsData?.applicants.findIndex((a) => a.id === questionId) ?? -1;
@@ -58,20 +60,23 @@ const ApplicantDetailPage = () => {
   const updateApplicantDetail = useMemo(
     () =>
       debounce((memo, status) => {
-
         function isApplicationStatus(v: unknown): v is ApplicationStatus {
-          return typeof v === 'string' && Object.values(ApplicationStatus).includes(v as ApplicationStatus);
+          return (
+            typeof v === 'string' &&
+            Object.values(ApplicationStatus).includes(v as ApplicationStatus)
+          );
         }
 
         if (typeof memo !== 'string') return;
         if (!isApplicationStatus(status)) return;
 
-        updateApplicant(
+        updateApplicant([
           {
-            memo, 
-            status
-          }
-        );
+            memo,
+            status,
+            applicantId: questionId,
+          },
+        ]);
       }, 400),
     [clubId, questionId],
   );

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts

@@ -103,21 +103,52 @@ export const VerticalLine = styled.div`
   margin: 8px 4px;
 `;
 
-export const StatusSelect = styled.select`
+export const StatusSelect = styled.p<{ disabled: boolean }>`
   height: 30px;
   border: 1px solid #dcdcdc;
   background: #fff;
   border-radius: 55px;
-  padding: 0px 22px 0px 8px;
-  margin: 5px 0px 5px 0px;
-  font-weight: 700;
-  color: ${({ disabled }) => (disabled ? '#DCDCDC' : '#000')};
+  padding: 0 22px 0 8px;
+  margin: 5px 0;
 
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+  ${({ disabled }) =>
+    disabled
+      ? 'color: #DCDCDC'
+      : 'color: #000; &:hover { background: #f5f5f5; }'};
 
-  &:not(:disabled):hover {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+
+  display: inline-flex;
+  align-items: center;
+`;
+
+export const StatusSelectMenu = styled.div<{ open: boolean }>`
+  display: ${({ open }) => (open ? 'block' : 'none')};
+  position: absolute;
+  top: 100%;
+  height: auto;
+  background: #fff;
+  left: 0;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+  box-shadow: 0px 1px 8px 0px #0000001f;
+  z-index: 10;
+  padding: 8px 0;
+  color: #787878;
+`;
+
+export const StatusSelectMenuItem = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 13px;
+  cursor: pointer;
+  text-align: left;
+  &:hover {
     background: #f5f5f5;
   }
 `;

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx

@@ -1,6 +1,6 @@
 import { useAdminClubContext } from '@/context/AdminClubContext';
 import { Applicant, ApplicationStatus } from '@/types/applicants';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import * as Styled from './ApplicantsTab.styles';
 import { useNavigate } from 'react-router-dom';
 import { useDeleteApplicants } from '@/hooks/queries/applicants/useDeleteApplicants';
@@ -9,6 +9,7 @@ import mapStatusToGroup from '@/utils/mapStatusToGroup';
 import selectIcon from '@/assets/images/icons/selectArrow.svg';
 import deleteIcon from '@/assets/images/icons/applicant_delete.svg';
 import selectAllIcon from '@/assets/images/icons/applicant_select_arrow.svg';
+import { useUpdateApplicant } from '@/hooks/queries/applicants/useUpdateApplicant';
 
 const ApplicantsTab = () => {
   const navigate = useNavigate();
@@ -19,7 +20,12 @@ const ApplicantsTab = () => {
   );
   const [selectAll, setSelectAll] = useState(false);
   const [open, setOpen] = useState(false);
+  const [statusOpen, setStatusOpen] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
   const { mutate: deleteApplicants } = useDeleteApplicants(clubId!);
+  const { mutate: updateDetailApplicants } = useUpdateApplicant(clubId!);
+  const allSelectRef = useRef<HTMLDivElement | null>(null);
+  const statusSelectRef = useRef<HTMLDivElement | null>(null);
 
   const filteredApplicants = useMemo(() => {
     if (!applicantsData?.applicants) return [];
@@ -33,6 +39,32 @@ const ApplicantsTab = () => {
     );
   }, [applicantsData, keyword]);
 
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+
+      if (
+        open &&
+        allSelectRef.current &&
+        !allSelectRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+      if (
+        statusOpen &&
+        statusSelectRef.current &&
+        !statusSelectRef.current.contains(target)
+      ) {
+        setStatusOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [open, statusOpen]);
+
   useEffect(() => {
     const newMap = new Map<string, boolean>();
     filteredApplicants.forEach((user: Applicant) => {
@@ -45,6 +77,7 @@ const ApplicantsTab = () => {
     const all =
       checkedItem.size > 0 && Array.from(checkedItem.values()).every(Boolean);
     setSelectAll(all);
+    setIsChecked(Array.from(checkedItem.values()).some(Boolean));
   }, [checkedItem]);
 
   if (!clubId) return null;
@@ -80,7 +113,7 @@ const ApplicantsTab = () => {
     setCheckedItem((prev) => {
       const newMap = new Map(prev);
 
-      const isAllChecked = Array.from(checkedItem.values()).every(Boolean);
+      const isAllChecked = Array.from(prev.values()).every(Boolean);
 
       if (mode === 'all') {
         newMap.forEach((_, key) => newMap.set(key, !isAllChecked));
@@ -112,6 +145,27 @@ const ApplicantsTab = () => {
     });
   };
 
+  const updateAllApplicants = (status: ApplicationStatus) => {
+    updateDetailApplicants(
+      applicantsData!.applicants
+        .filter((applicant) => checkedItem.get(applicant.id))
+        .map((applicant) => ({
+          applicantId: applicant.id,
+          memo: applicant.memo,
+          status: status,
+        })),
+      {
+        onSuccess: () => {
+          checkoutAllApplicants();
+          setStatusOpen(false);
+        },
+        onError: () => {
+          alert('지원자 상태 변경에 실패했습니다. 다시 시도해주세요.');
+        },
+      },
+    );
+  };
+
   return (
     <>
       <Styled.ApplicationHeader>
@@ -171,18 +225,52 @@ const ApplicantsTab = () => {
               <Styled.Arrow src={selectIcon} />
             </Styled.SelectWrapper>
             <Styled.VerticalLine />
-            <Styled.SelectWrapper>
-              <Styled.StatusSelect
-                disabled={!Array.from(checkedItem.values()).some(Boolean)}
-              >
-                <option value='상태변경'>상태변경</option>
+            <Styled.SelectWrapper
+              ref={statusSelectRef}
+              onClick={() => {
+                if (!isChecked) return;
+                setStatusOpen((prev) => !prev);
+              }}
+            >
+              <Styled.StatusSelect disabled={!isChecked}>
+                상태변경
               </Styled.StatusSelect>
               <Styled.Arrow width={8} height={8} src={selectIcon} />
+              <Styled.StatusSelectMenu open={statusOpen}>
+                <Styled.StatusSelectMenuItem
+                  onClick={() => {
+                    updateAllApplicants(ApplicationStatus.SUBMITTED);
+                  }}
+                >
+                  서류검토
+                </Styled.StatusSelectMenuItem>
+                <Styled.StatusSelectMenuItem
+                  onClick={() => {
+                    updateAllApplicants(ApplicationStatus.INTERVIEW_SCHEDULED);
+                  }}
+                >
+                  면접예정
+                </Styled.StatusSelectMenuItem>
+                <Styled.StatusSelectMenuItem
+                  onClick={() => {
+                    updateAllApplicants(ApplicationStatus.ACCEPTED);
+                  }}
+                >
+                  합격
+                </Styled.StatusSelectMenuItem>
+                <Styled.StatusSelectMenuItem
+                  onClick={() => {
+                    updateAllApplicants(ApplicationStatus.DECLINED);
+                  }}
+                >
+                  불합격
+                </Styled.StatusSelectMenuItem>
+              </Styled.StatusSelectMenu>
             </Styled.SelectWrapper>
             <Styled.DeleteButton
               src={deleteIcon}
               alt='삭제'
-              disabled={!Array.from(checkedItem.values()).some(Boolean)}
+              disabled={!isChecked}
               onClick={() => {
                 const toBeDeleted = Array.from(checkedItem.entries())
                   .filter(([_, isChecked]) => isChecked)
@@ -205,7 +293,7 @@ const ApplicantsTab = () => {
           <Styled.ApplicantTableHeaderWrapper>
             <Styled.ApplicantTableRow>
               <Styled.ApplicantTableHeader width={55}>
-                <Styled.ApplicantAllSelectWrapper>
+                <Styled.ApplicantAllSelectWrapper ref={allSelectRef}>
                   <Styled.ApplicantTableAllSelectCheckbox
                     checked={selectAll}
                     onClick={(e: React.MouseEvent<HTMLInputElement>) => {

frontend/src/types/applicants.ts

@@ -1,4 +1,4 @@
-import { AnswerItem } from "./application";
+import { AnswerItem } from './application';
 
 export enum ApplicationStatus {
   SUBMITTED = 'SUBMITTED', // 제출 완료
@@ -11,14 +11,20 @@ export interface ApplicantsInfo {
   total: number;
   reviewRequired: number;
   scheduledInterview: number;
-  accepted: number;    
-  applicants: Applicant[]
+  accepted: number;
+  applicants: Applicant[];
 }
 
 export interface Applicant {
   id: string;
   status: ApplicationStatus;
-  answers: AnswerItem[]
+  answers: AnswerItem[];
   memo: string;
   createdAt: string;
-}
+}
+
+export interface UpdateApplicantParams {
+  memo: string;
+  status: ApplicationStatus;
+  applicantId: string | undefined;
+}