Merge pull request 'fix: S&P Global 사진 URL 목록 API 연동 + 로그인 DEMO 표기' (#51) from fix/ship-image-urls into develop

docs/RELEASE-NOTES.md

@@ -23,6 +23,10 @@
 ### 수정
 - 센서 API(/api/sensor/*) 인증 예외 처리 (공개 데이터)
 - 선박 모달 열 때마다 S&P Global 우선 탭 리셋 (MarineTraffic 포커스 유지 버그)
+- S&P Global 사진 URL: IMO 기반 이미지 목록 API 연동 (잘못된 번호 패턴 제거)
+
+### 기타
+- 로그인 화면 KCG 로고에 DEMO 문구 오버레이
 
 ## [2026-03-18.2]
 

frontend/src/components/auth/LoginPage.tsx

@@ -104,7 +104,22 @@ const LoginPage = ({ onGoogleLogin, onDevLogin }: LoginPageProps) => {
       >
         {/* Title */}
         <div className="flex flex-col items-center gap-2">
-          <img src="/kcg.svg" alt="KCG" style={{ width: 120, height: 120 }} />
+          <div className="relative inline-block">
+            <img src="/kcg.svg" alt="KCG" style={{ width: 120, height: 120 }} />
+            <span
+              className="absolute font-black tracking-widest"
+              style={{
+                bottom: 2,
+                right: -8,
+                fontSize: 14,
+                color: 'var(--kcg-danger)',
+                opacity: 0.85,
+                textShadow: '0 0 4px rgba(0,0,0,0.6)',
+              }}
+            >
+              DEMO
+            </span>
+          </div>
           <h1
             className="text-xl font-bold"
             style={{ color: 'var(--kcg-text)' }}

frontend/src/components/layers/ShipLayer.tsx

@@ -138,47 +138,63 @@ interface VesselPhotoProps {
   shipImageCount?: number;
 }
 
-function toHighRes(path: string): string {
-  return path.replace(/_1\.(jpg|jpeg|png)$/i, '_2.$1');
-}
-
 /**
- * S&P Global 이미지 경로에서 N번째 이미지 URL 생성
- * 패턴: /shipimg/.../photo_1.jpg → photo_2.jpg (고화질), photo_3.jpg, ...
- * shipImageCount가 N이면 _1 ~ _N 존재 (각각 _2 고화질 버전)
+ * S&P Global 이미지 목록 API 응답
+ * GET /signal-batch/api/v1/shipimg/{imo}
+ * path에 _1.jpg(썸네일) / _2.jpg(원본) 을 붙여서 사용
  */
-function buildSpgUrls(basePath: string, count: number): string[] {
-  const urls: string[] = [];
-  // 항상 고화질(_2) 우선, count만큼 생성
-  for (let i = 1; i <= Math.max(count, 1); i++) {
-    // basePath 예: /shipimg/.../1234_1.jpg
-    // _1을 _i로 교체 후 고화질로 변환
-    const indexed = basePath.replace(/_1\.(jpg|jpeg|png)$/i, `_${i}.$1`);
-    urls.push(toHighRes(indexed));
-  }
-  return urls;
+interface SpgImageInfo {
+  picId: number;
+  path: string;       // e.g. "/shipimg/22738/2273823"
+  copyright: string;
+  date: string;
 }
 
-function VesselPhoto({ mmsi, shipImagePath, shipImageCount }: VesselPhotoProps) {
+// IMO별 이미지 목록 캐시
+const spgImageCache = new Map<string, SpgImageInfo[] | null>();
+
+async function fetchSpgImages(imo: string): Promise<SpgImageInfo[]> {
+  if (spgImageCache.has(imo)) return spgImageCache.get(imo) || [];
+  try {
+    const res = await fetch(`/signal-batch/api/v1/shipimg/${imo}`);
+    if (!res.ok) throw new Error(`${res.status}`);
+    const data: SpgImageInfo[] = await res.json();
+    spgImageCache.set(imo, data);
+    return data;
+  } catch {
+    spgImageCache.set(imo, null);
+    return [];
+  }
+}
+
+function VesselPhoto({ mmsi, imo, shipImagePath }: VesselPhotoProps) {
   const localUrl = LOCAL_SHIP_PHOTOS[mmsi];
 
   const hasSPGlobal = !!shipImagePath;
-  // 항상 S&P Global 우선 (모달 열릴 때마다 리셋)
   const [activeTab, setActiveTab] = useState<PhotoSource>(hasSPGlobal ? 'spglobal' : 'marinetraffic');
   const [spgSlideIdx, setSpgSlideIdx] = useState(0);
   const [spgErrors, setSpgErrors] = useState<Set<number>>(new Set());
+  const [spgImages, setSpgImages] = useState<SpgImageInfo[]>([]);
 
-  // 모달이 다른 선박으로 변경될 때 탭/슬라이드 리셋
+  // 모달이 다른 선박으로 변경될 때 리셋 + 이미지 목록 조회
   useEffect(() => {
     setActiveTab(hasSPGlobal ? 'spglobal' : 'marinetraffic');
     setSpgSlideIdx(0);
     setSpgErrors(new Set());
-  }, [mmsi, hasSPGlobal]);
+    setSpgImages([]);
 
-  // S&P Global slide URLs
+    if (imo && hasSPGlobal) {
+      fetchSpgImages(imo).then(setSpgImages);
+    } else if (shipImagePath) {
+      // IMO 없으면 shipImagePath 단일 이미지 사용
+      setSpgImages([{ picId: 0, path: shipImagePath.replace(/_[12]\.\w+$/, ''), copyright: '', date: '' }]);
+    }
+  }, [mmsi, imo, hasSPGlobal, shipImagePath]);
+
+  // S&P Global slide URLs: 각 이미지의 path + _2.jpg (원본)
   const spgUrls = useMemo(
-    () => shipImagePath ? buildSpgUrls(shipImagePath, shipImageCount ?? 1) : [],
-    [shipImagePath, shipImageCount],
+    () => spgImages.map(img => `${img.path}_2.jpg`),
+    [spgImages],
   );
   const validSpgCount = spgUrls.length;
 
@@ -188,7 +204,6 @@ function VesselPhoto({ mmsi, shipImagePath, shipImageCount }: VesselPhotoProps)
   });
 
   useEffect(() => {
-    // 새 선박이면 캐시 확인
     setMtPhoto(vesselPhotoCache.has(mmsi) ? vesselPhotoCache.get(mmsi) : undefined);
   }, [mmsi]);