From 26ab9b4cc5e5ee4188dece98e094857a50e3f05b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A4=80=ED=9D=AC?= Date: Tue, 11 Nov 2025 23:31:07 +0900 Subject: [PATCH] =?UTF-8?q?#257=20[UI]=20=EC=96=B4=EB=93=9C=EB=AF=BC=20?= =?UTF-8?q?=EC=84=B8=EB=AF=B8=EB=82=98=20=EC=8B=A0=EC=B2=AD=EC=9E=90?= =?UTF-8?q?=EA=B4=80=EB=A6=AC-=EC=8B=A0=EC=B2=AD=EC=8B=9C=EA=B0=81=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/applicants/ApplicantsDetailList.tsx | 5 +++-- .../admin/seminar-manage/applicants/Detail.tsx | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) 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: '학과',