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

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

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

@@ -17,6 +17,7 @@ import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
 import { useAuth } from "@/hooks/useAuth"; // 🆕 사용자 정보
+import { useResponsive } from "@/lib/hooks/useResponsive"; // 🆕 반응형 감지
 
 export default function ScreenViewPage() {
   const params = useParams();
@@ -25,6 +26,9 @@ export default function ScreenViewPage() {
 
   // 🆕 현재 로그인한 사용자 정보
   const { user, userName, companyCode } = useAuth();
+  
+  // 🆕 모바일 환경 감지
+  const { isMobile } = useResponsive();
 
   const [screen, setScreen] = useState<ScreenDefinition | null>(null);
   const [layout, setLayout] = useState<LayoutData | null>(null);
@@ -59,6 +63,7 @@ export default function ScreenViewPage() {
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
+  const [containerWidth, setContainerWidth] = useState(0);
 
   useEffect(() => {
     const initComponents = async () => {
@@ -142,22 +147,33 @@ export default function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 캔버스 비율 조정 (사용자 화면에 맞게 자동 스케일)
+  // 캔버스 비율 조정 (사용자 화면에 맞게 자동 스케일) - 모바일에서는 비활성화
   useEffect(() => {
+    // 모바일 환경에서는 스케일 조정 비활성화 (반응형만 작동)
+    if (isMobile) {
+      setScale(1);
+      return;
+    }
+
     const updateScale = () => {
       if (containerRef.current && layout) {
         const designWidth = layout?.screenResolution?.width || 1200;
         const designHeight = layout?.screenResolution?.height || 800;
 
+        // containerRef는 이미 패딩이 적용된 영역 내부이므로 offsetWidth는 패딩을 제외한 크기입니다
         const containerWidth = containerRef.current.offsetWidth;
         const containerHeight = containerRef.current.offsetHeight;
 
-        // 가로/세로 비율 중 작은 것을 선택 (화면에 맞게)
+        // 가로/세로 비율 중 작은 것을 선택하여 화면에 맞게 스케일 조정
+        // 하지만 화면이 컨테이너 전체 너비를 차지하도록 하기 위해 가로를 우선시
         const scaleX = containerWidth / designWidth;
         const scaleY = containerHeight / designHeight;
+        // 가로를 우선으로 하되, 세로가 넘치지 않도록 제한
         const newScale = Math.min(scaleX, scaleY);
 
         setScale(newScale);
+        // 컨테이너 너비 업데이트
+        setContainerWidth(containerWidth);
       }
     };
 
@@ -169,7 +185,7 @@ export default function ScreenViewPage() {
       clearTimeout(timer);
       window.removeEventListener("resize", updateScale);
     };
-  }, [layout]);
+  }, [layout, isMobile]);
 
   if (loading) {
     return (
@@ -205,18 +221,16 @@ export default function ScreenViewPage() {
 
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
-      <div ref={containerRef} className="bg-background flex h-full w-full items-start justify-start overflow-hidden">
+      <div ref={containerRef} className="bg-background h-full w-full overflow-hidden">
         {/* 절대 위치 기반 렌더링 */}
         {layout && layout.components.length > 0 ? (
           <div
-            className="bg-background relative origin-top-left"
+            className="bg-background relative origin-top-left h-full flex justify-start items-start"
             style={{
-              width: layout?.screenResolution?.width || 1200,
-              height: layout?.screenResolution?.height || 800,
               transform: `scale(${scale})`,
               transformOrigin: "top left",
-              display: "flex",
+              width: containerWidth > 0 ? `${containerWidth / scale}px` : "100%",
-              flexDirection: "column",
+              minWidth: containerWidth > 0 ? `${containerWidth / scale}px` : "100%",
             }}
           >
             {/* 최상위 컴포넌트들 렌더링 */}

frontend/app/globals.css

@@ -342,4 +342,18 @@ select {
 /* 필요시 특정 컴포넌트에 대한 스타일 오버라이드를 여기에 추가 */
 /* 예: Calendar, Table 등의 미세 조정 */
 
+/* 모바일에서 테이블 레이아웃 고정 (화면 밖으로 넘어가지 않도록) */
+@media (max-width: 639px) {
+  .table-mobile-fixed {
+    table-layout: fixed;
+  }
+}
+
+/* 데스크톱에서 테이블 레이아웃 자동 (기본값이지만 명시적으로 설정) */
+@media (min-width: 640px) {
+  .table-mobile-fixed {
+    table-layout: auto;
+  }
+}
+
 /* ===== End of Global Styles ===== */

frontend/components/dashboard/DashboardViewer.tsx

@@ -542,7 +542,7 @@ export function DashboardViewer({
     <DashboardProvider>
       {/* 데스크톱: 디자이너에서 설정한 위치 그대로 렌더링 (화면에 맞춰 비율 유지) */}
       <div className="hidden min-h-screen bg-muted py-8 lg:block" style={{ backgroundColor }}>
-        <div className="mx-auto px-4" style={{ maxWidth: `${canvasConfig.width}px` }}>
+        <div className="mx-auto px-4" style={{ width: '100%', maxWidth: 'none' }}>
           {/* 다운로드 버튼 */}
           <div className="mb-4 flex justify-end">
             <DropdownMenu>
@@ -700,12 +700,13 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
   // 데스크톱: 디자이너에서 설정한 위치 그대로 absolute positioning
   // 단, 너비는 화면 크기에 따라 비율로 조정
   const widthPercentage = (element.size.width / canvasWidth) * 100;
+  const leftPercentage = (element.position.x / canvasWidth) * 100;
 
   return (
     <div
       className="absolute overflow-hidden rounded-lg border border-border bg-background shadow-sm"
       style={{
-        left: `${(element.position.x / canvasWidth) * 100}%`,
+        left: `${leftPercentage}%`,
         top: element.position.y,
         width: `${widthPercentage}%`,
         height: element.size.height,

frontend/components/layout/AppLayout.tsx

@@ -459,7 +459,9 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         </aside>
 
         {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
-        <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white">{children}</main>
+        <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-hidden bg-white">
+          <div className="h-full w-full p-4">{children}</div>
+        </main>
       </div>
 
       {/* 프로필 수정 모달 */}

frontend/components/screen/RealtimePreview.tsx

@@ -389,14 +389,27 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     finalHeight = actualHeight;
   }
   
+  // 🔍 디버깅: position.x 값 확인
+  const positionX = position?.x || 0;
+  console.log("🔍 RealtimePreview componentStyle 설정:", {
+    componentId: id,
+    positionX,
+    sizeWidth: size?.width,
+    styleWidth: style?.width,
+    willUse100Percent: positionX === 0,
+  });
+
   const componentStyle = {
     position: "absolute" as const,
-    left: position?.x || 0,
+    ...style, // 먼저 적용하고
+    left: positionX,
     top: position?.y || 0,
-    width: size?.width || 200,
+    // 🆕 left가 0이면 부모 너비를 100% 채우도록 수정 (우측 여백 제거)
+    width: positionX === 0 ? "100%" : (size?.width || 200),
     height: finalHeight,
     zIndex: position?.z || 1,
-    ...style,
+    // right 속성 강제 제거
+    right: undefined,
   };
 
   // 선택된 컴포넌트 스타일

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -238,11 +238,15 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    width: getWidth(),
+    // 🆕 left가 0이면 부모 너비를 100% 채우도록 수정 (우측 여백 제거)
+    width: position.x === 0 ? "100%" : getWidth(),
     height: getHeight(), // 모든 컴포넌트 고정 높이로 변경
     zIndex: component.type === "layout" ? 1 : position.z || 2, // 레이아웃은 z-index 1, 다른 컴포넌트는 2 이상
     ...componentStyle,
-    // style.width와 style.height는 이미 getWidth/getHeight에서 처리했으므로 중복 적용됨
+    // style.width가 있어도 position.x === 0이면 100%로 강제
+    ...(position.x === 0 && { width: "100%" }),
+    // right 속성 강제 제거
+    right: undefined,
   };
 
   const handleClick = (e: React.MouseEvent) => {

frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

@@ -91,8 +91,8 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                   key={column.columnName}
                   className={cn(
                     column.columnName === "__checkbox__"
-                      ? "h-12 border-0 px-6 py-3 text-center align-middle"
+                      ? "h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3"
-                      : "h-12 cursor-pointer border-0 px-6 py-3 text-left align-middle font-semibold whitespace-nowrap text-foreground transition-all duration-200 select-none hover:text-foreground",
+                      : "h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle font-semibold whitespace-nowrap text-xs text-foreground transition-all duration-200 select-none hover:text-foreground sm:h-12 sm:px-6 sm:py-3 sm:text-sm",
                     `text-${column.align}`,
                     column.sortable && "hover:bg-primary/10",
                     // 고정 컬럼 스타일
@@ -133,11 +133,11 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                           {columnLabels[column.columnName] || column.displayName || column.columnName}
                         </span>
                         {column.sortable && sortColumn === column.columnName && (
-                          <span className="ml-2 flex h-5 w-5 items-center justify-center rounded-md bg-background/50 shadow-sm">
+                          <span className="ml-1 flex h-4 w-4 items-center justify-center rounded-md bg-background/50 shadow-sm sm:ml-2 sm:h-5 sm:w-5">
                             {sortDirection === "asc" ? (
-                              <ArrowUp className="h-3.5 w-3.5 text-primary" />
+                              <ArrowUp className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
                             ) : (
-                              <ArrowDown className="h-3.5 w-3.5 text-primary" />
+                              <ArrowDown className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
                             )}
                           </span>
                         )}
@@ -177,7 +177,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
               <TableRow
                 key={`row-${index}`}
                 className={cn(
-                  "h-16 cursor-pointer border-b transition-colors bg-background",
+                  "h-14 cursor-pointer border-b transition-colors bg-background sm:h-16",
                   tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
                 )}
                 onClick={() => handleRowClick(row)}
@@ -201,7 +201,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                     <TableCell
                       key={`cell-${column.columnName}`}
                       className={cn(
-                        "h-16 px-6 py-3 align-middle text-sm whitespace-nowrap text-foreground transition-colors",
+                        "h-14 px-3 py-2 align-middle text-xs whitespace-nowrap text-foreground transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
                         `text-${column.align}`,
                         // 고정 컬럼 스타일
                         column.fixed === "left" &&

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -772,45 +772,32 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     return (
       <div
-        style={{
+        className="w-full h-14 flex items-center justify-center relative border-t-2 border-border bg-background px-4 flex-shrink-0 sm:h-[60px] sm:px-6"
-          width: "100%",
-          height: "60px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "relative",
-          borderTop: "2px solid #e5e7eb",
-          backgroundColor: "#ffffff",
-          padding: "0 24px",
-          flexShrink: 0,
-        }}
       >
         {/* 중앙 페이지네이션 컨트롤 */}
         <div
-          style={{
+          className="flex items-center gap-2 sm:gap-4"
-            display: "flex",
-            alignItems: "center",
-            gap: "16px",
-          }}
         >
           <Button
             variant="outline"
             size="sm"
             onClick={() => handlePageChange(1)}
             disabled={currentPage === 1 || loading}
+            className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
           >
-            <ChevronsLeft className="h-4 w-4" />
+            <ChevronsLeft className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
           <Button
             variant="outline"
             size="sm"
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1 || loading}
+            className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
           >
-            <ChevronLeft className="h-4 w-4" />
+            <ChevronLeft className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
 
-          <span className="text-sm font-medium text-foreground min-w-[80px] text-center">
+          <span className="text-xs font-medium text-foreground min-w-[60px] text-center sm:text-sm sm:min-w-[80px]">
             {currentPage} / {totalPages || 1}
           </span>
 
@@ -819,19 +806,21 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             size="sm"
             onClick={() => handlePageChange(currentPage + 1)}
             disabled={currentPage >= totalPages || loading}
+            className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
           >
-            <ChevronRight className="h-4 w-4" />
+            <ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
           <Button
             variant="outline"
             size="sm"
             onClick={() => handlePageChange(totalPages)}
             disabled={currentPage >= totalPages || loading}
+            className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
           >
-            <ChevronsRight className="h-4 w-4" />
+            <ChevronsRight className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
 
-          <span className="text-xs text-muted-foreground ml-4">
+          <span className="text-[10px] text-muted-foreground ml-2 sm:text-xs sm:ml-4">
             전체 {totalItems.toLocaleString()}개
           </span>
         </div>
@@ -842,9 +831,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           size="sm"
           onClick={handleRefresh}
           disabled={loading}
-          style={{ position: "absolute", right: "24px" }}
+          className="absolute right-2 h-8 w-8 p-0 sm:right-6 sm:h-9 sm:w-auto sm:px-3"
         >
-          <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+          <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
         </Button>
       </div>
     );
@@ -884,14 +873,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (
       <div {...domProps}>
         {tableConfig.showHeader && (
-          <div className="px-6 py-4 border-b border-border">
+          <div className="px-4 py-3 border-b border-border sm:px-6 sm:py-4">
-            <h2 className="text-lg font-semibold text-foreground">{tableConfig.title || tableLabel}</h2>
+            <h2 className="text-base font-semibold text-foreground sm:text-lg">{tableConfig.title || tableLabel}</h2>
           </div>
         )}
 
         {tableConfig.filter?.enabled && (
-          <div className="px-6 py-4 border-b border-border">
+          <div className="px-4 py-3 border-b border-border sm:px-6 sm:py-4">
-            <div className="flex items-start gap-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
               <div className="flex-1">
                 <AdvancedSearchFilters
                   filters={activeFilters}
@@ -905,7 +894,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 variant="outline"
                 size="sm"
                 onClick={() => setIsFilterSettingOpen(true)}
-                className="flex-shrink-0 mt-1"
+                className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
               >
                 <Settings className="mr-2 h-4 w-4" />
                 필터 설정
@@ -946,16 +935,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       <div {...domProps}>
         {/* 헤더 */}
         {tableConfig.showHeader && (
-          <div style={{ padding: "16px 24px", borderBottom: "1px solid #e5e7eb", flexShrink: 0 }}>
+          <div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">
-            <h2 style={{ fontSize: "18px", fontWeight: 600, color: "#111827" }}>{tableConfig.title || tableLabel}</h2>
+            <h2 className="text-base font-semibold text-foreground sm:text-lg">{tableConfig.title || tableLabel}</h2>
           </div>
         )}
 
         {/* 필터 */}
         {tableConfig.filter?.enabled && (
-          <div style={{ padding: "16px 24px", borderBottom: "1px solid #e5e7eb", flexShrink: 0 }}>
+          <div className="px-4 py-3 border-b border-border flex-shrink-0 sm:px-6 sm:py-4">
-            <div style={{ display: "flex", alignItems: "flex-start", gap: "16px" }}>
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
-              <div style={{ flex: 1 }}>
+              <div className="flex-1">
                 <AdvancedSearchFilters
                   filters={activeFilters}
                   searchValues={searchValues}
@@ -968,7 +957,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 variant="outline"
                 size="sm"
                 onClick={() => setIsFilterSettingOpen(true)}
-                style={{ flexShrink: 0, marginTop: "4px" }}
+                className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
               >
                 <Settings className="mr-2 h-4 w-4" />
                 필터 설정
@@ -978,33 +967,34 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         )}
 
         {/* 테이블 컨테이너 */}
-        <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex-1 flex flex-col overflow-hidden w-full max-w-full">
           {/* 스크롤 영역 */}
           <div
-            className="w-full h-[500px] overflow-y-scroll overflow-x-auto bg-background"
+            className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"
           >
             {/* 테이블 */}
             <table
+              className="w-full max-w-full table-mobile-fixed"
               style={{
-                width: "100%",
                 borderCollapse: "collapse",
-                tableLayout: "auto",
+                width: "100%",
               }}
             >
               {/* 헤더 (sticky) */}
               <thead
                 className="sticky top-0 z-10 bg-background"
               >
-                <tr className="h-12 border-b border-border">
+                <tr className="h-10 border-b border-border sm:h-12">
                   {visibleColumns.map((column) => (
                     <th
                       key={column.columnName}
                       className={cn(
-                        "h-12 px-6 py-3 text-sm font-semibold text-foreground whitespace-nowrap bg-background",
+                        "h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
                         column.sortable && "cursor-pointer"
                       )}
                       style={{
                         textAlign: column.align || "left",
+                        width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
                       }}
                       onClick={() => column.sortable && handleSort(column.columnName)}
                     >
@@ -1063,7 +1053,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       onDragStart={(e) => handleRowDragStart(e, row, index)}
                       onDragEnd={handleRowDragEnd}
                       className={cn(
-                        "h-16 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer"
+                        "h-14 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer sm:h-16"
                       )}
                       onClick={() => handleRowClick(row)}
                     >
@@ -1075,10 +1065,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           <td
                             key={column.columnName}
                             className={cn(
-                              "h-16 px-6 py-3 text-sm text-foreground whitespace-nowrap overflow-hidden text-ellipsis"
+                              "h-14 px-2 py-2 text-xs text-foreground overflow-hidden text-ellipsis sm:h-16 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap"
                             )}
                             style={{
                               textAlign: column.align || "left",
+                              width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
                             }}
                           >
                             {column.columnName === "__checkbox__"