리스트 위젯 컴팩트 모드 추가 (세로 1칸 대응)

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,14 +562,64 @@ 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 className="mb-4">
-        <h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
-      </div>
+    <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>
 
-      {/* 테이블 뷰 */}
-      {config.viewMode === "table" && (
+              {/* 현재 데이터 */}
+              <div className="flex-1 truncate rounded bg-muted/50 px-3 py-2 text-sm">
+                {displayColumns.filter((col) => col.visible).slice(0, 4).map((col, colIdx) => (
+                  <span key={col.id} className={colIdx === 0 ? "font-medium" : "text-muted-foreground"}>
+                    {String(data.rows[currentPage - 1]?.[col.dataKey || col.field] ?? "").substring(0, 25)}
+                    {colIdx < Math.min(displayColumns.filter((c) => c.visible).length, 4) - 1 && " | "}
+                  </span>
+                ))}
+              </div>
+
+              {/* 다음 버튼 */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 shrink-0 p-0"
+                onClick={() => setCurrentPage((p) => Math.min(data.rows.length, p + 1))}
+                disabled={currentPage === data.rows.length}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <div className="text-center text-sm text-muted-foreground">데이터 없음</div>
+          )}
+
+          {/* 현재 위치 표시 (작게) */}
+          {data && data.rows.length > 0 && (
+            <div className="mt-1 text-center text-[10px] text-muted-foreground">
+              {currentPage} / {data.rows.length}
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          {/* 제목 - 항상 표시 */}
+          <div className="mb-4">
+            <h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
+          </div>
+
+          {/* 테이블 뷰 */}
+          {config.viewMode === "table" && (
         <div className={`flex-1 overflow-auto rounded-lg ${config.compactMode ? "text-xs" : "text-sm"}`}>
           <Table>
             {config.showHeader && (
@@ -642,36 +713,38 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
         </div>
       )}
 
-      {/* 페이지네이션 */}
-      {config.enablePagination && totalPages > 1 && (
-        <div className="mt-4 flex items-center justify-between text-sm">
-          <div className="text-foreground">
-            {startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
-          </div>
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              disabled={currentPage === 1}
-            >
-              이전
-            </Button>
-            <div className="flex items-center gap-1 px-2">
-              <span className="text-foreground">{currentPage}</span>
-              <span className="text-muted-foreground">/</span>
-              <span className="text-muted-foreground">{totalPages}</span>
+          {/* 페이지네이션 */}
+          {config.enablePagination && totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-between text-sm">
+              <div className="text-foreground">
+                {startIdx + 1}-{Math.min(endIdx, data.rows.length)} / {data.rows.length}개
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                  disabled={currentPage === 1}
+                >
+                  이전
+                </Button>
+                <div className="flex items-center gap-1 px-2">
+                  <span className="text-foreground">{currentPage}</span>
+                  <span className="text-muted-foreground">/</span>
+                  <span className="text-muted-foreground">{totalPages}</span>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={currentPage === totalPages}
+                >
+                  다음
+                </Button>
+              </div>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-              disabled={currentPage === totalPages}
-            >
-              다음
-            </Button>
-          </div>
-        </div>
+          )}
+        </>
       )}
 
       {/* 행 상세 팝업 */}