htlee
2534faa488
- frontend/ 폴더로 프론트엔드 전체 이관 - signal-batch API 연동 (한국 선박 위치 데이터) - Tailwind CSS 4 + CSS 변수 테마 토큰 (dark/light) - i18next 다국어 (ko/en) 인프라 + 28개 컴포넌트 적용 - 레이어 패널 트리 구조 재설계 (카테고리별 온/오프, 범례) - Google OAuth 로그인 화면 + DEV LOGIN 우회 - 외부 API CORS 프록시 전환 (Airplanes.live, OpenSky, CelesTrak) - ShipLayer 이미지 탭 전환 (signal-batch / MarineTraffic) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
754 lines
37 KiB
TypeScript
754 lines
37 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import type { GeoEvent, Ship } from '../types';
|
|
import type { OsintItem } from '../services/osint';
|
|
|
|
type DashboardTab = 'iran' | 'korea';
|
|
|
|
interface Props {
|
|
events: GeoEvent[];
|
|
currentTime: number;
|
|
totalShipCount: number;
|
|
koreanShips: Ship[];
|
|
koreanShipsByCategory: Record<string, number>;
|
|
chineseShips?: Ship[];
|
|
osintFeed?: OsintItem[];
|
|
isLive?: boolean;
|
|
dashboardTab?: DashboardTab;
|
|
onTabChange?: (tab: DashboardTab) => void;
|
|
ships?: Ship[];
|
|
}
|
|
|
|
// ═══ 속보 / 트럼프 발언 + 유가·에너지 뉴스 ═══
|
|
interface BreakingNews {
|
|
id: string;
|
|
timestamp: number;
|
|
category: 'trump' | 'oil' | 'diplomacy' | 'economy';
|
|
headline: string;
|
|
detail?: string;
|
|
}
|
|
|
|
const T0_NEWS = new Date('2026-03-01T12:01:00Z').getTime();
|
|
const HOUR_MS = 3600_000;
|
|
const DAY_MS = 24 * HOUR_MS;
|
|
const _MIN_MS = 60_000;
|
|
|
|
const BREAKING_NEWS: BreakingNews[] = [
|
|
// DAY 1
|
|
{
|
|
id: 'bn1', timestamp: T0_NEWS - 11 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "이란 정권 제거 작전 개시"',
|
|
detail: '백악관 긴급 브리핑. "미국은 이란의 핵위협을 더 이상 용납하지 않겠다."',
|
|
},
|
|
{
|
|
id: 'bn2', timestamp: T0_NEWS - 8 * HOUR_MS,
|
|
category: 'oil', headline: 'WTI 원유 $140 돌파 — 호르무즈 해협 봉쇄 우려',
|
|
detail: '브렌트유 $145, 아시아 선물시장 급등. 호르무즈 해협 통과 원유 일일 2,100만 배럴.',
|
|
},
|
|
{
|
|
id: 'bn3', timestamp: T0_NEWS - 3 * HOUR_MS,
|
|
category: 'oil', headline: '호르무즈 해협 봉쇄 선언 — 유가 40% 급등',
|
|
detail: 'IRGC 해군 해협 봉쇄. WTI $165, 브렌트 $170. 글로벌 공급망 마비 우려.',
|
|
},
|
|
{
|
|
id: 'bn4', timestamp: T0_NEWS + 2 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "이란은 매우 큰 대가를 치를 것"',
|
|
detail: '알우데이드 미군 3명 전사 확인 후 성명. "미국 군인에 대한 공격은 10배로 갚겠다."',
|
|
},
|
|
{
|
|
id: 'bn5', timestamp: T0_NEWS + 4 * HOUR_MS,
|
|
category: 'oil', headline: 'WTI $180 돌파 — 사상 최고가 경신',
|
|
detail: '이란 보복 공격으로 걸프 원유 수출 완전 중단. S&P 500 -7% 서킷브레이커.',
|
|
},
|
|
{
|
|
id: 'bn6', timestamp: T0_NEWS + 6 * HOUR_MS,
|
|
category: 'economy', headline: '미 국방부: "2,000명 추가 병력 중동 긴급 배치"',
|
|
detail: '제82공수사단 신속대응여단 카타르행. 추가 패트리어트 포대 배치.',
|
|
},
|
|
{
|
|
id: 'bn7', timestamp: T0_NEWS + 10 * HOUR_MS,
|
|
category: 'economy', headline: '한국 비상 에너지 대책 — 전략비축유 방출 검토',
|
|
detail: '산업부, 유류비 급등 대응 비상대책 발표. 걸프 한국 교민 대피 명령.',
|
|
},
|
|
|
|
// DAY 2
|
|
{
|
|
id: 'bn8', timestamp: T0_NEWS + 1 * DAY_MS,
|
|
category: 'oil', headline: 'WTI $185 — 호르무즈 기뢰 추가 배치',
|
|
detail: 'IRGC 해협 기뢰 추가 설치. 보험료 1,000% 급등, 유조선 통행 사실상 중단.',
|
|
},
|
|
{
|
|
id: 'bn9', timestamp: T0_NEWS + 1 * DAY_MS + 6 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "이란 석유시설 전면 타격 승인"',
|
|
detail: '"이란이 해협을 닫으면 우리는 이란의 모든 석유시설을 파괴할 것."',
|
|
},
|
|
{
|
|
id: 'bn10', timestamp: T0_NEWS + 1 * DAY_MS + 10 * HOUR_MS,
|
|
category: 'economy', headline: 'IEA 긴급 비축유 방출 — 6,000만 배럴',
|
|
detail: 'IEA 회원국 전략비축유 협조 방출 합의. 미국 3,000만 배럴 선도 방출.',
|
|
},
|
|
|
|
// DAY 3
|
|
{
|
|
id: 'bn11', timestamp: T0_NEWS + 2 * DAY_MS,
|
|
category: 'oil', headline: '호르무즈 유조선 기뢰 접촉 — 원유 유출',
|
|
detail: '그리스 VLCC "아테나 글로리" 기뢰 접촉. 200만 배럴 유출 위기. WTI $190.',
|
|
},
|
|
{
|
|
id: 'bn12', timestamp: T0_NEWS + 2 * DAY_MS + 6 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "해군에 호르무즈 기뢰 제거 명령"',
|
|
detail: '"미 해군 소해정 부대 투입. 해협 72시간 내 재개방 목표."',
|
|
},
|
|
{
|
|
id: 'bn13', timestamp: T0_NEWS + 2 * DAY_MS + 10 * HOUR_MS,
|
|
category: 'economy', headline: '한국 선박 12척 오만만 긴급 대피',
|
|
detail: '청해부대 호위 하 호르무즈 인근 한국 선박 대피. 해운업계 손실 하루 2,000억원.',
|
|
},
|
|
|
|
// DAY 4
|
|
{
|
|
id: 'bn14', timestamp: T0_NEWS + 3 * DAY_MS,
|
|
category: 'oil', headline: 'WTI $195 — 헤즈볼라 하이파 정유시설 타격',
|
|
detail: '이스라엘 하이파 정유시설 화재. 중동 전면전 우려 극대화.',
|
|
},
|
|
{
|
|
id: 'bn15', timestamp: T0_NEWS + 3 * DAY_MS + 8 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "디모나 공격은 레드라인 — 핵옵션 배제 안 해"',
|
|
detail: '디모나 핵시설 인근 피격 후 강경 성명. 세계 핵전쟁 공포 확산.',
|
|
},
|
|
|
|
// DAY 5
|
|
{
|
|
id: 'bn16', timestamp: T0_NEWS + 4 * DAY_MS,
|
|
category: 'economy', headline: '이란 사이버공격 — 이스라엘 전력망 마비',
|
|
detail: '이란 APT, 이스라엘 전력망 해킹. 텔아비브 일대 12시간 정전.',
|
|
},
|
|
{
|
|
id: 'bn17', timestamp: T0_NEWS + 4 * DAY_MS + 4 * HOUR_MS,
|
|
category: 'oil', headline: 'WTI $200 돌파 — 사우디 라스타누라 드론 피격',
|
|
detail: '사우디 최대 석유수출터미널 피격. 글로벌 석유 공급 일 500만 배럴 감소.',
|
|
},
|
|
{
|
|
id: 'bn18', timestamp: T0_NEWS + 4 * DAY_MS + 8 * HOUR_MS,
|
|
category: 'economy', headline: '한국 비상경제대책 발동 — 전략비축유 방출 개시',
|
|
detail: '유류비 급등 대응 비상대책. 비축유 500만 배럴 방출. 주유소 가격 L당 2,800원 돌파.',
|
|
},
|
|
|
|
// DAY 6
|
|
{
|
|
id: 'bn19', timestamp: T0_NEWS + 5 * DAY_MS,
|
|
category: 'oil', headline: '이란 항모전단 공격 — WTI $210',
|
|
detail: 'IRGC 대함미사일 발사, 이지스 전탄 요격. 해상보험료 역사적 최고치.',
|
|
},
|
|
{
|
|
id: 'bn20', timestamp: T0_NEWS + 5 * DAY_MS + 4 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "이란 해군 완전히 소탕하겠다"',
|
|
detail: '"페르시아만에서 이란 함정이 하나도 남지 않을 때까지 작전 지속."',
|
|
},
|
|
|
|
// DAY 7
|
|
{
|
|
id: 'bn21', timestamp: T0_NEWS + 6 * DAY_MS + 4 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "48시간 최후통첩 — 정권교체 불사"',
|
|
detail: '"이란이 48시간 내 미사일 발사를 중단하지 않으면 정권 교체 작전을 개시하겠다."',
|
|
},
|
|
{
|
|
id: 'bn22', timestamp: T0_NEWS + 6 * DAY_MS + 8 * HOUR_MS,
|
|
category: 'oil', headline: 'WTI $195 소폭 하락 — 휴전 기대감',
|
|
detail: '트럼프 최후통첩 후 휴전 기대감. 그러나 IRGC 거부 성명으로 다시 반등.',
|
|
},
|
|
|
|
// DAY 8
|
|
{
|
|
id: 'bn23', timestamp: T0_NEWS + 7 * DAY_MS,
|
|
category: 'diplomacy', headline: 'ICRC: "중동 인도적 위기 — 이란 의약품 고갈"',
|
|
detail: '이란 내 의약품·식수 부족 심각. 이스라엘·바레인 민간인 사상자 수천 명.',
|
|
},
|
|
{
|
|
id: 'bn24', timestamp: T0_NEWS + 7 * DAY_MS + 6 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "이란 정보부 본부도 파괴 — 끝까지 간다"',
|
|
detail: 'B-2 이란 정보부(VAJA) 타격 후 성명. "이란에 남은 건 항복뿐."',
|
|
},
|
|
{
|
|
id: 'bn25', timestamp: T0_NEWS + 7 * DAY_MS + 10 * HOUR_MS,
|
|
category: 'economy', headline: '한국 교민 350명 두바이 경유 긴급 귀국',
|
|
detail: '군 수송기 투입. 청해부대 한국 선박 호위 지속. 해운업계 일 3,000억원 손실.',
|
|
},
|
|
|
|
// DAY 9
|
|
{
|
|
id: 'bn26', timestamp: T0_NEWS + 8 * DAY_MS,
|
|
category: 'diplomacy', headline: '러시아, 이란에 휴전 수용 비공식 권고',
|
|
detail: '푸틴, 추가 무기 지원 거부. 이란 고립 심화.',
|
|
},
|
|
{
|
|
id: 'bn27', timestamp: T0_NEWS + 8 * DAY_MS + 4 * HOUR_MS,
|
|
category: 'oil', headline: '이란 미사일 재고 80% 소진 — WTI $180으로 하락',
|
|
detail: '미 정보기관 분석 공개. 이란 잔존 이동식 발사대 10기 이하.',
|
|
},
|
|
{
|
|
id: 'bn28', timestamp: T0_NEWS + 8 * DAY_MS + 8 * HOUR_MS,
|
|
category: 'trump', headline: '트럼프: "나탄즈 완전 파괴 — 이란 핵프로그램 종식"',
|
|
detail: '"이란의 핵 야망은 영원히 끝났다. 역사가 나를 기억할 것."',
|
|
},
|
|
{
|
|
id: 'bn29', timestamp: T0_NEWS + 8 * DAY_MS + 10 * HOUR_MS,
|
|
category: 'diplomacy', headline: 'UN 72시간 인도적 휴전 결의안 채택',
|
|
detail: '안보리 찬성 13, 기권 2. 미국·이란 모두 입장 미정.',
|
|
},
|
|
{
|
|
id: 'bn30', timestamp: T0_NEWS + 8 * DAY_MS + 12 * HOUR_MS,
|
|
category: 'economy', headline: '한국 NSC: "에너지 비상계획 수립 — 비축유 90일분"',
|
|
detail: '호르무즈 봉쇄 장기화 대비. LNG 대체수입선 확보 논의.',
|
|
},
|
|
];
|
|
|
|
// ═══ 한국 전용 속보 (리플레이) ═══
|
|
const BREAKING_NEWS_KR: BreakingNews[] = [
|
|
// DAY 1
|
|
{ id: 'kr1', timestamp: T0_NEWS - 6 * HOUR_MS, category: 'economy', headline: '한국 NSC 긴급소집 — 호르무즈 사태 대응 논의', detail: '외교·국방·산업부 장관 참석. 교민 보호·에너지 수급 점검.' },
|
|
{ id: 'kr2', timestamp: T0_NEWS + 2 * HOUR_MS, category: 'economy', headline: '코스피 -4.2% 급락 — 유가 폭등 충격', detail: '한국 원유 수입의 70% 호르무즈 해협 경유. 정유·항공·운송주 급락.' },
|
|
{ id: 'kr3', timestamp: T0_NEWS + 6 * HOUR_MS, category: 'oil', headline: '국내 유가 L당 2,200원 돌파 — 주유소 대란 시작', detail: '수도권 주유소 재고 부족 속출. 산업부 긴급 유류 배급 체계 가동 검토.' },
|
|
{ id: 'kr4', timestamp: T0_NEWS + 10 * HOUR_MS, category: 'economy', headline: '한국 전략비축유 방출 검토 — 산업부 비상대책', detail: '걸프 한국 교민 대피 명령. 청해부대 한국 선박 호위 태세.' },
|
|
|
|
// DAY 2
|
|
{ id: 'kr5', timestamp: T0_NEWS + 1 * DAY_MS, category: 'oil', headline: '한국행 원유 탱커 5척 오만만 대기 — 통행 불가', detail: 'VLCC 5척(250만 배럴) 호르무즈 해협 진입 불가. 정유사 원유 재고 2주분.' },
|
|
{ id: 'kr6', timestamp: T0_NEWS + 1 * DAY_MS + 8 * HOUR_MS, category: 'economy', headline: '현대·삼성중공업 조선 수주 취소 우려 — 해운보험료 급등', detail: '걸프 향 선박 보험료 1,000% 인상. 해운업계 일 2,000억원 손실.' },
|
|
|
|
// DAY 3
|
|
{ id: 'kr7', timestamp: T0_NEWS + 2 * DAY_MS, category: 'economy', headline: '한국 교민 1,200명 UAE·카타르 대피 중', detail: '외교부 특별기 2대 투입. 청해부대 ROKS 최영함 한국 선박 호위.' },
|
|
{ id: 'kr8', timestamp: T0_NEWS + 2 * DAY_MS + 10 * HOUR_MS, category: 'oil', headline: '한국 정유사 가동률 70% 감축 — 원유 부족', detail: 'SK에너지·GS칼텍스·에쓰오일 감산. LPG·석유화학 제품 공급 차질.' },
|
|
|
|
// DAY 4
|
|
{ id: 'kr9', timestamp: T0_NEWS + 3 * DAY_MS, category: 'economy', headline: '코스피 -8.5% — 서킷브레이커 발동', detail: '외국인 6조원 순매도. 원/달러 1,550원 돌파. 한국 CDS 급등.' },
|
|
{ id: 'kr10', timestamp: T0_NEWS + 3 * DAY_MS + 6 * HOUR_MS, category: 'oil', headline: '한국, 미국·캐나다 긴급 원유 도입 협상', detail: '비(非)호르무즈 경유 원유 확보. 미 전략비축유 한국 우선배분 요청.' },
|
|
|
|
// DAY 5
|
|
{ id: 'kr11', timestamp: T0_NEWS + 4 * DAY_MS, category: 'economy', headline: '한국 비상경제대책 발동 — 전략비축유 500만 배럴 방출', detail: '주유소 가격 L당 2,800원 돌파. 택시·화물차 운행 감축 논의.' },
|
|
{ id: 'kr12', timestamp: T0_NEWS + 4 * DAY_MS + 8 * HOUR_MS, category: 'diplomacy', headline: '한국 외교부, 이란에 교민 안전 보장 요청', detail: '이란 주재 한국대사관 최소 인원 운영. 한국인 체류자 150명 잔류.' },
|
|
|
|
// DAY 6
|
|
{ id: 'kr13', timestamp: T0_NEWS + 5 * DAY_MS, category: 'oil', headline: '한국 LNG 긴급 수입 — 호주·카타르 장기계약 가동', detail: 'LNG 스팟 가격 MMBtu $35 돌파. 가스공사 비축량 2주분.' },
|
|
{ id: 'kr14', timestamp: T0_NEWS + 5 * DAY_MS + 6 * HOUR_MS, category: 'economy', headline: '한국 해운 3사 호르무즈 회항 — 희망봉 우회', detail: 'HMM·팬오션·대한해운 전 선박 희망봉 우회. 운항 일수 +14일, 비용 +40%.' },
|
|
|
|
// DAY 7
|
|
{ id: 'kr15', timestamp: T0_NEWS + 6 * DAY_MS, category: 'economy', headline: '한국 제조업 PMI 42.1 — 3년 최저', detail: '석유화학·철강·자동차 부품 공급 차질. 수출 전년비 -15% 전망.' },
|
|
{ id: 'kr16', timestamp: T0_NEWS + 6 * DAY_MS + 8 * HOUR_MS, category: 'diplomacy', headline: '한미 정상 긴급통화 — 에너지 안보 협력 강화', detail: '미국, 한국에 전략비축유 500만 배럴 추가 배분. 원유 수송 해군 호위 합의.' },
|
|
|
|
// DAY 8
|
|
{ id: 'kr17', timestamp: T0_NEWS + 7 * DAY_MS, category: 'economy', headline: '한국 교민 350명 두바이 경유 긴급 귀국', detail: '군 수송기 C-130J 2대 투입. 청해부대 한국 선박 호위 지속.' },
|
|
{ id: 'kr18', timestamp: T0_NEWS + 7 * DAY_MS + 8 * HOUR_MS, category: 'oil', headline: '한국 원유 비축 45일분으로 감소 — 경고 수준', detail: 'IEA 권고 90일 대비 절반. 추가 긴축 조치 불가피.' },
|
|
|
|
// DAY 9
|
|
{ id: 'kr19', timestamp: T0_NEWS + 8 * DAY_MS, category: 'diplomacy', headline: '한국, UN 휴전 결의안 공동 발의', detail: '인도적 위기 해소와 호르무즈 재개방을 위한 72시간 휴전 촉구.' },
|
|
{ id: 'kr20', timestamp: T0_NEWS + 8 * DAY_MS + 12 * HOUR_MS, category: 'economy', headline: '한국 NSC: "에너지 비상계획 수립 — 비축유 90일분 목표"', detail: '호르무즈 봉쇄 장기화 대비. LNG 대체수입선 확보 논의.' },
|
|
];
|
|
|
|
const TYPE_LABELS: Record<GeoEvent['type'], string> = {
|
|
airstrike: 'STRIKE',
|
|
explosion: 'EXPLOSION',
|
|
missile_launch: 'LAUNCH',
|
|
intercept: 'INTERCEPT',
|
|
alert: 'ALERT',
|
|
impact: 'IMPACT',
|
|
osint: 'OSINT',
|
|
};
|
|
|
|
const TYPE_COLORS: Record<GeoEvent['type'], string> = {
|
|
airstrike: 'var(--kcg-event-airstrike)',
|
|
explosion: 'var(--kcg-event-explosion)',
|
|
missile_launch: 'var(--kcg-event-missile)',
|
|
intercept: 'var(--kcg-event-intercept)',
|
|
alert: 'var(--kcg-event-alert)',
|
|
impact: 'var(--kcg-event-impact)',
|
|
osint: 'var(--kcg-event-osint)',
|
|
};
|
|
|
|
// MarineTraffic-style ship type classification
|
|
function getShipMTCategory(typecode?: string, category?: string): string {
|
|
if (!typecode) {
|
|
if (category === 'tanker') return 'tanker';
|
|
if (category === 'cargo') return 'cargo';
|
|
if (category === 'destroyer' || category === 'warship' || category === 'carrier' || category === 'patrol') return 'military';
|
|
return 'unspecified';
|
|
}
|
|
const code = typecode.toUpperCase();
|
|
if (code === 'VLCC' || code === 'LNG' || code === 'LPG') return 'tanker';
|
|
if (code === 'CONT' || code === 'BULK') return 'cargo';
|
|
if (code === 'DDH' || code === 'DDG' || code === 'CVN' || code === 'FFG' || code === 'LCS' || code === 'MCM' || code === 'PC') return 'military';
|
|
if (code.startsWith('A1')) return 'tanker';
|
|
if (code.startsWith('A2') || code.startsWith('A3')) return 'cargo';
|
|
if (code.startsWith('B')) return 'passenger';
|
|
if (code.startsWith('C')) return 'fishing';
|
|
if (code.startsWith('D') || code.startsWith('E')) return 'tug_special';
|
|
return 'unspecified';
|
|
}
|
|
|
|
// MarineTraffic-style category colors (labels come from i18n)
|
|
const MT_CATEGORY_COLORS: Record<string, string> = {
|
|
cargo: '#8bc34a',
|
|
tanker: '#e91e63',
|
|
passenger: '#2196f3',
|
|
high_speed: '#ff9800',
|
|
tug_special: '#00bcd4',
|
|
fishing: '#ff5722',
|
|
pleasure: '#9c27b0',
|
|
military: '#607d8b',
|
|
unspecified: '#9e9e9e',
|
|
};
|
|
|
|
const NEWS_CATEGORY_ICONS: Record<BreakingNews['category'], string> = {
|
|
trump: '\u{1F1FA}\u{1F1F8}',
|
|
oil: '\u{1F6E2}\u{FE0F}',
|
|
diplomacy: '\u{1F310}',
|
|
economy: '\u{1F4CA}',
|
|
};
|
|
|
|
// OSINT category icons (labels come from i18n)
|
|
const OSINT_CAT_ICONS: Record<string, string> = {
|
|
military: '\u{1F3AF}',
|
|
oil: '\u{1F6E2}',
|
|
diplomacy: '\u{1F310}',
|
|
shipping: '\u{1F6A2}',
|
|
nuclear: '\u{2622}',
|
|
maritime_accident: '\u{1F6A8}',
|
|
fishing: '\u{1F41F}',
|
|
maritime_traffic: '\u{1F6A2}',
|
|
general: '\u{1F4F0}',
|
|
};
|
|
|
|
// OSINT category colors
|
|
const OSINT_CAT_COLORS: Record<string, string> = {
|
|
military: '#ef4444',
|
|
oil: '#f59e0b',
|
|
diplomacy: '#8b5cf6',
|
|
shipping: '#06b6d4',
|
|
nuclear: '#f97316',
|
|
maritime_accident: '#ef4444',
|
|
fishing: '#22c55e',
|
|
maritime_traffic: '#3b82f6',
|
|
general: '#6b7280',
|
|
};
|
|
|
|
// NEWS category colors
|
|
const NEWS_CATEGORY_COLORS: Record<BreakingNews['category'], string> = {
|
|
trump: '#ef4444',
|
|
oil: '#f59e0b',
|
|
diplomacy: '#8b5cf6',
|
|
economy: '#3b82f6',
|
|
};
|
|
|
|
const EMPTY_OSINT: OsintItem[] = [];
|
|
const EMPTY_SHIPS: import('../types').Ship[] = [];
|
|
|
|
function useTimeAgo() {
|
|
const { t } = useTranslation('common');
|
|
return (ts: number): string => {
|
|
const diff = Date.now() - ts;
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return t('time.justNow');
|
|
if (mins < 60) return t('time.minutesAgo', { count: mins });
|
|
const hours = Math.floor(mins / 60);
|
|
if (hours < 24) return t('time.hoursAgo', { count: hours });
|
|
const days = Math.floor(hours / 24);
|
|
return t('time.daysAgo', { count: days });
|
|
};
|
|
}
|
|
|
|
export function EventLog({ events, currentTime, totalShipCount: _totalShipCount, koreanShips, koreanShipsByCategory: _koreanShipsByCategory, chineseShips = [], osintFeed = EMPTY_OSINT, isLive = false, dashboardTab = 'iran', onTabChange: _onTabChange, ships = EMPTY_SHIPS }: Props) {
|
|
const { t } = useTranslation(['common', 'events', 'ships']);
|
|
const timeAgo = useTimeAgo();
|
|
|
|
const visibleEvents = useMemo(
|
|
() => events.filter(e => e.timestamp <= currentTime).reverse(),
|
|
[events, currentTime],
|
|
);
|
|
|
|
const visibleNews = useMemo(
|
|
() => events.length > 0
|
|
? BREAKING_NEWS.filter(n => n.timestamp <= currentTime).reverse()
|
|
: [],
|
|
[events.length, currentTime],
|
|
);
|
|
|
|
const visibleNewsKR = useMemo(
|
|
() => events.length > 0
|
|
? BREAKING_NEWS_KR.filter(n => n.timestamp <= currentTime).reverse()
|
|
: [],
|
|
[events.length, currentTime],
|
|
);
|
|
|
|
// Iran-related ships (military + Iranian flag)
|
|
const _iranMilitaryShips = useMemo(() =>
|
|
ships.filter(s =>
|
|
s.flag === 'IR' ||
|
|
s.category === 'carrier' || s.category === 'destroyer' ||
|
|
s.category === 'warship' || s.category === 'patrol'
|
|
).sort((a, b) => {
|
|
const order: Record<string, number> = { carrier: 0, destroyer: 1, warship: 2, patrol: 3, tanker: 4, cargo: 5, civilian: 6, unknown: 7 };
|
|
return (order[a.category] ?? 9) - (order[b.category] ?? 9);
|
|
}),
|
|
[ships],
|
|
);
|
|
|
|
return (
|
|
<div className="event-log">
|
|
{/* ═══════════════════════════════════════════════
|
|
IRAN TAB
|
|
═══════════════════════════════════════════════ */}
|
|
{dashboardTab === 'iran' && (
|
|
<>
|
|
{/* Breaking News Section (replay) */}
|
|
{visibleNews.length > 0 && (
|
|
<div className="breaking-news-section">
|
|
<div className="breaking-news-header">
|
|
<span className="breaking-flash">BREAKING</span>
|
|
<span className="breaking-title">{t('events:news.breakingTitle')}</span>
|
|
</div>
|
|
<div className="breaking-news-list">
|
|
{visibleNews.map(n => {
|
|
const catColor = NEWS_CATEGORY_COLORS[n.category];
|
|
const catIcon = NEWS_CATEGORY_ICONS[n.category];
|
|
const isRecent = currentTime - n.timestamp < 2 * HOUR_MS;
|
|
return (
|
|
<div key={n.id} className={`breaking-news-item${isRecent ? ' breaking-new' : ''}`}>
|
|
<div className="breaking-news-top">
|
|
<span className="breaking-cat-tag" style={{ background: catColor }}>
|
|
{catIcon} {t(`events:news.categoryLabel.${n.category}`)}
|
|
</span>
|
|
<span className="breaking-news-time">
|
|
{new Date(n.timestamp + 9 * 3600_000).toISOString().slice(5, 16).replace('T', ' ')}
|
|
</span>
|
|
</div>
|
|
<div className="breaking-news-headline">{n.headline}</div>
|
|
{n.detail && <div className="breaking-news-detail">{n.detail}</div>}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Korean Ship Overview (Iran dashboard) */}
|
|
{koreanShips.length > 0 && (
|
|
<div className="iran-ship-summary">
|
|
<div className="area-ship-header">
|
|
<span className="area-ship-icon">{'\u{1F1F0}\u{1F1F7}'}</span>
|
|
<span className="area-ship-title">{t('ships:shipStatus.koreanTitle')}</span>
|
|
<span className="area-ship-total text-kcg-danger">{koreanShips.length}{t('common:units.vessels')}</span>
|
|
</div>
|
|
<div className="iran-mil-list">
|
|
{koreanShips.slice(0, 30).map(s => {
|
|
const cat = getShipMTCategory(s.typecode, s.category);
|
|
const mtColor = MT_CATEGORY_COLORS[cat] || '#888';
|
|
const mtLabel = t(`ships:mtType.${cat}`, { defaultValue: t('ships:mtType.unspecified') });
|
|
return (
|
|
<div key={s.mmsi} className="iran-mil-item">
|
|
<span className="iran-mil-flag">{'\u{1F1F0}\u{1F1F7}'}</span>
|
|
<span className="iran-mil-name">{s.name}</span>
|
|
<span className="iran-mil-cat" style={{ color: mtColor, background: `${mtColor}22` }}>
|
|
{mtLabel}
|
|
</span>
|
|
{s.speed != null && s.speed > 0.5 ? (
|
|
<span className="ml-auto text-[9px] text-kcg-success">{s.speed.toFixed(1)}kn</span>
|
|
) : (
|
|
<span className="ml-auto text-[9px] text-kcg-danger">{t('ships:status.anchored')}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* OSINT Live Feed (live mode) */}
|
|
{isLive && osintFeed.length > 0 && (
|
|
<>
|
|
<div className="osint-header">
|
|
<span className="osint-live-dot" />
|
|
<span className="osint-title">{t('events:osint.liveTitle')}</span>
|
|
<span className="osint-count">{osintFeed.length}</span>
|
|
</div>
|
|
<div className="osint-list">
|
|
{osintFeed.map(item => {
|
|
const catColor = OSINT_CAT_COLORS[item.category] || OSINT_CAT_COLORS.general;
|
|
const catIcon = OSINT_CAT_ICONS[item.category] || OSINT_CAT_ICONS.general;
|
|
const isRecent = Date.now() - item.timestamp < 3600_000;
|
|
return (
|
|
<a
|
|
key={item.id}
|
|
className={`osint-item${isRecent ? ' osint-recent' : ''}`}
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div className="osint-item-top">
|
|
<span className="osint-cat-tag" style={{ background: catColor }}>
|
|
{catIcon} {t(`events:osint.categoryLabel.${item.category}`, { defaultValue: t('events:osint.categoryLabel.general') })}
|
|
</span>
|
|
{item.language === 'ko' && <span className="osint-lang-tag">KR</span>}
|
|
<span className="osint-time">{timeAgo(item.timestamp)}</span>
|
|
</div>
|
|
<div className="osint-item-title">{item.title}</div>
|
|
<div className="osint-item-source">{item.source}</div>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
{isLive && osintFeed.length === 0 && (
|
|
<div className="osint-header">
|
|
<span className="osint-live-dot" />
|
|
<span className="osint-title">{t('events:osint.liveTitle')}</span>
|
|
<span className="osint-loading">{t('events:osint.loading')}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Log (replay mode) */}
|
|
{!isLive && (
|
|
<>
|
|
<h3>{t('events:log.title')}</h3>
|
|
<div className="event-list">
|
|
{visibleEvents.length === 0 && (
|
|
<div className="event-empty">{t('events:log.noEvents')}</div>
|
|
)}
|
|
{visibleEvents.map(e => {
|
|
const isNew = currentTime - e.timestamp < 86_400_000;
|
|
return (
|
|
<div key={e.id} className="event-item" style={isNew ? { borderLeft: '3px solid var(--kcg-event-impact)' } : undefined}>
|
|
<span
|
|
className="event-tag"
|
|
style={{ backgroundColor: TYPE_COLORS[e.type] }}
|
|
>
|
|
{TYPE_LABELS[e.type]}
|
|
</span>
|
|
<div className="event-content">
|
|
<div className="event-label">
|
|
{isNew && (
|
|
<span className="inline-block rounded-sm bg-[var(--kcg-event-impact)] px-1 mr-1 text-[9px] font-bold text-white">{t('events:log.new')}</span>
|
|
)}
|
|
{e.label}
|
|
</div>
|
|
<div className="event-time">
|
|
{new Date(e.timestamp + 9 * 3600_000).toISOString().slice(5, 16).replace('T', ' ')} KST
|
|
</div>
|
|
{e.description && (
|
|
<div className="event-desc">{e.description}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* ═══════════════════════════════════════════════
|
|
KOREA TAB
|
|
═══════════════════════════════════════════════ */}
|
|
{dashboardTab === 'korea' && (
|
|
<>
|
|
{/* 한국 속보 (replay) */}
|
|
{visibleNewsKR.length > 0 && (
|
|
<div className="breaking-news-section" style={{ borderLeftColor: 'var(--kcg-accent)' }}>
|
|
<div className="breaking-news-header">
|
|
<span className="breaking-flash bg-kcg-accent">{t('events:news.breaking')}</span>
|
|
<span className="breaking-title">{'\u{1F1F0}\u{1F1F7}'} {t('events:news.koreaTitle')}</span>
|
|
</div>
|
|
<div className="breaking-news-list">
|
|
{visibleNewsKR.map(n => {
|
|
const catColor = NEWS_CATEGORY_COLORS[n.category];
|
|
const catIcon = NEWS_CATEGORY_ICONS[n.category];
|
|
const isRecent = currentTime - n.timestamp < 2 * HOUR_MS;
|
|
return (
|
|
<div key={n.id} className={`breaking-news-item${isRecent ? ' breaking-new' : ''}`}>
|
|
<div className="breaking-news-top">
|
|
<span className="breaking-cat-tag" style={{ background: catColor }}>
|
|
{catIcon} {t(`events:news.categoryLabel.${n.category}`)}
|
|
</span>
|
|
<span className="breaking-news-time">
|
|
{new Date(n.timestamp + 9 * 3600_000).toISOString().slice(5, 16).replace('T', ' ')}
|
|
</span>
|
|
</div>
|
|
<div className="breaking-news-headline">{n.headline}</div>
|
|
{n.detail && <div className="breaking-news-detail">{n.detail}</div>}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 한국 선박 현황 — 선종별 분류 */}
|
|
<div className="iran-ship-summary">
|
|
<div className="area-ship-header">
|
|
<span className="area-ship-icon">{'\u{1F1F0}\u{1F1F7}'}</span>
|
|
<span className="area-ship-title">{t('ships:shipStatus.koreanTitle')}</span>
|
|
<span className="area-ship-total">{koreanShips.length}{t('common:units.vessels')}</span>
|
|
</div>
|
|
{koreanShips.length > 0 && (() => {
|
|
const groups: Record<string, Ship[]> = {};
|
|
for (const s of koreanShips) {
|
|
const cat = getShipMTCategory(s.typecode, s.category);
|
|
if (!groups[cat]) groups[cat] = [];
|
|
groups[cat].push(s);
|
|
}
|
|
const order = ['military', 'tanker', 'cargo', 'passenger', 'fishing', 'tug_special', 'high_speed', 'pleasure', 'unspecified'];
|
|
const sorted = order.filter(k => groups[k]?.length);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-0.5 py-1">
|
|
{sorted.map(cat => {
|
|
const mtColor = MT_CATEGORY_COLORS[cat] || MT_CATEGORY_COLORS.unspecified;
|
|
const mtLabel = t(`ships:mtType.${cat}`, { defaultValue: t('ships:mtType.unspecified') });
|
|
const list = groups[cat];
|
|
const moving = list.filter(s => s.speed > 0.5).length;
|
|
const anchored = list.length - moving;
|
|
return (
|
|
<div key={cat} className="flex items-center gap-1.5 px-2 py-1 rounded-r" style={{
|
|
background: `${mtColor}0a`,
|
|
borderLeft: `3px solid ${mtColor}`,
|
|
}}>
|
|
<span className="size-2 shrink-0 rounded-full" style={{ background: mtColor }} />
|
|
<span className="min-w-[70px] text-[11px] font-bold font-mono" style={{ color: mtColor }}>{mtLabel}</span>
|
|
<span className="text-[13px] font-bold font-mono text-kcg-text">
|
|
{list.length}<span className="text-[9px] font-normal text-kcg-muted">{t('common:units.vessels')}</span>
|
|
</span>
|
|
<span className="ml-auto flex gap-1.5 text-[9px] font-mono">
|
|
{moving > 0 && <span className="text-kcg-success">{t('ships:status.underway')} {moving}</span>}
|
|
{anchored > 0 && <span className="text-kcg-danger">{t('ships:status.anchored')} {anchored}</span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* 중국 선박 현황 */}
|
|
<div className="iran-ship-summary">
|
|
<div className="area-ship-header">
|
|
<span className="area-ship-icon">{'\u{1F1E8}\u{1F1F3}'}</span>
|
|
<span className="area-ship-title">{t('ships:shipStatus.chineseTitle')}</span>
|
|
<span className="area-ship-total">{chineseShips.length}{t('common:units.vessels')}</span>
|
|
</div>
|
|
{chineseShips.length > 0 && (() => {
|
|
const groups: Record<string, Ship[]> = {};
|
|
for (const s of chineseShips) {
|
|
const cat = getShipMTCategory(s.typecode, s.category);
|
|
if (!groups[cat]) groups[cat] = [];
|
|
groups[cat].push(s);
|
|
}
|
|
const order = ['military', 'tanker', 'cargo', 'passenger', 'fishing', 'tug_special', 'high_speed', 'pleasure', 'unspecified'];
|
|
const sorted = order.filter(k => groups[k]?.length);
|
|
const fishingCount = groups['fishing']?.length || 0;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-0.5 py-1">
|
|
{fishingCount > 0 && (
|
|
<div className="flex items-center gap-1.5 px-2 py-1.5 mb-0.5 rounded border border-kcg-danger/30 bg-kcg-danger/10">
|
|
<span className="text-sm">{'\u{1F6A8}'}</span>
|
|
<span className="text-[11px] font-bold font-mono text-kcg-danger">
|
|
{t('ships:shipStatus.chineseFishingAlert', { count: fishingCount })}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{sorted.map(cat => {
|
|
const mtColor = MT_CATEGORY_COLORS[cat] || MT_CATEGORY_COLORS.unspecified;
|
|
const mtLabel = t(`ships:mtType.${cat}`, { defaultValue: t('ships:mtType.unspecified') });
|
|
const list = groups[cat];
|
|
const moving = list.filter(s => s.speed > 0.5).length;
|
|
const anchored = list.length - moving;
|
|
return (
|
|
<div key={cat} className="flex items-center gap-1.5 px-2 py-1 rounded-r" style={{
|
|
background: `${mtColor}0a`,
|
|
borderLeft: `3px solid ${mtColor}`,
|
|
}}>
|
|
<span className="size-2 shrink-0 rounded-full" style={{ background: mtColor }} />
|
|
<span className="min-w-[70px] text-[11px] font-bold font-mono" style={{ color: mtColor }}>{mtLabel}</span>
|
|
<span className="text-[13px] font-bold font-mono text-kcg-text">
|
|
{list.length}<span className="text-[9px] font-normal text-kcg-muted">{t('common:units.vessels')}</span>
|
|
</span>
|
|
<span className="ml-auto flex gap-1.5 text-[9px] font-mono">
|
|
{moving > 0 && <span className="text-kcg-success">{t('ships:status.underway')} {moving}</span>}
|
|
{anchored > 0 && <span className="text-kcg-danger">{t('ships:status.anchored')} {anchored}</span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* OSINT 피드 — 한국: 일반(general) 제외, 해양 관련만 표시 (라이브/리플레이 모두) */}
|
|
{osintFeed.length > 0 && (
|
|
<>
|
|
<div className="osint-header">
|
|
<span className="osint-live-dot" />
|
|
<span className="osint-title">{'\u{1F1F0}\u{1F1F7}'} {t('events:osint.koreaLiveTitle')}</span>
|
|
<span className="osint-count">{(() => {
|
|
const filtered = osintFeed.filter(i => i.category !== 'general' && i.category !== 'oil');
|
|
const seen = new Set<string>();
|
|
return filtered.filter(i => {
|
|
const key = i.title.replace(/\s+/g, '').slice(0, 30).toLowerCase();
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
}).length;
|
|
})()}</span>
|
|
</div>
|
|
<div className="osint-list">
|
|
{(() => {
|
|
const filtered = osintFeed.filter(item => item.category !== 'general' && item.category !== 'oil');
|
|
const seen = new Set<string>();
|
|
return filtered.filter(item => {
|
|
const key = item.title.replace(/\s+/g, '').slice(0, 30).toLowerCase();
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
});
|
|
})().map(item => {
|
|
const catColor = OSINT_CAT_COLORS[item.category] || OSINT_CAT_COLORS.general;
|
|
const catIcon = OSINT_CAT_ICONS[item.category] || OSINT_CAT_ICONS.general;
|
|
const isRecent = Date.now() - item.timestamp < 3600_000;
|
|
return (
|
|
<a
|
|
key={item.id}
|
|
className={`osint-item${isRecent ? ' osint-recent' : ''}`}
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div className="osint-item-top">
|
|
<span className="osint-cat-tag" style={{ background: catColor }}>
|
|
{catIcon} {t(`events:osint.categoryLabel.${item.category}`, { defaultValue: t('events:osint.categoryLabel.general') })}
|
|
</span>
|
|
{item.language === 'ko' && <span className="osint-lang-tag">KR</span>}
|
|
<span className="osint-time">{timeAgo(item.timestamp)}</span>
|
|
</div>
|
|
<div className="osint-item-title">{item.title}</div>
|
|
<div className="osint-item-source">{item.source}</div>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
{osintFeed.length === 0 && (
|
|
<div className="osint-header">
|
|
<span className="osint-live-dot" />
|
|
<span className="osint-title">{'\u{1F1F0}\u{1F1F7}'} {t('events:osint.koreaLiveTitle')}</span>
|
|
<span className="osint-loading">{t('events:osint.loading')}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|