From b30e3480d4a62818849f76c6b9d370c00ac2ad66 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 21 Oct 2025 11:36:25 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dashboard/DashboardViewer.tsx  | 152 ++++++++++++++----
 1 file changed, 118 insertions(+), 34 deletions(-)

diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 5fd3dcfd..3172d2ad 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -168,6 +168,18 @@ export function DashboardViewer({
 }: DashboardViewerProps) {
   const [elementData, setElementData] = useState<Record<string, QueryResult>>({});
   const [loadingElements, setLoadingElements] = useState<Set<string>>(new Set());
+  const [isMobile, setIsMobile] = useState(false);
+
+  // 화면 크기 감지
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 1024); // 1024px (lg) 미만은 모바일/태블릿
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
 
   // 캔버스 설정 계산
   const canvasConfig = useMemo(() => {
@@ -282,32 +294,64 @@ export function DashboardViewer({
     );
   }
 
+  // 모바일에서 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래)
+  const sortedElements = useMemo(() => {
+    if (!isMobile) return elements;
+
+    return [...elements].sort((a, b) => {
+      // Y 좌표 차이가 50px 이상이면 Y 우선 (같은 행으로 간주 안함)
+      const yDiff = a.position.y - b.position.y;
+      if (Math.abs(yDiff) > 50) {
+        return yDiff;
+      }
+      // 같은 행이면 X 좌표로 정렬
+      return a.position.x - b.position.x;
+    });
+  }, [elements, isMobile]);
+
   return (
     <DashboardProvider>
-      {/* 스크롤 가능한 컨테이너 */}
-      <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
-        {/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}
-        <div
-          className="relative rounded-lg"
-          style={{
-            width: `${canvasConfig.width}px`,
-            minHeight: `${canvasConfig.height}px`,
-            height: `${canvasHeight}px`,
-            backgroundColor: backgroundColor,
-          }}
-        >
-          {/* 대시보드 요소들 */}
-          {elements.map((element) => (
-            <ViewerElement
-              key={element.id}
-              element={element}
-              data={elementData[element.id]}
-              isLoading={loadingElements.has(element.id)}
-              onRefresh={() => loadElementData(element)}
-            />
-          ))}
+      {isMobile ? (
+        // 모바일/태블릿: 세로 스택 레이아웃
+        <div className="min-h-screen bg-gray-100 p-4" style={{ backgroundColor }}>
+          <div className="mx-auto max-w-3xl space-y-4">
+            {sortedElements.map((element) => (
+              <ViewerElement
+                key={element.id}
+                element={element}
+                data={elementData[element.id]}
+                isLoading={loadingElements.has(element.id)}
+                onRefresh={() => loadElementData(element)}
+                isMobile={true}
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      ) : (
+        // 데스크톱: 기존 고정 캔버스 레이아웃
+        <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
+          <div
+            className="relative rounded-lg"
+            style={{
+              width: `${canvasConfig.width}px`,
+              minHeight: `${canvasConfig.height}px`,
+              height: `${canvasHeight}px`,
+              backgroundColor: backgroundColor,
+            }}
+          >
+            {sortedElements.map((element) => (
+              <ViewerElement
+                key={element.id}
+                element={element}
+                data={elementData[element.id]}
+                isLoading={loadingElements.has(element.id)}
+                onRefresh={() => loadElementData(element)}
+                isMobile={false}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </DashboardProvider>
   );
 }
@@ -317,14 +361,61 @@ interface ViewerElementProps {
   data?: QueryResult;
   isLoading: boolean;
   onRefresh: () => void;
+  isMobile: boolean;
 }
 
 /**
  * 개별 뷰어 요소 컴포넌트
  */
-function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementProps) {
+function ViewerElement({ element, data, isLoading, onRefresh, isMobile }: ViewerElementProps) {
   const [isHovered, setIsHovered] = useState(false);
 
+  if (isMobile) {
+    // 모바일/태블릿: 세로 스택 카드 스타일
+    return (
+      <div
+        className="relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
+        style={{ minHeight: "300px" }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {element.showHeader !== false && (
+          <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
+            <h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
+            <button
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="text-gray-400 hover:text-gray-600 disabled:opacity-50"
+              title="새로고침"
+            >
+              {isLoading ? (
+                <div className="h-4 w-4 animate-spin rounded-full border border-gray-400 border-t-transparent" />
+              ) : (
+                "🔄"
+              )}
+            </button>
+          </div>
+        )}
+        <div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
+          {element.type === "chart" ? (
+            <ChartRenderer element={element} data={data} width={undefined} height={250} />
+          ) : (
+            renderWidget(element)
+          )}
+        </div>
+        {isLoading && (
+          <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-white">
+            <div className="text-center">
+              <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+              <div className="text-sm text-gray-600">업데이트 중...</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // 데스크톱: 기존 absolute positioning
   return (
     <div
       className="absolute overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm"
@@ -337,16 +428,13 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* 헤더 (showHeader가 false가 아닐 때만 표시) */}
       {element.showHeader !== false && (
         <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
           <h3 className="text-sm font-semibold text-gray-800">{element.customTitle || element.title}</h3>
-
-          {/* 새로고침 버튼 (항상 렌더링하되 opacity로 제어) */}
           <button
             onClick={onRefresh}
             disabled={isLoading}
-            className={`hover:text-muted-foreground text-gray-400 transition-opacity disabled:opacity-50 ${
+            className={`text-gray-400 transition-opacity hover:text-gray-600 disabled:opacity-50 ${
               isHovered ? "opacity-100" : "opacity-0"
             }`}
             title="새로고침"
@@ -359,8 +447,6 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
           </button>
         </div>
       )}
-
-      {/* 내용 */}
       <div className={element.showHeader !== false ? "h-[calc(100%-57px)]" : "h-full"}>
         {element.type === "chart" ? (
           <ChartRenderer element={element} data={data} width={element.size.width} height={element.size.height - 57} />
@@ -368,13 +454,11 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
           renderWidget(element)
         )}
       </div>
-
-      {/* 로딩 오버레이 */}
       {isLoading && (
         <div className="bg-opacity-75 absolute inset-0 flex items-center justify-center bg-white">
           <div className="text-center">
-            <div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
-            <div className="text-muted-foreground text-sm">업데이트 중...</div>
+            <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+            <div className="text-sm text-gray-600">업데이트 중...</div>
           </div>
         </div>
       )}
-- 
2.43.0


From f088a2d995ae27225bb5b25cc2ea8c2a5feb5b93 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 21 Oct 2025 13:10:03 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=B7=B0=EC=96=B4=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dashboard/DashboardViewer.tsx  | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 3172d2ad..5438b0c0 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -161,7 +161,6 @@ interface DashboardViewerProps {
  */
 export function DashboardViewer({
   elements,
-  dashboardId,
   refreshInterval,
   backgroundColor = "#f9fafb",
   resolution = "fhd",
@@ -281,19 +280,6 @@ export function DashboardViewer({
     return () => clearInterval(interval);
   }, [refreshInterval, loadAllData]);
 
-  // 요소가 없는 경우
-  if (elements.length === 0) {
-    return (
-      <div className="flex h-full items-center justify-center bg-gray-50">
-        <div className="text-center">
-          <div className="mb-4 text-6xl">📊</div>
-          <div className="mb-2 text-xl font-medium text-gray-700">표시할 요소가 없습니다</div>
-          <div className="text-sm text-gray-500">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
-        </div>
-      </div>
-    );
-  }
-
   // 모바일에서 요소를 자연스러운 읽기 순서로 정렬 (왼쪽→오른쪽, 위→아래)
   const sortedElements = useMemo(() => {
     if (!isMobile) return elements;
@@ -309,6 +295,19 @@ export function DashboardViewer({
     });
   }, [elements, isMobile]);
 
+  // 요소가 없는 경우
+  if (elements.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="mb-4 text-6xl">📊</div>
+          <div className="mb-2 text-xl font-medium text-gray-700">표시할 요소가 없습니다</div>
+          <div className="text-sm text-gray-500">대시보드 편집기에서 차트나 위젯을 추가해보세요</div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <DashboardProvider>
       {isMobile ? (
-- 
2.43.0