feat: 실제 지하철역 데이터 연동

app/meeting/page.tsx

@@ -5,29 +5,32 @@ import Image from 'next/image';
 import KakaoMap from '@/components/map/kakaoMap';
 import StationSearch from '@/components/meeting/stationSearch';
 import { useOpenModal } from '@/hooks/useOpenModal';
-import { MOCK_PARTICIPANTS, MOCK_SEARCH_STATIONS } from '@/mock/mockData';
+import { MOCK_PARTICIPANTS } from '@/mock/mockData';
+import StationData from '@/database/stations_info.json';
 import { useRouter } from 'next/navigation';
 
+const STATION_DATA = StationData;
+
 export default function Page() {
   // 선택된 역 이름 상태 관리
+
   const [selectedStation, setSelectedStation] = useState<string | null>(null);
   const openModal = useOpenModal();
   const router = useRouter();
 
   // 1. [좌표 찾기] 선택된 역 이름으로 MOCK 데이터에서 정보 찾기
-  const selectedStationInfo = MOCK_SEARCH_STATIONS.find(
-    (station) => station.name === selectedStation
-  );
+  const selectedStationInfo = STATION_DATA.find((station) => station.name === selectedStation);
 
   // 2. [내 참가자 객체 생성] 선택된 역이 있을 때만 생성
   const myParticipant = selectedStation
     ? {
         id: 'me', // 고유 ID (문자열)
         name: '나',
         station: selectedStation,
+        line: '2호선',
         // 정보가 없으면 서울시청 좌표를 기본값으로 사용 (예외 처리)
-        lat: selectedStationInfo?.lat || 37.5665,
-        lng: selectedStationInfo?.lng || 126.978,
+        latitude: selectedStationInfo?.latitude || 37.5665,
+        longitude: selectedStationInfo?.longitude || 126.978,
         status: 'done',
         hexColor: '#000000',
       }
@@ -85,7 +88,7 @@ export default function Page() {
 
           {/* 출발지 검색 창 컴포넌트 */}
           <StationSearch
-            stations={MOCK_SEARCH_STATIONS}
+            stations={STATION_DATA}
             selectedStation={selectedStation}
             onSelect={setSelectedStation}
           />

components/map/kakaoMap.tsx

@@ -6,10 +6,11 @@
 // [1] Participant 인터페이스 수정
 interface Participant {
   id: number | string; // 'me'는 string, 나머지는 number이므로 유니온 타입으로 변경
+  line: string;
   name: string;
   station: string;
-  lat: number;
-  lng: number;
+  latitude: number;
+  longitude: number;
   hexColor: string;
 }
 
@@ -20,7 +21,7 @@
 
 export default function KakaoMap({ className, participants = [] }: KakaoMapProps) {
   const mapContainer = useRef<HTMLDivElement>(null);
   const [map, setMap] = useState<any>(null);
 
   useEffect(() => {
     if (!window.kakao) return;
@@ -41,7 +42,7 @@
 
       if (participants.length > 0) {
         participants.forEach((person) => {
-          const position = new window.kakao.maps.LatLng(person.lat, person.lng);
+          const position = new window.kakao.maps.LatLng(person.latitude, person.longitude);
           bounds.extend(position);
 
           // [2] '나'일 경우 z-index를 높여서 맨 위에 표시

components/map/kakaoMapLine.tsx

@@ -11,9 +11,9 @@
 export default function KakaoMap({ className }: KakaoMapProps) {
   const router = useRouter();
   const mapContainer = useRef<HTMLDivElement>(null);
   const mapRef = useRef<any>(null);
   const polylinesRef = useRef<{ id: number; lines: any[] }[]>([]);
   const tooltipOverlayRef = useRef<any>(null);
 
   const handleLink = () => {
     router.push('/recommend');
@@ -27,15 +27,18 @@
       if (!container) return;
 
       const options = {
-        center: new window.kakao.maps.LatLng(HAPJUNG_STATION.lat, HAPJUNG_STATION.lng),
+        center: new window.kakao.maps.LatLng(HAPJUNG_STATION.latitude, HAPJUNG_STATION.longitude),
         level: 8,
       };
 
       const map = new window.kakao.maps.Map(container, options);
       mapRef.current = map;
 
       const bounds = new window.kakao.maps.LatLngBounds();
-      const endPosition = new window.kakao.maps.LatLng(HAPJUNG_STATION.lat, HAPJUNG_STATION.lng);
+      const endPosition = new window.kakao.maps.LatLng(
+        HAPJUNG_STATION.latitude,
+        HAPJUNG_STATION.longitude
+      );
       bounds.extend(endPosition);
 
       // 1. [도착지 마커] 합정역 - 주황색 알약
@@ -69,7 +72,7 @@
       // 3. 경로 그리기
       REAL_SUBWAY_PATHS.forEach((route) => {
         const linePath = route.stations.map((station) => {
-          const latlng = new window.kakao.maps.LatLng(station.lat, station.lng);
+          const latlng = new window.kakao.maps.LatLng(station.latitude, station.longitude);
           bounds.extend(latlng);
           return latlng;
         });
@@ -89,7 +92,7 @@
         route.stations.forEach((station, index) => {
           if (index !== 0 && index !== route.stations.length - 1) {
             const circle = new window.kakao.maps.Circle({
-              center: new window.kakao.maps.LatLng(station.lat, station.lng),
+              center: new window.kakao.maps.LatLng(station.latitude, station.longitude),
               radius: 40,
               strokeWeight: 1,
               strokeColor: route.color,
@@ -102,7 +105,9 @@
 
             window.kakao.maps.event.addListener(circle, 'mouseover', () => {
               const overlay = tooltipOverlayRef.current;
-              overlay.setPosition(new window.kakao.maps.LatLng(station.lat, station.lng));
+              overlay.setPosition(
+                new window.kakao.maps.LatLng(station.latitude, station.longitude)
+              );
               const el = document.createElement('div');
               el.innerHTML = tooltipContent;
               const textSpan = el.querySelector('#tooltip-text');
@@ -121,7 +126,10 @@
 
         // 4. 출발지 마커 (말풍선 + 원형)
         const startStation = route.stations[0];
-        const startPos = new window.kakao.maps.LatLng(startStation.lat, startStation.lng);
+        const startPos = new window.kakao.maps.LatLng(
+          startStation.latitude,
+          startStation.longitude
+        );
 
         // 이벤트 영역
         const hitArea = new window.kakao.maps.Circle({

components/map/kakaoMapRecommend.tsx

@@ -16,9 +16,9 @@
   { id: '스터디카페', label: '스터디카페', icon: '/icon/place/studycafe' },
 ];
 
 export default function KakaoMapRecommend({ className, onSelectPlace }: KakaoMapRecommendProps) {
   const mapContainer = useRef<HTMLDivElement>(null);
   const mapRef = useRef<any>(null);
   const [activeCategory, setActiveCategory] = useState('식당'); // 기본 카테고리
 
   // 줌 인/아웃 핸들러
@@ -40,15 +40,18 @@
       if (!container) return;
 
       const options = {
-        center: new window.kakao.maps.LatLng(HAPJUNG_STATION.lat, HAPJUNG_STATION.lng),
+        center: new window.kakao.maps.LatLng(HAPJUNG_STATION.latitude, HAPJUNG_STATION.longitude),
         level: 4,
       };
 
       const map = new window.kakao.maps.Map(container, options);
       mapRef.current = map;
 
       // 1. [중심지 마커] 합정역
-      const centerPosition = new window.kakao.maps.LatLng(HAPJUNG_STATION.lat, HAPJUNG_STATION.lng);
+      const centerPosition = new window.kakao.maps.LatLng(
+        HAPJUNG_STATION.latitude,
+        HAPJUNG_STATION.longitude
+      );
       const centerContent = `
         <div class="flex items-center justify-center px-4 py-1.5 bg-[#A95623] border border-white rounded-full ">
           <span class="text-sm font-semibold text-white">${HAPJUNG_STATION.name}</span>
@@ -67,7 +70,7 @@
         (place) => place.category === activeCategory
       );
       filteredPlaces.forEach((place) => {
-        const position = new window.kakao.maps.LatLng(place.lat, place.lng);
+        const position = new window.kakao.maps.LatLng(place.latitude, place.longitude);
         // [수정] 서비스 로고를 활용한 커스텀 핀 디자인
         const pinContent = `
             <div class="group cursor-pointer relative flex flex-col items-center">

components/meeting/stationSearch.tsx

@@ -2,13 +2,14 @@
 
 import { useState } from 'react';
 import Image from 'next/image';
-import { getChoseong, disassemble } from 'es-hangul';
+import { getChoseong } from 'es-hangul';
 
 // [NEW] 역 정보 객체 타입 정의
 interface Station {
+  line: string;
   name: string;
-  lat: number;
-  lng: number;
+  latitude: number;
+  longitude: number;
 }
 
 // Props 타입 정의 업데이트
@@ -29,11 +30,7 @@ export default function StationSearch({
   const filteredStations = searchValue
     ? stations.filter((station) => {
         const name = station.name; // 객체에서 이름 추출
-        return (
-          name.includes(searchValue) ||
-          getChoseong(name).includes(searchValue) ||
-          disassemble(name).includes(disassemble(searchValue))
-        );
+        return name.includes(searchValue) || getChoseong(name).includes(searchValue);
       })
     : [];