diff --git a/src/components/admin/applicants/ApplicantsDetailList.tsx b/src/components/admin/applicants/ApplicantsDetailList.tsx index 8048e7a7..d824a5d5 100644 --- a/src/components/admin/applicants/ApplicantsDetailList.tsx +++ b/src/components/admin/applicants/ApplicantsDetailList.tsx @@ -5,6 +5,7 @@ import checkbox from '../../../assets/icons/components/SeminarApply/checkbox.svg // 지원자 데이터 타입 interface Applicant { id: number; // 각 지원자의 고유 ID (React의 key로 사용) + appliedAt: string; // 신청시각 seminarName: string; // 세미나명 studentId: string; // API 요청용 studentId (ApplicantData의 studentId) studentNum: string; // 학번 (표시용) @@ -44,10 +45,10 @@ const ApplicantsDetailList: React.FC = ({ const cellStyle = "border border-grey-400 px-5 py-3 text-center body-1-semibold text-white "; // 헤더 목록 - const headers = ['세미나명', '학번', '학과', '학년', '이름', '연락처', '이메일', '온/오프라인 참여 여부', '이번 세미나를 알게 된 경로', '출석']; + const headers = ['신청시각', '세미나명', '학번', '학과', '학년', '이름', '연락처', '이메일', '온/오프라인 참여 여부', '이번 세미나를 알게 된 경로', '출석']; // 데이터 키 목록 (applicant 객체의 속성명과 매칭) - const dataKeys = ['seminarName', 'studentNum', 'department', 'grade', 'name', 'contact', 'email', 'attendanceType', 'referralSource'] as const; + const dataKeys = ['appliedAt', 'seminarName', 'studentNum', 'department', 'grade', 'name', 'contact', 'email', 'attendanceType', 'referralSource'] as const; // 출석 토글 함수 const toggleAttendance = async (id: number, studentId: string) => { diff --git a/src/pages/admin/seminar-manage/applicants/Detail.tsx b/src/pages/admin/seminar-manage/applicants/Detail.tsx index 96fa780f..586a7ac3 100644 --- a/src/pages/admin/seminar-manage/applicants/Detail.tsx +++ b/src/pages/admin/seminar-manage/applicants/Detail.tsx @@ -9,6 +9,22 @@ const Detail = () => { const { data: applicantsData } = useSeminarApplicantsDetail(id!); const { mutate: updateAttendance } = useUpdateAttendanceCheck(id!); + // 날짜 포맷 함수 (YYYY. M. DD 오전/오후 H:MM:SS) + const formatDateKorean = (dateString: string): string => { + const date = new Date(dateString); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + + const period = hours >= 12 ? '오후' : '오전'; + const hour12 = hours % 12 || 12; + + return `${year}. ${month}. ${day} ${period} ${hour12}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; + }; + // inflowPath 매핑 함수 const getInflowPathLabel = (inflowPath: string) => { const inflowPathMap: { [key: string]: string } = { @@ -49,6 +65,7 @@ const Detail = () => { const applicants = applicantsData?.result?.students?.map((applicant, index) => ({ id: index + 1, + appliedAt: formatDateKorean(applicant.appliedAt), seminarName: applicant.topic, studentId: applicant.studentId, studentNum: applicant.studentNum, @@ -72,6 +89,7 @@ const Detail = () => { // 엑셀 다운로드용 헤더 매핑 const excelHeaders = { + appliedAt: '신청시각', seminarName: '세미나명', studentNum: '학번', department: '학과',