Merge remote-tracking branch 'upstream/main'

backend-node/src/routes/roleRoutes.ts

@@ -22,6 +22,15 @@ const router = Router();
 // 모든 role 라우트에 인증 미들웨어 적용
 router.use(authenticateToken);
 
+/**
+ * 사용자 권한 그룹 조회 (/:id 보다 먼저 정의해야 함)
+ */
+// 현재 사용자가 속한 권한 그룹 조회
+router.get("/user/my-groups", getUserRoleGroups);
+
+// 특정 사용자가 속한 권한 그룹 조회
+router.get("/user/:userId/groups", requireAdmin, getUserRoleGroups);
+
 /**
  * 권한 그룹 CRUD
  */
@@ -67,13 +76,4 @@ router.get("/:id/menu-permissions", requireAdmin, getMenuPermissions);
 // 메뉴 권한 설정
 router.put("/:id/menu-permissions", requireAdmin, setMenuPermissions);
 
-/**
- * 사용자 권한 그룹 조회
- */
-// 현재 사용자가 속한 권한 그룹 조회
-router.get("/user/my-groups", getUserRoleGroups);
-
-// 특정 사용자가 속한 권한 그룹 조회
-router.get("/user/:userId/groups", requireAdmin, getUserRoleGroups);
-
 export default router;

frontend/components/admin/dashboard/CanvasElement.tsx

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

frontend/components/admin/dashboard/widgets/ListWidget.tsx

@@ -14,7 +14,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { getApiUrl } from "@/lib/utils/apiUrl";
-import { Truck, Clock, MapPin, Package, Info } from "lucide-react";
+import { Truck, Clock, MapPin, Package, Info, ChevronLeft, ChevronRight } from "lucide-react";
 
 interface ListWidgetProps {
   element: DashboardElement;
@@ -32,6 +32,8 @@ 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);
@@ -39,6 +41,25 @@ 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",
@@ -541,7 +562,57 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
   const paginatedRows = config.enablePagination ? data.rows.slice(startIdx, endIdx) : data.rows;
 
   return (
-    <div className="flex h-full w-full flex-col p-4">
+    <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-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>
@@ -673,6 +744,8 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
               </div>
             </div>
           )}
+        </>
+      )}
 
       {/* 행 상세 팝업 */}
       <Dialog open={detailPopupOpen} onOpenChange={setDetailPopupOpen}>

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

@@ -2146,9 +2146,9 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
                   <Table>
                     <TableHeader className="bg-muted sticky top-0">
                       <TableRow>
-                        <TableHead className="w-[60px] text-xs">층</TableHead>
+                        <TableHead className="w-[70px] whitespace-nowrap px-3 py-3 text-sm">층</TableHead>
                         {(hierarchyConfig?.material?.displayColumns || []).map((col) => (
-                          <TableHead key={col.column} className="text-xs">
+                          <TableHead key={col.column} className="px-3 py-3 text-sm">
                             {col.label}
                           </TableHead>
                         ))}
