Initial commit: IT센터 출입자관리시스템 (ACS)

방문자 사전신청·승인, 입·출입 체크인/아웃, QR 배지, 재실현황,
블랙리스트, 대시보드 통계, 방문 리포트(엑셀)까지 7단계 전 기능 구현.

- backend: Spring Boot 3.4.5 / Java 21 (JDK 26 빌드), 세션 인증, JPA, H2/PostgreSQL, POI, ZXing, Flyway
- frontend: React 19 / Vite 6 / TypeScript
- infra: Docker Compose (db·app·web nginx), Flyway V1__init, Python 사용자 시드
- docs: 워크플로우 / 시퀀스 다이어그램(Mermaid) / 이슈·유의사항

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/PublicPassPage.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getPublicPass, publicPassQrUrl } from '../api';
+import { PublicPass } from '../types';
+import { formatVisitRange } from '../status';
+
+/**
+ * Public visitor pass opened from the SMS link (no login). Shows the QR the
+ * visitor presents to the access console's webcam.
+ */
+export const PublicPassPage: React.FC = () => {
+  const { token } = useParams<{ token: string }>();
+  const [pass, setPass] = useState<PublicPass | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) return;
+    getPublicPass(token)
+      .then(setPass)
+      .catch((e) => setError(e instanceof Error ? e.message : '조회 실패'));
+  }, [token]);
+
+  if (error) {
+    return (
+      <div className="badge-sheet">
+        <div className="badge-card">
+          <div className="badge-head">IT센터 출입증</div>
+          <div className="alert alert-error" style={{ marginTop: 16 }}>{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!pass || !token) {
+    return <div className="center-screen">불러오는 중…</div>;
+  }
+
+  return (
+    <div className="badge-sheet">
+      <div className="badge-card">
+        <div className="badge-head">IT센터 출입증</div>
+        <div className="badge-name">{pass.visitorName}</div>
+        <div className="badge-company">{pass.company || '-'}</div>
+        <img className="badge-qr" src={publicPassQrUrl(token)} alt="출입 QR" />
+        <div className="badge-meta">
+          <div><b>{pass.zoneName || '-'}</b></div>
+          <div><b>{formatVisitRange(pass.visitFrom, pass.visitTo)}</b></div>
+        </div>
+        <div className="badge-foot">전산실 입장 시 QR을 출입관리시스템에 입력하세요</div>
+      </div>
+    </div>
+  );
+};