Merge pull request '지도에 마커 기능 추가' (#155) from feat/rest-api into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/155

frontend/components/admin/dashboard/VehicleMapConfigPanel.tsx

@@ -1,7 +1,9 @@
-'use client';
+"use client";
 
-import React, { useState, useCallback } from 'react';
-import { ChartConfig, QueryResult } from './types';
+import React, { useState, useCallback } from "react";
+import { ChartConfig, QueryResult, MarkerColorRule } from "./types";
+import { Plus, Trash2 } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
 
 interface VehicleMapConfigPanelProps {
   config?: ChartConfig;
@@ -18,24 +20,80 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
   const [currentConfig, setCurrentConfig] = useState<ChartConfig>(config || {});
 
   // 설정 업데이트
-  const updateConfig = useCallback((updates: Partial<ChartConfig>) => {
-    const newConfig = { ...currentConfig, ...updates };
-    setCurrentConfig(newConfig);
-    onConfigChange(newConfig);
-  }, [currentConfig, onConfigChange]);
+  const updateConfig = useCallback(
+    (updates: Partial<ChartConfig>) => {
+      const newConfig = { ...currentConfig, ...updates };
+      setCurrentConfig(newConfig);
+      onConfigChange(newConfig);
+    },
+    [currentConfig, onConfigChange],
+  );
 
   // 사용 가능한 컬럼 목록
   const availableColumns = queryResult?.columns || [];
   const sampleData = queryResult?.rows?.[0] || {};
 
+  // 마커 색상 모드 변경
+  const handleMarkerColorModeChange = useCallback(
+    (mode: "single" | "conditional") => {
+      if (mode === "single") {
+        updateConfig({
+          markerColorMode: "single",
+          markerColorColumn: undefined,
+          markerColorRules: undefined,
+          markerDefaultColor: "#3b82f6", // 파란색
+        });
+      } else {
+        updateConfig({
+          markerColorMode: "conditional",
+          markerColorRules: [],
+          markerDefaultColor: "#6b7280", // 회색
+        });
+      }
+    },
+    [updateConfig],
+  );
+
+  // 마커 색상 규칙 추가
+  const addColorRule = useCallback(() => {
+    const newRule: MarkerColorRule = {
+      id: uuidv4(),
+      value: "",
+      color: "#3b82f6",
+      label: "",
+    };
+    const currentRules = currentConfig.markerColorRules || [];
+    updateConfig({ markerColorRules: [...currentRules, newRule] });
+  }, [currentConfig.markerColorRules, updateConfig]);
+
+  // 마커 색상 규칙 삭제
+  const deleteColorRule = useCallback(
+    (id: string) => {
+      const currentRules = currentConfig.markerColorRules || [];
+      updateConfig({ markerColorRules: currentRules.filter((rule) => rule.id !== id) });
+    },
+    [currentConfig.markerColorRules, updateConfig],
+  );
+
+  // 마커 색상 규칙 업데이트
+  const updateColorRule = useCallback(
+    (id: string, updates: Partial<MarkerColorRule>) => {
+      const currentRules = currentConfig.markerColorRules || [];
+      updateConfig({
+        markerColorRules: currentRules.map((rule) => (rule.id === id ? { ...rule, ...updates } : rule)),
+      });
+    },
+    [currentConfig.markerColorRules, updateConfig],
+  );
+
   return (
     <div className="space-y-3">
       <h4 className="text-xs font-semibold text-gray-800">🗺️ 지도 설정</h4>
 
       {/* 쿼리 결과가 없을 때 */}
       {!queryResult && (
-        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <div className="text-yellow-800 text-xs">
+        <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-3">
+          <div className="text-xs text-yellow-800">
             💡 먼저 SQL 쿼리를 실행하여 데이터를 가져온 후 지도를 설정할 수 있습니다.
           </div>
         </div>
@@ -49,10 +107,10 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
             <label className="block text-xs font-medium text-gray-700">지도 제목</label>
             <input
               type="text"
-              value={currentConfig.title || ''}
+              value={currentConfig.title || ""}
               onChange={(e) => updateConfig({ title: e.target.value })}
               placeholder="차량 위치 지도"
-              className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
+              className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
             />
           </div>
 
@@ -60,12 +118,12 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
           <div className="space-y-1.5">
             <label className="block text-xs font-medium text-gray-700">
               위도 컬럼 (Latitude)
-              <span className="text-red-500 ml-1">*</span>
+              <span className="ml-1 text-red-500">*</span>
             </label>
             <select
-              value={currentConfig.latitudeColumn || ''}
+              value={currentConfig.latitudeColumn || ""}
               onChange={(e) => updateConfig({ latitudeColumn: e.target.value })}
-              className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
+              className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
             >
               <option value="">선택하세요</option>
               {availableColumns.map((col) => (
@@ -80,12 +138,12 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
           <div className="space-y-1.5">
             <label className="block text-xs font-medium text-gray-700">
               경도 컬럼 (Longitude)
-              <span className="text-red-500 ml-1">*</span>
+              <span className="ml-1 text-red-500">*</span>
             </label>
             <select
-              value={currentConfig.longitudeColumn || ''}
+              value={currentConfig.longitudeColumn || ""}
               onChange={(e) => updateConfig({ longitudeColumn: e.target.value })}
-              className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
+              className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
             >
               <option value="">선택하세요</option>
               {availableColumns.map((col) => (
@@ -98,13 +156,11 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
 
           {/* 라벨 컬럼 (선택사항) */}
           <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-gray-700">
-              라벨 컬럼 (마커 표시명)
-            </label>
+            <label className="block text-xs font-medium text-gray-700">라벨 컬럼 (마커 표시명)</label>
             <select
-              value={currentConfig.labelColumn || ''}
+              value={currentConfig.labelColumn || ""}
               onChange={(e) => updateConfig({ labelColumn: e.target.value })}
-              className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
+              className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
             >
               <option value="">선택하세요 (선택사항)</option>
               {availableColumns.map((col) => (
@@ -115,74 +171,265 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
             </select>
           </div>
 
-          {/* 상태 컬럼 (선택사항) */}
-          <div className="space-y-1.5">
-            <label className="block text-xs font-medium text-gray-700">
-              상태 컬럼 (마커 색상)
-            </label>
-            <select
-              value={currentConfig.statusColumn || ''}
-              onChange={(e) => updateConfig({ statusColumn: e.target.value })}
-              className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
-            >
-              <option value="">선택하세요 (선택사항)</option>
-              {availableColumns.map((col) => (
-                <option key={col} value={col}>
-                  {col}
-                </option>
-              ))}
-            </select>
+          {/* 마커 색상 설정 */}
+          <div className="space-y-2 border-t pt-3">
+            <h5 className="text-xs font-semibold text-gray-800">🎨 마커 색상 설정</h5>
+
+            {/* 색상 모드 선택 */}
+            <div className="space-y-1.5">
+              <label className="block text-xs font-medium text-gray-700">색상 모드</label>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => handleMarkerColorModeChange("single")}
+                  className={`flex-1 rounded-lg border px-3 py-2 text-xs transition-colors ${
+                    (currentConfig.markerColorMode || "single") === "single"
+                      ? "border-blue-300 bg-blue-50 font-medium text-blue-700"
+                      : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+                  }`}
+                >
+                  단일 색상
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleMarkerColorModeChange("conditional")}
+                  className={`flex-1 rounded-lg border px-3 py-2 text-xs transition-colors ${
+                    currentConfig.markerColorMode === "conditional"
+                      ? "border-blue-300 bg-blue-50 font-medium text-blue-700"
+                      : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+                  }`}
+                >
+                  조건부 색상
+                </button>
+              </div>
+            </div>
+
+            {/* 단일 색상 모드 */}
+            {(currentConfig.markerColorMode || "single") === "single" && (
+              <div className="space-y-1.5 rounded-lg bg-gray-50 p-3">
+                <label className="block text-xs font-medium text-gray-700">마커 색상</label>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="color"
+                    value={currentConfig.markerDefaultColor || "#3b82f6"}
+                    onChange={(e) => updateConfig({ markerDefaultColor: e.target.value })}
+                    className="h-8 w-12 cursor-pointer rounded border border-gray-300"
+                  />
+                  <input
+                    type="text"
+                    value={currentConfig.markerDefaultColor || "#3b82f6"}
+                    onChange={(e) => updateConfig({ markerDefaultColor: e.target.value })}
+                    placeholder="#3b82f6"
+                    className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
+                  />
+                </div>
+                <p className="text-xs text-gray-500">모든 마커가 동일한 색상으로 표시됩니다</p>
+              </div>
+            )}
+
+            {/* 조건부 색상 모드 */}
+            {currentConfig.markerColorMode === "conditional" && (
+              <div className="space-y-2 rounded-lg bg-gray-50 p-3">
+                {/* 색상 조건 컬럼 선택 */}
+                <div className="space-y-1.5">
+                  <label className="block text-xs font-medium text-gray-700">
+                    색상 조건 컬럼
+                    <span className="ml-1 text-red-500">*</span>
+                  </label>
+                  <select
+                    value={currentConfig.markerColorColumn || ""}
+                    onChange={(e) => updateConfig({ markerColorColumn: e.target.value })}
+                    className="w-full rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
+                  >
+                    <option value="">선택하세요</option>
+                    {availableColumns.map((col) => (
+                      <option key={col} value={col}>
+                        {col}
+                      </option>
+                    ))}
+                  </select>
+                  <p className="text-xs text-gray-500">이 컬럼의 값에 따라 마커 색상이 결정됩니다</p>
+                </div>
+
+                {/* 기본 색상 */}
+                <div className="space-y-1.5">
+                  <label className="block text-xs font-medium text-gray-700">기본 색상</label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="color"
+                      value={currentConfig.markerDefaultColor || "#6b7280"}
+                      onChange={(e) => updateConfig({ markerDefaultColor: e.target.value })}
+                      className="h-8 w-12 cursor-pointer rounded border border-gray-300"
+                    />
+                    <input
+                      type="text"
+                      value={currentConfig.markerDefaultColor || "#6b7280"}
+                      onChange={(e) => updateConfig({ markerDefaultColor: e.target.value })}
+                      placeholder="#6b7280"
+                      className="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
+                    />
+                  </div>
+                  <p className="text-xs text-gray-500">규칙에 매칭되지 않는 경우 사용할 색상</p>
+                </div>
+
+                {/* 색상 규칙 목록 */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <label className="block text-xs font-medium text-gray-700">색상 규칙</label>
+                    <button
+                      type="button"
+                      onClick={addColorRule}
+                      className="flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1 text-xs text-white transition-colors hover:bg-blue-600"
+                    >
+                      <Plus className="h-3 w-3" />
+                      추가
+                    </button>
+                  </div>
+
+                  {/* 규칙 리스트 */}
+                  {(currentConfig.markerColorRules || []).length === 0 ? (
+                    <div className="rounded-lg border border-gray-200 bg-white p-3 text-center">
+                      <p className="text-xs text-gray-500">추가 버튼을 눌러 색상 규칙을 만드세요</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {(currentConfig.markerColorRules || []).map((rule) => (
+                        <div key={rule.id} className="space-y-2 rounded-lg border border-gray-200 bg-white p-2">
+                          {/* 규칙 헤더 */}
+                          <div className="flex items-center justify-between">
+                            <span className="text-xs font-medium text-gray-700">규칙</span>
+                            <button
+                              type="button"
+                              onClick={() => deleteColorRule(rule.id)}
+                              className="text-red-500 transition-colors hover:text-red-700"
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </button>
+                          </div>
+
+                          {/* 조건 값 */}
+                          <div className="space-y-1">
+                            <label className="block text-xs font-medium text-gray-600">값 (조건)</label>
+                            <input
+                              type="text"
+                              value={rule.value}
+                              onChange={(e) => updateColorRule(rule.id, { value: e.target.value })}
+                              placeholder="예: active, inactive"
+                              className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                            />
+                          </div>
+
+                          {/* 색상 */}
+                          <div className="space-y-1">
+                            <label className="block text-xs font-medium text-gray-600">색상</label>
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="color"
+                                value={rule.color}
+                                onChange={(e) => updateColorRule(rule.id, { color: e.target.value })}
+                                className="h-8 w-12 cursor-pointer rounded border border-gray-300"
+                              />
+                              <input
+                                type="text"
+                                value={rule.color}
+                                onChange={(e) => updateColorRule(rule.id, { color: e.target.value })}
+                                placeholder="#3b82f6"
+                                className="flex-1 rounded border border-gray-300 px-2 py-1 text-xs"
+                              />
+                            </div>
+                          </div>
+
+                          {/* 라벨 (선택사항) */}
+                          <div className="space-y-1">
+                            <label className="block text-xs font-medium text-gray-600">라벨 (선택)</label>
+                            <input
+                              type="text"
+                              value={rule.label || ""}
+                              onChange={(e) => updateColorRule(rule.id, { label: e.target.value })}
+                              placeholder="예: 활성, 비활성"
+                              className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
 
           {/* 날씨 정보 표시 옵션 */}
-        <div className="space-y-1.5">
-          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={currentConfig.showWeather || false}
-              onChange={(e) => updateConfig({ showWeather: e.target.checked })}
-              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
-            />
-            <span>날씨 정보 표시</span>
-          </label>
-          <p className="text-xs text-gray-500 ml-6">
-            마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다
-          </p>
-        </div>
+          <div className="space-y-1.5">
+            <label className="flex cursor-pointer items-center gap-2 text-xs font-medium text-gray-700">
+              <input
+                type="checkbox"
+                checked={currentConfig.showWeather || false}
+                onChange={(e) => updateConfig({ showWeather: e.target.checked })}
+                className="text-primary focus:ring-primary h-4 w-4 rounded border-gray-300 focus:ring-2"
+              />
+              <span>날씨 정보 표시</span>
+            </label>
+            <p className="ml-6 text-xs text-gray-500">마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다</p>
+          </div>
 
-        <div className="space-y-1.5">
-          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={currentConfig.showWeatherAlerts || false}
-              onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
-              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
-            />
-            <span>기상특보 영역 표시</span>
-          </label>
-          <p className="text-xs text-gray-500 ml-6">
-            현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
-          </p>
-        </div>
+          <div className="space-y-1.5">
+            <label className="flex cursor-pointer items-center gap-2 text-xs font-medium text-gray-700">
+              <input
+                type="checkbox"
+                checked={currentConfig.showWeatherAlerts || false}
+                onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
+                className="text-primary focus:ring-primary h-4 w-4 rounded border-gray-300 focus:ring-2"
+              />
+              <span>기상특보 영역 표시</span>
+            </label>
+            <p className="ml-6 text-xs text-gray-500">
+              현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
+            </p>
+          </div>
 
           {/* 설정 미리보기 */}
-          <div className="p-3 bg-gray-50 rounded-lg">
-            <div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
-            <div className="text-xs text-muted-foreground space-y-1">
-              <div><strong>위도:</strong> {currentConfig.latitudeColumn || '미설정'}</div>
-              <div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
-              <div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
-              <div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
-              <div><strong>날씨 표시:</strong> {currentConfig.showWeather ? '활성화' : '비활성화'}</div>
-              <div><strong>기상특보 표시:</strong> {currentConfig.showWeatherAlerts ? '활성화' : '비활성화'}</div>
-              <div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
+          <div className="rounded-lg bg-gray-50 p-3">
+            <div className="mb-2 text-xs font-medium text-gray-700">📋 설정 미리보기</div>
+            <div className="text-muted-foreground space-y-1 text-xs">
+              <div>
+                <strong>위도:</strong> {currentConfig.latitudeColumn || "미설정"}
+              </div>
+              <div>
+                <strong>경도:</strong> {currentConfig.longitudeColumn || "미설정"}
+              </div>
+              <div>
+                <strong>라벨:</strong> {currentConfig.labelColumn || "없음"}
+              </div>
+              <div>
+                <strong>색상 모드:</strong> {currentConfig.markerColorMode === "conditional" ? "조건부" : "단일"}
+              </div>
+              {currentConfig.markerColorMode === "conditional" && (
+                <>
+                  <div>
+                    <strong>색상 조건 컬럼:</strong> {currentConfig.markerColorColumn || "미설정"}
+                  </div>
+                  <div>
+                    <strong>색상 규칙 개수:</strong> {(currentConfig.markerColorRules || []).length}개
+                  </div>
+                </>
+              )}
+              <div>
+                <strong>날씨 표시:</strong> {currentConfig.showWeather ? "활성화" : "비활성화"}
+              </div>
+              <div>
+                <strong>기상특보 표시:</strong> {currentConfig.showWeatherAlerts ? "활성화" : "비활성화"}
+              </div>
+              <div>
+                <strong>데이터 개수:</strong> {queryResult.rows.length}개
+              </div>
             </div>
           </div>
 
           {/* 필수 필드 확인 */}
           {(!currentConfig.latitudeColumn || !currentConfig.longitudeColumn) && (
-            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-              <div className="text-red-800 text-xs">
+            <div className="rounded-lg border border-red-200 bg-red-50 p-3">
+              <div className="text-xs text-red-800">
                 ⚠️ 위도와 경도 컬럼을 반드시 선택해야 지도에 표시할 수 있습니다.
               </div>
             </div>
@@ -192,4 +439,3 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
     </div>
   );
 }
-

frontend/components/admin/dashboard/types.ts

@@ -205,6 +205,20 @@ export interface ChartConfig {
   statusColumn?: string; // 상태 컬럼
   showWeather?: boolean; // 날씨 정보 표시 여부
   showWeatherAlerts?: boolean; // 기상특보 영역 표시 여부
+
+  // 마커 색상 설정
+  markerColorMode?: "single" | "conditional"; // 마커 색상 모드 (단일/조건부)
+  markerColorColumn?: string; // 색상 조건 컬럼
+  markerColorRules?: MarkerColorRule[]; // 색상 규칙 배열
+  markerDefaultColor?: string; // 기본 마커 색상
+}
+
+// 마커 색상 규칙
+export interface MarkerColorRule {
+  id: string; // 고유 ID
+  value: string; // 컬럼 값 (예: "active", "inactive")
+  color: string; // 마커 색상 (hex)
+  label?: string; // 라벨 (선택사항)
 }
 
 export interface QueryResult {

frontend/components/dashboard/widgets/MapSummaryWidget.tsx

@@ -42,6 +42,7 @@ interface MarkerData {
   name: string;
   info: any;
   weather?: WeatherData | null;
+  markerColor?: string; // 마커 색상
 }
 
 // 테이블명 한글 번역
@@ -472,6 +473,33 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
         const latCol = element.chartConfig?.latitudeColumn || "latitude";
         const lngCol = element.chartConfig?.longitudeColumn || "longitude";
 
+        // 마커 색상 결정 함수
+        const getMarkerColor = (row: any): string => {
+          const colorMode = element.chartConfig?.markerColorMode || "single";
+
+          if (colorMode === "single") {
+            // 단일 색상 모드
+            return element.chartConfig?.markerDefaultColor || "#3b82f6";
+          } else {
+            // 조건부 색상 모드
+            const colorColumn = element.chartConfig?.markerColorColumn;
+            const colorRules = element.chartConfig?.markerColorRules || [];
+            const defaultColor = element.chartConfig?.markerDefaultColor || "#6b7280";
+
+            if (!colorColumn || colorRules.length === 0) {
+              return defaultColor;
+            }
+
+            // 컬럼 값 가져오기
+            const columnValue = String(row[colorColumn] || "");
+
+            // 색상 규칙 매칭
+            const matchedRule = colorRules.find((rule) => String(rule.value) === columnValue);
+
+            return matchedRule ? matchedRule.color : defaultColor;
+          }
+        };
+
         // 유효한 좌표 필터링 및 마커 데이터 생성
         const markerData = rows
           .filter((row: any) => row[latCol] && row[lngCol])
@@ -481,6 +509,7 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
             name: row.name || row.vehicle_number || row.warehouse_name || row.customer_name || "알 수 없음",
             info: row,
             weather: null,
+            markerColor: getMarkerColor(row), // 마커 색상 추가
           }));
 
         setMarkers(markerData);
@@ -693,54 +722,81 @@ export default function MapSummaryWidget({ element }: MapSummaryWidgetProps) {
               })}
 
           {/* 마커 표시 */}
-          {markers.map((marker, idx) => (
-            <Marker key={idx} position={[marker.lat, marker.lng]}>
-              <Popup>
-                <div className="min-w-[200px] text-xs">
-                  {/* 마커 정보 */}
-                  <div className="mb-2 border-b pb-2">
-                    <div className="mb-1 text-sm font-bold">{marker.name}</div>
-                    {Object.entries(marker.info)
-                      .filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
-                      .map(([key, value]) => (
-                        <div key={key} className="text-xs">
-                          <strong>{key}:</strong> {String(value)}
-                        </div>
-                      ))}
-                  </div>
+          {markers.map((marker, idx) => {
+            // Leaflet 커스텀 아이콘 생성 (클라이언트 사이드에서만)
+            let customIcon;
+            if (typeof window !== "undefined") {
+              const L = require("leaflet");
+              customIcon = L.divIcon({
+                className: "custom-marker",
+                html: `
+                  <div style="
+                    width: 30px;
+                    height: 30px;
+                    background-color: ${marker.markerColor || "#3b82f6"};
+                    border: 3px solid white;
+                    border-radius: 50%;
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transform: translate(-50%, -50%);
+                  "></div>
+                `,
+                iconSize: [30, 30],
+                iconAnchor: [15, 15],
+              });
+            }
 
-                  {/* 날씨 정보 */}
-                  {marker.weather && (
-                    <div className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2">
-                        {getWeatherIcon(marker.weather.weatherMain)}
-                        <span className="text-xs font-semibold">현재 날씨</span>
-                      </div>
-                      <div className="text-xs text-gray-600">{marker.weather.weatherDescription}</div>
-                      <div className="mt-2 space-y-1 text-xs">
-                        <div className="flex justify-between">
-                          <span className="text-gray-500">온도</span>
-                          <span className="font-medium">{marker.weather.temperature}°C</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-500">체감온도</span>
-                          <span className="font-medium">{marker.weather.feelsLike}°C</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-500">습도</span>
-                          <span className="font-medium">{marker.weather.humidity}%</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-500">풍속</span>
-                          <span className="font-medium">{marker.weather.windSpeed} m/s</span>
-                        </div>
-                      </div>
+            return (
+              <Marker key={idx} position={[marker.lat, marker.lng]} icon={customIcon}>
+                <Popup>
+                  <div className="min-w-[200px] text-xs">
+                    {/* 마커 정보 */}
+                    <div className="mb-2 border-b pb-2">
+                      <div className="mb-1 text-sm font-bold">{marker.name}</div>
+                      {Object.entries(marker.info)
+                        .filter(([key]) => !["latitude", "longitude", "lat", "lng"].includes(key.toLowerCase()))
+                        .map(([key, value]) => (
+                          <div key={key} className="text-xs">
+                            <strong>{key}:</strong> {String(value)}
+                          </div>
+                        ))}
                     </div>
-                  )}
-                </div>
-              </Popup>
-            </Marker>
-          ))}
+
+                    {/* 날씨 정보 */}
+                    {marker.weather && (
+                      <div className="space-y-1">
+                        <div className="mb-1 flex items-center gap-2">
+                          {getWeatherIcon(marker.weather.weatherMain)}
+                          <span className="text-xs font-semibold">현재 날씨</span>
+                        </div>
+                        <div className="text-xs text-gray-600">{marker.weather.weatherDescription}</div>
+                        <div className="mt-2 space-y-1 text-xs">
+                          <div className="flex justify-between">
+                            <span className="text-gray-500">온도</span>
+                            <span className="font-medium">{marker.weather.temperature}°C</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-gray-500">체감온도</span>
+                            <span className="font-medium">{marker.weather.feelsLike}°C</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-gray-500">습도</span>
+                            <span className="font-medium">{marker.weather.humidity}%</span>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-gray-500">풍속</span>
+                            <span className="font-medium">{marker.weather.windSpeed} m/s</span>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </Popup>
+              </Marker>
+            );
+          })}
         </MapContainer>
 
         {/* 범례 (특보가 있을 때만 표시) */}