Merge remote-tracking branch 'upstream/main'
This commit is contained in:
commit
d7bf85f7a5
File diff suppressed because it is too large
Load Diff
|
|
@ -14,7 +14,7 @@ import {
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
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 {
|
interface ListWidgetProps {
|
||||||
element: DashboardElement;
|
element: DashboardElement;
|
||||||
|
|
@ -32,8 +32,6 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [containerHeight, setContainerHeight] = useState<number>(0);
|
|
||||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
// 행 상세 팝업 상태
|
// 행 상세 팝업 상태
|
||||||
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
||||||
|
|
@ -41,25 +39,6 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
||||||
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
||||||
const [additionalDetailData, setAdditionalDetailData] = useState<Record<string, any> | null>(null);
|
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 || {
|
const config = element.listConfig || {
|
||||||
columnMode: "auto",
|
columnMode: "auto",
|
||||||
viewMode: "table",
|
viewMode: "table",
|
||||||
|
|
@ -562,64 +541,14 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
||||||
const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
|
const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className="flex h-full w-full flex-col p-4">
|
<div className="flex h-full w-full flex-col p-4">
|
||||||
{/* 컴팩트 모드 (세로 1칸) - 캐러셀 형태로 한 건씩 표시 */}
|
{/* 제목 - 항상 표시 */}
|
||||||
{isCompactHeight ? (
|
<div className="mb-4">
|
||||||
<div className="flex h-full flex-col justify-center p-3">
|
<h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
|
||||||
{data && data.rows.length > 0 && displayColumns.filter((col) => col.visible).length > 0 ? (
|
</div>
|
||||||
<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">
|
{config.viewMode === "table" && (
|
||||||
{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" && (
|
|
||||||
<div className={`flex-1 overflow-auto rounded-lg ${config.compactMode ? "text-xs" : "text-sm"}`}>
|
<div className={`flex-1 overflow-auto rounded-lg ${config.compactMode ? "text-xs" : "text-sm"}`}>
|
||||||
<Table>
|
<Table>
|
||||||
{config.showHeader && (
|
{config.showHeader && (
|
||||||
|
|
@ -713,38 +642,36 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 페이지네이션 */}
|
{/* 페이지네이션 */}
|
||||||
{config.enablePagination && totalPages > 1 && (
|
{config.enablePagination && totalPages > 1 && (
|
||||||
<div className="mt-4 flex items-center justify-between text-sm">
|
<div className="mt-4 flex items-center justify-between text-sm">
|
||||||
<div className="text-foreground">
|
<div className="text-foreground">
|
||||||
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
|
{startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
>
|
>
|
||||||
이전
|
이전
|
||||||
</Button>
|
</Button>
|
||||||
<div className="flex items-center gap-1 px-2">
|
<div className="flex items-center gap-1 px-2">
|
||||||
<span className="text-foreground">{currentPage}</span>
|
<span className="text-foreground">{currentPage}</span>
|
||||||
<span className="text-muted-foreground">/</span>
|
<span className="text-muted-foreground">/</span>
|
||||||
<span className="text-muted-foreground">{totalPages}</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>
|
</div>
|
||||||
)}
|
<Button
|
||||||
</>
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
다음
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 행 상세 팝업 */}
|
{/* 행 상세 팝업 */}
|
||||||
|
|
|
||||||
|
|
@ -50,6 +50,8 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
// 외부 업체 모드
|
// 외부 업체 모드
|
||||||
const [isExternalMode, setIsExternalMode] = useState(false);
|
const [isExternalMode, setIsExternalMode] = useState(false);
|
||||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||||
|
const [layoutKey, setLayoutKey] = useState(0); // 레이아웃 강제 리렌더링용
|
||||||
|
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null); // 마지막 갱신 시간
|
||||||
const canvasContainerRef = useRef<HTMLDivElement>(null);
|
const canvasContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
// 외부 업체 역할 체크
|
// 외부 업체 역할 체크
|
||||||
|
|
@ -60,18 +62,16 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
console.log("=== 사용자 권한 그룹 조회 ===");
|
console.log("=== 사용자 권한 그룹 조회 ===");
|
||||||
console.log("API 응답:", response);
|
console.log("API 응답:", response);
|
||||||
console.log("찾는 역할:", EXTERNAL_VENDOR_ROLE);
|
console.log("찾는 역할:", EXTERNAL_VENDOR_ROLE);
|
||||||
|
|
||||||
if (response.success && response.data) {
|
if (response.success && response.data) {
|
||||||
console.log("권한 그룹 목록:", response.data);
|
console.log("권한 그룹 목록:", response.data);
|
||||||
|
|
||||||
// 사용자의 권한 그룹 중 LSTHIRA_EXTERNAL_VENDOR가 있는지 확인
|
// 사용자의 권한 그룹 중 LSTHIRA_EXTERNAL_VENDOR가 있는지 확인
|
||||||
const hasExternalRole = response.data.some(
|
const hasExternalRole = response.data.some((group: any) => {
|
||||||
(group: any) => {
|
console.log("체크 중인 그룹:", group.authCode, group.authName);
|
||||||
console.log("체크 중인 그룹:", group.authCode, group.authName);
|
return group.authCode === EXTERNAL_VENDOR_ROLE || group.authName === EXTERNAL_VENDOR_ROLE;
|
||||||
return group.authCode === EXTERNAL_VENDOR_ROLE || group.authName === EXTERNAL_VENDOR_ROLE;
|
});
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log("외부 업체 역할 보유:", hasExternalRole);
|
console.log("외부 업체 역할 보유:", hasExternalRole);
|
||||||
setIsExternalMode(hasExternalRole);
|
setIsExternalMode(hasExternalRole);
|
||||||
}
|
}
|
||||||
|
|
@ -98,7 +98,16 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
// 전체 화면 변경 감지
|
// 전체 화면 변경 감지
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleFullscreenChange = () => {
|
const handleFullscreenChange = () => {
|
||||||
setIsFullscreen(!!document.fullscreenElement);
|
const isNowFullscreen = !!document.fullscreenElement;
|
||||||
|
setIsFullscreen(isNowFullscreen);
|
||||||
|
|
||||||
|
// 전체화면 종료 시 레이아웃 강제 리렌더링
|
||||||
|
if (!isNowFullscreen) {
|
||||||
|
setTimeout(() => {
|
||||||
|
setLayoutKey((prev) => prev + 1);
|
||||||
|
window.dispatchEvent(new Event("resize"));
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||||
|
|
@ -206,6 +215,8 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
// 마지막 갱신 시간 기록
|
||||||
|
setLastRefreshedAt(new Date());
|
||||||
} else {
|
} else {
|
||||||
throw new Error(response.error || "레이아웃 조회 실패");
|
throw new Error(response.error || "레이아웃 조회 실패");
|
||||||
}
|
}
|
||||||
|
|
@ -242,6 +253,155 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [layoutId]);
|
}, [layoutId]);
|
||||||
|
|
||||||
|
// 10초 주기 자동 갱신 (중앙 관제 화면 자동 새로고침)
|
||||||
|
useEffect(() => {
|
||||||
|
const AUTO_REFRESH_INTERVAL = 10000; // 10초
|
||||||
|
|
||||||
|
const silentRefresh = async () => {
|
||||||
|
// 로딩 중이거나 새로고침 중이면 스킵
|
||||||
|
if (isLoading || isRefreshing) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 레이아웃 데이터 조용히 갱신
|
||||||
|
const response = await getLayoutById(layoutId);
|
||||||
|
|
||||||
|
if (response.success && response.data) {
|
||||||
|
const { layout, objects } = response.data;
|
||||||
|
const dbConnectionId = layout.external_db_connection_id || layout.externalDbConnectionId;
|
||||||
|
|
||||||
|
// hierarchy_config 파싱
|
||||||
|
let hierarchyConfigData: any = null;
|
||||||
|
if (layout.hierarchy_config) {
|
||||||
|
hierarchyConfigData =
|
||||||
|
typeof layout.hierarchy_config === "string"
|
||||||
|
? JSON.parse(layout.hierarchy_config)
|
||||||
|
: layout.hierarchy_config;
|
||||||
|
setHierarchyConfig(hierarchyConfigData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 객체 데이터 변환
|
||||||
|
const loadedObjects: PlacedObject[] = objects.map((obj: any) => {
|
||||||
|
const objectType = obj.object_type;
|
||||||
|
return {
|
||||||
|
id: obj.id,
|
||||||
|
type: objectType,
|
||||||
|
name: obj.object_name,
|
||||||
|
position: {
|
||||||
|
x: parseFloat(obj.position_x),
|
||||||
|
y: parseFloat(obj.position_y),
|
||||||
|
z: parseFloat(obj.position_z),
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
x: parseFloat(obj.size_x),
|
||||||
|
y: parseFloat(obj.size_y),
|
||||||
|
z: parseFloat(obj.size_z),
|
||||||
|
},
|
||||||
|
rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
|
||||||
|
color: getObjectColor(objectType, obj.color),
|
||||||
|
areaKey: obj.area_key,
|
||||||
|
locaKey: obj.loca_key,
|
||||||
|
locType: obj.loc_type,
|
||||||
|
materialCount: obj.loc_type === "STP" ? undefined : obj.material_count,
|
||||||
|
materialPreview:
|
||||||
|
obj.loc_type === "STP" || !obj.material_preview_height
|
||||||
|
? undefined
|
||||||
|
: { height: parseFloat(obj.material_preview_height) },
|
||||||
|
parentId: obj.parent_id,
|
||||||
|
displayOrder: obj.display_order,
|
||||||
|
locked: obj.locked,
|
||||||
|
visible: obj.visible !== false,
|
||||||
|
hierarchyLevel: obj.hierarchy_level,
|
||||||
|
parentKey: obj.parent_key,
|
||||||
|
externalKey: obj.external_key,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 외부 DB 연결이 있고 자재 설정이 있으면, 각 Location의 실제 자재 개수 조회
|
||||||
|
if (dbConnectionId && hierarchyConfigData?.material) {
|
||||||
|
const locationObjects = loadedObjects.filter(
|
||||||
|
(obj) =>
|
||||||
|
(obj.type === "location-bed" || obj.type === "location-temp" || obj.type === "location-dest") &&
|
||||||
|
obj.locaKey,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 각 Location에 대해 자재 개수 조회 (병렬 처리)
|
||||||
|
const materialCountPromises = locationObjects.map(async (obj) => {
|
||||||
|
try {
|
||||||
|
const matResponse = await getMaterials(dbConnectionId, {
|
||||||
|
tableName: hierarchyConfigData.material.tableName,
|
||||||
|
keyColumn: hierarchyConfigData.material.keyColumn,
|
||||||
|
locationKeyColumn: hierarchyConfigData.material.locationKeyColumn,
|
||||||
|
layerColumn: hierarchyConfigData.material.layerColumn,
|
||||||
|
locaKey: obj.locaKey!,
|
||||||
|
});
|
||||||
|
if (matResponse.success && matResponse.data) {
|
||||||
|
return { id: obj.id, count: matResponse.data.length };
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// 자동 갱신 시에는 에러 로그 생략
|
||||||
|
}
|
||||||
|
return { id: obj.id, count: 0 };
|
||||||
|
});
|
||||||
|
|
||||||
|
const materialCounts = await Promise.all(materialCountPromises);
|
||||||
|
|
||||||
|
// materialCount 업데이트
|
||||||
|
const updatedObjects = loadedObjects.map((obj) => {
|
||||||
|
const countData = materialCounts.find((m) => m.id === obj.id);
|
||||||
|
if (countData && countData.count > 0) {
|
||||||
|
return { ...obj, materialCount: countData.count };
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
});
|
||||||
|
|
||||||
|
setPlacedObjects(updatedObjects);
|
||||||
|
} else {
|
||||||
|
setPlacedObjects(loadedObjects);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 선택된 객체가 있으면 자재 목록도 갱신
|
||||||
|
if (selectedObject && dbConnectionId && hierarchyConfigData?.material) {
|
||||||
|
const currentObj = loadedObjects.find((o) => o.id === selectedObject.id);
|
||||||
|
if (
|
||||||
|
currentObj &&
|
||||||
|
(currentObj.type === "location-bed" ||
|
||||||
|
currentObj.type === "location-temp" ||
|
||||||
|
currentObj.type === "location-dest") &&
|
||||||
|
currentObj.locaKey
|
||||||
|
) {
|
||||||
|
const matResponse = await getMaterials(dbConnectionId, {
|
||||||
|
tableName: hierarchyConfigData.material.tableName,
|
||||||
|
keyColumn: hierarchyConfigData.material.keyColumn,
|
||||||
|
locationKeyColumn: hierarchyConfigData.material.locationKeyColumn,
|
||||||
|
layerColumn: hierarchyConfigData.material.layerColumn,
|
||||||
|
locaKey: currentObj.locaKey,
|
||||||
|
});
|
||||||
|
if (matResponse.success && matResponse.data) {
|
||||||
|
const layerColumn = hierarchyConfigData.material.layerColumn || "LOLAYER";
|
||||||
|
const sortedMaterials = matResponse.data.sort(
|
||||||
|
(a: any, b: any) => (b[layerColumn] || 0) - (a[layerColumn] || 0),
|
||||||
|
);
|
||||||
|
setMaterials(sortedMaterials);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 마지막 갱신 시간 기록
|
||||||
|
setLastRefreshedAt(new Date());
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// 자동 갱신 실패 시 조용히 무시 (사용자 경험 방해 안 함)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 10초마다 자동 갱신
|
||||||
|
const intervalId = setInterval(silentRefresh, AUTO_REFRESH_INTERVAL);
|
||||||
|
|
||||||
|
// 컴포넌트 언마운트 시 인터벌 정리
|
||||||
|
return () => clearInterval(intervalId);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [layoutId, isLoading, isRefreshing, selectedObject]);
|
||||||
|
|
||||||
// Location의 자재 목록 로드
|
// Location의 자재 목록 로드
|
||||||
const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
|
const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
|
||||||
if (!hierarchyConfig?.material) {
|
if (!hierarchyConfig?.material) {
|
||||||
|
|
@ -262,7 +422,8 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
});
|
});
|
||||||
if (response.success && response.data) {
|
if (response.success && response.data) {
|
||||||
const layerColumn = hierarchyConfig.material.layerColumn || "LOLAYER";
|
const layerColumn = hierarchyConfig.material.layerColumn || "LOLAYER";
|
||||||
const sortedMaterials = response.data.sort((a: any, b: any) => (a[layerColumn] || 0) - (b[layerColumn] || 0));
|
// 층 내림차순 정렬 (높은 층이 위로)
|
||||||
|
const sortedMaterials = response.data.sort((a: any, b: any) => (b[layerColumn] || 0) - (a[layerColumn] || 0));
|
||||||
setMaterials(sortedMaterials);
|
setMaterials(sortedMaterials);
|
||||||
} else {
|
} else {
|
||||||
setMaterials([]);
|
setMaterials([]);
|
||||||
|
|
@ -396,9 +557,14 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
<div className="flex items-center justify-between border-b p-4">
|
<div className="flex items-center justify-between border-b p-4">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
|
<h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
|
||||||
<p className="text-muted-foreground text-sm">
|
<div className="flex items-center gap-3">
|
||||||
{isExternalMode ? "야드 관제 화면" : "읽기 전용 뷰"}
|
<p className="text-muted-foreground text-sm">{isExternalMode ? "야드 관제 화면" : "읽기 전용 뷰"}</p>
|
||||||
</p>
|
{lastRefreshedAt && (
|
||||||
|
<span className="text-muted-foreground text-xs">
|
||||||
|
마지막 갱신: {lastRefreshedAt.toLocaleTimeString("ko-KR")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{/* 전체 화면 버튼 - 외부 업체 모드에서만 표시 */}
|
{/* 전체 화면 버튼 - 외부 업체 모드에서만 표시 */}
|
||||||
|
|
@ -409,11 +575,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
onClick={toggleFullscreen}
|
onClick={toggleFullscreen}
|
||||||
title={isFullscreen ? "전체 화면 종료" : "전체 화면"}
|
title={isFullscreen ? "전체 화면 종료" : "전체 화면"}
|
||||||
>
|
>
|
||||||
{isFullscreen ? (
|
{isFullscreen ? <Minimize className="mr-2 h-4 w-4" /> : <Maximize className="mr-2 h-4 w-4" />}
|
||||||
<Minimize className="mr-2 h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<Maximize className="mr-2 h-4 w-4" />
|
|
||||||
)}
|
|
||||||
{isFullscreen ? "종료" : "전체 화면"}
|
{isFullscreen ? "종료" : "전체 화면"}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
@ -434,366 +596,363 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
||||||
<div className="flex flex-1 overflow-hidden">
|
<div className="flex flex-1 overflow-hidden">
|
||||||
{/* 좌측: 검색/필터 - 외부 모드에서는 숨김 */}
|
{/* 좌측: 검색/필터 - 외부 모드에서는 숨김 */}
|
||||||
{!isExternalMode && (
|
{!isExternalMode && (
|
||||||
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
|
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
|
||||||
<div className="space-y-4 p-4">
|
<div className="space-y-4 p-4">
|
||||||
{/* 검색 */}
|
{/* 검색 */}
|
||||||
<div>
|
<div>
|
||||||
<Label className="mb-2 block text-sm font-semibold">검색</Label>
|
<Label className="mb-2 block text-sm font-semibold">검색</Label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||||
<Input
|
<Input
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
placeholder="이름, Area, Location 검색..."
|
placeholder="이름, Area, Location 검색..."
|
||||||
className="h-10 pl-9 text-sm"
|
className="h-10 pl-9 text-sm"
|
||||||
/>
|
/>
|
||||||
{searchQuery && (
|
{searchQuery && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2 p-0"
|
className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2 p-0"
|
||||||
onClick={() => setSearchQuery("")}
|
onClick={() => setSearchQuery("")}
|
||||||
>
|
>
|
||||||
<X className="h-3 w-3" />
|
<X className="h-3 w-3" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 타입 필터 */}
|
||||||
|
<div>
|
||||||
|
<Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
|
||||||
|
<Select value={filterType} onValueChange={setFilterType}>
|
||||||
|
<SelectTrigger className="h-10 text-sm">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
|
||||||
|
<SelectItem value="area">Area ({typeCounts.area})</SelectItem>
|
||||||
|
<SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
|
||||||
|
<SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
|
||||||
|
<SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
|
||||||
|
<SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
|
||||||
|
<SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
|
||||||
|
<SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 필터 초기화 */}
|
||||||
|
{(searchQuery || filterType !== "all") && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-9 w-full text-sm"
|
||||||
|
onClick={() => {
|
||||||
|
setSearchQuery("");
|
||||||
|
setFilterType("all");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
필터 초기화
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 타입 필터 */}
|
{/* 객체 목록 */}
|
||||||
<div>
|
<div className="flex-1 overflow-y-auto border-t p-4">
|
||||||
<Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
|
<Label className="mb-2 block text-sm font-semibold">객체 목록 ({filteredObjects.length})</Label>
|
||||||
<Select value={filterType} onValueChange={setFilterType}>
|
{filteredObjects.length === 0 ? (
|
||||||
<SelectTrigger className="h-10 text-sm">
|
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||||
<SelectValue />
|
{searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
|
||||||
</SelectTrigger>
|
</div>
|
||||||
<SelectContent>
|
) : (
|
||||||
<SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
|
(() => {
|
||||||
<SelectItem value="area">Area ({typeCounts.area})</SelectItem>
|
// Area 객체가 있는 경우 계층 트리 아코디언 적용
|
||||||
<SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
|
const areaObjects = filteredObjects.filter((obj) => obj.type === "area");
|
||||||
<SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
|
|
||||||
<SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
|
|
||||||
<SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
|
|
||||||
<SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
|
|
||||||
<SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 필터 초기화 */}
|
// Area가 없으면 기존 평면 리스트 유지
|
||||||
{(searchQuery || filterType !== "all") && (
|
if (areaObjects.length === 0) {
|
||||||
<Button
|
return (
|
||||||
variant="outline"
|
<div className="space-y-2">
|
||||||
size="sm"
|
{filteredObjects.map((obj) => {
|
||||||
className="h-9 w-full text-sm"
|
let typeLabel = obj.type;
|
||||||
onClick={() => {
|
if (obj.type === "location-bed") typeLabel = "베드(BED)";
|
||||||
setSearchQuery("");
|
else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
|
||||||
setFilterType("all");
|
else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
|
||||||
}}
|
else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
|
||||||
>
|
else if (obj.type === "crane-mobile") typeLabel = "크레인";
|
||||||
필터 초기화
|
else if (obj.type === "area") typeLabel = "Area";
|
||||||
</Button>
|
else if (obj.type === "rack") typeLabel = "랙";
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 객체 목록 */}
|
return (
|
||||||
<div className="flex-1 overflow-y-auto border-t p-4">
|
<div
|
||||||
<Label className="mb-2 block text-sm font-semibold">객체 목록 ({filteredObjects.length})</Label>
|
key={obj.id}
|
||||||
{filteredObjects.length === 0 ? (
|
onClick={() => handleObjectClick(obj.id)}
|
||||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
|
||||||
{searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
|
selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm"
|
||||||
</div>
|
}`}
|
||||||
) : (
|
>
|
||||||
(() => {
|
<div className="flex items-start justify-between">
|
||||||
// Area 객체가 있는 경우 계층 트리 아코디언 적용
|
<div className="flex-1">
|
||||||
const areaObjects = filteredObjects.filter((obj) => obj.type === "area");
|
<p className="text-sm font-medium">{obj.name}</p>
|
||||||
|
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
||||||
// Area가 없으면 기존 평면 리스트 유지
|
<span
|
||||||
if (areaObjects.length === 0) {
|
className="inline-block h-2 w-2 rounded-full"
|
||||||
return (
|
style={{ backgroundColor: obj.color }}
|
||||||
<div className="space-y-2">
|
/>
|
||||||
{filteredObjects.map((obj) => {
|
<span>{typeLabel}</span>
|
||||||
let typeLabel = obj.type;
|
</div>
|
||||||
if (obj.type === "location-bed") typeLabel = "베드(BED)";
|
|
||||||
else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
|
|
||||||
else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
|
|
||||||
else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
|
|
||||||
else if (obj.type === "crane-mobile") typeLabel = "크레인";
|
|
||||||
else if (obj.type === "area") typeLabel = "Area";
|
|
||||||
else if (obj.type === "rack") typeLabel = "랙";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={obj.id}
|
|
||||||
onClick={() => handleObjectClick(obj.id)}
|
|
||||||
className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
|
|
||||||
selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="text-sm font-medium">{obj.name}</p>
|
|
||||||
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
|
||||||
<span
|
|
||||||
className="inline-block h-2 w-2 rounded-full"
|
|
||||||
style={{ backgroundColor: obj.color }}
|
|
||||||
/>
|
|
||||||
<span>{typeLabel}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-2 space-y-1">
|
||||||
|
{obj.areaKey && (
|
||||||
|
<p className="text-muted-foreground text-xs">
|
||||||
|
Area: <span className="font-medium">{obj.areaKey}</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{obj.locaKey && (
|
||||||
|
<p className="text-muted-foreground text-xs">
|
||||||
|
Location: <span className="font-medium">{obj.locaKey}</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{obj.materialCount !== undefined && obj.materialCount > 0 && (
|
||||||
|
<p className="text-xs text-yellow-600">
|
||||||
|
자재: <span className="font-semibold">{obj.materialCount}개</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 space-y-1">
|
);
|
||||||
{obj.areaKey && (
|
})}
|
||||||
<p className="text-muted-foreground text-xs">
|
</div>
|
||||||
Area: <span className="font-medium">{obj.areaKey}</span>
|
);
|
||||||
</p>
|
}
|
||||||
|
|
||||||
|
// Area가 있는 경우: Area → Location 계층 아코디언
|
||||||
|
return (
|
||||||
|
<Accordion type="multiple" className="w-full">
|
||||||
|
{areaObjects.map((areaObj) => {
|
||||||
|
const childLocations = filteredObjects.filter(
|
||||||
|
(obj) =>
|
||||||
|
obj.type !== "area" &&
|
||||||
|
obj.areaKey === areaObj.areaKey &&
|
||||||
|
(obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
|
||||||
|
<AccordionTrigger className="px-2 py-3 hover:no-underline">
|
||||||
|
<div
|
||||||
|
className={`flex w-full items-center justify-between pr-2 ${
|
||||||
|
selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
|
||||||
|
}`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleObjectClick(areaObj.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Grid3x3 className="h-4 w-4" />
|
||||||
|
<span className="text-sm font-medium">{areaObj.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-muted-foreground text-xs">({childLocations.length})</span>
|
||||||
|
<span
|
||||||
|
className="inline-block h-2 w-2 rounded-full"
|
||||||
|
style={{ backgroundColor: areaObj.color }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="px-2 pb-3">
|
||||||
|
{childLocations.length === 0 ? (
|
||||||
|
<p className="text-muted-foreground py-2 text-center text-xs">Location이 없습니다</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{childLocations.map((locationObj) => (
|
||||||
|
<div
|
||||||
|
key={locationObj.id}
|
||||||
|
onClick={() => handleObjectClick(locationObj.id)}
|
||||||
|
className={`cursor-pointer rounded-lg border p-2 transition-all ${
|
||||||
|
selectedObject?.id === locationObj.id
|
||||||
|
? "border-primary bg-primary/10"
|
||||||
|
: "hover:border-primary/50"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{locationObj.type === "location-stp" ? (
|
||||||
|
<ParkingCircle className="h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<Package className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
<span className="text-xs font-medium">{locationObj.name}</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="inline-block h-2.5 w-2.5 rounded-full"
|
||||||
|
style={{ backgroundColor: locationObj.color }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
||||||
|
위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
|
||||||
|
</p>
|
||||||
|
{locationObj.locaKey && (
|
||||||
|
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
||||||
|
Location: <span className="font-medium">{locationObj.locaKey}</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
|
||||||
|
<p className="mt-0.5 text-[10px] text-yellow-600">
|
||||||
|
자재: <span className="font-semibold">{locationObj.materialCount}개</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{obj.locaKey && (
|
</AccordionContent>
|
||||||
<p className="text-muted-foreground text-xs">
|
</AccordionItem>
|
||||||
Location: <span className="font-medium">{obj.locaKey}</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{obj.materialCount !== undefined && obj.materialCount > 0 && (
|
|
||||||
<p className="text-xs text-yellow-600">
|
|
||||||
자재: <span className="font-semibold">{obj.materialCount}개</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</Accordion>
|
||||||
);
|
);
|
||||||
}
|
})()
|
||||||
|
)}
|
||||||
// Area가 있는 경우: Area → Location 계층 아코디언
|
</div>
|
||||||
return (
|
|
||||||
<Accordion type="multiple" className="w-full">
|
|
||||||
{areaObjects.map((areaObj) => {
|
|
||||||
const childLocations = filteredObjects.filter(
|
|
||||||
(obj) =>
|
|
||||||
obj.type !== "area" &&
|
|
||||||
obj.areaKey === areaObj.areaKey &&
|
|
||||||
(obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
|
|
||||||
<AccordionTrigger className="px-2 py-3 hover:no-underline">
|
|
||||||
<div
|
|
||||||
className={`flex w-full items-center justify-between pr-2 ${
|
|
||||||
selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
|
|
||||||
}`}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleObjectClick(areaObj.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Grid3x3 className="h-4 w-4" />
|
|
||||||
<span className="text-sm font-medium">{areaObj.name}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-muted-foreground text-xs">({childLocations.length})</span>
|
|
||||||
<span
|
|
||||||
className="inline-block h-2 w-2 rounded-full"
|
|
||||||
style={{ backgroundColor: areaObj.color }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AccordionTrigger>
|
|
||||||
<AccordionContent className="px-2 pb-3">
|
|
||||||
{childLocations.length === 0 ? (
|
|
||||||
<p className="text-muted-foreground py-2 text-center text-xs">Location이 없습니다</p>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2">
|
|
||||||
{childLocations.map((locationObj) => (
|
|
||||||
<div
|
|
||||||
key={locationObj.id}
|
|
||||||
onClick={() => handleObjectClick(locationObj.id)}
|
|
||||||
className={`cursor-pointer rounded-lg border p-2 transition-all ${
|
|
||||||
selectedObject?.id === locationObj.id
|
|
||||||
? "border-primary bg-primary/10"
|
|
||||||
: "hover:border-primary/50"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{locationObj.type === "location-stp" ? (
|
|
||||||
<ParkingCircle className="h-3 w-3" />
|
|
||||||
) : (
|
|
||||||
<Package className="h-3 w-3" />
|
|
||||||
)}
|
|
||||||
<span className="text-xs font-medium">{locationObj.name}</span>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className="inline-block h-2.5 w-2.5 rounded-full"
|
|
||||||
style={{ backgroundColor: locationObj.color }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
||||||
위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
|
|
||||||
</p>
|
|
||||||
{locationObj.locaKey && (
|
|
||||||
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
|
||||||
Location: <span className="font-medium">{locationObj.locaKey}</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
|
|
||||||
<p className="mt-0.5 text-[10px] text-yellow-600">
|
|
||||||
자재: <span className="font-semibold">{locationObj.materialCount}개</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Accordion>
|
|
||||||
);
|
|
||||||
})()
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 중앙: 3D 캔버스 */}
|
{/* 중앙 + 우측 컨테이너 (전체화면 시 함께 표시) */}
|
||||||
<div
|
<div
|
||||||
ref={canvasContainerRef}
|
ref={canvasContainerRef}
|
||||||
className={`relative flex-1 ${isFullscreen ? "bg-background" : ""}`}
|
className={`relative flex flex-1 overflow-hidden ${isFullscreen ? "bg-background" : ""}`}
|
||||||
>
|
>
|
||||||
{!isLoading && (
|
{/* 중앙: 3D 캔버스 */}
|
||||||
<Yard3DCanvas
|
<div className="relative min-w-0 flex-1">
|
||||||
placements={canvasPlacements}
|
{!isLoading && (
|
||||||
selectedPlacementId={selectedObject?.id || null}
|
<Yard3DCanvas
|
||||||
onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
|
placements={canvasPlacements}
|
||||||
focusOnPlacementId={null}
|
selectedPlacementId={selectedObject?.id || null}
|
||||||
onCollisionDetected={() => {}}
|
onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
|
||||||
/>
|
focusOnPlacementId={null}
|
||||||
)}
|
onCollisionDetected={() => {}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 우측: 정보 패널 */}
|
||||||
|
<div className="h-full w-[480px] min-w-[480px] flex-shrink-0 overflow-y-auto border-l">
|
||||||
|
{selectedObject ? (
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-semibold">상세 정보</h3>
|
||||||
|
<p className="text-muted-foreground text-xs">{selectedObject.name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 기본 정보 */}
|
||||||
|
<div className="bg-muted space-y-3 rounded-lg p-3">
|
||||||
|
<div>
|
||||||
|
<Label className="text-muted-foreground text-xs">타입</Label>
|
||||||
|
<p className="text-sm font-medium">{selectedObject.type}</p>
|
||||||
|
</div>
|
||||||
|
{selectedObject.areaKey && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-muted-foreground text-xs">Area Key</Label>
|
||||||
|
<p className="text-sm font-medium">{selectedObject.areaKey}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{selectedObject.locaKey && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-muted-foreground text-xs">Location Key</Label>
|
||||||
|
<p className="text-sm font-medium">{selectedObject.locaKey}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-muted-foreground text-xs">자재 개수</Label>
|
||||||
|
<p className="text-sm font-medium">{selectedObject.materialCount}개</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 자재 목록 (Location인 경우) - 테이블 형태 */}
|
||||||
|
{(selectedObject.type === "location-bed" ||
|
||||||
|
selectedObject.type === "location-stp" ||
|
||||||
|
selectedObject.type === "location-temp" ||
|
||||||
|
selectedObject.type === "location-dest") && (
|
||||||
|
<div className="mt-4">
|
||||||
|
{loadingMaterials ? (
|
||||||
|
<div className="flex h-32 items-center justify-center">
|
||||||
|
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : materials.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||||
|
{externalDbConnectionId ? "자재가 없습니다" : "외부 DB 연결이 설정되지 않았습니다"}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="mb-2 block text-sm font-semibold">자재 목록 ({materials.length}개)</Label>
|
||||||
|
{/* 테이블 형태로 전체 조회 */}
|
||||||
|
<div className="h-[580px] overflow-auto rounded-lg border">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-muted sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th className="border-b px-3 py-3 text-left font-semibold whitespace-nowrap">층</th>
|
||||||
|
{(hierarchyConfig?.material?.displayColumns || []).map((colConfig: any) => (
|
||||||
|
<th key={colConfig.column} className="border-b px-3 py-3 text-left font-semibold">
|
||||||
|
{colConfig.label}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{materials.map((material, index) => {
|
||||||
|
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
|
||||||
|
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={`${material.STKKEY}-${index}`}
|
||||||
|
className="hover:bg-accent border-b transition-colors last:border-0"
|
||||||
|
>
|
||||||
|
<td className="px-3 py-3 font-medium whitespace-nowrap">
|
||||||
|
{material[layerColumn]}단
|
||||||
|
</td>
|
||||||
|
{displayColumns.map((colConfig: any) => (
|
||||||
|
<td key={colConfig.column} className="px-3 py-3">
|
||||||
|
{material[colConfig.column] || "-"}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full items-center justify-center p-4">
|
||||||
|
<p className="text-muted-foreground text-sm">객체를 선택하세요</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 풀스크린 모드일 때 종료 버튼 */}
|
{/* 풀스크린 모드일 때 종료 버튼 */}
|
||||||
{isFullscreen && (
|
{isFullscreen && (
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={toggleFullscreen}
|
onClick={toggleFullscreen}
|
||||||
className="absolute top-4 right-4 z-50 bg-background/80 backdrop-blur-sm"
|
className="bg-background/80 absolute top-4 right-4 z-50 backdrop-blur-sm"
|
||||||
>
|
>
|
||||||
<Minimize className="mr-2 h-4 w-4" />
|
<Minimize className="mr-2 h-4 w-4" />
|
||||||
종료
|
종료
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 우측: 정보 패널 - 외부 모드에서는 숨김 */}
|
|
||||||
{!isExternalMode && (
|
|
||||||
<div className="h-full w-[480px] flex-shrink-0 overflow-y-auto border-l">
|
|
||||||
{selectedObject ? (
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-semibold">상세 정보</h3>
|
|
||||||
<p className="text-muted-foreground text-xs">{selectedObject.name}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 기본 정보 */}
|
|
||||||
<div className="bg-muted space-y-3 rounded-lg p-3">
|
|
||||||
<div>
|
|
||||||
<Label className="text-muted-foreground text-xs">타입</Label>
|
|
||||||
<p className="text-sm font-medium">{selectedObject.type}</p>
|
|
||||||
</div>
|
|
||||||
{selectedObject.areaKey && (
|
|
||||||
<div>
|
|
||||||
<Label className="text-muted-foreground text-xs">Area Key</Label>
|
|
||||||
<p className="text-sm font-medium">{selectedObject.areaKey}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{selectedObject.locaKey && (
|
|
||||||
<div>
|
|
||||||
<Label className="text-muted-foreground text-xs">Location Key</Label>
|
|
||||||
<p className="text-sm font-medium">{selectedObject.locaKey}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
|
|
||||||
<div>
|
|
||||||
<Label className="text-muted-foreground text-xs">자재 개수</Label>
|
|
||||||
<p className="text-sm font-medium">{selectedObject.materialCount}개</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 자재 목록 (Location인 경우) - 테이블 형태 */}
|
|
||||||
{(selectedObject.type === "location-bed" ||
|
|
||||||
selectedObject.type === "location-stp" ||
|
|
||||||
selectedObject.type === "location-temp" ||
|
|
||||||
selectedObject.type === "location-dest") && (
|
|
||||||
<div className="mt-4">
|
|
||||||
{loadingMaterials ? (
|
|
||||||
<div className="flex h-32 items-center justify-center">
|
|
||||||
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : materials.length === 0 ? (
|
|
||||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
|
||||||
{externalDbConnectionId ? "자재가 없습니다" : "외부 DB 연결이 설정되지 않았습니다"}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="mb-2 block text-sm font-semibold">
|
|
||||||
자재 목록 ({materials.length}개)
|
|
||||||
</Label>
|
|
||||||
{/* 테이블 형태로 전체 조회 */}
|
|
||||||
<div className="max-h-[400px] overflow-auto rounded-lg border">
|
|
||||||
<table className="w-full text-sm">
|
|
||||||
<thead className="bg-muted sticky top-0">
|
|
||||||
<tr>
|
|
||||||
<th className="whitespace-nowrap border-b px-3 py-3 text-left font-semibold">층</th>
|
|
||||||
{(hierarchyConfig?.material?.displayColumns || []).map((colConfig: any) => (
|
|
||||||
<th
|
|
||||||
key={colConfig.column}
|
|
||||||
className="border-b px-3 py-3 text-left font-semibold"
|
|
||||||
>
|
|
||||||
{colConfig.label}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{materials.map((material, index) => {
|
|
||||||
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
|
|
||||||
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={`${material.STKKEY}-${index}`}
|
|
||||||
className="hover:bg-accent border-b transition-colors last:border-0"
|
|
||||||
>
|
|
||||||
<td className="whitespace-nowrap px-3 py-3 font-medium">
|
|
||||||
{material[layerColumn]}단
|
|
||||||
</td>
|
|
||||||
{displayColumns.map((colConfig: any) => (
|
|
||||||
<td key={colConfig.column} className="px-3 py-3">
|
|
||||||
{material[colConfig.column] || "-"}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full items-center justify-center p-4">
|
|
||||||
<p className="text-muted-foreground text-sm">객체를 선택하세요</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import {
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} 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 { applyColumnMapping } from "@/lib/utils/columnMapping";
|
||||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
import { getApiUrl } from "@/lib/utils/apiUrl";
|
||||||
|
|
||||||
|
|
@ -41,8 +41,6 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
||||||
const [containerHeight, setContainerHeight] = useState<number>(0);
|
|
||||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
// 행 상세 팝업 상태
|
// 행 상세 팝업 상태
|
||||||
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
const [detailPopupOpen, setDetailPopupOpen] = useState(false);
|
||||||
|
|
@ -50,25 +48,6 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
||||||
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
const [detailPopupLoading, setDetailPopupLoading] = useState(false);
|
||||||
const [additionalDetailData, setAdditionalDetailData] = useState<Record<string, any> | null>(null);
|
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);
|
// // console.log("🧪 ListTestWidget 렌더링!", element);
|
||||||
|
|
||||||
const dataSources = useMemo(() => {
|
const dataSources = useMemo(() => {
|
||||||
|
|
@ -764,139 +743,87 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className="flex h-full flex-col bg-card shadow-sm">
|
<div className="flex h-full flex-col bg-card shadow-sm">
|
||||||
{/* 컴팩트 모드 (세로 1칸) - 캐러셀 형태로 한 건씩 표시 */}
|
{/* 헤더 */}
|
||||||
{isCompactHeight ? (
|
<div className="flex items-center justify-between border-b p-4">
|
||||||
<div className="flex h-full flex-col justify-center p-3">
|
<div>
|
||||||
{data && data.rows.length > 0 && displayColumns.length > 0 ? (
|
<h3 className="text-lg font-semibold">
|
||||||
<div className="flex items-center gap-2">
|
{element?.customTitle || "리스트"}
|
||||||
{/* 이전 버튼 */}
|
</h3>
|
||||||
<Button
|
<p className="text-xs text-muted-foreground">
|
||||||
variant="ghost"
|
{dataSources?.length || 0}개 데이터 소스 • {data?.totalRows || 0}개 행
|
||||||
size="sm"
|
{lastRefreshTime && (
|
||||||
className="h-8 w-8 shrink-0 p-0"
|
<span className="ml-2">
|
||||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
• {lastRefreshTime.toLocaleTimeString("ko-KR")}
|
||||||
disabled={currentPage === 1}
|
</span>
|
||||||
>
|
|
||||||
<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>
|
</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-1 overflow-auto p-4">
|
||||||
<div className="flex items-center justify-between border-t p-4">
|
{error ? (
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="flex h-full items-center justify-center">
|
||||||
총 {data.totalRows}개 항목 (페이지 {currentPage}/{totalPages})
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2">
|
) : !dataSources || dataSources.length === 0 ? (
|
||||||
<Button
|
<div className="flex h-full items-center justify-center">
|
||||||
variant="outline"
|
<p className="text-sm text-muted-foreground">
|
||||||
size="sm"
|
데이터 소스를 연결해주세요
|
||||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
</p>
|
||||||
disabled={currentPage === 1}
|
</div>
|
||||||
>
|
) : !data || data.rows.length === 0 ? (
|
||||||
이전
|
<div className="flex h-full items-center justify-center">
|
||||||
</Button>
|
<p className="text-sm text-muted-foreground">
|
||||||
<Button
|
데이터가 없습니다
|
||||||
variant="outline"
|
</p>
|
||||||
size="sm"
|
</div>
|
||||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
) : config.viewMode === "card" ? (
|
||||||
disabled={currentPage === totalPages}
|
renderCards()
|
||||||
>
|
) : (
|
||||||
다음
|
renderTable()
|
||||||
</Button>
|
)}
|
||||||
</div>
|
</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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 행 상세 팝업 */}
|
{/* 행 상세 팝업 */}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"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 { Card } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from "@/components/ui/badge";
|
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 { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
|
||||||
import { getApiUrl } from "@/lib/utils/apiUrl";
|
import { getApiUrl } from "@/lib/utils/apiUrl";
|
||||||
|
|
||||||
// 컴팩트 모드 임계값 (픽셀)
|
|
||||||
const COMPACT_HEIGHT_THRESHOLD = 180;
|
|
||||||
|
|
||||||
type AlertType = "accident" | "weather" | "construction" | "system" | "security" | "other";
|
type AlertType = "accident" | "weather" | "construction" | "system" | "security" | "other";
|
||||||
|
|
||||||
interface Alert {
|
interface Alert {
|
||||||
|
|
@ -34,29 +31,6 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [filter, setFilter] = useState<AlertType | "all">("all");
|
const [filter, setFilter] = useState<AlertType | "all">("all");
|
||||||
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
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(() => {
|
const dataSources = useMemo(() => {
|
||||||
return element?.dataSources || element?.chartConfig?.dataSources;
|
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 (
|
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 className="flex items-center justify-between border-b bg-background/80 p-3">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -706,7 +631,7 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
{alert.location && (
|
{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>
|
<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">
|
<div className="mt-1 flex items-center gap-2 text-[9px] text-muted-foreground">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Card } from "@/components/ui/card";
|
import { Card } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from "@/components/ui/badge";
|
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 { apiClient } from "@/lib/api/client";
|
||||||
import { DashboardElement } from "@/components/admin/dashboard/types";
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||||||
|
|
||||||
// 컴팩트 모드 임계값 (픽셀)
|
|
||||||
const COMPACT_HEIGHT_THRESHOLD = 180;
|
|
||||||
|
|
||||||
// 알림 타입
|
// 알림 타입
|
||||||
type AlertType = "accident" | "weather" | "construction";
|
type AlertType = "accident" | "weather" | "construction";
|
||||||
|
|
||||||
|
|
@ -35,29 +32,6 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
|
||||||
const [filter, setFilter] = useState<AlertType | "all">("all");
|
const [filter, setFilter] = useState<AlertType | "all">("all");
|
||||||
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
||||||
const [newAlertIds, setNewAlertIds] = useState<Set<string>>(new Set());
|
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 () => {
|
const loadData = async () => {
|
||||||
|
|
@ -202,49 +176,8 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
|
||||||
high: alerts.filter((a) => a.severity === "high").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) => (
|
|
||||||
<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 (
|
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 justify-between border-b pb-3">
|
||||||
<div className="flex items-center gap-2">
|
<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">
|
<div className="border-t pt-3 text-center text-xs text-muted-foreground">
|
||||||
1분마다 자동으로 업데이트됩니다
|
💡 1분마다 자동으로 업데이트됩니다
|
||||||
</div>
|
</div>
|
||||||
</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 { getWeather, WeatherData } from '@/lib/api/openApi';
|
||||||
import {
|
import {
|
||||||
Cloud,
|
Cloud,
|
||||||
|
|
@ -27,9 +26,6 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { DashboardElement } from '@/components/admin/dashboard/types';
|
import { DashboardElement } from '@/components/admin/dashboard/types';
|
||||||
|
|
||||||
// 컴팩트 모드 임계값 (픽셀)
|
|
||||||
const COMPACT_HEIGHT_THRESHOLD = 180;
|
|
||||||
|
|
||||||
interface WeatherWidgetProps {
|
interface WeatherWidgetProps {
|
||||||
element?: DashboardElement;
|
element?: DashboardElement;
|
||||||
city?: string;
|
city?: string;
|
||||||
|
|
@ -49,29 +45,6 @@ export default function WeatherWidget({
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [lastUpdated, setLastUpdated] = useState<Date | 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[]>([
|
const [selectedItems, setSelectedItems] = useState<string[]>([
|
||||||
'temperature',
|
'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 (
|
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 items-center justify-between mb-3">
|
||||||
<div className="flex-1">
|
<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">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Popover open={open} onOpenChange={setOpen}>
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
|
|
@ -558,7 +438,22 @@ export default function WeatherWidget({
|
||||||
<div className="bg-muted/80 rounded-lg p-3">
|
<div className="bg-muted/80 rounded-lg p-3">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<div className="flex-shrink-0">
|
<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>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<div className="text-sm font-bold text-foreground leading-tight truncate">
|
<div className="text-sm font-bold text-foreground leading-tight truncate">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue