리스트 위젯 컴팩트 모드 추가 (세로 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>
+          )}
+        </>
       )}
 
       {/* 행 상세 팝업 */}

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,87 +764,139 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   };
 
   return (
-      <div className="flex h-full flex-col bg-card shadow-sm">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between border-b p-4">
-        <div>
-          <h3 className="text-lg font-semibold">
-            {element?.customTitle || "리스트"}
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            {dataSources?.length || 0}개 데이터 소스 • {data?.totalRows || 0}개 행
-            {lastRefreshTime && (
-              <span className="ml-2">
-                • {lastRefreshTime.toLocaleTimeString("ko-KR")}
-              </span>
+      <div ref={containerRef} className="flex h-full flex-col bg-card shadow-sm">
+      {/* 컴팩트 모드 (세로 1칸) - 캐러셀 형태로 한 건씩 표시 */}
+      {isCompactHeight ? (
+        <div className="flex h-full flex-col justify-center p-3">
+          {data && data.rows.length > 0 && displayColumns.length > 0 ? (
+            <div className="flex items-center gap-2">
+              {/* 이전 버튼 */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 shrink-0 p-0"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+
+              {/* 현재 데이터 */}
+              <div className="flex-1 truncate rounded bg-muted/50 px-3 py-2 text-sm">
+                {displayColumns.slice(0, 4).map((field, fieldIdx) => (
+                  <span key={field} className={fieldIdx === 0 ? "font-medium" : "text-muted-foreground"}>
+                    {String(data.rows[currentPage - 1]?.[field] ?? "").substring(0, 25)}
+                    {fieldIdx < Math.min(displayColumns.length, 4) - 1 && " | "}
+                  </span>
+                ))}
+              </div>
+
+              {/* 다음 버튼 */}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 shrink-0 p-0"
+                onClick={() => setCurrentPage((p) => Math.min(data.rows.length, p + 1))}
+                disabled={currentPage === data.rows.length}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <div className="text-center text-sm text-muted-foreground">데이터 없음</div>
+          )}
+
+          {/* 현재 위치 표시 (작게) */}
+          {data && data.rows.length > 0 && (
+            <div className="mt-1 text-center text-[10px] text-muted-foreground">
+              {currentPage} / {data.rows.length}
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          {/* 헤더 */}
+          <div className="flex items-center justify-between border-b p-4">
+            <div>
+              <h3 className="text-lg font-semibold">
+                {element?.customTitle || "리스트"}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                {dataSources?.length || 0}개 데이터 소스 • {data?.totalRows || 0}개 행
+                {lastRefreshTime && (
+                  <span className="ml-2">
+                    • {lastRefreshTime.toLocaleTimeString("ko-KR")}
+                  </span>
+                )}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleManualRefresh}
+                disabled={isLoading}
+                className="h-8 gap-2 text-xs"
+              >
+                <RefreshCw className={`h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
+                새로고침
+              </Button>
+              {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+            </div>
+          </div>
+
+          {/* 컨텐츠 */}
+          <div className="flex-1 overflow-auto p-4">
+            {error ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-destructive">{error}</p>
+              </div>
+            ) : !dataSources || dataSources.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  데이터 소스를 연결해주세요
+                </p>
+              </div>
+            ) : !data || data.rows.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  데이터가 없습니다
+                </p>
+              </div>
+            ) : config.viewMode === "card" ? (
+              renderCards()
+            ) : (
+              renderTable()
             )}
-          </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>
 
-      {/* 컨텐츠 */}
-      <div className="flex-1 overflow-auto p-4">
-        {error ? (
-          <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        ) : !dataSources || dataSources.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-muted-foreground">
-              데이터 소스를 연결해주세요
-            </p>
-          </div>
-        ) : !data || data.rows.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-muted-foreground">
-              데이터가 없습니다
-            </p>
-          </div>
-        ) : config.viewMode === "card" ? (
-          renderCards()
-        ) : (
-          renderTable()
-        )}
-      </div>
-
-      {/* 페이지네이션 */}
-      {config.enablePagination && data && data.rows.length > 0 && totalPages > 1 && (
-        <div className="flex items-center justify-between border-t p-4">
-          <div className="text-sm text-muted-foreground">
-            총 {data.totalRows}개 항목 (페이지 {currentPage}/{totalPages})
-          </div>
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              disabled={currentPage === 1}
-            >
-              이전
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-              disabled={currentPage === totalPages}
-            >
-              다음
-            </Button>
-          </div>
-        </div>
+          {/* 페이지네이션 */}
+          {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>
+          )}
+        </>
       )}
 
       {/* 행 상세 팝업 */}