Merge pull request 'feat(ship-image): 선박 이미지 썸네일 및 갤러리 기능' (#34) from feature/ship-image-thumbnails into develop
Reviewed-on: #34
This commit is contained in:
커밋
03337fc99c
@ -65,6 +65,209 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Ship image gallery ── */
|
||||
.ship-image-gallery-wrap {
|
||||
position: relative;
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
|
||||
.ship-image-gallery {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0;
|
||||
scrollbar-width: thin;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.ship-image-gallery__thumb {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: var(--wing-subtle);
|
||||
transition: border-color 0.15s;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.ship-image-gallery__thumb:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ship-image-gallery__thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ship-image-gallery__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ship-image-gallery__arrow:hover {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.ship-image-gallery__arrow--left { left: 0; }
|
||||
.ship-image-gallery__arrow--right { right: 0; }
|
||||
|
||||
/* ── Ship image modal ── */
|
||||
.ship-image-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.ship-image-modal__content {
|
||||
position: relative;
|
||||
max-width: min(92vw, 900px);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--wing-glass-dense);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ship-image-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--wing-subtle);
|
||||
}
|
||||
|
||||
.ship-image-modal__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.ship-image-modal__counter {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ship-image-modal__close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ship-image-modal__close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.ship-image-modal__body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ship-image-modal__img-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.ship-image-modal__img {
|
||||
max-width: 100%;
|
||||
max-height: 72vh;
|
||||
border-radius: 6px;
|
||||
object-fit: contain;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.ship-image-modal__spinner {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(148, 163, 184, 0.28);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: map-loader-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.ship-image-modal__error {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ship-image-modal__nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
width: 36px;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ship-image-modal__nav:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.ship-image-modal__nav--prev { left: 8px; }
|
||||
.ship-image-modal__nav--next { right: 8px; }
|
||||
|
||||
.ship-image-modal__footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 8px 14px;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--wing-subtle);
|
||||
}
|
||||
|
||||
.map-loader-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@ -17,11 +17,14 @@ export interface ChnPrmShipPositionDto {
|
||||
status: string;
|
||||
signalKindCode: string;
|
||||
messageTimestamp: string;
|
||||
shipImagePath?: string | null;
|
||||
shipImageCount?: number;
|
||||
}
|
||||
|
||||
/** GET /api/v2/vessels/recent-positions 응답 항목 */
|
||||
export interface RecentVesselPositionDto {
|
||||
mmsi: string;
|
||||
imo?: number;
|
||||
lon: number;
|
||||
lat: number;
|
||||
sog: number;
|
||||
@ -31,4 +34,6 @@ export interface RecentVesselPositionDto {
|
||||
shipKindCode: string;
|
||||
nationalCode: string;
|
||||
lastUpdate: string;
|
||||
shipImagePath?: string | null;
|
||||
shipImageCount?: number;
|
||||
}
|
||||
|
||||
@ -29,13 +29,15 @@ function adaptChnPrmShip(dto: ChnPrmShipPositionDto): AisTarget {
|
||||
source: 'chnprmship',
|
||||
classType: '',
|
||||
signalKindCode: dto.signalKindCode,
|
||||
shipImagePath: dto.shipImagePath ?? null,
|
||||
shipImageCount: dto.shipImageCount ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
function adaptRecentVessel(dto: RecentVesselPositionDto): AisTarget {
|
||||
return {
|
||||
mmsi: Number(dto.mmsi),
|
||||
imo: 0,
|
||||
imo: dto.imo ?? 0,
|
||||
name: dto.shipNm ?? '',
|
||||
callsign: '',
|
||||
vesselType: dto.shipTy ?? '',
|
||||
@ -57,6 +59,8 @@ function adaptRecentVessel(dto: RecentVesselPositionDto): AisTarget {
|
||||
classType: '',
|
||||
shipKindCode: dto.shipKindCode,
|
||||
nationalCode: dto.nationalCode,
|
||||
shipImagePath: dto.shipImagePath ?? null,
|
||||
shipImageCount: dto.shipImageCount ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -23,5 +23,7 @@ export type AisTarget = {
|
||||
signalKindCode?: string;
|
||||
shipKindCode?: string;
|
||||
nationalCode?: string;
|
||||
shipImagePath?: string | null;
|
||||
shipImageCount?: number;
|
||||
};
|
||||
|
||||
|
||||
35
apps/web/src/entities/shipImage/api/fetchShipImages.ts
Normal file
35
apps/web/src/entities/shipImage/api/fetchShipImages.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import type { ShipImageInfo } from '../model/types';
|
||||
|
||||
const BASE = '/signal-batch';
|
||||
|
||||
export async function fetchShipImagesByImo(
|
||||
imo: number,
|
||||
signal?: AbortSignal,
|
||||
): Promise<ShipImageInfo[]> {
|
||||
const res = await fetch(`${BASE}/api/v2/shipimg/${imo}`, {
|
||||
signal,
|
||||
headers: { accept: 'application/json' },
|
||||
});
|
||||
if (!res.ok) return [];
|
||||
const json: unknown = await res.json();
|
||||
return Array.isArray(json) ? json : [];
|
||||
}
|
||||
|
||||
/** 확장자가 없으면 suffix를 붙여서 정규화 */
|
||||
const ensureJpg = (path: string, suffix: '_1.jpg' | '_2.jpg'): string => {
|
||||
if (/\.jpe?g$/i.test(path)) return path;
|
||||
return `${path}${suffix}`;
|
||||
};
|
||||
|
||||
/** path → 썸네일 URL (_1.jpg) */
|
||||
export const toThumbnailUrl = (path: string): string => {
|
||||
const normalized = ensureJpg(path, '_1.jpg');
|
||||
return normalized.startsWith('http') || normalized.startsWith('/') ? normalized : `/shipimg/${normalized}`;
|
||||
};
|
||||
|
||||
/** path → 고화질 URL (_2.jpg) */
|
||||
export const toHighResUrl = (path: string): string => {
|
||||
const withExt = ensureJpg(path, '_2.jpg');
|
||||
const resolved = withExt.startsWith('http') || withExt.startsWith('/') ? withExt : `/shipimg/${withExt}`;
|
||||
return resolved.replace(/_1\.jpg$/i, '_2.jpg');
|
||||
};
|
||||
7
apps/web/src/entities/shipImage/model/types.ts
Normal file
7
apps/web/src/entities/shipImage/model/types.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/** 선박 이미지 메타데이터 — /signal-batch/api/v2/shipimg/{imo} 응답 */
|
||||
export interface ShipImageInfo {
|
||||
picId: number;
|
||||
path: string;
|
||||
copyright: string;
|
||||
date: string;
|
||||
}
|
||||
@ -78,7 +78,7 @@ function makeLegacy(
|
||||
* Group 1 — 정상 쌍끌이 (간격 ~1 NM, 경고 없음)
|
||||
* 위치: 서해남부(zone 3) 125.3°E 34.0°N 부근
|
||||
*/
|
||||
const PT_01_AIS = makeAis({ mmsi: 990001, lat: 34.00, lon: 125.30, sog: 3.3, cog: 45, name: 'MOCK VESSEL 1' });
|
||||
const PT_01_AIS = makeAis({ mmsi: 990001, lat: 34.00, lon: 125.30, sog: 3.3, cog: 45, name: 'MOCK VESSEL 1', shipImagePath: 'https://picsum.photos/seed/ship990001v1/800/600', shipImageCount: 3 });
|
||||
const PT_02_AIS = makeAis({ mmsi: 990002, lat: 34.01, lon: 125.32, sog: 3.3, cog: 45, name: 'MOCK VESSEL 2' });
|
||||
|
||||
const PT_01_LEG = makeLegacy({
|
||||
@ -98,7 +98,7 @@ const PT_02_LEG = makeLegacy({
|
||||
* Group 2 — 이격 쌍끌이 (간격 ~8 NM → pair_separation alarm)
|
||||
* 위치: 서해남부(zone 3) 125.0°E 34.5°N 부근
|
||||
*/
|
||||
const PT_03_AIS = makeAis({ mmsi: 990003, lat: 34.50, lon: 125.00, sog: 3.5, cog: 90, name: 'MOCK VESSEL 3' });
|
||||
const PT_03_AIS = makeAis({ mmsi: 990003, lat: 34.50, lon: 125.00, sog: 3.5, cog: 90, name: 'MOCK VESSEL 3', shipImagePath: 'https://picsum.photos/seed/ship990003v1/800/600', shipImageCount: 2 });
|
||||
const PT_04_AIS = makeAis({ mmsi: 990004, lat: 34.60, lon: 125.12, sog: 3.5, cog: 90, name: 'MOCK VESSEL 4' });
|
||||
|
||||
const PT_03_LEG = makeLegacy({
|
||||
@ -119,10 +119,10 @@ const PT_04_LEG = makeLegacy({
|
||||
* 위치: 서해중간(zone 4) 124.8°E 35.2°N 부근
|
||||
* #11(GN)은 AIS 지연 2시간 → ais_stale alarm 동시 발생
|
||||
*/
|
||||
const GN_01_AIS = makeAis({ mmsi: 990005, lat: 35.20, lon: 124.80, sog: 1.0, cog: 180, name: 'MOCK VESSEL 5' });
|
||||
const GN_01_AIS = makeAis({ mmsi: 990005, lat: 35.20, lon: 124.80, sog: 1.0, cog: 180, name: 'MOCK VESSEL 5', shipImagePath: 'https://picsum.photos/seed/ship990005v1/800/600', shipImageCount: 1 });
|
||||
const GN_02_AIS = makeAis({ mmsi: 990006, lat: 35.22, lon: 124.85, sog: 1.2, cog: 170, name: 'MOCK VESSEL 6' });
|
||||
const GN_03_AIS = makeAis({ mmsi: 990007, lat: 35.18, lon: 124.82, sog: 0.8, cog: 200, name: 'MOCK VESSEL 7' });
|
||||
const OT_01_AIS = makeAis({ mmsi: 990008, lat: 35.25, lon: 124.78, sog: 3.5, cog: 160, name: 'MOCK VESSEL 8' });
|
||||
const OT_01_AIS = makeAis({ mmsi: 990008, lat: 35.25, lon: 124.78, sog: 3.5, cog: 160, name: 'MOCK VESSEL 8', shipImagePath: 'https://picsum.photos/seed/ship990008v1/800/600', shipImageCount: 4 });
|
||||
const GN_04_AIS = makeAis({
|
||||
mmsi: 990011, lat: 35.00, lon: 125.20, sog: 1.5, cog: 190, name: 'MOCK VESSEL 10',
|
||||
messageTimestamp: STALE_TS, receivedDate: STALE_TS,
|
||||
@ -158,7 +158,7 @@ const GN_04_LEG = makeLegacy({
|
||||
* Group 4 — 환적 의심 (FC ↔ PS 거리 ~0.15 NM → transshipment alarm)
|
||||
* 위치: 서해남부(zone 3) 125.5°E 34.3°N 부근
|
||||
*/
|
||||
const FC_01_AIS = makeAis({ mmsi: 990009, lat: 34.30, lon: 125.50, sog: 1.0, cog: 0, name: 'MOCK CARRIER 1' });
|
||||
const FC_01_AIS = makeAis({ mmsi: 990009, lat: 34.30, lon: 125.50, sog: 1.0, cog: 0, name: 'MOCK CARRIER 1', shipImagePath: 'https://picsum.photos/seed/ship990009v1/800/600', shipImageCount: 2 });
|
||||
const PS_01_AIS = makeAis({ mmsi: 990010, lat: 34.302, lon: 125.502, sog: 0.5, cog: 10, name: 'MOCK VESSEL 9' });
|
||||
|
||||
const FC_01_LEG = makeLegacy({
|
||||
@ -177,7 +177,7 @@ const PS_01_LEG = makeLegacy({
|
||||
* PT는 zone 2,3만 허가. zone 4(서해중간)에 위치하면 이탈 판정.
|
||||
* 위치: 서해중간(zone 4) 125.0°E 36.5°N 부근
|
||||
*/
|
||||
const PT_05_AIS = makeAis({ mmsi: 990012, lat: 36.50, lon: 125.00, sog: 3.3, cog: 270, name: 'MOCK VESSEL 11' });
|
||||
const PT_05_AIS = makeAis({ mmsi: 990012, lat: 36.50, lon: 125.00, sog: 3.3, cog: 270, name: 'MOCK VESSEL 11', shipImagePath: 'https://picsum.photos/seed/ship990012v1/800/600', shipImageCount: 1 });
|
||||
|
||||
const PT_05_LEG = makeLegacy({
|
||||
permitNo: 'MOCK-P012', shipCode: 'PT', mmsiList: [990012],
|
||||
|
||||
@ -9,6 +9,7 @@ export type MapToggleState = {
|
||||
predictVectors: boolean;
|
||||
shipLabels: boolean;
|
||||
subcables: boolean;
|
||||
shipPhotos: boolean;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
@ -26,6 +27,7 @@ export function MapToggles({ value, onToggle }: Props) {
|
||||
{ id: "predictVectors", label: "예측 벡터" },
|
||||
{ id: "shipLabels", label: "선박명 표시" },
|
||||
{ id: "subcables", label: "해저케이블" },
|
||||
{ id: "shipPhotos", label: "선박 사진" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
86
apps/web/src/features/shipImage/useShipImageMap.ts
Normal file
86
apps/web/src/features/shipImage/useShipImageMap.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { AisTarget } from '../../entities/aisTarget/model/types';
|
||||
import type { ShipImageInfo } from '../../entities/shipImage/model/types';
|
||||
import { fetchShipImagesByImo } from '../../entities/shipImage/api/fetchShipImages';
|
||||
|
||||
const BATCH_SIZE = 5;
|
||||
|
||||
/**
|
||||
* 대상선박(chnprmship)의 IMO별 이미지 메타데이터를 일괄 조회.
|
||||
* IMO 단위 캐시로 중복 요청 방지, storeRef + rev 패턴으로 프로그레시브 갱신.
|
||||
*/
|
||||
export function useShipImageMap(opts: {
|
||||
targets: AisTarget[];
|
||||
enabled?: boolean;
|
||||
}): Map<number, ShipImageInfo[]> {
|
||||
const { targets, enabled = true } = opts;
|
||||
|
||||
// IMO → images 캐시 (컴포넌트 수명 동안 유지)
|
||||
const cacheRef = useRef<Map<number, ShipImageInfo[]>>(new Map());
|
||||
// mmsi → images 결과 (렌더링용)
|
||||
const storeRef = useRef<Map<number, ShipImageInfo[]>>(new Map());
|
||||
const [rev, setRev] = useState(0);
|
||||
|
||||
// 고유 { mmsi, imo } 쌍 추출 (imo > 0만)
|
||||
const entries = useMemo(() => {
|
||||
const seen = new Set<number>();
|
||||
const result: Array<{ mmsi: number; imo: number }> = [];
|
||||
for (const t of targets) {
|
||||
if (t.imo > 0 && !seen.has(t.mmsi)) {
|
||||
seen.add(t.mmsi);
|
||||
result.push({ mmsi: t.mmsi, imo: t.imo });
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [targets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled || entries.length === 0) return;
|
||||
|
||||
const ac = new AbortController();
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
// 캐시에 없는 IMO만 추출
|
||||
const uncachedImos = new Set<number>();
|
||||
for (const e of entries) {
|
||||
if (!cacheRef.current.has(e.imo)) uncachedImos.add(e.imo);
|
||||
}
|
||||
|
||||
// batch fetch (BATCH_SIZE 병렬)
|
||||
const imoArr = Array.from(uncachedImos);
|
||||
for (let i = 0; i < imoArr.length; i += BATCH_SIZE) {
|
||||
if (cancelled) return;
|
||||
const batch = imoArr.slice(i, i + BATCH_SIZE);
|
||||
const results = await Promise.allSettled(
|
||||
batch.map((imo) => fetchShipImagesByImo(imo, ac.signal)),
|
||||
);
|
||||
for (let j = 0; j < batch.length; j++) {
|
||||
const r = results[j];
|
||||
const images = r.status === 'fulfilled' ? r.value : [];
|
||||
cacheRef.current.set(batch[j], images);
|
||||
}
|
||||
}
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
// mmsi → images 매핑 재구성
|
||||
const next = new Map<number, ShipImageInfo[]>();
|
||||
for (const e of entries) {
|
||||
const imgs = cacheRef.current.get(e.imo);
|
||||
if (imgs && imgs.length > 0) next.set(e.mmsi, imgs);
|
||||
}
|
||||
storeRef.current = next;
|
||||
setRev((v) => v + 1);
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
ac.abort();
|
||||
};
|
||||
}, [entries, enabled]);
|
||||
|
||||
// rev를 의존성으로 두어 storeRef 갱신 시 새 참조 반환
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
return useMemo(() => storeRef.current, [rev]);
|
||||
}
|
||||
@ -18,6 +18,8 @@ import { Topbar } from "../../widgets/topbar/Topbar";
|
||||
import { VesselInfoPanel } from "../../widgets/info/VesselInfoPanel";
|
||||
import { SubcableInfoPanel } from "../../widgets/subcableInfo/SubcableInfoPanel";
|
||||
import { DepthLegend } from "../../widgets/legend/DepthLegend";
|
||||
import type { ShipImageInfo } from "../../entities/shipImage/model/types";
|
||||
import ShipImageModal from "../../widgets/shipImage/ShipImageModal";
|
||||
import { queryTrackByMmsi } from "../../features/trackReplay/services/trackQueryService";
|
||||
import { useTrackQueryStore } from "../../features/trackReplay/stores/trackQueryStore";
|
||||
import { GlobalTrackReplayPanel } from "../../widgets/trackReplay/GlobalTrackReplayPanel";
|
||||
@ -238,6 +240,44 @@ export function DashboardPage() {
|
||||
[highlightedMmsiSet, availableTargetMmsiSet],
|
||||
);
|
||||
|
||||
// 모달 상태
|
||||
const [imageModal, setImageModal] = useState<{
|
||||
images?: ShipImageInfo[];
|
||||
initialIndex?: number;
|
||||
initialImagePath?: string;
|
||||
totalCount?: number;
|
||||
imo?: number;
|
||||
vesselName?: string;
|
||||
} | null>(null);
|
||||
|
||||
const handleOpenImageModal = useCallback((mmsi: number) => {
|
||||
const target = targetsInScope.find((t) => t.mmsi === mmsi);
|
||||
if (!target?.shipImagePath) return;
|
||||
const vessel = legacyVesselsAll.find((v) => v.mmsi === mmsi);
|
||||
const vesselName = vessel?.name || target.name || '';
|
||||
setImageModal({
|
||||
initialImagePath: target.shipImagePath,
|
||||
totalCount: target.shipImageCount ?? 1,
|
||||
imo: target.imo > 0 ? target.imo : undefined,
|
||||
vesselName,
|
||||
});
|
||||
}, [targetsInScope, legacyVesselsAll]);
|
||||
|
||||
const handlePanelOpenImageModal = useCallback((index: number, images?: ShipImageInfo[]) => {
|
||||
if (!selectedMmsi) return;
|
||||
const target = targetsInScope.find((t) => t.mmsi === selectedMmsi);
|
||||
const vessel = legacyVesselsAll.find((v) => v.mmsi === selectedMmsi);
|
||||
const vesselName = vessel?.name || target?.name || '';
|
||||
setImageModal({
|
||||
images,
|
||||
initialIndex: index,
|
||||
initialImagePath: target?.shipImagePath ?? undefined,
|
||||
totalCount: target?.shipImageCount ?? 1,
|
||||
imo: target && target.imo > 0 ? target.imo : undefined,
|
||||
vesselName,
|
||||
});
|
||||
}, [selectedMmsi, targetsInScope, legacyVesselsAll]);
|
||||
|
||||
const fishingCount = legacyVesselsAll.filter((v) => v.state.isFishing).length;
|
||||
const transitCount = legacyVesselsAll.filter((v) => v.state.isTransit).length;
|
||||
|
||||
@ -364,6 +404,7 @@ export function DashboardPage() {
|
||||
onOpenTrackMenu={handleOpenTrackMenu}
|
||||
onMapReady={handleMapReady}
|
||||
alarmMmsiMap={alarmMmsiMap}
|
||||
onClickShipPhoto={handleOpenImageModal}
|
||||
/>
|
||||
<GlobalTrackReplayPanel />
|
||||
<WeatherPanel
|
||||
@ -377,10 +418,21 @@ export function DashboardPage() {
|
||||
<DepthLegend depthStops={mapStyleSettings.depthStops} />
|
||||
<MapLegend />
|
||||
{selectedLegacyVessel ? (
|
||||
<VesselInfoPanel vessel={selectedLegacyVessel} allVessels={legacyVesselsAll} onClose={() => setSelectedMmsi(null)} onSelectMmsi={setSelectedMmsi} />
|
||||
<VesselInfoPanel vessel={selectedLegacyVessel} allVessels={legacyVesselsAll} onClose={() => setSelectedMmsi(null)} onSelectMmsi={setSelectedMmsi} imo={selectedTarget && selectedTarget.imo > 0 ? selectedTarget.imo : undefined} shipImagePath={selectedTarget?.shipImagePath} shipImageCount={selectedTarget?.shipImageCount} onOpenImageModal={handlePanelOpenImageModal} />
|
||||
) : selectedTarget ? (
|
||||
<AisInfoPanel target={selectedTarget} legacy={selectedLegacyInfo} onClose={() => setSelectedMmsi(null)} />
|
||||
<AisInfoPanel target={selectedTarget} legacy={selectedLegacyInfo} onClose={() => setSelectedMmsi(null)} onOpenImageModal={handlePanelOpenImageModal} />
|
||||
) : null}
|
||||
{imageModal && (
|
||||
<ShipImageModal
|
||||
images={imageModal.images}
|
||||
initialIndex={imageModal.initialIndex}
|
||||
initialImagePath={imageModal.initialImagePath}
|
||||
totalCount={imageModal.totalCount}
|
||||
imo={imageModal.imo}
|
||||
vesselName={imageModal.vesselName}
|
||||
onClose={() => setImageModal(null)}
|
||||
/>
|
||||
)}
|
||||
{selectedCableId && subcableData?.details.get(selectedCableId) ? (
|
||||
<SubcableInfoPanel
|
||||
detail={subcableData.details.get(selectedCableId)!}
|
||||
|
||||
@ -47,7 +47,7 @@ export function useDashboardState(uid: number | null) {
|
||||
const [mapStyleSettings, setMapStyleSettings] = usePersistedState<MapStyleSettings>(uid, 'mapStyleSettings', DEFAULT_MAP_STYLE_SETTINGS);
|
||||
const [overlays, setOverlays] = usePersistedState<MapToggleState>(uid, 'overlays', {
|
||||
pairLines: true, pairRange: true, fcLines: true, zones: true,
|
||||
fleetCircles: true, predictVectors: true, shipLabels: true, subcables: false,
|
||||
fleetCircles: true, predictVectors: true, shipLabels: true, subcables: false, shipPhotos: true,
|
||||
});
|
||||
const [settings, setSettings] = usePersistedState<Map3DSettings>(uid, 'map3dSettings', {
|
||||
showShips: true, showDensity: false, showSeamark: false,
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import type { AisTarget } from "../../entities/aisTarget/model/types";
|
||||
import type { LegacyVesselInfo } from "../../entities/legacyVessel/model/types";
|
||||
import type { ShipImageInfo } from "../../entities/shipImage/model/types";
|
||||
import { fmtIsoFull } from "../../shared/lib/datetime";
|
||||
import ShipImageGallery from "../shipImage/ShipImageGallery";
|
||||
|
||||
type Props = {
|
||||
target: AisTarget;
|
||||
legacy?: LegacyVesselInfo | null;
|
||||
onClose: () => void;
|
||||
onOpenImageModal?: (index: number, images?: ShipImageInfo[]) => void;
|
||||
};
|
||||
|
||||
export function AisInfoPanel({ target: t, legacy, onClose }: Props) {
|
||||
export function AisInfoPanel({ target: t, legacy, onClose, onOpenImageModal }: Props) {
|
||||
const name = (t.name || "").trim() || "(no name)";
|
||||
return (
|
||||
<div className="map-info">
|
||||
@ -25,6 +28,10 @@ export function AisInfoPanel({ target: t, legacy, onClose }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{t.shipImagePath && (
|
||||
<ShipImageGallery imo={t.imo > 0 ? t.imo : undefined} initialImagePath={t.shipImagePath} totalCount={t.shipImageCount} onOpenModal={onOpenImageModal} />
|
||||
)}
|
||||
|
||||
{legacy ? (
|
||||
<div style={{ marginBottom: 8, padding: "8px 8px", borderRadius: 8, border: "1px solid rgba(245,158,11,.35)", background: "rgba(245,158,11,.06)" }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 900, color: "#F59E0B", marginBottom: 4 }}>CN Permit Match</div>
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
import { ZONE_META } from "../../entities/zone/model/meta";
|
||||
import { SPEED_MAX, VESSEL_TYPES } from "../../entities/vessel/model/meta";
|
||||
import type { ShipImageInfo } from "../../entities/shipImage/model/types";
|
||||
import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
|
||||
import { fmtIsoFull } from "../../shared/lib/datetime";
|
||||
import { haversineNm } from "../../shared/lib/geo/haversineNm";
|
||||
import { OVERLAY_RGB, rgbToHex } from "../../shared/lib/map/palette";
|
||||
import ShipImageGallery from "../shipImage/ShipImageGallery";
|
||||
|
||||
type Props = {
|
||||
vessel: DerivedLegacyVessel;
|
||||
allVessels: DerivedLegacyVessel[];
|
||||
onClose: () => void;
|
||||
onSelectMmsi?: (mmsi: number) => void;
|
||||
imo?: number;
|
||||
shipImagePath?: string | null;
|
||||
shipImageCount?: number;
|
||||
onOpenImageModal?: (index: number, images?: ShipImageInfo[]) => void;
|
||||
};
|
||||
|
||||
export function VesselInfoPanel({ vessel: v, allVessels, onClose, onSelectMmsi }: Props) {
|
||||
export function VesselInfoPanel({ vessel: v, allVessels, onClose, onSelectMmsi, imo, shipImagePath, shipImageCount, onOpenImageModal }: Props) {
|
||||
const t = VESSEL_TYPES[v.shipCode];
|
||||
const ownerLabel = v.ownerCn || v.ownerRoman || v.ownerKey || "-";
|
||||
const primary = t.speedProfile.filter((s) => s.primary);
|
||||
@ -44,6 +50,10 @@ export function VesselInfoPanel({ vessel: v, allVessels, onClose, onSelectMmsi }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{shipImagePath && (
|
||||
<ShipImageGallery imo={imo} initialImagePath={shipImagePath} totalCount={shipImageCount} onOpenModal={onOpenImageModal} />
|
||||
)}
|
||||
|
||||
<div className="ir">
|
||||
<span className="il">속도</span>
|
||||
<span className="iv" style={{ color: inRange ? "#22C55E" : "var(--muted)" }}>
|
||||
|
||||
@ -82,6 +82,7 @@ export function Map3D({
|
||||
onOpenTrackMenu,
|
||||
onMapReady,
|
||||
alarmMmsiMap,
|
||||
onClickShipPhoto,
|
||||
}: Props) {
|
||||
// ── Shared refs ──────────────────────────────────────────────────────
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
@ -610,6 +611,7 @@ export function Map3D({
|
||||
toFleetMmsiList, touchDeckHoverState, hasAuxiliarySelectModifier,
|
||||
onDeckSelectOrHighlight, onSelectMmsi: onMapSelectMmsi, onToggleHighlightMmsi,
|
||||
ensureMercatorOverlay, alarmMmsiMap,
|
||||
onClickShipPhoto,
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export const HALO_OUTLINE_COLOR: [number, number, number, number] = [210, 225, 2
|
||||
export const HALO_OUTLINE_COLOR_SELECTED: [number, number, number, number] = [14, 234, 255, 230];
|
||||
export const HALO_OUTLINE_COLOR_HIGHLIGHTED: [number, number, number, number] = [245, 158, 11, 210];
|
||||
export const GLOBE_OUTLINE_PERMITTED = 'rgba(210,225,240,0.62)';
|
||||
export const GLOBE_OUTLINE_OTHER = 'rgba(160,175,195,0.35)';
|
||||
export const GLOBE_OUTLINE_OTHER = 'rgba(160,175,195,0.55)';
|
||||
|
||||
// ── Flat map icon sizes ──
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@ import {
|
||||
} from '../lib/tooltips';
|
||||
import { sanitizeDeckLayerList } from '../lib/mapCore';
|
||||
import { buildMercatorDeckLayers, buildGlobeDeckLayers } from '../lib/deckLayerFactories';
|
||||
|
||||
// NOTE:
|
||||
// Globe mode now relies on MapLibre native overlays (useGlobeOverlays/useGlobeShips).
|
||||
// Keep Deck custom-layer rendering disabled in globe to avoid projection-space artifacts.
|
||||
@ -69,6 +68,7 @@ export function useDeckLayers(
|
||||
onToggleHighlightMmsi?: (mmsi: number) => void;
|
||||
ensureMercatorOverlay: () => MapboxOverlay | null;
|
||||
alarmMmsiMap?: Map<number, LegacyAlarmKind>;
|
||||
onClickShipPhoto?: (mmsi: number) => void;
|
||||
},
|
||||
) {
|
||||
const {
|
||||
@ -82,6 +82,7 @@ export function useDeckLayers(
|
||||
toFleetMmsiList, touchDeckHoverState, hasAuxiliarySelectModifier,
|
||||
onDeckSelectOrHighlight, onSelectMmsi, onToggleHighlightMmsi,
|
||||
ensureMercatorOverlay, alarmMmsiMap,
|
||||
onClickShipPhoto,
|
||||
} = opts;
|
||||
|
||||
const legacyTargets = useMemo(() => {
|
||||
@ -106,6 +107,10 @@ export function useDeckLayers(
|
||||
return shipData.filter((t) => alarmMmsiMap.has(t.mmsi));
|
||||
}, [shipData, alarmMmsiMap]);
|
||||
|
||||
const shipPhotoTargets = useMemo(() => {
|
||||
return shipData.filter((t) => !!t.shipImagePath);
|
||||
}, [shipData]);
|
||||
|
||||
const mercatorLayersRef = useRef<unknown[]>([]);
|
||||
const alarmRafRef = useRef(0);
|
||||
|
||||
@ -161,6 +166,8 @@ export function useDeckLayers(
|
||||
alarmMmsiMap,
|
||||
alarmPulseRadius: 8,
|
||||
alarmPulseHoverRadius: 12,
|
||||
shipPhotoTargets,
|
||||
onClickShipPhoto,
|
||||
});
|
||||
|
||||
const normalizedBaseLayers = sanitizeDeckLayerList(layers);
|
||||
@ -264,6 +271,9 @@ export function useDeckLayers(
|
||||
hasAuxiliarySelectModifier,
|
||||
alarmTargets,
|
||||
alarmMmsiMap,
|
||||
shipPhotoTargets,
|
||||
onClickShipPhoto,
|
||||
overlays.shipPhotos,
|
||||
]);
|
||||
|
||||
// Mercator alarm pulse breathing animation (rAF)
|
||||
@ -337,6 +347,8 @@ export function useDeckLayers(
|
||||
if (!deckTarget) return;
|
||||
|
||||
if (!ENABLE_GLOBE_DECK_OVERLAYS) {
|
||||
// Globe에서는 Deck.gl ScatterplotLayer가 프로젝션 공간 아티팩트(막대)를 유발하므로
|
||||
// 빈 레이어만 설정. 사진 인디케이터는 Mercator에서만 동작.
|
||||
try {
|
||||
deckTarget.setProps({ layers: [], getTooltip: undefined, onClick: undefined } as never);
|
||||
} catch {
|
||||
|
||||
@ -120,6 +120,7 @@ export function useGlobeShipLayers(
|
||||
alarmKind: alarmKind ?? '',
|
||||
alarmBadgeLabel: alarmKind ? ALARM_BADGE[alarmKind].label : '',
|
||||
alarmBadgeColor: alarmKind ? ALARM_BADGE[alarmKind].color : '#000',
|
||||
hasPhoto: t.shipImagePath ? 1 : 0,
|
||||
},
|
||||
};
|
||||
}),
|
||||
@ -167,13 +168,14 @@ export function useGlobeShipLayers(
|
||||
const symbolLiteId = 'ships-globe-lite';
|
||||
const symbolId = 'ships-globe';
|
||||
const labelId = 'ships-globe-label';
|
||||
const photoId = 'ships-globe-photo';
|
||||
const pulseId = 'ships-globe-alarm-pulse';
|
||||
const badgeId = 'ships-globe-alarm-badge';
|
||||
|
||||
// 레이어를 제거하지 않고 visibility만 'none'으로 설정
|
||||
// guardedSetVisibility로 현재 값과 동일하면 호출 생략 (style._changed 방지)
|
||||
const hide = () => {
|
||||
for (const id of [badgeId, labelId, symbolId, symbolLiteId, pulseId, outlineId, haloId]) {
|
||||
for (const id of [badgeId, photoId, labelId, symbolId, symbolLiteId, pulseId, outlineId, haloId]) {
|
||||
guardedSetVisibility(map, id, 'none');
|
||||
}
|
||||
};
|
||||
@ -197,6 +199,7 @@ export function useGlobeShipLayers(
|
||||
// → style._changed 방지 → 불필요한 symbol placement 재계산 방지 → 라벨 사라짐 방지
|
||||
const visibility: 'visible' | 'none' = projection === 'globe' ? 'visible' : 'none';
|
||||
const labelVisibility: 'visible' | 'none' = projection === 'globe' && overlays.shipLabels ? 'visible' : 'none';
|
||||
const photoVisibility: 'visible' | 'none' = projection === 'globe' && overlays.shipPhotos ? 'visible' : 'none';
|
||||
if (map.getLayer(symbolId) || map.getLayer(symbolLiteId)) {
|
||||
const changed =
|
||||
map.getLayoutProperty(symbolId, 'visibility') !== visibility ||
|
||||
@ -208,6 +211,7 @@ export function useGlobeShipLayers(
|
||||
if (projection === 'globe') kickRepaint(map);
|
||||
}
|
||||
guardedSetVisibility(map, labelId, labelVisibility);
|
||||
guardedSetVisibility(map, photoId, photoVisibility);
|
||||
}
|
||||
|
||||
// 데이터 업데이트는 projectionBusy 중에는 차단
|
||||
@ -298,7 +302,8 @@ export function useGlobeShipLayers(
|
||||
'case',
|
||||
['==', ['feature-state', 'selected'], 1], 0.38,
|
||||
['==', ['feature-state', 'highlighted'], 1], 0.34,
|
||||
0.16,
|
||||
['==', ['get', 'permitted'], 1], 0.16,
|
||||
0.25,
|
||||
] as never,
|
||||
},
|
||||
} as unknown as LayerSpecification,
|
||||
@ -332,7 +337,7 @@ export function useGlobeShipLayers(
|
||||
['==', ['feature-state', 'selected'], 1], 3.4,
|
||||
['==', ['feature-state', 'highlighted'], 1], 2.7,
|
||||
['==', ['get', 'permitted'], 1], 1.8,
|
||||
0.7,
|
||||
1.2,
|
||||
] as never,
|
||||
'circle-stroke-opacity': 0.85,
|
||||
},
|
||||
@ -433,13 +438,13 @@ export function useGlobeShipLayers(
|
||||
['linear'],
|
||||
['zoom'],
|
||||
6.5,
|
||||
0.16,
|
||||
0.28,
|
||||
8,
|
||||
0.34,
|
||||
0.45,
|
||||
11,
|
||||
0.54,
|
||||
0.65,
|
||||
14,
|
||||
0.68,
|
||||
0.78,
|
||||
] as never,
|
||||
},
|
||||
} as unknown as LayerSpecification,
|
||||
@ -511,6 +516,34 @@ export function useGlobeShipLayers(
|
||||
}
|
||||
}
|
||||
|
||||
// Photo indicator circle (above ship icons, below labels)
|
||||
if (!map.getLayer(photoId)) {
|
||||
needReorder = true;
|
||||
try {
|
||||
map.addLayer(
|
||||
{
|
||||
id: photoId,
|
||||
type: 'circle',
|
||||
source: srcId,
|
||||
filter: ['==', ['get', 'hasPhoto'], 1] as never,
|
||||
layout: { visibility: photoVisibility },
|
||||
paint: {
|
||||
'circle-radius': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
3, 3, 7, 4, 10, 5, 14, 6,
|
||||
] as never,
|
||||
'circle-color': 'rgba(0, 188, 212, 0.7)',
|
||||
'circle-stroke-color': 'rgba(255, 255, 255, 0.8)',
|
||||
'circle-stroke-width': 1,
|
||||
},
|
||||
} as unknown as LayerSpecification,
|
||||
before,
|
||||
);
|
||||
} catch (e) {
|
||||
console.warn('Ship photo indicator layer add failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
const labelFilter = [
|
||||
'all',
|
||||
['!=', ['to-string', ['coalesce', ['get', 'labelName'], '']], ''],
|
||||
@ -610,6 +643,7 @@ export function useGlobeShipLayers(
|
||||
projection,
|
||||
settings.showShips,
|
||||
overlays.shipLabels,
|
||||
overlays.shipPhotos,
|
||||
globeShipGeoJson,
|
||||
alarmGeoJson,
|
||||
mapSyncEpoch,
|
||||
|
||||
@ -85,6 +85,8 @@ export interface MercatorDeckLayerContext extends DeckHoverCallbacks, DeckSelect
|
||||
alarmMmsiMap?: Map<number, LegacyAlarmKind>;
|
||||
alarmPulseRadius?: number;
|
||||
alarmPulseHoverRadius?: number;
|
||||
shipPhotoTargets?: AisTarget[];
|
||||
onClickShipPhoto?: (mmsi: number) => void;
|
||||
}
|
||||
|
||||
export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[] {
|
||||
@ -316,6 +318,26 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
|
||||
};
|
||||
|
||||
if (shipOtherData.length > 0) {
|
||||
layers.push(
|
||||
new ScatterplotLayer<AisTarget>({
|
||||
id: 'ships-other-halo',
|
||||
data: shipOtherData,
|
||||
pickable: false,
|
||||
billboard: false,
|
||||
parameters: overlayParams,
|
||||
getPosition: (d) => [d.lon, d.lat] as [number, number],
|
||||
radiusUnits: 'pixels',
|
||||
getRadius: 10,
|
||||
getFillColor: (d) => getShipColor(d, null, null, EMPTY_MMSI_SET).slice(0, 3).concat(40) as unknown as [number, number, number, number],
|
||||
getLineColor: (d) => {
|
||||
const c = getShipColor(d, null, null, EMPTY_MMSI_SET);
|
||||
return [c[0], c[1], c[2], 100] as [number, number, number, number];
|
||||
},
|
||||
stroked: true,
|
||||
lineWidthUnits: 'pixels',
|
||||
getLineWidth: 1,
|
||||
}),
|
||||
);
|
||||
layers.push(
|
||||
new IconLayer<AisTarget>({
|
||||
id: 'ships-other',
|
||||
@ -529,6 +551,31 @@ export function buildMercatorDeckLayers(ctx: MercatorDeckLayerContext): unknown[
|
||||
);
|
||||
}
|
||||
|
||||
/* ─ ship photo indicator (사진 유무 표시) ─ */
|
||||
const photoTargets = ctx.shipPhotoTargets ?? [];
|
||||
if (ctx.showShips && ctx.overlays.shipPhotos && photoTargets.length > 0) {
|
||||
layers.push(
|
||||
new ScatterplotLayer<AisTarget>({
|
||||
id: 'ship-photo-indicator',
|
||||
data: photoTargets,
|
||||
pickable: true,
|
||||
billboard: false,
|
||||
filled: true,
|
||||
stroked: true,
|
||||
radiusUnits: 'pixels',
|
||||
getRadius: 5,
|
||||
getFillColor: [0, 188, 212, 180],
|
||||
getLineColor: [255, 255, 255, 200],
|
||||
lineWidthUnits: 'pixels',
|
||||
getLineWidth: 1,
|
||||
getPosition: (d) => [d.lon, d.lat] as [number, number],
|
||||
onClick: (info: PickingInfo) => {
|
||||
if (info.object) ctx.onClickShipPhoto?.((info.object as AisTarget).mmsi);
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
return layers;
|
||||
}
|
||||
|
||||
|
||||
@ -87,10 +87,10 @@ export function getShipColor(
|
||||
if (rgb) return [rgb[0], rgb[1], rgb[2], 235];
|
||||
return [245, 158, 11, 235];
|
||||
}
|
||||
if (!isFiniteNumber(t.sog)) return [MAP_DEFAULT_SHIP_RGB[0], MAP_DEFAULT_SHIP_RGB[1], MAP_DEFAULT_SHIP_RGB[2], 130];
|
||||
if (t.sog >= 10) return [148, 163, 184, 185];
|
||||
if (t.sog >= 1) return [MAP_DEFAULT_SHIP_RGB[0], MAP_DEFAULT_SHIP_RGB[1], MAP_DEFAULT_SHIP_RGB[2], 175];
|
||||
return [71, 85, 105, 165];
|
||||
if (!isFiniteNumber(t.sog)) return [MAP_DEFAULT_SHIP_RGB[0], MAP_DEFAULT_SHIP_RGB[1], MAP_DEFAULT_SHIP_RGB[2], 175];
|
||||
if (t.sog >= 10) return [148, 163, 184, 215];
|
||||
if (t.sog >= 1) return [MAP_DEFAULT_SHIP_RGB[0], MAP_DEFAULT_SHIP_RGB[1], MAP_DEFAULT_SHIP_RGB[2], 210];
|
||||
return [71, 85, 105, 200];
|
||||
}
|
||||
|
||||
export function buildGlobeShipFeature(
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import type { AisTarget } from '../../../entities/aisTarget/model/types';
|
||||
import type { LegacyVesselInfo } from '../../../entities/legacyVessel/model/types';
|
||||
import { toThumbnailUrl } from '../../../entities/shipImage/api/fetchShipImages';
|
||||
import { fmtIsoFull } from '../../../shared/lib/datetime';
|
||||
import { isFiniteNumber, toSafeNumber } from './setUtils';
|
||||
|
||||
@ -50,8 +51,16 @@ export function getShipTooltipHtml({
|
||||
</div>`
|
||||
: '';
|
||||
|
||||
const imgPath = t?.shipImagePath;
|
||||
const photoHtml = imgPath
|
||||
? `<div style="margin: 0 0 6px; text-align: center;">
|
||||
<img src="${toThumbnailUrl(imgPath)}" alt="" style="width: 140px; height: 90px; object-fit: cover; border-radius: 6px; display: inline-block; border: 1px solid rgba(255,255,255,.12);" />
|
||||
</div>`
|
||||
: '';
|
||||
|
||||
return {
|
||||
html: `<div style="font-family: system-ui; font-size: 12px; white-space: nowrap;">
|
||||
${photoHtml}
|
||||
<div style="font-weight: 700; margin-bottom: 4px;">${name}</div>
|
||||
<div>MMSI: <b>${mmsi}</b>${vesselType ? ` · ${vesselType}` : ''}</div>
|
||||
<div>SOG: <b>${sog ?? '?'}</b> kt · COG: <b>${cog ?? '?'}</b>°</div>
|
||||
|
||||
@ -71,6 +71,8 @@ export interface Map3DProps {
|
||||
onOpenTrackMenu?: (info: { x: number; y: number; mmsi: number; vesselName: string }) => void;
|
||||
/** MMSI → 가장 높은 우선순위 경고 종류. filteredAlarms 기반. */
|
||||
alarmMmsiMap?: Map<number, LegacyAlarmKind>;
|
||||
/** 사진 있는 선박 클릭 시 콜백 (사진 표시자 or 선박 아이콘) */
|
||||
onClickShipPhoto?: (mmsi: number) => void;
|
||||
}
|
||||
|
||||
export type DashSeg = {
|
||||
|
||||
130
apps/web/src/widgets/shipImage/ShipImageGallery.tsx
Normal file
130
apps/web/src/widgets/shipImage/ShipImageGallery.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { ShipImageInfo } from '../../entities/shipImage/model/types';
|
||||
import { fetchShipImagesByImo, toThumbnailUrl } from '../../entities/shipImage/api/fetchShipImages';
|
||||
|
||||
interface ShipImageGalleryProps {
|
||||
imo?: number;
|
||||
initialImagePath?: string | null;
|
||||
totalCount?: number;
|
||||
onOpenModal?: (index: number, images?: ShipImageInfo[]) => void;
|
||||
}
|
||||
|
||||
const SCROLL_STEP = 86; // 80px thumb + 6px gap
|
||||
|
||||
const ShipImageGallery = ({ imo, initialImagePath, totalCount, onOpenModal }: ShipImageGalleryProps) => {
|
||||
const [images, setImages] = useState<ShipImageInfo[] | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!imo || imo <= 0) return;
|
||||
const ac = new AbortController();
|
||||
fetchShipImagesByImo(imo, ac.signal).then((result) => {
|
||||
if (ac.signal.aborted) return;
|
||||
if (result.length > 0) setImages(result);
|
||||
});
|
||||
return () => ac.abort();
|
||||
}, [imo]);
|
||||
|
||||
const updateScrollButtons = () => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
setCanScrollLeft(el.scrollLeft > 0);
|
||||
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el || !images) return;
|
||||
const raf = requestAnimationFrame(updateScrollButtons);
|
||||
el.addEventListener('scroll', updateScrollButtons, { passive: true });
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
el.removeEventListener('scroll', updateScrollButtons);
|
||||
};
|
||||
}, [images]);
|
||||
|
||||
const handleScroll = (dir: 'left' | 'right') => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
el.scrollBy({ left: dir === 'left' ? -SCROLL_STEP : SCROLL_STEP, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// 전체 이미지 로드 완료
|
||||
if (images && images.length > 0) {
|
||||
const showArrows = images.length > 3;
|
||||
return (
|
||||
<div className="ship-image-gallery-wrap">
|
||||
{showArrows && canScrollLeft && (
|
||||
<button
|
||||
className="ship-image-gallery__arrow ship-image-gallery__arrow--left"
|
||||
onClick={() => handleScroll('left')}
|
||||
aria-label="이전 사진"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
)}
|
||||
<div className="ship-image-gallery" ref={scrollRef}>
|
||||
{images.map((img, i) => (
|
||||
<button
|
||||
key={img.picId}
|
||||
className="ship-image-gallery__thumb"
|
||||
onClick={() => onOpenModal?.(i, images)}
|
||||
aria-label={`선박 사진 ${i + 1}`}
|
||||
>
|
||||
<img
|
||||
src={toThumbnailUrl(img.path)}
|
||||
alt={`사진 ${i + 1}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{showArrows && canScrollRight && (
|
||||
<button
|
||||
className="ship-image-gallery__arrow ship-image-gallery__arrow--right"
|
||||
onClick={() => handleScroll('right')}
|
||||
aria-label="다음 사진"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// fallback: 단일 이미지 (API 로딩 중이거나 imo 없음)
|
||||
if (!initialImagePath) return null;
|
||||
const count = totalCount ?? 1;
|
||||
|
||||
return (
|
||||
<div className="ship-image-gallery">
|
||||
<button
|
||||
className="ship-image-gallery__thumb"
|
||||
onClick={() => onOpenModal?.(0)}
|
||||
aria-label="선박 사진 1"
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<img
|
||||
src={toThumbnailUrl(initialImagePath)}
|
||||
alt="사진 1"
|
||||
loading="lazy"
|
||||
/>
|
||||
{count > 1 && (
|
||||
<span style={{
|
||||
position: 'absolute', top: 2, right: 2,
|
||||
background: 'rgba(30,120,255,0.92)', color: '#fff',
|
||||
borderRadius: '50%', width: 18, height: 18,
|
||||
fontSize: 10, fontWeight: 700,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
{count > 9 ? '9+' : count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShipImageGallery;
|
||||
143
apps/web/src/widgets/shipImage/ShipImageModal.tsx
Normal file
143
apps/web/src/widgets/shipImage/ShipImageModal.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import type { ShipImageInfo } from '../../entities/shipImage/model/types';
|
||||
import { fetchShipImagesByImo, toHighResUrl } from '../../entities/shipImage/api/fetchShipImages';
|
||||
|
||||
interface ShipImageModalProps {
|
||||
/** 갤러리에서 전달받은 전체 이미지 목록 (있으면 API 호출 생략) */
|
||||
images?: ShipImageInfo[];
|
||||
/** 시작 인덱스 */
|
||||
initialIndex?: number;
|
||||
/** fallback: 첫 번째 이미지 경로 (images 없을 때) */
|
||||
initialImagePath?: string;
|
||||
/** 전체 이미지 수 (images 없을 때 표시용) */
|
||||
totalCount?: number;
|
||||
/** IMO — images 없을 때 API 호출용 */
|
||||
imo?: number;
|
||||
vesselName?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ShipImageModal = ({
|
||||
images: preloadedImages,
|
||||
initialIndex = 0,
|
||||
initialImagePath,
|
||||
totalCount,
|
||||
imo,
|
||||
vesselName,
|
||||
onClose,
|
||||
}: ShipImageModalProps) => {
|
||||
const [index, setIndex] = useState(initialIndex);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
// 전체 이미지 목록: preloaded가 있으면 그것을 사용, 없으면 API로 로드
|
||||
const [fetchedImages, setFetchedImages] = useState<ShipImageInfo[] | null>(null);
|
||||
const needsFetch = !preloadedImages && !!imo && imo > 0;
|
||||
const [fetchingAll, setFetchingAll] = useState(needsFetch);
|
||||
|
||||
const allImages = preloadedImages ?? fetchedImages;
|
||||
const total = allImages ? allImages.length : (totalCount ?? 1);
|
||||
const hasPrev = index > 0;
|
||||
const hasNext = index < total - 1;
|
||||
|
||||
// 현재 이미지 URL 결정 (모달은 항상 고화질)
|
||||
const currentImageUrl = (() => {
|
||||
if (allImages && allImages[index]) return toHighResUrl(allImages[index].path);
|
||||
if (index === 0 && initialImagePath) return toHighResUrl(initialImagePath);
|
||||
return null;
|
||||
})();
|
||||
|
||||
// preloaded 없을 때만 API 호출
|
||||
useEffect(() => {
|
||||
if (!needsFetch) return;
|
||||
const ac = new AbortController();
|
||||
fetchShipImagesByImo(imo!, ac.signal).then((result) => {
|
||||
if (ac.signal.aborted) return;
|
||||
setFetchedImages(result.length > 0 ? result : null);
|
||||
setFetchingAll(false);
|
||||
});
|
||||
return () => ac.abort();
|
||||
}, [needsFetch, imo]);
|
||||
|
||||
const goPrev = useCallback(() => {
|
||||
if (hasPrev) { setIndex((i) => i - 1); setLoading(true); setError(false); }
|
||||
}, [hasPrev]);
|
||||
|
||||
const goNext = useCallback(() => {
|
||||
if (!hasNext) return;
|
||||
setIndex((i) => i + 1);
|
||||
setLoading(true);
|
||||
setError(false);
|
||||
}, [hasNext]);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
else if (e.key === 'ArrowLeft') goPrev();
|
||||
else if (e.key === 'ArrowRight') goNext();
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [onClose, goPrev, goNext]);
|
||||
|
||||
// 현재 이미지 메타데이터
|
||||
const currentMeta = allImages?.[index] ?? null;
|
||||
|
||||
return (
|
||||
<div className="ship-image-modal" onClick={onClose}>
|
||||
<div className="ship-image-modal__content" onClick={(e) => e.stopPropagation()}>
|
||||
{/* 헤더 */}
|
||||
<div className="ship-image-modal__header">
|
||||
<span className="ship-image-modal__title">
|
||||
{vesselName && <strong>{vesselName}</strong>}
|
||||
{total > 1 && <span className="ship-image-modal__counter">{index + 1} / {total}</span>}
|
||||
</span>
|
||||
<button className="ship-image-modal__close" onClick={onClose} aria-label="닫기">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 이미지 영역 */}
|
||||
<div className="ship-image-modal__body">
|
||||
{hasPrev && (
|
||||
<button className="ship-image-modal__nav ship-image-modal__nav--prev" onClick={goPrev} aria-label="이전">
|
||||
‹
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="ship-image-modal__img-wrap">
|
||||
{(loading || fetchingAll) && !error && <div className="ship-image-modal__spinner" />}
|
||||
{error && <div className="ship-image-modal__error">이미지를 불러올 수 없습니다</div>}
|
||||
{currentImageUrl ? (
|
||||
<img
|
||||
key={currentImageUrl}
|
||||
src={currentImageUrl}
|
||||
alt={vesselName || '선박 사진'}
|
||||
className="ship-image-modal__img"
|
||||
style={{ opacity: loading ? 0 : 1 }}
|
||||
onLoad={() => setLoading(false)}
|
||||
onError={() => { setLoading(false); setError(true); }}
|
||||
/>
|
||||
) : fetchingAll ? null : (
|
||||
<div className="ship-image-modal__error">이미지를 불러올 수 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasNext && (
|
||||
<button className="ship-image-modal__nav ship-image-modal__nav--next" onClick={goNext} aria-label="다음">
|
||||
›
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 푸터 */}
|
||||
<div className="ship-image-modal__footer">
|
||||
{currentMeta?.copyright && <span>{currentMeta.copyright}</span>}
|
||||
{currentMeta?.date && <span>{currentMeta.date}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShipImageModal;
|
||||
@ -40,6 +40,12 @@ export default defineConfig(({ mode }) => {
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
// 선박 이미지 정적 파일 (nginx alias /pgdata/shipimg/)
|
||||
"/shipimg": {
|
||||
target: signalBatchTarget,
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user