@@ -2163,9 +2163,9 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
 
                     return (
                           <TableRow key={material[keyColumn] || `material-${index}`}>
-                            <TableCell className="text-xs font-medium">{layerNumber}단</TableCell>
+                            <TableCell className="whitespace-nowrap px-3 py-3 text-sm font-medium">{layerNumber}단</TableCell>
                             {displayColumns.map((col) => (
-                              <TableCell key={col.column} className="text-xs">
+                              <TableCell key={col.column} className="px-3 py-3 text-sm">
                                 {material[col.column] || "-"}
                               </TableCell>
                               ))}

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
-import { Loader2, Search, X, Grid3x3, Package, ParkingCircle, RefreshCw } from "lucide-react";
+import { Loader2, Search, X, Grid3x3, Package, ParkingCircle, RefreshCw, Maximize, Minimize } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
@@ -12,6 +12,7 @@ import type { PlacedObject, MaterialData } from "@/types/digitalTwin";
 import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin";
 import { OBJECT_COLORS, DEFAULT_COLOR } from "./constants";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { apiCall } from "@/lib/api/client";
 
 const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
   ssr: false,
@@ -26,6 +27,9 @@ interface DigitalTwinViewerProps {
   layoutId: number;
 }
 
+// 외부 업체 역할 코드
+const EXTERNAL_VENDOR_ROLE = "LSTHIRA_EXTERNAL_VENDOR";
+
 export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) {
   const { toast } = useToast();
   const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
@@ -43,6 +47,64 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
   const [filterType, setFilterType] = useState<string>("all");
   const [isRefreshing, setIsRefreshing] = useState(false);
 
+  // 외부 업체 모드
+  const [isExternalMode, setIsExternalMode] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const canvasContainerRef = useRef<HTMLDivElement>(null);
+
+  // 외부 업체 역할 체크
+  useEffect(() => {
+    const checkExternalRole = async () => {
+      try {
+        const response = await apiCall<any[]>("GET", "/roles/user/my-groups");
+        console.log("=== 사용자 권한 그룹 조회 ===");
+        console.log("API 응답:", response);
+        console.log("찾는 역할:", EXTERNAL_VENDOR_ROLE);
+        
+        if (response.success && response.data) {
+          console.log("권한 그룹 목록:", response.data);
+          
+          // 사용자의 권한 그룹 중 LSTHIRA_EXTERNAL_VENDOR가 있는지 확인
+          const hasExternalRole = response.data.some(
+            (group: any) => {
+              console.log("체크 중인 그룹:", group.authCode, group.authName);
+              return group.authCode === EXTERNAL_VENDOR_ROLE || group.authName === EXTERNAL_VENDOR_ROLE;
+            }
+          );
+          
+          console.log("외부 업체 역할 보유:", hasExternalRole);
+          setIsExternalMode(hasExternalRole);
+        }
+      } catch (error) {
+        console.error("역할 조회 실패:", error);
+      }
+    };
+
+    checkExternalRole();
+  }, []);
+
+  // 전체 화면 토글 (3D 캔버스 영역만)
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      // 3D 캔버스 컨테이너만 풀스크린
+      canvasContainerRef.current?.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  // 전체 화면 변경 감지
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+
   // 레이아웃 데이터 로드 함수
   const loadLayout = async () => {
     try {
@@ -334,8 +396,27 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
       <div className="flex items-center justify-between border-b p-4">
         <div>
           <h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
-          <p className="text-muted-foreground text-sm">읽기 전용 뷰</p>
+          <p className="text-muted-foreground text-sm">
+            {isExternalMode ? "야드 관제 화면" : "읽기 전용 뷰"}
+          </p>
         </div>
+        <div className="flex items-center gap-2">
+          {/* 전체 화면 버튼 - 외부 업체 모드에서만 표시 */}
+          {isExternalMode && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleFullscreen}
+              title={isFullscreen ? "전체 화면 종료" : "전체 화면"}
+            >
+              {isFullscreen ? (
+                <Minimize className="mr-2 h-4 w-4" />
+              ) : (
+                <Maximize className="mr-2 h-4 w-4" />
+              )}
+              {isFullscreen ? "종료" : "전체 화면"}
+            </Button>
+          )}
           <Button
             variant="outline"
             size="sm"
@@ -347,10 +428,12 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
             {isRefreshing ? "갱신 중..." : "새로고침"}
           </Button>
         </div>
+      </div>
 
       {/* 메인 영역 */}
       <div className="flex flex-1 overflow-hidden">
-        {/* 좌측: 검색/필터 */}
+        {/* 좌측: 검색/필터 - 외부 모드에서는 숨김 */}
+        {!isExternalMode && (
         <div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
           <div className="space-y-4 p-4">
             {/* 검색 */}
@@ -575,9 +658,13 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
             )}
           </div>
         </div>
+        )}
 
         {/* 중앙: 3D 캔버스 */}
-        <div className="relative flex-1">
+        <div 
+          ref={canvasContainerRef}
+          className={`relative flex-1 ${isFullscreen ? "bg-background" : ""}`}
+        >
           {!isLoading && (
             <Yard3DCanvas
               placements={canvasPlacements}
@@ -587,9 +674,22 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
               onCollisionDetected={() => {}}
             />
           )}
+          {/* 풀스크린 모드일 때 종료 버튼 */}
+          {isFullscreen && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleFullscreen}
+              className="absolute top-4 right-4 z-50 bg-background/80 backdrop-blur-sm"
+            >
+              <Minimize className="mr-2 h-4 w-4" />
+              종료
+            </Button>
+          )}
         </div>
 
