kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

위젯 컴팩트 모드 추가 (1x1 사이즈 대응)

This commit is contained in:
dohyeons 2025-12-18 14:42:58 +09:00
parent 7ca4eea5c1
commit ca86c0a10f
8 changed files with 301 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/admin/dashboard/CanvasElement.tsx
View File

@ -916,7 +916,7 @@ export function CanvasElement({
) : element.type === "widget" && element.subtype === "weather" ? (
// 날씨 위젯 렌더링
<div className="widget-interactive-area h-full w-full">
<WeatherWidget city="서울" refreshInterval={600000} />
<WeatherWidget element={element} city="서울" refreshInterval={600000} />
</div>
) : element.type === "widget" && element.subtype === "exchange" ? (
// 환율 위젯 렌더링

16
frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
View File

@ -2155,23 +2155,23 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
</TableRow>
</TableHeader>
<TableBody>
{materials.map((material, index) => {
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
const keyColumn = hierarchyConfig?.material?.keyColumn || "STKKEY";
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
{materials.map((material, index) => {
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
const keyColumn = hierarchyConfig?.material?.keyColumn || "STKKEY";
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
const layerNumber = material[layerColumn] || index + 1;
return (
return (
<TableRow key={material[keyColumn] || `material-${index}`}>
<TableCell className="text-xs font-medium">{layerNumber}단</TableCell>
{displayColumns.map((col) => (
<TableCell key={col.column} className="text-xs">
{material[col.column] || "-"}
</TableCell>
))}
))}
</TableRow>
);
})}
);
})}
</TableBody>
</Table>
</div>

16
frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
View File

@ -660,25 +660,25 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
</tr>
</thead>
<tbody>
{materials.map((material, index) => {
{materials.map((material, index) => {
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
return (
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
return (
<tr
key={`${material.STKKEY}-${index}`}
key={`${material.STKKEY}-${index}`}
className="hover:bg-accent border-b transition-colors last:border-0"
>
<td className="px-2 py-2 font-medium">
{material[layerColumn]}단
</td>
{displayColumns.map((colConfig: any) => (
{displayColumns.map((colConfig: any) => (
<td key={colConfig.column} className="px-2 py-2">
{material[colConfig.column] || "-"}
</td>
))}
))}
</tr>
);
})}
);
})}
</tbody>
</table>
</div>

