fix(ui): 테스트 피드백 반영 (출입증/보고서/상단바/대시보드/엑셀)
1. 출입증 카드 하단 안내문을 한 줄로(.badge-foot font-size 11px + nowrap). 2. 보고서 화면: 명칭 '리포트→보고서'·'방문 리포트→출입관리 보고서', 안내문 보강, 날짜 입력을 YYYY.MM.DD 표시 커스텀 피커(DatePickerField)로 교체, 기본값 시작일=이번 달 1일·종료일=오늘. 3. 보고서 엑셀 열 너비를 내용 기준(한글 2폭)으로 계산해 설정 → 셀 잘림 해소 (POI autoSizeColumn의 CJK 과소측정 문제 회피). 4. 상단바에서 사용자 이름 표시 제거(역할 태그만 유지) → '발송내역' 메뉴 잘림 해소, 발송내역 화면 [새로고침]→[조회]. 5. 대시보드 '최근 출입 신청'에서 현재 재실 중인 방문자는 상태를 '재실중'으로 표시 (기존 listInside API 재활용, 백엔드 무변경). 검증: 프론트 tsc+vite 빌드 통과, 백엔드 build+test(9건) 통과, 생성 xlsx의 열 너비가 내용에 맞게 설정됨(연락처15·출입일시18·상태10 등) 확인. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,17 +1,22 @@
|
||||
import React, { useState } from 'react';
|
||||
import { reportDownloadUrl } from '../api';
|
||||
import { DatePickerField } from '../components/DatePickerField';
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
|
||||
/** Today in YYYY-MM-DD (local). */
|
||||
function todayISO(): string {
|
||||
return new Date().toISOString().slice(0, 10);
|
||||
}
|
||||
function monthAgoISO(): string {
|
||||
const d = new Date();
|
||||
d.setMonth(d.getMonth() - 1);
|
||||
return d.toISOString().slice(0, 10);
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
||||
}
|
||||
/** First day of the current month in YYYY-MM-DD (local). */
|
||||
function firstOfMonthISO(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-01`;
|
||||
}
|
||||
|
||||
export const ReportPage: React.FC = () => {
|
||||
const [from, setFrom] = useState(monthAgoISO());
|
||||
const [from, setFrom] = useState(firstOfMonthISO());
|
||||
const [to, setTo] = useState(todayISO());
|
||||
|
||||
const onDownload = () => {
|
||||
@@ -29,18 +34,18 @@ export const ReportPage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-head"><h2>방문 리포트</h2></div>
|
||||
<div className="page-head"><h2>출입관리 보고서</h2></div>
|
||||
|
||||
<div className="card">
|
||||
<p className="muted">기간을 선택하고 엑셀(.xlsx) 파일로 내려받습니다. (방문 시작일 기준)</p>
|
||||
<p className="muted">기간을 선택하고 [엑셀 다운로드] 버튼을 클릭하면, 엑셀(.xlsx) 파일로 내려받습니다. (방문 시작일 기준)</p>
|
||||
<div className="report-row">
|
||||
<label className="field">
|
||||
<span>시작일</span>
|
||||
<input type="date" value={from} onChange={(e) => setFrom(e.target.value)} />
|
||||
<DatePickerField value={from} onChange={setFrom} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>종료일</span>
|
||||
<input type="date" value={to} onChange={(e) => setTo(e.target.value)} />
|
||||
<DatePickerField value={to} onChange={setTo} />
|
||||
</label>
|
||||
<button className="btn-primary" onClick={onDownload}>엑셀 다운로드</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user