-        {/* 우측: 정보 패널 */}
+        {/* 우측: 정보 패널 - 외부 모드에서는 숨김 */}
+        {!isExternalMode && (
         <div className="h-full w-[480px] flex-shrink-0 overflow-y-auto border-l">
           {selectedObject ? (
             <div className="p-4">
@@ -645,14 +745,14 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                       </Label>
                       {/* 테이블 형태로 전체 조회 */}
                       <div className="max-h-[400px] overflow-auto rounded-lg border">
-                        <table className="w-full text-xs">
+                        <table className="w-full text-sm">
                           <thead className="bg-muted sticky top-0">
                             <tr>
-                              <th className="border-b px-2 py-2 text-left font-semibold">층</th>
+                              <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-2 py-2 text-left font-semibold"
+                                  className="border-b px-3 py-3 text-left font-semibold"
                                 >
                                   {colConfig.label}
                                 </th>
@@ -668,11 +768,11 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                             key={`${material.STKKEY}-${index}`}
                                   className="hover:bg-accent border-b transition-colors last:border-0"
                                 >
-                                  <td className="px-2 py-2 font-medium">
+                                  <td className="whitespace-nowrap px-3 py-3 font-medium">
                                     {material[layerColumn]}단
                                   </td>
                               {displayColumns.map((colConfig: any) => (
-                                    <td key={colConfig.column} className="px-2 py-2">
+                                    <td key={colConfig.column} className="px-3 py-3">
                                       {material[colConfig.column] || "-"}
                                     </td>
                               ))}
@@ -693,6 +793,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
             </div>
           )}
         </div>
+        )}
       </div>
     </div>
   );

frontend/components/dashboard/widgets/ListTestWidget.tsx

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader2, RefreshCw, Truck, Clock, MapPin, Package, Info } from "lucide-react";
+import { Loader2, RefreshCw, Truck, Clock, MapPin, Package, Info, ChevronLeft, ChevronRight } from "lucide-react";
 import { applyColumnMapping } from "@/lib/utils/columnMapping";
 import { getApiUrl } from "@/lib/utils/apiUrl";
 
@@ -41,6 +41,8 @@ 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);
@@ -48,6 +50,25 @@ 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(() => {
@@ -743,7 +764,57 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   };
 
   return (
-      <div className="flex h-full flex-col bg-card shadow-sm">
+      <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>
@@ -825,6 +896,8 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
               </div>
             </div>
           )}
+        </>
+      )}
 
       {/* 행 상세 팝업 */}
       <Dialog open={detailPopupOpen} onOpenChange={setDetailPopupOpen}>

frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -8,6 +8,9 @@ import { RefreshCw, AlertTriangle, Cloud, Construction, Database as DatabaseIcon
 import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
 import { getApiUrl } from "@/lib/utils/apiUrl";
 
+// 컴팩트 모드 임계값 (픽셀)
+const COMPACT_HEIGHT_THRESHOLD = 180;
+
 type AlertType = "accident" | "weather" | "construction" | "system" | "security" | "other";
 
 interface Alert {
@@ -32,6 +35,29 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
   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;
   }, [element?.dataSources, element?.chartConfig?.dataSources]);
@@ -549,8 +575,57 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
     );
   }
 
