gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

release: 2026-03-25 (11건 커밋) #122

병합
dnlee develop 에서 main 로 11 commits 를 머지했습니다 2026-03-25 16:11:07 +09:00
대화 0 커밋 11 파일 변경됨 35 +583 -1
4개의 변경된 파일과 583개의 추가작업 그리고 1개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7a80eaf75e - Show all commits

4
frontend/src/tabs/admin/components/AdminView.tsx
파일 보기

@ -15,6 +15,8 @@ import LayerPanel from './LayerPanel';
import SensitiveLayerPanel from './SensitiveLayerPanel';
import DispersingZonePanel from './DispersingZonePanel';
import MonitorRealtimePanel from './MonitorRealtimePanel';
import MonitorVesselPanel from './MonitorVesselPanel';
import CollectHrPanel from './CollectHrPanel';
/** 기존 패널이 있는 메뉴 ID 매핑 */
const PANEL_MAP: Record<string, () => JSX.Element> = {
@ -34,6 +36,8 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
'social-economy': () => <SensitiveLayerPanel categoryCode="LYR001002002" title="사회/경제" />,
'dispersant-zone': () => <DispersingZonePanel />,
'monitor-realtime': () => <MonitorRealtimePanel />,
'monitor-vessel': () => <MonitorVesselPanel />,
'collect-hr': () => <CollectHrPanel />,
};
export function AdminView() {

333
frontend/src/tabs/admin/components/CollectHrPanel.tsx Normal file
파일 보기

@ -0,0 +1,333 @@
import { useState, useEffect, useCallback } from 'react';
// ─── 타입 ──────────────────────────────────────────────────
interface EtaClct {
startDate: string;
endDate: string;
}
interface ResultClct {
resultDate: string;
count: number;
}
interface HrCollectItem {
id: string;
rootId: string;
ip: string;
depth1: string;
depth2: string;
depth3: string;
depth4: string | null;
clctName: string;
clctType: string;
clctTypeName: string;
trnsmtCycle: string | null;
receiveCycle: string | null;
targetTable: string;
seq: number;
estmtRqrd: string;
activeYn: string;
clctStartDt: string;
clctEndDt: string;
clctDate: string | null;
jobName: string;
resultClctList: ResultClct[];
etaClctList: EtaClct[];
}
// ─── Mock 데이터 ────────────────────────────────────────────
// TODO: 실제 API 연동 시 fetch 호출로 교체
const MOCK_DATA: HrCollectItem[] = [
{
id: '100200',
rootId: '2',
ip: '127.0.0.1',
depth1: '연계',
depth2: '해양경찰청',
depth3: '해경업무포탈시스템(KBP)',
depth4: null,
clctName: '사용자부서',
clctType: '000002',
clctTypeName: '배치',
trnsmtCycle: null,
receiveCycle: '0 20 4 * * *',
targetTable: 'common.t_dept_info',
seq: 101,
estmtRqrd: '1',
activeYn: 'Y',
clctStartDt: '2024-12-16',
clctEndDt: '9999-12-31',
clctDate: '2024-12-16',
jobName: 'DeptJob',
resultClctList: [],
etaClctList: [
{ startDate: '2025-09-12 04:20', endDate: '2025-09-12 04:21' },
],
},
{
id: '100200',
rootId: '2',
ip: '127.0.0.1',
depth1: '연계',
depth2: '해양경찰청',
depth3: '해경업무포탈시스템(KBP)',
depth4: null,
clctName: '사용자계정',
clctType: '000002',
clctTypeName: '배치',
trnsmtCycle: null,
receiveCycle: '0 20 4 * 1 *',
targetTable: 'common.t_usr',
seq: 102,
estmtRqrd: '5',
activeYn: 'Y',
clctStartDt: '2024-12-17',
clctEndDt: '9999-12-31',
clctDate: null,
jobName: 'UserFlowJob',
resultClctList: [],
etaClctList: [],
},
{
id: '100201',
rootId: '2',
ip: '127.0.0.1',
depth1: '연계',
depth2: '해양경찰청',
depth3: '해경업무포탈시스템(KBP)',
depth4: null,
clctName: '사용자직위',
clctType: '000002',
clctTypeName: '배치',
trnsmtCycle: null,
receiveCycle: '0 30 4 * * *',
targetTable: 'common.t_position_info',
seq: 103,
estmtRqrd: '1',
activeYn: 'Y',
clctStartDt: '2024-12-16',
clctEndDt: '9999-12-31',
clctDate: '2025-01-10',
jobName: 'PositionJob',
resultClctList: [{ resultDate: '2025-09-12 04:30', count: 42 }],
etaClctList: [
{ startDate: '2025-09-12 04:30', endDate: '2025-09-12 04:31' },
],
},
{
id: '100202',
rootId: '2',
ip: '127.0.0.1',
depth1: '연계',
depth2: '해양경찰청',
depth3: '해경업무포탈시스템(KBP)',
depth4: null,
clctName: '조직정보',
clctType: '000002',
clctTypeName: '배치',
trnsmtCycle: null,
receiveCycle: '0 40 4 * * *',
targetTable: 'common.t_org_info',
seq: 104,
estmtRqrd: '2',
activeYn: 'Y',
clctStartDt: '2024-12-18',
clctEndDt: '9999-12-31',
clctDate: '2025-03-20',
jobName: 'OrgJob',
resultClctList: [{ resultDate: '2025-09-12 04:40', count: 15 }],
etaClctList: [
{ startDate: '2025-09-12 04:40', endDate: '2025-09-12 04:41' },
],
},
{
id: '100203',
rootId: '2',
ip: '127.0.0.1',
depth1: '연계',
depth2: '해양경찰청',
depth3: '해경업무포탈시스템(KBP)',
depth4: null,
clctName: '근무상태',
clctType: '000002',
clctTypeName: '배치',
trnsmtCycle: null,
receiveCycle: '0 0 5 * * *',
targetTable: 'common.t_work_status',
seq: 105,
estmtRqrd: '3',
activeYn: 'N',
clctStartDt: '2025-01-15',
clctEndDt: '9999-12-31',
clctDate: null,
jobName: 'WorkStatusJob',
resultClctList: [],
etaClctList: [],
},
];
function fetchHrCollectData(): Promise<HrCollectItem[]> {
return new Promise((resolve) => {
setTimeout(() => resolve(MOCK_DATA), 300);
});
}
// ─── 상태 뱃지 ─────────────────────────────────────────────
function getCollectStatus(item: HrCollectItem): { label: string; color: string } {
if (item.activeYn !== 'Y') {
return { label: '비활성', color: 'text-t3 bg-bg-2' };
}
if (item.etaClctList.length > 0) {
return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
}
return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
}
// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
function formatCron(cron: string | null): string {
if (!cron) return '-';
const parts = cron.split(' ');
if (parts.length < 6) return cron;
const [sec, min, hour, , , ] = parts;
return `매일 ${hour}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`;
}
// ─── 테이블 ─────────────────────────────────────────────────
const HEADERS = ['번호', '수집항목', '기관', '시스템', '유형', '수집주기', '대상테이블', 'Job명', '활성', '수집시작일', '최근수집일', '상태'];
function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
{HEADERS.map((h) => (
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
))}
</tr>
</thead>
<tbody>
{loading && rows.length === 0
? Array.from({ length: 5 }).map((_, i) => (
<tr key={i} className="border-b border-border-1 animate-pulse">
{HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-2 rounded w-14" />
</td>
))}
</tr>
))
: rows.map((row, idx) => {
const status = getCollectStatus(row);
return (
<tr key={`${row.seq}`} className="border-b border-border-1 hover:bg-bg-1/50">
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.clctName}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth2}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth3}</td>
<td className="px-3 py-2 text-t2">{row.clctTypeName}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{formatCron(row.receiveCycle)}</td>
<td className="px-3 py-2 text-t2 font-mono">{row.targetTable}</td>
<td className="px-3 py-2 text-t2 font-mono">{row.jobName}</td>
<td className="px-3 py-2 text-center">
<span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${
row.activeYn === 'Y' ? 'text-emerald-400 bg-emerald-500/10' : 'text-t3 bg-bg-2'
}`}>
{row.activeYn === 'Y' ? 'Y' : 'N'}
</span>
</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctStartDt}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctDate ?? '-'}</td>
<td className="px-3 py-2">
<span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${status.color}`}>
{status.label}
</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
// ─── 메인 패널 ──────────────────────────────────────────────
export default function CollectHrPanel() {
const [rows, setRows] = useState<HrCollectItem[]>([]);
const [loading, setLoading] = useState(false);
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
const fetchData = useCallback(async () => {
setLoading(true);
const data = await fetchHrCollectData();
setRows(data);
setLoading(false);
setLastUpdate(new Date());
}, []);
useEffect(() => {
let isMounted = true;
if (rows.length === 0) {
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
}
return () => { isMounted = false; };
}, [rows.length, fetchData]);
const activeCount = rows.filter((r) => r.activeYn === 'Y').length;
const completedCount = rows.filter((r) => r.etaClctList.length > 0).length;
return (
<div className="flex flex-col h-full overflow-hidden">
{/* 헤더 */}
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
<h2 className="text-sm font-semibold text-t1">인사정보 수집 현황</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
</span>
)}
<button
onClick={fetchData}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
새로고침
</button>
</div>
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
수집 완료 {completedCount}건
</span>
<span className="text-xs text-t3">
전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
</span>
</div>
{/* 테이블 */}
<div className="flex-1 overflow-auto p-5">
<HrTable rows={rows} loading={loading} />
</div>
</div>
);
}

