diff --git a/frontend/src/tabs/admin/components/AdminView.tsx b/frontend/src/tabs/admin/components/AdminView.tsx index be9e70b..df9a5d1 100755 --- a/frontend/src/tabs/admin/components/AdminView.tsx +++ b/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 JSX.Element> = { @@ -34,6 +36,8 @@ const PANEL_MAP: Record JSX.Element> = { 'social-economy': () => , 'dispersant-zone': () => , 'monitor-realtime': () => , + 'monitor-vessel': () => , + 'collect-hr': () => , }; export function AdminView() { diff --git a/frontend/src/tabs/admin/components/CollectHrPanel.tsx b/frontend/src/tabs/admin/components/CollectHrPanel.tsx new file mode 100644 index 0000000..f68f62d --- /dev/null +++ b/frontend/src/tabs/admin/components/CollectHrPanel.tsx @@ -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 { + 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 ( +
+ + + + {HEADERS.map((h) => ( + + ))} + + + + {loading && rows.length === 0 + ? Array.from({ length: 5 }).map((_, i) => ( + + {HEADERS.map((_, j) => ( + + ))} + + )) + : rows.map((row, idx) => { + const status = getCollectStatus(row); + return ( + + + + + + + + + + + + + + + ); + })} + +
{h}
+
+
{idx + 1}{row.clctName}{row.depth2}{row.depth3}{row.clctTypeName}{formatCron(row.receiveCycle)}{row.targetTable}{row.jobName} + + {row.activeYn === 'Y' ? 'Y' : 'N'} + + {row.clctStartDt}{row.clctDate ?? '-'} + + {status.label} + +
+
+ ); +} + +// ─── 메인 패널 ────────────────────────────────────────────── + +export default function CollectHrPanel() { + const [rows, setRows] = useState([]); + const [loading, setLoading] = useState(false); + const [lastUpdate, setLastUpdate] = useState(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 ( +
+ {/* 헤더 */} +
+

인사정보 수집 현황

+
+ {lastUpdate && ( + + 갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })} + + )} + +
+
+ + {/* 상태 표시줄 */} +
+ + + 수집 완료 {completedCount}건 + + + 전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount}) + +
+ + {/* 테이블 */} +
+ +
+
+ ); +} diff --git a/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx b/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx new file mode 100644 index 0000000..bcee5ca --- /dev/null +++ b/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx @@ -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 = { + BS: '부산항', + BSN: '부산신항', + DH: '동해안', + DS: '대산항', + GI: '경인항', + GIC: '경인연안', + GS: '군산항', + IC: '인천항', + JDC: '진도연안', + JJ: '제주항', + MP: '목포항', +}; + +/** Mock 데이터 정의 (스크린샷 기반) */ +const MOCK_DATA: Omit[] = [ + { 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 { + 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 ( + + + 조회 중... + + ); + } + const offCount = total - onCount; + if (offCount === total) { + return ( + + + 전체 OFF + + ); + } + if (offCount > 0) { + return ( + + + 일부 OFF ({offCount}/{total}) + + ); + } + return ( + + + 전체 정상 + + ); +} + +/* ── 연결상태 셀 ── */ +function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) { + if (isNormal) { + return ( +
+ + ON + + {lastMessageTime && ( + {lastMessageTime} + )} +
+ ); + } + return ( +
+ + OFF + + {lastMessageTime && ( + {lastMessageTime} + )} +
+ ); +} + +/* ── 테이블 ── */ +const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태']; + +function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) { + return ( +
+ + + + {HEADERS.map((h) => ( + + ))} + + + + {loading && rows.length === 0 + ? Array.from({ length: 8 }).map((_, i) => ( + + {HEADERS.map((_, j) => ( + + ))} + + )) + : rows.map((row, idx) => ( + + + + + + + + + + + + + ))} + +
{h}
+
+
{idx + 1}{row.institution}{row.institutionCode}{row.systemName}{row.linkInfo}{row.storagePlace}{row.linkMethod}{row.collectionCycle}{row.collectionCount} + +
+
+ ); +} + +/* ── 메인 패널 ── */ +export default function MonitorVesselPanel() { + const [rows, setRows] = useState([]); + const [loading, setLoading] = useState(false); + const [lastUpdate, setLastUpdate] = useState(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 ( +
+ {/* 헤더 */} +
+

선박위치정보 모니터링

+
+ {lastUpdate && ( + + 갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })} + + )} + +
+
+ + {/* 상태 표시줄 */} +
+ + + 연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount}) + +
+ + {/* 테이블 */} +
+ +
+
+ ); +} diff --git a/frontend/src/tabs/admin/components/adminMenuConfig.ts b/frontend/src/tabs/admin/components/adminMenuConfig.ts index 4bb3863..48d3593 100644 --- a/frontend/src/tabs/admin/components/adminMenuConfig.ts +++ b/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: '인사' }, ], }, ],