+
+
+
+
+ );
+}
diff --git a/frontend/src/components/auth/FindPwForm.tsx b/frontend/src/components/auth/FindPwForm.tsx
new file mode 100644
index 0000000..2f66e21
--- /dev/null
+++ b/frontend/src/components/auth/FindPwForm.tsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import api from "@/api/axios";
+import axios from "axios";
+
+interface FindPwFormProps {
+ onLogin: () => void;
+}
+
+export default function FindPwForm({ onLogin }: FindPwFormProps) {
+ const [employeeId, setEmployeeId] = useState("");
+ const [email, setEmail] = useState("");
+ const [error, setError] = useState("");
+ const [success, setSuccess] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError("");
+ setLoading(true);
+ try {
+ await api.post("/api/auth/find-pw", null, {
+ params: { employee_id: employeeId, email },
+ });
+ setSuccess("입력하신 이메일로 임시 비밀번호를 발송했습니다.");
+ setEmployeeId("");
+ setEmail("");
+ } catch (err) {
+ if (axios.isAxiosError(err) && err.response?.status === 404) {
+ setError("일치하는 계정을 찾을 수 없습니다.");
+ } else {
+ setError("비밀번호 찾기 중 오류가 발생했습니다.");
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+
+ {children}
+
+ + 비밀번호 찾기 +
+
+ 가입 시 등록한 사원번호와 이메일을 입력하시면
+
임시 비밀번호를 발송해 드립니다.
+
+ 로그인 +
+ + + ); +} diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx new file mode 100644 index 0000000..4cd6600 --- /dev/null +++ b/frontend/src/components/auth/RegisterForm.tsx @@ -0,0 +1,125 @@ +import { useState } from "react"; +import api from "@/api/axios"; +import axios from "axios"; + +interface RegisterFormProps { + onLogin: () => void; +} + +export default function RegisterForm({ onLogin }: RegisterFormProps) { + const [employeeId, setEmployeeId] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [passwordConfirm, setPasswordConfirm] = useState(""); + const [error, setError] = useState(""); + const [success, setSuccess] = useState(""); + const [loading, setLoading] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(""); + if (password !== passwordConfirm) { + setError("비밀번호가 일치하지 않습니다."); + return; + } + setLoading(true); + try { + await api.post("/api/auth/register", { + employee_id: employeeId, + email, + password, + }); + setSuccess("가입이 완료되었습니다. 로그인해 주세요."); + setTimeout(onLogin, 1500); + } catch (err) { + if (axios.isAxiosError(err) && err.response?.status === 400) { + setError("이미 사용 중인 사원번호 또는 이메일입니다."); + } else { + setError("가입 중 오류가 발생했습니다."); + } + } finally { + setLoading(false); + } + }; + + return ( + <> ++ 가입하기 +
+ + + ); +} diff --git a/frontend/src/components/dashboard/AlertItem.tsx b/frontend/src/components/dashboard/AlertItem.tsx index 798c89f..de79996 100644 --- a/frontend/src/components/dashboard/AlertItem.tsx +++ b/frontend/src/components/dashboard/AlertItem.tsx @@ -1,26 +1,5 @@ -/** - * @file components/dashboard/AlertItem.tsx - * @description 최신알림 개별 카드 컴포넌트 - * - * ## 기능 - * - 미처리(pending/detected): 파란 [상세보기] + 파란 outline [오탐신고] 버튼 - * - 처리완료(confirmed/false_alarm): 파란 outline [기록보기] 버튼 - * - 심각도 뱃지: confidence 기반 (≥0.7 고위험 / <0.7 중간 / 처리 후 처리완료·오탐) - * - 위치: camera embed 시 "역명 게이트명", 루트 직접 필드 시에도 동일 표시, 없으면 "CAM-XX" - * - description 있으면 감지 유형 표시, 없으면 status 기반 기본 문구 fallback - * - * ## 주의사항 - * - isActive: pending → 상세보기·오탐신고 버튼 / confirmed | false_alarm → 기록보기 버튼 - * - getLocationLabel: camera 객체 embed 또는 루트 직접 필드(station_name/location) 모두 대응, 없으면 "CAM-XX" fallback - * - * ## TODO - * - [ ] 카메라 썸네일 실제 CCTV 스냅샷 연동 (clip_url or 별도 API) - * - * ## 백엔드 확정 후 수정 필요 - * - description, appearance_tags 필드명 확정 필요 - */ - import type { EventResponse } from "@/types"; +import { labelEventType } from "@/constants/eventTypes"; interface AlertItemProps { event: EventResponse; @@ -28,15 +7,15 @@ interface AlertItemProps { onFalseAlarm: (event: EventResponse) => void; } -/** confidence 기반 심각도 뱃지. 처리 완료 상태는 별도 레이블 반환 */ -function getSeverity(event: EventResponse): { label: string; color: string } { +function getSeverity(event: EventResponse): { label: string; cls: string } { if (event.status === "confirmed") - return { label: "처리완료", color: "bg-gray-100 text-gray-500" }; + return { label: "처리완료", cls: "bg-gray-100 text-gray-500" }; if (event.status === "false_alarm") - return { label: "오탐", color: "bg-gray-100 text-gray-400" }; - if ((event.confidence ?? 0) >= 0.7) - return { label: "고위험", color: "bg-red-100 text-red-500" }; - return { label: "중간", color: "bg-yellow-100 text-yellow-600" }; + return { label: "오탐", cls: "bg-gray-100 text-gray-400" }; + const conf = event.confidence ?? 0; + if (conf >= 0.7) return { label: "고위험", cls: "bg-red-100 text-red-500" }; + if (conf >= 0.4) return { label: "중간", cls: "bg-yellow-100 text-yellow-600" }; + return { label: "낮음", cls: "bg-green-100 text-green-600" }; } function formatTime(timestamp: string): string { @@ -56,11 +35,10 @@ function getLocationLabel(event: EventResponse): string { return `CAM-${String(event.camera_id).padStart(2, "0")}`; } -/** description 있으면 그 값, 없으면 status 기반 기본 문구 */ function getDescription(event: EventResponse): string { - if (event.description) return event.description; if (event.status === "confirmed") return "무임승차 확인 처리됨"; - if (event.status === "false_alarm") return "오탐으로 처리됨"; + if (event.status === "false_alarm") return "오탐으로 신고됨"; + if (event.event_type) return `${labelEventType(event.event_type)} 의심`; return "무임승차 의심 감지"; } @@ -80,7 +58,7 @@ export default function AlertItem({ CAM-{String(event.camera_id).padStart(2, "0")} {severity.label} @@ -96,7 +74,9 @@ export default function AlertItem({ {formatTime(event.timestamp)} -{getDescription(event)}
++ {getDescription(event)} +
{event.appearance_tags?.map((tag) => (
= 5) return "bg-red-500";
- if (count >= 2) return "bg-yellow-400";
- return "bg-gray-300";
-}
-
-function getCountColor(count: number): string {
- if (count >= 5) return "text-red-500";
- if (count >= 2) return "text-yellow-500";
- return "text-gray-500";
-}
-
export default function CameraStats({ data, loading }: CameraStatsProps) {
+ const sorted = [...data].sort((a, b) => b.count - a.count).slice(0, 5);
+
return (
-
- (initialEvent);
+ const [dispatched, setDispatched] = useState(false);
const [confirming, setConfirming] = useState(false);
+ const [showFalseAlarm, setShowFalseAlarm] = useState(false);
+ const [completedInfo, setCompletedInfo] = useState(
+ () => {
+ if (event.status === "confirmed")
+ return {
+ type: "confirmed",
+ at: event.handled_at ?? new Date().toISOString(),
+ };
+ if (event.status === "false_alarm")
+ return {
+ type: "false_alarm",
+ at: event.handled_at ?? new Date().toISOString(),
+ reason: event.reason ?? undefined,
+ };
+ return null;
+ },
+ );
- const isActive = selected.status === "pending";
- const badge = getSeverityBadge(selected);
- const station = selected.camera?.station_name ?? "";
- const gate = selected.camera?.location ?? "";
+ const isActive = event.status === "pending" && completedInfo === null;
+ const badge =
+ completedInfo?.type === "confirmed"
+ ? { label: "처리완료", cls: "bg-green-100 text-green-600" }
+ : completedInfo?.type === "false_alarm"
+ ? { label: "오탐", cls: "bg-gray-100 text-gray-500" }
+ : getSeverityBadge(event);
+ const station = event.camera?.station_name ?? "";
+ const gate = event.camera?.location ?? "";
const locationText =
station && gate
? `${station} ${gate}`
- : station || `카메라 #${selected.camera_id}`;
+ : station || `카메라 #${event.camera_id}`;
+
+ const handleDispatch = () => {
+ const ok = window.confirm("역무원을 파견하시겠습니까?");
+ if (ok) setDispatched(true);
+ };
const handleConfirm = async () => {
+ const ok = window.confirm("이벤트를 완료 처리 하시겠습니까?");
+ if (!ok) return;
setConfirming(true);
try {
- await updateEventStatus(selected.id, "confirmed");
+ await updateEventStatus(event.id, "confirmed");
+ const updated = await getEventById(event.id);
+ setCompletedInfo({
+ type: "confirmed",
+ at: updated.handled_at ?? new Date().toISOString(),
+ });
onConfirmed();
- onClose();
} catch {
alert("처리 중 오류가 발생했습니다.");
} finally {
@@ -160,191 +89,51 @@ export default function EventDetailModal({
}
};
- const handleDispatch = () => {
- // TODO: 역무원 파견 API 연동 (백엔드 스펙 미정)
- alert("역무원 파견 기능은 준비 중입니다.");
+ const handleFalseAlarmSubmitted = async (reason: string) => {
+ const updated = await getEventById(event.id).catch(() => null);
+ setCompletedInfo({
+ type: "false_alarm",
+ at: updated?.handled_at ?? new Date().toISOString(),
+ reason,
+ });
+ onConfirmed();
};
return (
-
구간별 알림현황
- ++ 역별 알림현황 +
+
+ 역이름
+ 알림현황
{loading ? (
-
+
-
-
+
);
diff --git a/frontend/src/components/dashboard/EventDetailModal.tsx b/frontend/src/components/dashboard/EventDetailModal.tsx
index 0ab18aa..0448cce 100644
--- a/frontend/src/components/dashboard/EventDetailModal.tsx
+++ b/frontend/src/components/dashboard/EventDetailModal.tsx
@@ -1,58 +1,16 @@
-/**
- * @file components/dashboard/EventDetailModal.tsx
- * @description 알림 상세보기 모달
- *
- * ## 기능
- * - 좌측: events 목록, 클릭 시 우측 상세 전환
- * - 우측: clip_url 영상 + 기록시각 / 위치 / 인상착의 / AI 신뢰도
- * - 처리완료: PATCH /api/events/{id}/status { status: 'confirmed' } 후 닫기
- * - 오탐신고: FalseAlarmModal로 전환
- * - status === "pending" 일 때 역무원파견/처리완료/오탐신고 버튼 표시, 그 외 미표시
- *
- * ## 주의사항
- * - event 데이터는 AlertList의 events 배열 그대로 사용 (별도 단건 조회 없음)
- *
- * ## TODO
- * - [ ] 역무원 파견 API 연동 (백엔드 스펙 미정)
- * - [ ] GET /api/events/{id} 백엔드 구현 후 상세 데이터 별도 조회로 전환
- *
- * ## 협의
- * - clip_url S3 CORS 설정 백엔드(조수근) 확인 필요
- * - appearance_tags, description 필드명 백엔드 확정 후 수정 필요
- */
-
import { useState } from "react";
-import { X, Clock, MapPin, Tag, Video, Zap } from "lucide-react";
import type { EventResponse } from "@/types";
-import { updateEventStatus } from "@/api/events";
+import { updateEventStatus, getEventById } from "@/api/events";
+import FalseAlarmModal from "./FalseAlarmModal";
+import EventVideoPanel from "./EventVideoPanel";
+import EventInfoPanel, { type CompletedInfo } from "./EventInfoPanel";
interface EventDetailModalProps {
- events: EventResponse[];
- initialEvent: EventResponse;
+ event: EventResponse;
onClose: () => void;
- onFalseAlarm: (event: EventResponse) => void;
onConfirmed: () => void;
}
-// ── 유틸 ──────────────────────────────────────────────
-
-function formatHMS(timestamp: string): string {
- const d = new Date(timestamp);
- return [d.getHours(), d.getMinutes(), d.getSeconds()]
- .map((n) => String(n).padStart(2, "0"))
- .join(":");
-}
-
-function getStatusText(status: EventResponse["status"]): string {
- if (status === "confirmed") return "CONFIRMED";
- if (status === "false_alarm") return "FALSE ALARM";
- return "UNCONFIRMED";
-}
-
-function getGateLabel(event: EventResponse): string {
- return event.camera?.location ?? `GATE ${event.camera_id}`;
-}
-
function getSeverityBadge(event: EventResponse): {
label: string;
cls: string;
@@ -61,98 +19,69 @@ function getSeverityBadge(event: EventResponse): {
return { label: "처리완료", cls: "bg-green-100 text-green-600" };
if (event.status === "false_alarm")
return { label: "오탐", cls: "bg-gray-100 text-gray-500" };
- if ((event.confidence ?? 0) >= 0.7)
- return { label: "고위험", cls: "bg-red-100 text-red-500" };
- return { label: "중간", cls: "bg-yellow-100 text-yellow-600" };
-}
-
-// ── 좌측 패널: 이벤트 목록 아이템 ──────────────────────
-
-function ListItem({
- event,
- isSelected,
- onClick,
-}: {
- event: EventResponse;
- isSelected: boolean;
- onClick: () => void;
-}) {
- const isUnconfirmed = event.status === "pending";
-
- return (
-
- );
+ const conf = event.confidence ?? 0;
+ if (conf >= 0.7) return { label: "고위험", cls: "bg-red-100 text-red-500" };
+ if (conf >= 0.4)
+ return { label: "중간", cls: "bg-yellow-100 text-yellow-600" };
+ return { label: "낮음", cls: "bg-green-100 text-green-600" };
}
-// ── 메인 모달 ─────────────────────────────────────────
-
export default function EventDetailModal({
- events,
- initialEvent,
+ event,
onClose,
- onFalseAlarm,
onConfirmed,
}: EventDetailModalProps) {
- const [selected, setSelected] = useState
{[...Array(3)].map((_, i) => (
-
+
))}
- ) : data.length === 0 ? (
- + ) : sorted.length === 0 ? ( +
데이터가 없습니다.
) : ( -| 역이름 | -알림현황 | -
|---|---|
|
- {row.station_name}
- {row.location}
- |
- - - - {row.count} - - | -
+ {sorted.map((row) => (
+
)}
+
+ ))}
+
+
+
+ {row.count}
+
+ + {row.station_name} +
++ {row.location} +
+
+ <>
setShowFalseAlarm(false)}
+ onSubmitted={handleFalseAlarmSubmitted}
+ />
+ )}
+
);
}
diff --git a/frontend/src/components/dashboard/EventInfoPanel.tsx b/frontend/src/components/dashboard/EventInfoPanel.tsx
new file mode 100644
index 0000000..fe7a3f1
--- /dev/null
+++ b/frontend/src/components/dashboard/EventInfoPanel.tsx
@@ -0,0 +1,144 @@
+import { X, Clock, MapPin, Zap } from "lucide-react";
+import type { EventResponse } from "@/types";
+import { labelEventType } from "@/constants/eventTypes";
+
+export interface CompletedInfo {
+ type: "confirmed" | "false_alarm";
+ at: string;
+ reason?: string;
+}
+
+interface EventInfoPanelProps {
+ event: EventResponse;
+ badge: { label: string; cls: string };
+ locationText: string;
+ completedInfo: CompletedInfo | null;
+ isActive: boolean;
+ dispatched: boolean;
+ confirming: boolean;
+ onClose: () => void;
+ onDispatch: () => void;
+ onConfirm: () => void;
+ onFalseAlarm: () => void;
+}
+
+function formatDateTime(iso: string): string {
+ const d = new Date(iso);
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+function formatHMS(timestamp: string): string {
+ const d = new Date(timestamp);
+ return [d.getHours(), d.getMinutes(), d.getSeconds()]
+ .map((n) => String(n).padStart(2, "0"))
+ .join(":");
+}
+
+export default function EventInfoPanel({
+ event,
+ badge,
+ locationText,
+ completedInfo,
+ isActive,
+ dispatched,
+ confirming,
+ onClose,
+ onDispatch,
+ onConfirm,
+ onFalseAlarm,
+}: EventInfoPanelProps) {
+ return (
+
e.stopPropagation()}
+ className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+ onClick={onClose}
>
- {/* ── 좌측: 실시간 알림 목록 (md 미만 숨김) ── */}
-
+
+ {showFalseAlarm && (
+
-
-
- {/* ── 우측: 상세 정보 ── */}
-
-
- 실시간 알림
-
- {events.length === 0 ? (
- setSelected(ev)}
- />
- ))
- )}
-
- - 이벤트 없음 -
- ) : ( - events.map((ev) => ( -
- {/* 헤더 */}
-
-
-
-
- {/* 콘텐츠: 이미지 + 정보 */}
-
-
-
- - Event #{selected.id} - - {" "} - | {formatHMS(selected.timestamp)} | {getGateLabel(selected)} | - STATUS:{" "} - - - {getStatusText(selected.status)} - -
- - {badge.label} - -
- {/* 이미지/영상 */}
-
+
- {selected.clip_url ? (
-
- ) : (
-
-
- {/* 정보 + 버튼 */}
-
-
- 영상 클립 없음
-
- )}
-
- {/* 정보 섹션 */}
-
-
-
-
- {/* 액션 버튼 */}
- {isActive && (
-
-
-
-
-
- 기록시각
-- {formatHMS(selected.timestamp)} -
-
-
-
- {selected.appearance_tags &&
- selected.appearance_tags.length > 0 && (
-
-
- 위치
-{locationText}
-
-
- )}
-
- {(selected.event_type ?? selected.description) && (
-
-
- 인상착의
--
- {selected.appearance_tags.map((tag) => (
-
- - - {tag} - - ))} -
-
- )}
-
- {selected.confidence !== null && (
-
-
- 감지유형
-- {selected.event_type ?? selected.description} -
-- AI 신뢰도: {Math.round((selected.confidence ?? 0) * 100)}% -
- )} -
-
- )}
- - 다음 버튼 -
- - - - e.stopPropagation()}
+ >
+ setShowFalseAlarm(true)}
+ />
+
+ );
+}
diff --git a/frontend/src/components/dashboard/EventVideoPanel.tsx b/frontend/src/components/dashboard/EventVideoPanel.tsx
new file mode 100644
index 0000000..7b41cb2
--- /dev/null
+++ b/frontend/src/components/dashboard/EventVideoPanel.tsx
@@ -0,0 +1,16 @@
+import { Video } from "lucide-react";
+
+export default function EventVideoPanel({ clipUrl }: { clipUrl: string | null }) {
+ return (
+
+
+
+
+
+ Event #{event.id}
+
+
+ {badge.label}
+
+
+
+
+
+
+
+
+
+
+
+ 기록시각
+{formatHMS(event.timestamp)}
+
+
+
+ {event.event_type && (
+
+
+ 위치
+{locationText}
+
+
+ )}
+
+ {event.confidence !== null && (
+
+
+ 감지유형
+{labelEventType(event.event_type!)}
++ AI 신뢰도: {Math.round((event.confidence ?? 0) * 100)}% +
+ )} +
+ {completedInfo ? (
+
+
+ {completedInfo.type === "confirmed" ? (
+
+ ) : isActive ? (
+ {formatDateTime(completedInfo.at)}에 처리완료 되었습니다.
+ ) : ( + <> +{formatDateTime(completedInfo.at)}에 오탐신고 되었습니다.
+ {completedInfo.reason && ( +사유: {completedInfo.reason}
+ )} + + )} +
+
+
+
+
+ ) : null}
+
+ {clipUrl ? (
+
+ ) : (
+
+ );
+}
diff --git a/frontend/src/components/dashboard/FalseAlarmList.tsx b/frontend/src/components/dashboard/FalseAlarmList.tsx
index 9e678f4..feb3586 100644
--- a/frontend/src/components/dashboard/FalseAlarmList.tsx
+++ b/frontend/src/components/dashboard/FalseAlarmList.tsx
@@ -1,62 +1,34 @@
-/**
- * @file components/dashboard/FalseAlarmList.tsx
- * @description 대시보드 최근 오탐 신고 목록 컴포넌트
- *
- * ## 기능
- * - GET /api/notifications/?unread_only=false 응답 최대 5건 표시
- * - read_at === null → 검토 중 (노란 아이콘) / read_at !== null → 오탐 확인 (초록 아이콘)
- * - loading 시 스켈레톤 / 빈 배열 시 안내 문구 표시
- *
- * ## 주의사항
- * - GET /api/notifications/ 는 인증 불필요 API
- *
- * ## TODO
- * - [ ] 전체보기 버튼 → 오탐 신고 전체 목록 페이지 라우팅 연결
- * - [ ] 항목 클릭 시 해당 이벤트 상세보기 Modal 연동
- *
- * ## 협의
- * - NotificationResponse에 event 정보 embed 여부 백엔드(조수근) 확인 필요
- */
-
-import { Link } from "react-router-dom";
-import { AlertTriangle, CheckCircle } from "lucide-react";
-import type { NotificationResponse } from "@/types";
+import { AlertTriangle } from "lucide-react";
+import type { EventResponse } from "@/types";
interface FalseAlarmListProps {
- notifications: NotificationResponse[];
+ events: EventResponse[];
loading?: boolean;
}
function formatRelativeTime(timestamp: string): string {
const d = new Date(timestamp);
const now = new Date();
- const diffDays = Math.floor(
- (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24),
- );
+ const diffDays = Math.floor((now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24));
const timeStr = `${d.getHours()}시 ${String(d.getMinutes()).padStart(2, "0")}분`;
if (diffDays === 0) return `오늘 ${timeStr}`;
if (diffDays === 1) return `어제 ${timeStr}`;
return `${diffDays}일 전 ${timeStr}`;
}
-function getLabel(n: NotificationResponse): string {
- if (n.event?.camera) {
- return `${n.event.camera.station_name} CAM-${String(n.event.camera_id).padStart(2, "0")} - 오탐 신고`;
- }
- return `이벤트 #${n.event_id} - 오탐 신고`;
+function getLabel(e: EventResponse): string {
+ const station = e.camera?.station_name;
+ const gate = e.camera?.location;
+ const location = station && gate ? `${station} ${gate}` : station ?? `카메라 #${e.camera_id}`;
+ const reason = e.reason ?? "기타";
+ return `${location} — ${reason}`;
}
-export default function FalseAlarmList({
- notifications,
- loading,
-}: FalseAlarmListProps) {
+export default function FalseAlarmList({ events, loading }: FalseAlarmListProps) {
return (
+
+ 영상 클립 없음
+
+ )}
+
-
+
{loading ? (
@@ -65,39 +37,28 @@ export default function FalseAlarmList({
))}
- ) : notifications.length === 0 ? (
+ ) : events.length === 0 ? (
최근 오탐 신고
- - 전체보기 -최근 오탐 신고 내역이 없습니다.
) : (
- {notifications.slice(0, 5).map((n) => {
- const isResolved = n.read_at !== null;
- return (
-
diff --git a/frontend/src/components/dashboard/FalseAlarmModal.tsx b/frontend/src/components/dashboard/FalseAlarmModal.tsx
index c6c2d85..72b9bb5 100644
--- a/frontend/src/components/dashboard/FalseAlarmModal.tsx
+++ b/frontend/src/components/dashboard/FalseAlarmModal.tsx
@@ -1,20 +1,3 @@
-/**
- * @file components/dashboard/FalseAlarmModal.tsx
- * @description 오탐신고 모달 컴포넌트
- *
- * ## 기능
- * - 오탐 사유 4가지 라디오 선택 (기타 선택 시 직접 입력)
- * - POST /api/events/{id}/false-alarm { reason, memo? } 호출 후 닫기
- * - AlertItem 또는 EventDetailModal의 오탐신고 버튼으로 진입
- *
- * ## 주의사항
- * - 오탐신고 완료 후 onSubmitted() 콜백으로 DashboardPage/EventsPage의 refresh() 호출
- * - POST /api/events/{id}/false-alarm 백엔드 M2 구현 예정
- *
- * ## 백엔드 확정 후 수정 필요
- * - 요청 바디 필드명 ({ reason, memo? }) 확정 필요
- */
-
import { useState } from "react";
import { X } from "lucide-react";
import type { EventResponse } from "@/types";
@@ -23,7 +6,7 @@ import { reportFalseAlarm } from "@/api/events";
interface FalseAlarmModalProps {
event: EventResponse;
onClose: () => void;
- onSubmitted: () => void;
+ onSubmitted: (reason: string) => void;
}
const REASONS = [
@@ -60,11 +43,8 @@ export default function FalseAlarmModal({
setLoading(true);
try {
const reason = selectedReason === "기타" ? memo.trim() : selectedReason;
- await reportFalseAlarm(event.id, {
- reason,
- memo: selectedReason === "기타" ? memo.trim() : undefined,
- });
- onSubmitted();
+ await reportFalseAlarm(event.id, { reason });
+ onSubmitted(reason);
onClose();
} catch {
setError("오탐 신고 중 오류가 발생했습니다.");
@@ -84,7 +64,9 @@ export default function FalseAlarmModal({
>
{/* 헤더 */}
-
)}
- {isResolved ? (
-
-
-
+ {events.map((e) => (
+ - {getLabel(n)} -
-- {formatRelativeTime(n.sent_at)} ·{" "} - {isResolved ? "오탐 확인" : "검토 중"} -
-
+
+ ))}
+
- );
- })}
+
+
+ + {getLabel(e)} +
++ {formatRelativeTime(e.handled_at ?? e.timestamp)} + {e.reason && ` · ${e.reason}`} +
+
-