246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx Normal file
파일 보기

@ -0,0 +1,246 @@
import { useState, useEffect, useCallback } from 'react';
// TODO: 실제 API 연동 시 fetch 호출로 교체
interface VesselMonitorRow {
institution: string;
institutionCode: string;
systemName: string;
linkInfo: string;
storagePlace: string;
linkMethod: string;
collectionCycle: string;
collectionCount: string;
isNormal: boolean;
lastMessageTime: string;
}
/** 기관코드 → 원천기관명 매핑 */
const INSTITUTION_NAMES: Record<string, string> = {
BS: '부산항',
BSN: '부산신항',
DH: '동해안',
DS: '대산항',
GI: '경인항',
GIC: '경인연안',
GS: '군산항',
IC: '인천항',
JDC: '진도연안',
JJ: '제주항',
MP: '목포항',
};
/** Mock 데이터 정의 (스크린샷 기반) */
const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
{ institutionCode: 'BS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '439 / 499', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'BS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 463', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'BSN', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '255 / 278', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'BSN', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 426', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'DH', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'DH', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'DS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:57' },
{ institutionCode: 'DS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:56' },
{ institutionCode: 'GI', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '120 / 136', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'GI', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 467', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'GIC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '180 / 216', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'GIC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'GS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'GS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'IC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '149 / 176', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'IC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 503', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'JDC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '433 / 524', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'JDC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '256 / 1619', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'JJ', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '429 / 508', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'JJ', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '160 / 1592', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
{ institutionCode: 'MP', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
{ institutionCode: 'MP', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
];
/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
return new Promise((resolve) => {
setTimeout(() => {
const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
...d,
institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
}));
resolve(rows);
}, 400);
});
}
/* ── 상태 뱃지 ── */
function StatusBadge({ loading, onCount, total }: { loading: boolean; onCount: number; total: number }) {
if (loading) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
조회 중...
</span>
);
}
const offCount = total - onCount;
if (offCount === total) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
전체 OFF
</span>
);
}
if (offCount > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
일부 OFF ({offCount}/{total})
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
전체 정상
</span>
);
}
/* ── 연결상태 셀 ── */
function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) {
if (isNormal) {
return (
<div className="flex flex-col items-start gap-0.5">
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-blue-600 text-white">
ON
</span>
{lastMessageTime && (
<span className="text-[10px] text-t3">{lastMessageTime}</span>
)}
</div>
);
}
return (
<div className="flex flex-col items-start gap-0.5">
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-orange-500 text-white">
OFF
</span>
{lastMessageTime && (
<span className="text-[10px] text-t3">{lastMessageTime}</span>
)}
</div>
);
}
/* ── 테이블 ── */
const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태'];
function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
{HEADERS.map((h) => (
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
))}
</tr>
</thead>
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-border-1 animate-pulse">
{HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-2 rounded w-14" />
</td>
))}
</tr>
))
: rows.map((row, idx) => (
<tr key={`${row.institutionCode}-${row.systemName}`} className="border-b border-border-1 hover:bg-bg-1/50">
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.institution}</td>
<td className="px-3 py-2 text-t2">{row.institutionCode}</td>
<td className="px-3 py-2 text-t2">{row.systemName}</td>
<td className="px-3 py-2 text-t2">{row.linkInfo}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
<td className="px-3 py-2 text-t2">{row.linkMethod}</td>
<td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
<td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
<td className="px-3 py-2">
<ConnectionBadge isNormal={row.isNormal} lastMessageTime={row.lastMessageTime} />
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
/* ── 메인 패널 ── */
export default function MonitorVesselPanel() {
const [rows, setRows] = useState<VesselMonitorRow[]>([]);
const [loading, setLoading] = useState(false);
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
const fetchData = useCallback(async () => {
setLoading(true);
const data = await fetchVesselMonitorData();
setRows(data);
setLoading(false);
setLastUpdate(new Date());
}, []);
useEffect(() => {
let isMounted = true;
if (rows.length === 0) {
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
}
return () => { isMounted = false; };
}, [rows.length, fetchData]);
const onCount = rows.filter((r) => r.isNormal).length;
return (
<div className="flex flex-col h-full overflow-hidden">
{/* 헤더 */}
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
<h2 className="text-sm font-semibold text-t1">선박위치정보 모니터링</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
</span>
)}
<button
onClick={fetchData}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
새로고침
</button>
</div>
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
<StatusBadge loading={loading} onCount={onCount} total={rows.length} />
<span className="text-xs text-t3">
연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
</span>
</div>
{/* 테이블 */}
<div className="flex-1 overflow-auto p-5">
<VesselTable rows={rows} loading={loading} />
</div>
</div>
);
}

1
frontend/src/tabs/admin/components/adminMenuConfig.ts
파일 보기

@ -74,7 +74,6 @@ export const ADMIN_MENU: AdminMenuItem[] = [
{ id: 'monitor-realtime', label: '실시간 관측자료' },
{ id: 'monitor-forecast', label: '수치예측자료' },
{ id: 'monitor-vessel', label: '선박위치정보' },
{ id: 'monitor-hr', label: '인사' },
],
},
],