diff --git a/frontend/src/pages/ReportPage.tsx b/frontend/src/pages/ReportPage.tsx index 9c75814..27c6e7b 100644 --- a/frontend/src/pages/ReportPage.tsx +++ b/frontend/src/pages/ReportPage.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { listReportVisits, reportDownloadUrl } from '../api'; +import { listReportVisits, listTodayAccess, reportDownloadUrl } from '../api'; import { DatePickerField } from '../components/DatePickerField'; -import { VisitRequestView } from '../types'; +import { AccessRecord, VisitRequestView } from '../types'; import { STATUS_CLASS, STATUS_LABEL, formatDateTime } from '../status'; const pad = (n: number) => String(n).padStart(2, '0'); @@ -21,21 +21,41 @@ export const ReportPage: React.FC = () => { const [from, setFrom] = useState(firstOfMonthISO()); const [to, setTo] = useState(todayISO()); const [items, setItems] = useState([]); + const [accessRecords, setAccessRecords] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const load = () => { setLoading(true); setError(null); - listReportVisits(from, to) - .then(setItems) + Promise.all([ + listReportVisits(from, to), + listTodayAccess().catch(() => [] as AccessRecord[]), + ]) + .then(([visits, records]) => { + setItems(visits); + setAccessRecords(records); + }) .catch((e) => { setItems([]); + setAccessRecords([]); setError(e instanceof Error ? e.message : '보고서 조회에 실패했습니다.'); }) .finally(() => setLoading(false)); }; + const accessById = new Map(accessRecords.map((r) => [r.visitRequestId, r])); + const statusBadge = (r: VisitRequestView) => { + const access = accessById.get(r.id); + if (access?.inside) { + return { className: 'green', label: '재실중' }; + } + if (access?.checkOutAt) { + return { className: 'gray', label: '퇴장' }; + } + return { className: STATUS_CLASS[r.status], label: STATUS_LABEL[r.status] }; + }; + useEffect(() => { load(); // Load the default month range once; explicit 조회 handles later date changes. @@ -113,7 +133,12 @@ export const ReportPage: React.FC = () => { {r.workName || '-'} {formatDateTime(r.visitFrom)} {formatDateTime(r.visitTo)} - {STATUS_LABEL[r.status]} + + {(() => { + const badge = statusBadge(r); + return {badge.label}; + })()} + ))}