+  // 통계 계산
+  const stats = {
+    accident: alerts.filter((a) => a.type === "accident").length,
+    weather: alerts.filter((a) => a.type === "weather").length,
+    construction: alerts.filter((a) => a.type === "construction").length,
+    high: alerts.filter((a) => a.severity === "high").length,
+  };
+
+  // 컴팩트 모드 렌더링 - 알림 목록만 스크롤
+  if (isCompact) {
     return (
-    <div className="flex h-full w-full flex-col overflow-hidden bg-background">
+      <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 items-center justify-between border-b bg-background/80 p-3">
         <div>
@@ -631,7 +706,7 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
                     </Badge>
                   </div>
                   {alert.location && (
-                    <p className="text-[10px] text-muted-foreground mt-0.5">📍 {alert.location}</p>
+                    <p className="text-[10px] text-muted-foreground mt-0.5">{alert.location}</p>
                   )}
                   <p className="text-[10px] text-foreground mt-0.5 line-clamp-2">{alert.description}</p>
                   <div className="mt-1 flex items-center gap-2 text-[9px] text-muted-foreground">

frontend/components/dashboard/widgets/RiskAlertWidget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -8,6 +8,9 @@ import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
 import { apiClient } from "@/lib/api/client";
 import { DashboardElement } from "@/components/admin/dashboard/types";
 
+// 컴팩트 모드 임계값 (픽셀)
+const COMPACT_HEIGHT_THRESHOLD = 180;
+
 // 알림 타입
 type AlertType = "accident" | "weather" | "construction";
 
@@ -33,6 +36,29 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
   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 () => {
     setIsRefreshing(true);
@@ -176,8 +202,49 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
     high: alerts.filter((a) => a.severity === "high").length,
   };
 
+  // 컴팩트 모드 렌더링 - 알림 목록만 스크롤
+  if (isCompact) {
     return (
-    <div className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
+      <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 items-center justify-between border-b pb-3">
         <div className="flex items-center gap-2">
@@ -294,7 +361,7 @@ export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
 
       {/* 안내 메시지 */}
       <div className="border-t pt-3 text-center text-xs text-muted-foreground">
-        💡 1분마다 자동으로 업데이트됩니다
+        1분마다 자동으로 업데이트됩니다
       </div>
     </div>
   );

frontend/components/dashboard/widgets/WeatherWidget.tsx

@@ -3,9 +3,10 @@
 /**
  * 날씨 위젯 컴포넌트
  * - 실시간 날씨 정보를 표시
+ * - 컴팩트 모드: 높이가 작을 때 핵심 정보만 표시
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { getWeather, WeatherData } from '@/lib/api/openApi';
 import {
   Cloud,
@@ -26,6 +27,9 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { cn } from '@/lib/utils';
 import { DashboardElement } from '@/components/admin/dashboard/types';
 
+// 컴팩트 모드 임계값 (픽셀)
+const COMPACT_HEIGHT_THRESHOLD = 180;
+
 interface WeatherWidgetProps {
   element?: DashboardElement;
   city?: string;
@@ -45,6 +49,29 @@ export default function WeatherWidget({
   const [error, setError] = useState<string | null>(null);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   
+  // 컨테이너 높이 측정을 위한 ref
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number>(300);
+  
+  // 컴팩트 모드 여부 (element.size.height 또는 실제 컨테이너 높이 기반)
+  const isCompact = element?.size?.height 
+    ? element.size.height < COMPACT_HEIGHT_THRESHOLD 
+    : containerHeight < COMPACT_HEIGHT_THRESHOLD;
+  
+  // 컨테이너 높이 측정
+  useEffect(() => {
+    if (!containerRef.current) return;
+    
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerHeight(entry.contentRect.height);
+      }
+    });
+    
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  
   // 표시할 날씨 정보 선택
   const [selectedItems, setSelectedItems] = useState<string[]>([
     'temperature',
@@ -323,12 +350,105 @@ export default function WeatherWidget({
     );
   }
 
+  // 날씨 아이콘 렌더링 헬퍼
+  const renderWeatherIcon = (weatherMain: string, size: "sm" | "md" = "sm") => {
+    const iconClass = size === "sm" ? "h-5 w-5" : "h-8 w-8";
+    switch (weatherMain.toLowerCase()) {
+      case 'clear':
+        return <Sun className={`${iconClass} text-warning`} />;
+      case 'clouds':
+        return <Cloud className={`${iconClass} text-muted-foreground`} />;
+      case 'rain':
+      case 'drizzle':
+        return <CloudRain className={`${iconClass} text-primary`} />;
+      case 'snow':
+        return <CloudSnow className={`${iconClass} text-primary/70`} />;
+      default:
+        return <Cloud className={`${iconClass} text-muted-foreground`} />;
+    }
+  };
+
+  // 컴팩트 모드 렌더링
+  if (isCompact) {
     return (
-    <div className="h-full bg-background rounded-lg border p-4">
+      <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="flex items-center justify-between mb-3">
         <div className="flex-1">
-          <h3 className="text-lg font-semibold text-foreground mb-1">🌤️ {element?.customTitle || "날씨"}</h3>
+          <h3 className="text-lg font-semibold text-foreground mb-1">{element?.customTitle || "날씨"}</h3>
           <div className="flex items-center gap-2 mb-1">
             <Popover open={open} onOpenChange={setOpen}>
               <PopoverTrigger asChild>
@@ -438,22 +558,7 @@ export default function WeatherWidget({
         <div className="bg-muted/80 rounded-lg p-3">
           <div className="flex items-center gap-1.5">
             <div className="flex-shrink-0">
-              {(() => {
+              {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">