@@ -294,7 +361,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
{/* 안내 메시지 */}
- 💡 1분마다 자동으로 업데이트됩니다
+ 1분마다 자동으로 업데이트됩니다
);
diff --git a/frontend/components/dashboard/widgets/WeatherWidget.tsx b/frontend/components/dashboard/widgets/WeatherWidget.tsx
index 56c3aaf6..3d1d7157 100644
--- a/frontend/components/dashboard/widgets/WeatherWidget.tsx
+++ b/frontend/components/dashboard/widgets/WeatherWidget.tsx
@@ -3,9 +3,10 @@
/**
* 날씨 위젯 컴포넌트
* - 실시간 날씨 정보를 표시
+ * - 컴팩트 모드: 높이가 작을 때 핵심 정보만 표시
*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import { getWeather, WeatherData } from '@/lib/api/openApi';
import {
Cloud,
@@ -26,6 +27,9 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
import { cn } from '@/lib/utils';
import { DashboardElement } from '@/components/admin/dashboard/types';
+// 컴팩트 모드 임계값 (픽셀)
+const COMPACT_HEIGHT_THRESHOLD = 180;
+
interface WeatherWidgetProps {
element?: DashboardElement;
city?: string;
@@ -45,6 +49,29 @@ export default function WeatherWidget({
const [error, setError] = useState
(null);
const [lastUpdated, setLastUpdated] = useState(null);
+ // 컨테이너 높이 측정을 위한 ref
+ const containerRef = useRef(null);
+ const [containerHeight, setContainerHeight] = useState(300);
+
+ // 컴팩트 모드 여부 (element.size.height 또는 실제 컨테이너 높이 기반)
+ const isCompact = element?.size?.height
+ ? element.size.height < COMPACT_HEIGHT_THRESHOLD
+ : containerHeight < COMPACT_HEIGHT_THRESHOLD;
+
+ // 컨테이너 높이 측정
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const observer = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ setContainerHeight(entry.contentRect.height);
+ }
+ });
+
+ observer.observe(containerRef.current);
+ return () => observer.disconnect();
+ }, []);
+
// 표시할 날씨 정보 선택
const [selectedItems, setSelectedItems] = useState([
'temperature',
@@ -323,12 +350,105 @@ export default function WeatherWidget({
);
}
+ // 날씨 아이콘 렌더링 헬퍼
+ const renderWeatherIcon = (weatherMain: string, size: "sm" | "md" = "sm") => {
+ const iconClass = size === "sm" ? "h-5 w-5" : "h-8 w-8";
+ switch (weatherMain.toLowerCase()) {
+ case 'clear':
+ return ;
+ case 'clouds':
+ return ;
+ case 'rain':
+ case 'drizzle':
+ return ;
+ case 'snow':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ // 컴팩트 모드 렌더링
+ if (isCompact) {
+ return (
+
+ {/* 컴팩트 헤더 - 도시명, 온도, 날씨 아이콘 한 줄에 표시 */}
+
+
+ {renderWeatherIcon(weather.weatherMain, "md")}
+
+
+
+ {weather.temperature}°C
+
+
+ {weather.weatherDescription}
+
+
+
+
+
+
+
+
+
+
+ 도시를 찾을 수 없습니다.
+
+ {cities.map((city) => (
+ {
+ handleCityChange(currentValue === selectedCity ? selectedCity : currentValue);
+ setOpen(false);
+ }}
+ >
+
+ {city.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
{/* 헤더 */}
-
🌤️ {element?.customTitle || "날씨"}
+
{element?.customTitle || "날씨"}
@@ -438,22 +558,7 @@ export default function WeatherWidget({
- {(() => {
- const iconClass = "h-5 w-5";
- switch (weather.weatherMain.toLowerCase()) {
- case 'clear':
- return ;
- case 'clouds':
- return ;
- case 'rain':
- case 'drizzle':
- return ;
- case 'snow':
- return ;
- default:
- return ;
- }
- })()}
+ {renderWeatherIcon(weather.weatherMain)}
diff --git a/frontend/components/report/designer/QueryManager.tsx b/frontend/components/report/designer/QueryManager.tsx
index e9ccb813..39b0d173 100644
--- a/frontend/components/report/designer/QueryManager.tsx
+++ b/frontend/components/report/designer/QueryManager.tsx
@@ -274,15 +274,15 @@ export function QueryManager() {
-
+ >
+
+
+
{/* 쿼리 이름 */}
diff --git a/frontend/components/report/designer/ReportPreviewModal.tsx b/frontend/components/report/designer/ReportPreviewModal.tsx
index 2ff70c73..ded27f37 100644
--- a/frontend/components/report/designer/ReportPreviewModal.tsx
+++ b/frontend/components/report/designer/ReportPreviewModal.tsx
@@ -486,11 +486,11 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
}
}
return component;
- }),
- );
+ }),
+ );
return { ...page, components: componentsWithBase64 };
- }),
- );
+ }),
+ );
// 쿼리 결과 수집
const queryResults: Record[] }> = {};