feat: 구매참가자관리 Excel export 기능 구현

Author: hyeeuncho

src/features/dashboard/api/participants.ts

@@ -20,3 +20,36 @@ export const approveParticipants = async ({ orderId }: { orderId: number }) => {
     console.log(error);
   }
 };
+
+export const downloadExcel = async (eventId:number): Promise<void> => {
+  const response = await axiosClient.get(
+    '/host-channels/dashboard/participant-management/excel',
+    {
+      responseType: 'blob',
+      params: { eventId }, 
+    }
+  );
+
+  //파일이름 추출
+  const disposition = response.headers['content-disposition'];
+  let filename = '같이가요_구매참가자목록.xlsx'; // 기본값
+  if (disposition) {
+    const match = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+    if (match && match[1]) {
+      filename = decodeURIComponent(match[1].replace(/['"]/g, ''));
+    }
+  }
+
+  //저장
+  const blob = new Blob([response.data], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', filename); 
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(url);
+};

src/pages/dashboard/ui/ParticipantsMangementPage.tsx

@@ -7,6 +7,9 @@ import ParticipantsFilterBar from '../../../widgets/dashboard/ui/ParticipantsFil
 import EmailModal from '../../../widgets/dashboard/ui/email/EmailModal';
 import SelectTicketModal from '../../../widgets/dashboard/ui/email/SelectTicketModal';
 import { useParticipants } from '../../../features/dashboard/hook/useParticipants';
+import SecondaryButton from '../../../../design-system/ui/buttons/SecondaryButton';
+import { useParams } from 'react-router-dom';
+import { downloadExcel } from '../../../features/dashboard/api/participants';
 
 const ParticipantsManagementPage = () => {
   const [filterModalOpen, setfilterModalOpen] = useState(false);
@@ -15,6 +18,8 @@ const ParticipantsManagementPage = () => {
   const [listType, setListType] = useState<'all' | 'approved' | 'pending'>('all');
   const [filter, setFilter] = useState<string[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
+  const { id } = useParams(); 
+  const eventId = Number(id);
 
   const { participants } = useParticipants();
   const checkedInCount = participants.filter((p: { checkedIn: boolean; }) => p.checkedIn).length;
@@ -29,18 +34,32 @@ const ParticipantsManagementPage = () => {
       String(p.ticketId).includes(lowerSearch)
     );
   });
+  const exportToExcel = () => {
+    try {
+    downloadExcel(eventId);
+  } catch (error) {
+    alert('엑셀 다운로드에 실패했습니다.');
+    console.error(error);
+  }
+  }
 
   return (
     <DashboardLayout centerContent="DASHBOARD" pinkBg={true}>
       <div className="flex flex-col px-2 md:px-4">
         <h1 className="text-center font-bold text-xl py-4 md:py-6">구매/참가자 관리</h1>
-        <div className="flex justify-end gap-2 md:gap-3 px-4">
-          <h3 className="text-placeholderText text-sm md:text-base">체크인</h3>
-          <span className="text-sm md:text-base">{checkedInCount}/{participants.length}</span>
-          <span className="text-sm md:text-base">|</span>
-          <h3 className="text-placeholderText text-sm md:text-base">미승인</h3>
-          <span className="text-sm md:text-base">{unapprovedCount}</span>
+
+        <div className="flex justify-between items-center px-2">
+          {<SecondaryButton label="Excel" color="pink" size="small" onClick={exportToExcel} />}
+
+          <div className="flex items-center gap-2 md:gap-3">
+            <h3 className="text-placeholderText text-sm md:text-base">체크인</h3>
+            <span className="text-sm md:text-base">{checkedInCount}/{participants.length}</span>
+            <span className="text-sm md:text-base">|</span>
+            <h3 className="text-placeholderText text-sm md:text-base">미승인</h3>
+            <span className="text-sm md:text-base">{unapprovedCount}</span>
+          </div>
         </div>
+
         <SearchBar
           placeholder="이름, 이메일, 전화번호, 티켓ID로 검색"
           className="py-5"