Merge pull request 'feature/screen-management' (#147) from feature/screen-management into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/147

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -52,9 +52,8 @@ export default function ScreenViewPage() {
     modalDescription?: string;
   }>({});
 
-  // 자동 스케일 조정 (사용자 화면 크기에 맞춤)
-  const [scale, setScale] = useState(1);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
 
   useEffect(() => {
     const initComponents = async () => {
@@ -140,32 +139,37 @@ export default function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 자동 스케일 조정 useEffect (항상 화면에 꽉 차게)
+  // 캔버스 비율 조정 (사용자 화면에 맞게 자동 스케일)
   useEffect(() => {
     const updateScale = () => {
       if (containerRef.current && layout) {
-        const screenWidth = layout?.screenResolution?.width || 1200;
+        const designWidth = layout?.screenResolution?.width || 1200;
+        const designHeight = layout?.screenResolution?.height || 800;
+
         const containerWidth = containerRef.current.offsetWidth;
-        const availableWidth = containerWidth - 32; // 좌우 패딩 16px * 2
+        const containerHeight = containerRef.current.offsetHeight;
 
-        // 항상 화면에 맞춰서 스케일 조정 (늘리거나 줄임)
+        // 가로/세로 비율 중 작은 것을 선택 (화면에 맞게)
-        const newScale = availableWidth / screenWidth;
+        const scaleX = containerWidth / designWidth;
+        const scaleY = containerHeight / designHeight;
+        const newScale = Math.min(scaleX, scaleY);
 
-        console.log("📏 스케일 계산 (화면 꽉 차게):", {
+        console.log("📏 캔버스 스케일 계산:", {
-          screenWidth,
+          designWidth,
+          designHeight,
           containerWidth,
-          availableWidth,
+          containerHeight,
-          scale: newScale,
+          scaleX,
+          scaleY,
+          finalScale: newScale,
         });
 
         setScale(newScale);
       }
     };
 
-    // 초기 측정 (DOM이 완전히 렌더링된 후)
+    // 초기 측정
-    const timer = setTimeout(() => {
+    const timer = setTimeout(updateScale, 100);
-      updateScale();
-    }, 100);
 
     window.addEventListener("resize", updateScale);
     return () => {
@@ -207,17 +211,16 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div ref={containerRef} className="bg-background flex h-full w-full flex-col overflow-hidden">
+    <div ref={containerRef} className="bg-background flex h-full w-full items-start justify-start overflow-hidden">
       {/* 절대 위치 기반 렌더링 */}
       {layout && layout.components.length > 0 ? (
         <div
-          className="bg-background relative flex-1"
+          className="bg-background relative origin-top-left"
           style={{
-            width: screenWidth,
+            width: layout?.screenResolution?.width || 1200,
-            height: "100%",
+            height: layout?.screenResolution?.height || 800,
             transform: `scale(${scale})`,
             transformOrigin: "top left",
-            overflow: "hidden",
             display: "flex",
             flexDirection: "column",
           }}

frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
 import { tableTypeApi } from "@/lib/api/screen";
@@ -37,7 +38,7 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
 
   // 🆕 데이터 소스 타입 (기본값: context-data)
   const [dataSourceType, setDataSourceType] = useState<"context-data" | "table-all">(
-    (data as any).dataSourceType || "context-data"
+    (data as any).dataSourceType || "context-data",
   );
 
   // 테이블 선택 관련 상태
@@ -281,9 +282,7 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
                     <Table className="h-4 w-4" />
                     <div className="flex flex-col">
                       <span className="font-medium">테이블 전체 데이터</span>
-                        <span className="text-muted-foreground text-xs">
+                      <span className="text-muted-foreground text-xs">선택한 테이블의 모든 행 조회 (페이징 무관)</span>
-                          선택한 테이블의 모든 행 조회 (페이징 무관)
-                        </span>
                     </div>
                   </div>
                 </SelectItem>
@@ -294,16 +293,16 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
             <div className="mt-2 rounded bg-blue-50 p-3 text-xs text-blue-700">
               {dataSourceType === "context-data" ? (
                 <>
-                    <p className="font-medium mb-1">💡 컨텍스트 데이터 모드</p>
+                  <p className="mb-1 font-medium">💡 컨텍스트 데이터 모드</p>
                   <p>버튼 실행 시 전달된 데이터(폼 데이터, 테이블 선택 항목 등)를 사용합니다.</p>
                   <p className="mt-1 text-blue-600">• 폼 데이터: 1개 레코드</p>
                   <p className="text-blue-600">• 테이블 선택: N개 레코드</p>
                 </>
               ) : (
                 <>
-                    <p className="font-medium mb-1">📊 테이블 전체 데이터 모드</p>
+                  <p className="mb-1 font-medium">📊 테이블 전체 데이터 모드</p>
                   <p>선택한 테이블의 **모든 행**을 직접 조회합니다.</p>
-                    <p className="mt-1 text-orange-600 font-medium">⚠️ 대량 데이터 시 성능 주의</p>
+                  <p className="mt-1 font-medium text-orange-600">⚠️ 대량 데이터 시 성능 주의</p>
                 </>
               )}
             </div>
@@ -331,7 +330,6 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
           <div className="rounded border p-4 text-center text-xs text-gray-400">필드 정보가 없습니다</div>
         )}
       </div>
-
     </div>
   );
 }

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -334,7 +334,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);
       
       return (
-        <div className="h-full w-full">
+        <div className="w-full">
           <FlowWidget component={flowComponent as any} />
         </div>
       );

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}
+        ref={
-        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} w-full max-w-full ${
+          component.type === "component" && (component as any).componentType === "flow-widget" ? contentRef : undefined
-          component.componentConfig?.type === "table-list" ? "overflow-hidden" : "overflow-visible"
+        }
-        }`}
+        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} w-full max-w-full overflow-visible`}
       >
         <DynamicComponentRenderer
           component={component}

frontend/components/screen/config-panels/FlowVisibilityConfigPanel.tsx

@@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input";
 import { Workflow, Info, CheckCircle, XCircle, Loader2, ArrowRight, ArrowDown } from "lucide-react";
 import { ComponentData } from "@/types/screen";
 import { FlowVisibilityConfig } from "@/types/control-management";
-import { getFlowById } from "@/lib/api/flow";
+import { getFlowById, getFlowSteps } from "@/lib/api/flow";
 import type { FlowDefinition, FlowStep } from "@/types/flow";
 import { toast } from "sonner";
 
@@ -40,8 +40,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
   const flowWidgets = useMemo(() => {
     return allComponents.filter((comp) => {
       const isFlowWidget =
-        comp.type === "flow" ||
+        comp.type === "flow" || (comp.type === "component" && (comp as any).componentConfig?.type === "flow-widget");
-        (comp.type === "component" && (comp as any).componentConfig?.type === "flow-widget");
       return isFlowWidget;
     });
   }, [allComponents]);
@@ -49,23 +48,23 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
   // State
   const [enabled, setEnabled] = useState(currentConfig?.enabled || false);
   const [selectedFlowComponentId, setSelectedFlowComponentId] = useState<string | null>(
-    currentConfig?.targetFlowComponentId || null
+    currentConfig?.targetFlowComponentId || null,
   );
   const [mode, setMode] = useState<"whitelist" | "blacklist" | "all">(currentConfig?.mode || "whitelist");
   const [visibleSteps, setVisibleSteps] = useState<number[]>(currentConfig?.visibleSteps || []);
   const [hiddenSteps, setHiddenSteps] = useState<number[]>(currentConfig?.hiddenSteps || []);
   const [layoutBehavior, setLayoutBehavior] = useState<"preserve-position" | "auto-compact">(
-    currentConfig?.layoutBehavior || "auto-compact"
+    currentConfig?.layoutBehavior || "auto-compact",
   );
 
   // 🆕 그룹 설정 (auto-compact 모드에서만 사용)
   const [groupId, setGroupId] = useState<string>(currentConfig?.groupId || `group-${Date.now()}`);
   const [groupDirection, setGroupDirection] = useState<"horizontal" | "vertical">(
-    currentConfig?.groupDirection || "horizontal"
+    currentConfig?.groupDirection || "horizontal",
   );
   const [groupGap, setGroupGap] = useState<number>(currentConfig?.groupGap ?? 8);
   const [groupAlign, setGroupAlign] = useState<"start" | "center" | "end" | "space-between" | "space-around">(
-    currentConfig?.groupAlign || "start"
+    currentConfig?.groupAlign || "start",
   );
 
   // 선택된 플로우의 스텝 목록
@@ -127,13 +126,12 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
         setFlowInfo(flowResponse.data);
 
         // 스텝 목록 조회
-        const stepsResponse = await fetch(`/api/flow/definitions/${flowId}/steps`);
+        const stepsResponse = await getFlowSteps(flowId);
-        if (!stepsResponse.ok) {
+        if (!stepsResponse.success) {
           throw new Error("스텝 목록을 불러올 수 없습니다");
         }
-        const stepsData = await stepsResponse.json();
+        if (stepsResponse.data) {
-        if (stepsData.success && stepsData.data) {
+          const sortedSteps = stepsResponse.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
-          const sortedSteps = stepsData.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
           setFlowSteps(sortedSteps);
         }
       } catch (error: any) {
@@ -346,12 +344,10 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                     </div>
 
                     {/* 스텝 체크박스 목록 */}
-                    <div className="space-y-2 rounded-lg border bg-muted/30 p-3">
+                    <div className="bg-muted/30 space-y-2 rounded-lg border p-3">
                       {flowSteps.map((step) => {
                         const isChecked =
-                          mode === "whitelist"
+                          mode === "whitelist" ? visibleSteps.includes(step.id) : hiddenSteps.includes(step.id);
-                            ? visibleSteps.includes(step.id)
-                            : hiddenSteps.includes(step.id);
 
                         return (
                           <div key={step.id} className="flex items-center gap-2">
@@ -366,7 +362,9 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                               </Badge>
                               <span>{step.stepName}</span>
                               {isChecked && (
-                                <CheckCircle className={`ml-auto h-4 w-4 ${mode === "whitelist" ? "text-green-500" : "text-red-500"}`} />
+                                <CheckCircle
+                                  className={`ml-auto h-4 w-4 ${mode === "whitelist" ? "text-green-500" : "text-red-500"}`}
+                                />
                               )}
                             </Label>
                           </div>
@@ -403,14 +401,12 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
 
                 {/* 🆕 그룹 설정 (auto-compact 모드일 때만 표시) */}
                 {layoutBehavior === "auto-compact" && (
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 space-y-4">
+                  <div className="space-y-4 rounded-lg border border-blue-200 bg-blue-50 p-4">
                     <div className="flex items-center gap-2">
                       <Badge variant="secondary" className="text-xs">
                         그룹 설정
                       </Badge>
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-muted-foreground text-xs">같은 그룹 ID를 가진 버튼들이 자동으로 정렬됩니다</p>
-                        같은 그룹 ID를 가진 버튼들이 자동으로 정렬됩니다
-                      </p>
                     </div>
 
                     {/* 그룹 ID */}
@@ -425,7 +421,7 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
                         placeholder="group-1"
                         className="h-8 text-xs sm:h-9 sm:text-sm"
                       />
-                      <p className="text-[10px] text-muted-foreground">
+                      <p className="text-muted-foreground text-[10px]">
                         같은 그룹 ID를 가진 버튼들이 하나의 그룹으로 묶입니다
                       </p>
                     </div>
@@ -577,4 +573,3 @@ export const FlowVisibilityConfigPanel: React.FC<FlowVisibilityConfigPanelProps>
     </Card>
   );
 };
-

frontend/components/screen/widgets/FlowWidget.tsx

@@ -5,10 +5,18 @@ import { FlowComponent } from "@/types/screen-management";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { AlertCircle, Loader2, ChevronUp, History } from "lucide-react";
-import { getFlowById, getAllStepCounts, getStepDataList, getFlowAuditLogs } from "@/lib/api/flow";
+import {
+  getFlowById,
+  getAllStepCounts,
+  getStepDataList,
+  getFlowAuditLogs,
+  getFlowSteps,
+  getFlowConnections,
+} from "@/lib/api/flow";
 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,
@@ -63,7 +71,7 @@ export function FlowWidget({
 
   // 🆕 스텝 데이터 페이지네이션 상태
   const [stepDataPage, setStepDataPage] = useState(1);
-  const [stepDataPageSize] = useState(20);
+  const [stepDataPageSize, setStepDataPageSize] = useState(10);
 
   // 오딧 로그 상태
   const [auditLogs, setAuditLogs] = useState<FlowAuditLog[]>([]);
@@ -161,22 +169,18 @@ export function FlowWidget({
         setFlowData(flowResponse.data);
 
         // 스텝 목록 조회
-        const stepsResponse = await fetch(`/api/flow/definitions/${flowId}/steps`);
+        const stepsResponse = await getFlowSteps(flowId);
-        if (!stepsResponse.ok) {
+        if (!stepsResponse.success) {
           throw new Error("스텝 목록을 불러올 수 없습니다");
         }
-        const stepsData = await stepsResponse.json();
+        if (stepsResponse.data) {
-        if (stepsData.success && stepsData.data) {
+          const sortedSteps = stepsResponse.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
-          const sortedSteps = stepsData.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
           setSteps(sortedSteps);
 
           // 연결 정보 조회
-          const connectionsResponse = await fetch(`/api/flow/connections/${flowId}`);
+          const connectionsResponse = await getFlowConnections(flowId);
-          if (connectionsResponse.ok) {
+          if (connectionsResponse.success && connectionsResponse.data) {
-            const connectionsData = await connectionsResponse.json();
+            setConnections(connectionsResponse.data);
-            if (connectionsData.success && connectionsData.data) {
-              setConnections(connectionsData.data);
-            }
           }
 
           // 스텝별 데이터 건수 조회
@@ -385,7 +389,7 @@ export function FlowWidget({
       : "flex flex-col items-center gap-4";
 
   return (
-    <div className="@container flex h-full w-full flex-col p-2 sm:p-4 lg:p-6">
+    <div className="@container flex 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">
@@ -647,8 +651,8 @@ export function FlowWidget({
 
       {/* 선택된 스텝의 데이터 리스트 */}
       {selectedStepId !== null && (
-        <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-muted/30 mt-4 flex w-full 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}
@@ -661,15 +665,14 @@ export function FlowWidget({
             </p>
           </div>
 
-          {/* 데이터 영역 - 스크롤 가능 */}
+          {/* 데이터 영역 - 고정 높이 + 스크롤 */}
-          <div className="min-h-0 flex-1 overflow-auto">
           {stepDataLoading ? (
-              <div className="flex h-full items-center justify-center py-12">
+            <div className="flex h-64 items-center justify-center">
               <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-full flex-col items-center justify-center py-12">
+            <div className="flex h-64 flex-col items-center justify-center">
               <svg
                 className="text-muted-foreground/50 mb-3 h-12 w-12"
                 fill="none"
@@ -687,8 +690,9 @@ export function FlowWidget({
             </div>
           ) : (
             <>
-                {/* 모바일: 카드 뷰 */}
+              {/* 모바일: 카드 뷰 - 고정 높이 + 스크롤 */}
-                <div className="space-y-2 p-3 @sm:hidden">
+              <div className="overflow-y-auto @sm:hidden" style={{ height: "450px" }}>
+                <div className="space-y-2 p-3">
                   {paginatedStepData.map((row, pageIndex) => {
                     const actualIndex = (stepDataPage - 1) * stepDataPageSize + pageIndex;
                     return (
@@ -725,9 +729,10 @@ export function FlowWidget({
                     );
                   })}
                 </div>
+              </div>
 
-                {/* 데스크톱: 테이블 뷰 */}
+              {/* 데스크톱: 테이블 뷰 - 고정 높이 + 스크롤 */}
-                <div className="hidden @sm:block">
+              <div className="hidden overflow-auto @sm:block" style={{ height: "450px" }}>
                 <Table>
                   <TableHeader>
                     <TableRow className="bg-muted/50 hover:bg-muted/50">
@@ -782,15 +787,40 @@ export function FlowWidget({
               </div>
             </>
           )}
-          </div>
 
-          {/* 페이지네이션 푸터 */}
+          {/* 페이지네이션 - 항상 하단에 고정 */}
-          {!stepDataLoading && stepData.length > 0 && totalStepDataPages > 1 && (
+          {!stepDataLoading && stepData.length > 0 && (
             <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>
@@ -851,6 +881,7 @@ export function FlowWidget({
                       </PaginationItem>
                     </PaginationContent>
                   </Pagination>
+                )}
               </div>
             </div>
           )}

frontend/lib/api/flow.ts

@@ -19,7 +19,33 @@ import {
   ApiResponse,
 } from "@/types/flow";
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || "/api";
+// API URL 동적 설정
+const getApiBaseUrl = (): string => {
+  // 1. 환경변수가 있으면 우선 사용
+  if (process.env.NEXT_PUBLIC_API_URL) {
+    return process.env.NEXT_PUBLIC_API_URL;
+  }
+
+  // 2. 클라이언트 사이드에서 동적 설정
+  if (typeof window !== "undefined") {
+    const currentHost = window.location.hostname;
+
+    // 프로덕션 환경: v1.vexplor.com → api.vexplor.com
+    if (currentHost === "v1.vexplor.com") {
+      return "https://api.vexplor.com/api";
+    }
+
+    // 로컬 개발환경
+    if (currentHost === "localhost" || currentHost === "127.0.0.1") {
+      return "http://localhost:8080/api";
+    }
+  }
+
+  // 3. 기본값
+  return "/api";
+};
+
+const API_BASE = getApiBaseUrl();
 
 // 토큰 가져오기
 function getAuthToken(): string | null {