[feature] 지원서 활성화 버튼 기능 구현

frontend/src/apis/application/updateApplication.ts

@@ -10,7 +10,7 @@ export const updateApplication = async (
     const response = await secureFetch(
       `${API_BASE_URL}/api/club/application/${applicationFormId}`,
       {
-        method: 'PUT',
+        method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',
         },
@@ -30,4 +30,30 @@ export const updateApplication = async (
   }
 };
 
-export default updateApplication;
+export const updateApplicationStatus = async ( 
+  applicationFormId: string,
+  currentStatus: string,
+) => {
+  const newStatus = currentStatus === 'ACTIVE' ? false : true;
+  try {
+    const response = await secureFetch(
+      `${API_BASE_URL}/api/club/application/${applicationFormId}`,
+      {
+        method: 'PATCH',
+        headers: { 
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ active: newStatus }),
+      },
+    );
+    if (!response.ok) {
+      throw new Error('지원서 상태 수정에 실패했습니다.');
+    }
+    const result = await response.json();
+    return result.data;
+  } catch (error) {
+    console.error('지원서 상태 수정 중 오류 발생:', error);
+    throw error;
+  }
+};
+

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

@@ -117,7 +117,7 @@ const ApplicationListTab = () => {
             </Styled.DateHeader>
           </Styled.ListHeader>
           {(group.forms.map((application: ApplicationFormItem) => {
-            const isActive = application.status === 'active';
+            const isActive = application.status === 'ACTIVE';
             return (
             <Styled.ApplicationRow key={application.id}>
               <Styled.ApplicationTitle $active={isActive} onClick={() => handleGoToDetailForm(application.id)}>

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

@@ -9,9 +9,12 @@ import Spinner from '@/components/common/Spinner/Spinner';
 import { useAdminClubContext } from '@/context/AdminClubContext';
 // import { useDeleteApplication } from '@/hooks/queries/application/useDeleteApplication';
 import { ApplicationFormItem, SemesterGroup } from '@/types/application';
+import { updateApplicationStatus } from '@/apis/application/updateApplication';
+import { useQueryClient } from '@tanstack/react-query';
 
 const ApplicationListTab = () => {
   const {data: allforms, isLoading, isError, error} = useGetApplicationlist();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { setApplicationFormId } = useAdminClubContext();
   // const { mutate: deleteApplication } = useDeleteApplication();
@@ -38,6 +41,20 @@ const ApplicationListTab = () => {
   //   }
   // };
 
+  const handleToggleClick = async (applicationFormId: string, currentStatus: string) => {
+  try {
+    await updateApplicationStatus(
+      applicationFormId,
+      currentStatus
+    );
+    queryClient.invalidateQueries({ queryKey: ['applicationForm'] });
+    setOpenMenuId(null);
+  } catch (error) {
+    console.error('지원서 상태 변경 실패:', error);
+    alert("상태 변경에 실패했습니다.");
+  }
+};
+
   const [openMenuId, setOpenMenuId] = useState<string | null>(null);
 
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -117,7 +134,7 @@ const ApplicationListTab = () => {
             </Styled.DateHeader>
           </Styled.ListHeader>
           {(group.forms.map((application: ApplicationFormItem) => {
-            const isActive = application.status === 'active';
+            const isActive = application.status === 'ACTIVE';
             return (
             <Styled.ApplicationRow key={application.id}>
               <Styled.ApplicationTitle $active={isActive} onClick={() => handleGoToEditForm(application.id)}>
@@ -139,6 +156,7 @@ const ApplicationListTab = () => {
                     <ApplicationMenu
                       isActive={isActive}
                       // onDelete={() => handleDeleteApplication(application.id)}
+                      onToggleStatus={() => handleToggleClick(application.id, application.status)}
                     />
                   )}
                 </Styled.MoreButtonContainer>

frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationMenu.tsx

@@ -8,24 +8,24 @@ import check_inactive from '@/assets/images/icons/check_inactive.svg';
 interface ApplicationMenuProps {
   isActive: boolean;
   // onDelete: () => void;
+  onToggleStatus?: () => void;
 }
 
-const ApplicationMenu = ({ isActive, 
+const ApplicationMenu = ({ isActive, onToggleStatus, 
   // onDelete
  }: ApplicationMenuProps) => {
-  // 각 메뉴 아이템 클릭 시 실행될 함수 (지금은 비워둠)
-  const onSetDefault = () => console.log('기본지원서로 설정');
   const onEditTitle = () => console.log('제목 수정하기');
+  const toggleButtonText = isActive ? '기본지원서 해제' : '기본지원서로 설정';
 
   return (
     <Styled.MenuContainer>
-      <Styled.MenuItem onClick={onSetDefault} className='default'>
+      <Styled.MenuItem onClick={onToggleStatus} className='default'>
         {isActive ? (
           <Styled.MenuIcon src={checkBox} />
         ) : (
           <Styled.MenuIcon src={check_inactive} />
         )}
-        기본지원서로 설정
+        {toggleButtonText}
       </Styled.MenuItem>
       <Styled.Separator />
       <Styled.MenuItem onClick={onEditTitle}>

frontend/src/types/application.ts

@@ -69,7 +69,7 @@ export interface ApplicationFormItem {
   id: string;
   title: string;
   editedAt: string;
-  status: 'active' | 'published' | 'unpublished';
+  status: 'ACTIVE' | 'PUBLISHED' | 'UNPUBLISHED';
 }
 
 export interface SemesterGroup {