4 changed files with 186 additions and 217 deletions
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@ -52,8 +52,9 @@ export default function ScreenViewPage() {
    modalDescription?: string;
  }>({});

-  const containerRef = React.useRef<HTMLDivElement>(null);
+  // 자동 스케일 조정 (사용자 화면 크기에 맞춤)
  const [scale, setScale] = useState(1);
+  const containerRef = React.useRef<HTMLDivElement>(null);

  useEffect(() => {
    const initComponents = async () => {
@ -139,37 +140,32 @@ export default function ScreenViewPage() {
    }
  }, [screenId]);

-  // 캔버스 비율 조정 (사용자 화면에 맞게 자동 스케일)
+  // 자동 스케일 조정 useEffect (항상 화면에 꽉 차게)
  useEffect(() => {
    const updateScale = () => {
      if (containerRef.current && layout) {
-        const designWidth = layout?.screenResolution?.width || 1200;
-        const designHeight = layout?.screenResolution?.height || 800;
-
+        const screenWidth = layout?.screenResolution?.width || 1200;
        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
+        const availableWidth = containerWidth - 32; // 좌우 패딩 16px * 2

-        // 가로/세로 비율 중 작은 것을 선택 (화면에 맞게)
-        const scaleX = containerWidth / designWidth;
-        const scaleY = containerHeight / designHeight;
-        const newScale = Math.min(scaleX, scaleY);
+        // 항상 화면에 맞춰서 스케일 조정 (늘리거나 줄임)
+        const newScale = availableWidth / screenWidth;

-        console.log("📏 캔버스 스케일 계산:", {
-          designWidth,
-          designHeight,
+        console.log("📏 스케일 계산 (화면 꽉 차게):", {
+          screenWidth,
          containerWidth,
-          containerHeight,
-          scaleX,
-          scaleY,
-          finalScale: newScale,
+          availableWidth,
+          scale: newScale,
        });

        setScale(newScale);
      }
    };

-    // 초기 측정
-    const timer = setTimeout(updateScale, 100);
+    // 초기 측정 (DOM이 완전히 렌더링된 후)
+    const timer = setTimeout(() => {
+      updateScale();
+    }, 100);

    window.addEventListener("resize", updateScale);
    return () => {
@ -211,16 +207,17 @@ export default function ScreenViewPage() {
  const screenHeight = layout?.screenResolution?.height || 800;

  return (
-    <div ref={containerRef} className="bg-background flex h-full w-full items-start justify-start overflow-hidden">
+    <div ref={containerRef} className="bg-background flex h-full w-full flex-col overflow-hidden">
      {/* 절대 위치 기반 렌더링 */}
      {layout && layout.components.length > 0 ? (
        <div
-          className="bg-background relative origin-top-left"
+          className="bg-background relative flex-1"
          style={{
-            width: layout?.screenResolution?.width || 1200,
-            height: layout?.screenResolution?.height || 800,
+            width: screenWidth,
+            height: "100%",
            transform: `scale(${scale})`,
            transformOrigin: "top left",
+            overflow: "hidden",
            display: "flex",
            flexDirection: "column",
          }}
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@ -334,7 +334,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
      console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);
      
      return (
-        <div className="w-full">
+        <div className="h-full w-full">
          <FlowWidget component={flowComponent as any} />
        </div>
      );
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@ -142,11 +142,11 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                newHeight: finalHeight,
              });
              // size는 별도 속성이므로 직접 업데이트
-              const event = new CustomEvent("updateComponentSize", {
+              const event = new CustomEvent('updateComponentSize', {
                detail: {
                  componentId: component.id,
-                  height: finalHeight,
-                },
+                  height: finalHeight
+                }
              });
              window.dispatchEvent(event);
            }
@ -276,10 +276,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
    >
      {/* 동적 컴포넌트 렌더링 */}
      <div
-        ref={
-          component.type === "component" && (component as any).componentType === "flow-widget" ? contentRef : undefined
-        }
-        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} w-full max-w-full overflow-visible`}
+        ref={component.type === "component" && (component as any).componentType === "flow-widget" ? contentRef : undefined}
+        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} w-full max-w-full ${
+          component.componentConfig?.type === "table-list" ? "overflow-hidden" : "overflow-visible"
+        }`}
      >
        <DynamicComponentRenderer
          component={component}
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@ -9,7 +9,6 @@ import { getFlowById, getAllStepCounts, getStepDataList, getFlowAuditLogs } from
 import type { FlowDefinition, FlowStep, FlowAuditLog } from "@/types/flow";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { toast } from "sonner";
 import {
  Dialog,
@ -64,7 +63,7 @@ export function FlowWidget({

  // 🆕 스텝 데이터 페이지네이션 상태
  const [stepDataPage, setStepDataPage] = useState(1);
-  const [stepDataPageSize, setStepDataPageSize] = useState(10);
+  const [stepDataPageSize] = useState(20);

  // 오딧 로그 상태
  const [auditLogs, setAuditLogs] = useState<FlowAuditLog[]>([]);
@ -386,7 +385,7 @@ export function FlowWidget({
      : "flex flex-col items-center gap-4";

  return (
-    <div className="@container flex w-full flex-col p-2 sm:p-4 lg:p-6">
+    <div className="@container flex h-full w-full flex-col p-2 sm:p-4 lg:p-6">
      {/* 플로우 제목 */}
      <div className="mb-3 flex-shrink-0 sm:mb-4">
        <div className="flex items-center justify-center gap-2">
@ -648,8 +647,8 @@ export function FlowWidget({

      {/* 선택된 스텝의 데이터 리스트 */}
      {selectedStepId !== null && (
-        <div className="bg-muted/30 mt-4 flex w-full flex-col rounded-lg border sm:mt-6 lg:mt-8">
-          {/* 헤더 - 자동 높이 */}
+        <div className="bg-muted/30 mt-4 flex min-h-0 w-full flex-1 flex-col rounded-lg border sm:mt-6 lg:mt-8">
+          {/* 헤더 */}
          <div className="bg-background flex-shrink-0 border-b px-4 py-3 sm:px-6 sm:py-4">
            <h4 className="text-foreground text-base font-semibold sm:text-lg">
              {steps.find((s) => s.id === selectedStepId)?.stepName}
@ -662,14 +661,15 @@ export function FlowWidget({
            </p>
          </div>

-          {/* 데이터 영역 - 고정 높이 + 스크롤 */}
+          {/* 데이터 영역 - 스크롤 가능 */}
+          <div className="min-h-0 flex-1 overflow-auto">
            {stepDataLoading ? (
-            <div className="flex h-64 items-center justify-center">
+              <div className="flex h-full items-center justify-center py-12">
                <Loader2 className="text-primary h-6 w-6 animate-spin sm:h-8 sm:w-8" />
                <span className="text-muted-foreground ml-2 text-sm">데이터 로딩 중...</span>
              </div>
            ) : stepData.length === 0 ? (
-            <div className="flex h-64 flex-col items-center justify-center">
+              <div className="flex h-full flex-col items-center justify-center py-12">
                <svg
                  className="text-muted-foreground/50 mb-3 h-12 w-12"
                  fill="none"
@ -687,9 +687,8 @@ export function FlowWidget({
              </div>
            ) : (
              <>
-              {/* 모바일: 카드 뷰 - 고정 높이 + 스크롤 */}
-              <div className="overflow-y-auto @sm:hidden" style={{ height: "450px" }}>
-                <div className="space-y-2 p-3">
+                {/* 모바일: 카드 뷰 */}
+                <div className="space-y-2 p-3 @sm:hidden">
                  {paginatedStepData.map((row, pageIndex) => {
                    const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
                    return (
@ -726,10 +725,9 @@ export function FlowWidget({
                    );
                  })}
                </div>
-              </div>

-              {/* 데스크톱: 테이블 뷰 - 고정 높이 + 스크롤 */}
-              <div className="hidden overflow-auto @sm:block" style={{ height: "450px" }}>
+                {/* 데스크톱: 테이블 뷰 */}
+                <div className="hidden @sm:block">
                  <Table>
                    <TableHeader>
                      <TableRow className="bg-muted/50 hover:bg-muted/50">
@ -784,40 +782,15 @@ export function FlowWidget({
                </div>
              </>
            )}
+          </div>

-          {/* 페이지네이션 - 항상 하단에 고정 */}
-          {!stepDataLoading && stepData.length > 0 && (
+          {/* 페이지네이션 푸터 */}
+          {!stepDataLoading && stepData.length > 0 && totalStepDataPages > 1 && (
            <div className="bg-background flex-shrink-0 border-t px-4 py-3 sm:px-6">
              <div className="flex flex-col items-center justify-between gap-3 sm:flex-row">
-                {/* 왼쪽: 페이지 정보 + 페이지 크기 선택 */}
-                <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4">
                <div className="text-muted-foreground text-xs sm:text-sm">
                  페이지 {stepDataPage} / {totalStepDataPages} (총 {stepData.length}건)
                </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground text-xs">표시 개수:</span>
-                    <Select
-                      value={stepDataPageSize.toString()}
-                      onValueChange={(value) => {
-                        setStepDataPageSize(Number(value));
-                        setStepDataPage(1); // 페이지 크기 변경 시 첫 페이지로
-                      }}
-                    >
-                      <SelectTrigger className="h-8 w-20 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="10">10개</SelectItem>
-                        <SelectItem value="20">20개</SelectItem>
-                        <SelectItem value="50">50개</SelectItem>
-                        <SelectItem value="100">100개</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                {/* 오른쪽: 페이지네이션 */}
-                {totalStepDataPages > 1 && (
                <Pagination>
                  <PaginationContent>
                    <PaginationItem>
@ -878,7 +851,6 @@ export function FlowWidget({
                    </PaginationItem>
                  </PaginationContent>
                </Pagination>
-                )}
              </div>
            </div>
          )}