환율과 날씨 위젯 api 활용 완료 날씨는 현재 기상청 ai hub로 사용중 나중에 공공데이터 서비스가 가능할때 바꾸기 바람

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -1,10 +1,22 @@
 "use client";
 
 import React, { useState, useCallback, useRef, useEffect } from "react";
+import dynamic from "next/dynamic";
 import { DashboardElement, QueryResult } from "./types";
 import { ChartRenderer } from "./charts/ChartRenderer";
 import { snapToGrid, snapSizeToGrid, GRID_CONFIG } from "./gridUtils";
 
+// 위젯 동적 임포트
+const WeatherWidget = dynamic(() => import("@/components/dashboard/widgets/WeatherWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
+const ExchangeWidget = dynamic(() => import("@/components/dashboard/widgets/ExchangeWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
 interface CanvasElementProps {
   element: DashboardElement;
   isSelected: boolean;
@@ -330,16 +342,27 @@ export function CanvasElement({
               />
             )}
           </div>
+        ) : element.type === "widget" && element.subtype === "weather" ? (
+          // 날씨 위젯 렌더링
+          <div className="h-full w-full">
+            <WeatherWidget city={element.config?.city || "서울"} refreshInterval={600000} />
+          </div>
+        ) : element.type === "widget" && element.subtype === "exchange" ? (
+          // 환율 위젯 렌더링
+          <div className="h-full w-full">
+            <ExchangeWidget
+              baseCurrency={element.config?.baseCurrency || "KRW"}
+              targetCurrency={element.config?.targetCurrency || "USD"}
+              refreshInterval={600000}
+            />
+          </div>
         ) : (
-          // 위젯 렌더링 (기존 방식)
+          // 기타 위젯 렌더링
           <div
             className={`flex h-full w-full items-center justify-center p-5 text-center text-sm font-medium text-white ${getContentClass()} `}
           >
             <div>
-              <div className="mb-2 text-4xl">
-                {element.type === "widget" && element.subtype === "exchange" && "💱"}
-                {element.type === "widget" && element.subtype === "weather" && "☁️"}
-              </div>
+              <div className="mb-2 text-4xl">🔧</div>
               <div className="whitespace-pre-line">{element.content}</div>
             </div>
           </div>