위젯 컴팩트 모드 제거 #304
|
|
@ -14,7 +14,7 @@ import {
|
|||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
||||
import { Truck, Clock, MapPin, Package, Info, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Truck, Clock, MapPin, Package, Info } from "lucide-react";
|
||||
|
||||
interface ListWidgetProps {
|
||||
element: DashboardElement;
|
||||
|
|
@ -32,8 +32,6 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
|||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [containerHeight, setContainerHeight] = useState<number>(0);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
// 행 상세 팝업 상태
|
||||
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
||||
|
|
@ -41,25 +39,6 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
|||
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
||||
const [additionalDetailData, setAdditionalDetailData] = useState<Record<string, any> | null>(null);
|
||||
|
||||
// 컨테이너 높이 감지
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
setContainerHeight(entry.contentRect.height);
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(container);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, []);
|
||||
|
||||
// 컴팩트 모드 여부 (높이 300px 이하 또는 element 높이가 300px 이하)
|
||||
const elementHeight = element?.size?.height || 0;
|
||||
const isCompactHeight = elementHeight > 0 ? elementHeight < 300 : (containerHeight > 0 && containerHeight < 300);
|
||||
|
||||
const config = element.listConfig || {
|
||||
columnMode: "auto",
|
||||
viewMode: "table",
|
||||
|
|
@ -562,64 +541,14 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
|||
const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full w-full flex-col p-4">
|
||||
{/* 컴팩트 모드 (세로 1칸) - 캐러셀 형태로 한 건씩 표시 */}
|
||||
{isCompactHeight ? (
|
||||
<div className="flex h-full flex-col justify-center p-3">
|
||||
{data && data.rows.length > 0 && displayColumns.filter((col) => col.visible).length > 0 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 이전 버튼 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 shrink-0 p-0"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex h-full w-full flex-col p-4">
|
||||
{/* 제목 - 항상 표시 */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* 현재 데이터 */}
|
||||
<div className="flex-1 truncate rounded bg-muted/50 px-3 py-2 text-sm">
|
||||
{displayColumns.filter((col) => col.visible).slice(0, 4).map((col, colIdx) => (
|
||||
<span key={col.id} className={colIdx === 0 ? "font-medium" : "text-muted-foreground"}>
|
||||
{String(data.rows[currentPage - 1]?.[col.dataKey || col.field] ?? "").substring(0, 25)}
|
||||
{colIdx < Math.min(displayColumns.filter((c) => c.visible).length, 4) - 1 && " | "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 다음 버튼 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 shrink-0 p-0"
|
||||
onClick={() => setCurrentPage((p) => Math.min(data.rows.length, p + 1))}
|
||||
disabled={currentPage === data.rows.length}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground">데이터 없음</div>
|
||||
)}
|
||||
|
||||
{/* 현재 위치 표시 (작게) */}
|
||||
{data && data.rows.length > 0 && (
|
||||
<div className="mt-1 text-center text-[10px] text-muted-foreground">
|
||||
{currentPage} / {data.rows.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 제목 - 항상 표시 */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* 테이블 뷰 */}
|
||||
{config.viewMode === "table" && (
|
||||
{/* 테이블 뷰 */}
|
||||
{config.viewMode === "table" && (
|
||||
<div className={`flex-1 overflow-auto rounded-lg ${config.compactMode ? "text-xs" : "text-sm"}`}>
|
||||
<Table>
|
||||
{config.showHeader && (
|
||||
|
|
@ -713,38 +642,36 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{config.enablePagination && totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-between text-sm">
|
||||
<div className="text-foreground">
|
||||
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 px-2">
|
||||
<span className="text-foreground">{currentPage}</span>
|
||||
<span className="text-muted-foreground">/</span>
|
||||
<span className="text-muted-foreground">{totalPages}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</div>
|
||||
{/* 페이지네이션 */}
|
||||
{config.enablePagination && totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-between text-sm">
|
||||
<div className="text-foreground">
|
||||
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 px-2">
|
||||
<span className="text-foreground">{currentPage}</span>
|
||||
<span className="text-muted-foreground">/</span>
|
||||
<span className="text-muted-foreground">{totalPages}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 행 상세 팝업 */}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Loader2, RefreshCw, Truck, Clock, MapPin, Package, Info, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Loader2, RefreshCw, Truck, Clock, MapPin, Package, Info } from "lucide-react";
|
||||
import { applyColumnMapping } from "@/lib/utils/columnMapping";
|
||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
||||
|
||||
|
|
@ -41,8 +41,6 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
|||
const [error, setError] = useState<string | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
||||
const [containerHeight, setContainerHeight] = useState<number>(0);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
// 행 상세 팝업 상태
|
||||
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
||||
|
|
@ -50,25 +48,6 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
|||
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
||||
const [additionalDetailData, setAdditionalDetailData] = useState<Record<string, any> | null>(null);
|
||||
|
||||
// 컨테이너 높이 감지
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
setContainerHeight(entry.contentRect.height);
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(container);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, []);
|
||||
|
||||
// 컴팩트 모드 여부 (높이 300px 이하 또는 element 높이가 300px 이하)
|
||||
const elementHeight = element?.size?.height || 0;
|
||||
const isCompactHeight = elementHeight > 0 ? elementHeight < 300 : (containerHeight > 0 && containerHeight < 300);
|
||||
|
||||
// // console.log("🧪 ListTestWidget 렌더링!", element);
|
||||
|
||||
const dataSources = useMemo(() => {
|
||||
|
|
@ -764,139 +743,87 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full flex-col bg-card shadow-sm">
|
||||
{/* 컴팩트 모드 (세로 1칸) - 캐러셀 형태로 한 건씩 표시 */}
|
||||
{isCompactHeight ? (
|
||||
<div className="flex h-full flex-col justify-center p-3">
|
||||
{data && data.rows.length > 0 && displayColumns.length > 0 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 이전 버튼 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 shrink-0 p-0"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* 현재 데이터 */}
|
||||
<div className="flex-1 truncate rounded bg-muted/50 px-3 py-2 text-sm">
|
||||
{displayColumns.slice(0, 4).map((field, fieldIdx) => (
|
||||
<span key={field} className={fieldIdx === 0 ? "font-medium" : "text-muted-foreground"}>
|
||||
{String(data.rows[currentPage - 1]?.[field] ?? "").substring(0, 25)}
|
||||
{fieldIdx < Math.min(displayColumns.length, 4) - 1 && " | "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 다음 버튼 */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 shrink-0 p-0"
|
||||
onClick={() => setCurrentPage((p) => Math.min(data.rows.length, p + 1))}
|
||||
disabled={currentPage === data.rows.length}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground">데이터 없음</div>
|
||||
)}
|
||||
|
||||
{/* 현재 위치 표시 (작게) */}
|
||||
{data && data.rows.length > 0 && (
|
||||
<div className="mt-1 text-center text-[10px] text-muted-foreground">
|
||||
{currentPage} / {data.rows.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{element?.customTitle || "리스트"}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{dataSources?.length || 0}개 데이터 소스 • {data?.totalRows || 0}개 행
|
||||
{lastRefreshTime && (
|
||||
<span className="ml-2">
|
||||
• {lastRefreshTime.toLocaleTimeString("ko-KR")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleManualRefresh}
|
||||
disabled={isLoading}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 컨텐츠 */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{error ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
) : !dataSources || dataSources.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
데이터 소스를 연결해주세요
|
||||
</p>
|
||||
</div>
|
||||
) : !data || data.rows.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
데이터가 없습니다
|
||||
</p>
|
||||
</div>
|
||||
) : config.viewMode === "card" ? (
|
||||
renderCards()
|
||||
) : (
|
||||
renderTable()
|
||||
<div className="flex h-full flex-col bg-card shadow-sm">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b p-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{element?.customTitle || "리스트"}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{dataSources?.length || 0}개 데이터 소스 • {data?.totalRows || 0}개 행
|
||||
{lastRefreshTime && (
|
||||
<span className="ml-2">
|
||||
• {lastRefreshTime.toLocaleTimeString("ko-KR")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleManualRefresh}
|
||||
disabled={isLoading}
|
||||
className="h-8 gap-2 text-xs"
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
|
||||
새로고침
|
||||
</Button>
|
||||
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{config.enablePagination && data && data.rows.length > 0 && totalPages > 1 && (
|
||||
<div className="flex items-center justify-between border-t p-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
총 {data.totalRows}개 항목 (페이지 {currentPage}/{totalPages})
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{/* 컨텐츠 */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{error ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
) : !dataSources || dataSources.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
데이터 소스를 연결해주세요
|
||||
</p>
|
||||
</div>
|
||||
) : !data || data.rows.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
데이터가 없습니다
|
||||
</p>
|
||||
</div>
|
||||
) : config.viewMode === "card" ? (
|
||||
renderCards()
|
||||
) : (
|
||||
renderTable()
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{config.enablePagination && data && data.rows.length > 0 && totalPages > 1 && (
|
||||
<div className="flex items-center justify-between border-t p-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
총 {data.totalRows}개 항목 (페이지 {currentPage}/{totalPages})
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
이전
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
다음
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 행 상세 팝업 */}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -8,9 +8,6 @@ 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 {
|
||||
|
|
@ -34,29 +31,6 @@ 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;
|
||||
|
|
@ -575,57 +549,8 @@ 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 ref={containerRef} className="flex h-full w-full flex-col overflow-hidden bg-background">
|
||||
<div 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>
|
||||
|
|
@ -706,7 +631,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">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -8,9 +8,6 @@ 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";
|
||||
|
||||
|
|
@ -35,29 +32,6 @@ 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 () => {
|
||||
|
|
@ -202,49 +176,8 @@ 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 ref={containerRef} className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
|
||||
<div 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">
|
||||
|
|
@ -361,7 +294,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
|
|||
|
||||
{/* 안내 메시지 */}
|
||||
<div className="border-t pt-3 text-center text-xs text-muted-foreground">
|
||||
1분마다 자동으로 업데이트됩니다
|
||||
💡 1분마다 자동으로 업데이트됩니다
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@
|
|||
/**
|
||||
* 날씨 위젯 컴포넌트
|
||||
* - 실시간 날씨 정보를 표시
|
||||
* - 컴팩트 모드: 높이가 작을 때 핵심 정보만 표시
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getWeather, WeatherData } from '@/lib/api/openApi';
|
||||
import {
|
||||
Cloud,
|
||||
|
|
@ -27,9 +26,6 @@ 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;
|
||||
|
|
@ -49,29 +45,6 @@ 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',
|
||||
|
|
@ -350,105 +323,12 @@ 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 ref={containerRef} className="h-full bg-background rounded-lg border p-4">
|
||||
<div 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>
|
||||
|
|
@ -558,7 +438,22 @@ 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">
|
||||
{renderWeatherIcon(weather.weatherMain)}
|
||||
{(() => {
|
||||
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`} />;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-bold text-foreground leading-tight truncate">
|
||||
|
|
|
|||
Loading…
Reference in New Issue