81
frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
@ -8,6 +8,9 @@ import { RefreshCw, AlertTriangle, Cloud, Construction, Database as DatabaseIcon
import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
import { getApiUrl } from "@/lib/utils/apiUrl";
// 컴팩트 모드 임계값 (픽셀)
const COMPACT_HEIGHT_THRESHOLD = 180;
type AlertType = "accident" | "weather" | "construction" | "system" | "security" | "other";
interface Alert {
@ -31,6 +34,29 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
const [error, setError] = useState<string | null>(null);
const [filter, setFilter] = useState<AlertType | "all">("all");
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
// 컨테이너 높이 측정을 위한 ref
const containerRef = useRef<HTMLDivElement>(null);
const [containerHeight, setContainerHeight] = useState<number>(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 dataSources = useMemo(() => {
return element?.dataSources || element?.chartConfig?.dataSources;
@ -549,8 +575,57 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
);
}
// 통계 계산
const stats = {
accident: alerts.filter((a) => a.type === "accident").length,
weather: alerts.filter((a) => a.type === "weather").length,
construction: alerts.filter((a) => a.type === "construction").length,
high: alerts.filter((a) => a.severity === "high").length,
};
// 컴팩트 모드 렌더링 - 알림 목록만 스크롤
if (isCompact) {
return (
<div ref={containerRef} className="h-full w-full overflow-y-auto bg-background p-1.5 space-y-1">
{filteredAlerts.length === 0 ? (
<div className="flex h-full items-center justify-center text-muted-foreground">
<p className="text-xs">알림 없음</p>
</div>
) : (
filteredAlerts.map((alert, idx) => (
<div
key={`${alert.id}-${idx}`}
className={`rounded px-2 py-1.5 ${
alert.severity === "high"
? "bg-destructive/10 border-l-2 border-destructive"
: alert.severity === "medium"
? "bg-warning/10 border-l-2 border-warning"
: "bg-muted/50 border-l-2 border-muted-foreground"
}`}
>
<div className="flex items-center gap-1.5">
{getTypeIcon(alert.type)}
<span className="text-[11px] font-medium truncate flex-1">{alert.title}</span>
<Badge
variant={alert.severity === "high" ? "destructive" : "secondary"}
className="h-4 text-[9px] px-1 flex-shrink-0"
>
{alert.severity === "high" ? "긴급" : alert.severity === "medium" ? "주의" : "정보"}
</Badge>
</div>
{alert.location && (
<p className="text-[10px] text-muted-foreground truncate mt-0.5 pl-5">{alert.location}</p>
)}
</div>
))
)}
</div>
);
}
// 일반 모드 렌더링
return (
<div className="flex h-full w-full flex-col overflow-hidden bg-background">
<div ref={containerRef} className="flex h-full w-full flex-col overflow-hidden bg-background">
{/* 헤더 */}
<div className="flex items-center justify-between border-b bg-background/80 p-3">
<div>
@ -631,7 +706,7 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
</Badge>
</div>
{alert.location && (
<p className="text-[10px] text-muted-foreground mt-0.5">📍 {alert.location}</p>
<p className="text-[10px] text-muted-foreground mt-0.5">{alert.location}</p>
)}
<p className="text-[10px] text-foreground mt-0.5 line-clamp-2">{alert.description}</p>
<div className="mt-1 flex items-center gap-2 text-[9px] text-muted-foreground">

73
frontend/components/dashboard/widgets/RiskAlertWidget.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
@ -8,6 +8,9 @@ import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
import { apiClient } from "@/lib/api/client";
import { DashboardElement } from "@/components/admin/dashboard/types";
// 컴팩트 모드 임계값 (픽셀)
const COMPACT_HEIGHT_THRESHOLD = 180;
// 알림 타입
type AlertType = "accident" | "weather" | "construction";
@ -32,6 +35,29 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
const [filter, setFilter] = useState<AlertType | "all">("all");
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
const [newAlertIds, setNewAlertIds] = useState<Set<string>>(new Set());
// 컨테이너 높이 측정을 위한 ref
const containerRef = useRef<HTMLDivElement>(null);
const [containerHeight, setContainerHeight] = useState<number>(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 loadData = async () => {
@ -176,8 +202,49 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
high: alerts.filter((a) => a.severity === "high").length,
};
// 컴팩트 모드 렌더링 - 알림 목록만 스크롤
if (isCompact) {
return (
<div ref={containerRef} className="h-full w-full overflow-y-auto bg-background p-1.5 space-y-1">
{filteredAlerts.length === 0 ? (
<div className="flex h-full items-center justify-center text-muted-foreground">
<p className="text-xs">알림 없음</p>
</div>
) : (
filteredAlerts.map((alert) => (
<div
key={alert.id}
className={`rounded px-2 py-1.5 ${
alert.severity === "high"
? "bg-destructive/10 border-l-2 border-destructive"
: alert.severity === "medium"
? "bg-warning/10 border-l-2 border-warning"
: "bg-muted/50 border-l-2 border-muted-foreground"
}`}
>
<div className="flex items-center gap-1.5">
{getAlertIcon(alert.type)}
<span className="text-[11px] font-medium truncate flex-1">{alert.title}</span>
<Badge
variant={alert.severity === "high" ? "destructive" : "secondary"}
className="h-4 text-[9px] px-1 flex-shrink-0"
>
{alert.severity === "high" ? "긴급" : alert.severity === "medium" ? "주의" : "정보"}
</Badge>
</div>
{alert.location && (
<p className="text-[10px] text-muted-foreground truncate mt-0.5 pl-5">{alert.location}</p>
)}
</div>
))
)}
</div>
);
}
// 일반 모드 렌더링
return (
<div className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
<div ref={containerRef} className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
{/* 헤더 */}
<div className="flex items-center justify-between border-b pb-3">
<div className="flex items-center gap-2">
@ -294,7 +361,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
{/* 안내 메시지 */}
<div className="border-t pt-3 text-center text-xs text-muted-foreground">
💡 1분마다 자동으로 업데이트됩니다
1분마다 자동으로 업데이트됩니다
</div>
</div>
);

143
frontend/components/dashboard/widgets/WeatherWidget.tsx
View File

@ -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<string | null>(null);
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
// 컨테이너 높이 측정을 위한 ref
const containerRef = useRef<HTMLDivElement>(null);
const [containerHeight, setContainerHeight] = useState<number>(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<string[]>([
'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 <Sun className={`${iconClass} text-warning`} />;
case 'clouds':
return <Cloud className={`${iconClass} text-muted-foreground`} />;
case 'rain':
case 'drizzle':
return <CloudRain className={`${iconClass} text-primary`} />;
case 'snow':
return <CloudSnow className={`${iconClass} text-primary/70`} />;
default:
return <Cloud className={`${iconClass} text-muted-foreground`} />;
}
};
// 컴팩트 모드 렌더링
if (isCompact) {
return (
<div ref={containerRef} className="h-full bg-background rounded-lg border p-3 flex flex-col">
{/* 컴팩트 헤더 - 도시명, 온도, 날씨 아이콘 한 줄에 표시 */}
<div className="flex items-center justify-between gap-2 flex-1">
<div className="flex items-center gap-2 min-w-0 flex-1">
{renderWeatherIcon(weather.weatherMain, "md")}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="text-xl font-bold text-foreground">
{weather.temperature}°C
</span>
<span className="text-xs text-muted-foreground capitalize truncate">
{weather.weatherDescription}
</span>
</div>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
role="combobox"
aria-expanded={open}
className="justify-between text-xs text-muted-foreground hover:bg-muted/80 h-auto py-0 px-1"
>
{cities.find((city) => city.value === selectedCity)?.label || '도시 선택'}
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0" align="start">
<Command>
<CommandInput placeholder="도시 검색..." />
<CommandList>
<CommandEmpty>도시를 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{cities.map((city) => (
<CommandItem
key={city.value}
value={city.value}
onSelect={(currentValue) => {
handleCityChange(currentValue === selectedCity ? selectedCity : currentValue);
setOpen(false);
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
selectedCity === city.value ? 'opacity-100' : 'opacity-0'
)}
/>
{city.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={fetchWeather}
disabled={loading}
className="h-7 w-7 p-0 flex-shrink-0"
>
<RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
</Button>
</div>
</div>
);
}
// 일반 모드 렌더링
return (
<div className="h-full bg-background rounded-lg border p-4">
<div ref={containerRef} className="h-full bg-background rounded-lg border p-4">
{/* 헤더 */}
<div className="flex items-center justify-between mb-3">
<div className="flex-1">
<h3 className="text-lg font-semibold text-foreground mb-1">🌤️ {element?.customTitle || "날씨"}</h3>
<h3 className="text-lg font-semibold text-foreground mb-1">{element?.customTitle || "날씨"}</h3>
<div className="flex items-center gap-2 mb-1">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
@ -438,22 +558,7 @@ export default function WeatherWidget({
<div className="bg-muted/80 rounded-lg p-3">
<div className="flex items-center gap-1.5">
<div className="flex-shrink-0">
{(() => {
const iconClass = "h-5 w-5";
switch (weather.weatherMain.toLowerCase()) {
case 'clear':
return <Sun className={`${iconClass} text-warning`} />;
case 'clouds':
return <Cloud className={`${iconClass} text-muted-foreground`} />;
case 'rain':
case 'drizzle':
return <CloudRain className={`${iconClass} text-primary`} />;
case 'snow':
return <CloudSnow className={`${iconClass} text-primary/70`} />;
default:
return <Cloud className={`${iconClass} text-muted-foreground`} />;
}
})()}
{renderWeatherIcon(weather.weatherMain)}
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-bold text-foreground leading-tight truncate">

16
frontend/components/report/designer/QueryManager.tsx
View File

@ -274,15 +274,15 @@ export function QueryManager() {
</Badge>
</div>
</AccordionTrigger>
<Button
variant="ghost"
size="sm"
onClick={(e) => handleDeleteQuery(query.id, e)}
<Button
variant="ghost"
size="sm"
onClick={(e) => handleDeleteQuery(query.id, e)}
className="h-7 w-7 shrink-0 p-0"
>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</div>
>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</div>
<AccordionContent className="space-y-4 pt-1 pr-0 pb-3 pl-0">
{/* 쿼리 이름 */}
<div className="space-y-2">

8
frontend/components/report/designer/ReportPreviewModal.tsx
View File

@ -486,11 +486,11 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
}
}
return component;
}),
);
}),
);
return { ...page, components: componentsWithBase64 };
}),
);
}),
);
// 쿼리 결과 수집
const queryResults: Record<string, { fields: string[]; rows: Record<string, unknown>[] }> = {};