UI 수정

기획안 반영 및 보완

client/src/components/geo/GeoSearch.tsx

@@ -5,37 +5,9 @@
  */
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-
-interface GeoPoint {
-  title: string;
-  category: string;
-  lat: number;
-  lon: number;
-  z: number;
-  type: 'poi' | 'station';
-}
-
-interface FrameMatch {
-  frame: number;
-  time: number;
-  bearingDiff: number;
-  elevationDiff: number;
-  distance: number;
-  pixelX: number;
-  pixelY: number;
-  groupSize?: number;
-  groupStart?: number;
-  groupEnd?: number;
-}
-
-interface PoiInFrame {
-  poi: GeoPoint;
-  bearingDiff: number;
-  elevationDiff: number;
-  distance: number;
-  pixelX: number;
-  pixelY: number;
-}
+import { useGeoStore } from '../../store/geoStore';
+import { findFramesForPoi, findPoisForFrame } from '../../utils/geoSearch';
+import type { GeoPoint, FrameMatch, PoiInFrame } from '../../types/geo';
 
 interface Props {
   currentFrame: number;
@@ -49,20 +21,23 @@ export default function GeoSearch({ currentFrame, fps, onSeekToFrame }: Props) {
   const [tab, setTab] = useState<Tab>('search');
   const [query, setQuery] = useState('');
   const [suggestions, setSuggestions] = useState<GeoPoint[]>([]);
-  const [allPois, setAllPois] = useState<GeoPoint[]>([]);
   const [searchResult, setSearchResult] = useState<{ poi: GeoPoint; frames: FrameMatch[] } | null>(null);
   const [reverseResult, setReverseResult] = useState<PoiInFrame[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // POI 목록 로드 (자동완성용)
-  useEffect(() => {
-    fetch('/api/geo/pois')
-      .then(r => r.json())
-      .then(data => setAllPois(Array.isArray(data) ? data : []))
-      .catch(() => {});
-  }, []);
+  // 클라이언트 지리정보 스토어 구독 (서버 /api/geo/* 대체)
+  const loaded = useGeoStore(s => s.loaded);
+  const frames = useGeoStore(s => s.frames);
+  const pois = useGeoStore(s => s.pois);
+  const stations = useGeoStore(s => s.stations);
+
+  // POI 목록 (자동완성용): 측점 + 건물 통합 (서버 /api/geo/pois 동치)
+  const allPois = React.useMemo<GeoPoint[]>(
+    () => (loaded ? [...stations, ...pois] : []),
+    [loaded, stations, pois],
+  );
 
   // 자동완성 필터링
   useEffect(() => {
@@ -71,45 +46,44 @@ export default function GeoSearch({ currentFrame, fps, onSeekToFrame }: Props) {
     setSuggestions(allPois.filter(p => p.title.toLowerCase().includes(q)).slice(0, 10));
   }, [query, allPois]);
 
-  // 건물/측점명으로 프레임 검색
-  const handleSearch = useCallback(async (q?: string) => {
+  // 건물/측점명으로 프레임 검색 (클라이언트 검색 — 서버 /api/geo/search 대체)
+  const handleSearch = useCallback((q?: string) => {
     const searchQ = (q ?? query).trim();
     if (!searchQ) return;
     setLoading(true);
     setError('');
     setSuggestions([]);
     try {
-      const res = await fetch(`/api/geo/search?q=${encodeURIComponent(searchQ)}&margin=1.0&maxDist=1500`);
-      const data = await res.json();
-      if (!res.ok) { setError(data.error || '검색 실패'); setSearchResult(null); return; }
-      setSearchResult(data);
-    } catch {
-      setError('서버 연결 실패');
+      if (!loaded) { setError('폴더를 먼저 선택하세요'); setSearchResult(null); return; }
+      const origin = useGeoStore.getState().origin;
+      const combined = [...stations, ...pois];
+      const result = findFramesForPoi(frames, combined, searchQ, 1.0, 1500, 0, origin);
+      if (!result.poi) { setError('일치하는 건물/측점 없음'); setSearchResult(null); return; }
+      setSearchResult({ poi: result.poi, frames: result.frames });
     } finally {
       setLoading(false);
     }
-  }, [query]);
+  }, [query, loaded, frames, stations, pois]);
 
-  // 현재 프레임 역조회
-  const handleReverse = useCallback(async () => {
+  // 현재 프레임 역조회 (클라이언트 검색 — 서버 /api/geo/frame/{n} 대체)
+  const handleReverse = useCallback(() => {
     setLoading(true);
     setError('');
     try {
-      const res = await fetch(`/api/geo/frame/${currentFrame}?margin=1.0`);
-      const data = await res.json();
-      if (!res.ok) { setError(data.error || '조회 실패'); setReverseResult(null); return; }
-      setReverseResult(data.pois ?? []);
-    } catch {
-      setError('서버 연결 실패');
+      if (!loaded) { setReverseResult([]); return; }
+      const origin = useGeoStore.getState().origin;
+      const combined = [...stations, ...pois];
+      const result = findPoisForFrame(frames, combined, currentFrame, 1.0, 0, origin);
+      setReverseResult(result.pois);
     } finally {
       setLoading(false);
     }
-  }, [currentFrame]);
+  }, [currentFrame, loaded, frames, stations, pois]);
 
-  // 탭 전환 시 역조회 자동 실행
+  // 탭 전환/프레임 변경/데이터 로드 시 역조회 자동 실행
   useEffect(() => {
     if (tab === 'reverse') handleReverse();
-  }, [tab, currentFrame]);
+  }, [tab, currentFrame, handleReverse]);
 
   const formatDist = (m: number) =>
     m >= 1000 ? `${(m / 1000).toFixed(2)}km` : `${Math.round(m)}m`;