견적/수주 팝업 폼 레이아웃 및 그리드 UX 개선

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

WebContent/WEB-INF/view/contractMgmt/estimateAndOrderRegistFormPopup.jsp

@@ -38,6 +38,9 @@
  }
 
  /* ===== 팝업 폼 전체 너비 확장 ===== */
+ body, html {
+ 	overflow-x: hidden;
+ }
  section.business_popup_min_width {
  	padding: 0 !important;
  	margin: 0 auto !important;
@@ -45,17 +48,20 @@
  	width: calc(100% - 8px) !important;
  	border: none !important;
  	box-shadow: none !important;
+ 	overflow-x: hidden;
  }
  #EntirePopupFormWrap {
  	width: 100% !important;
  	margin: 5px 0 0 0 !important;
  	padding: 0 5px 10px 5px !important;
  	box-sizing: border-box;
+ 	overflow-x: auto;
  }
 
  /* ===== 품목 그리드 컬럼 리사이즈 ===== */
  #EntirePopupFormWrap > table {
  	width: 100% !important;
+ 	table-layout: fixed;
  }
  #itemListTable {
  	table-layout: fixed;
@@ -137,11 +143,11 @@
 			}
 		});
 
-		var dragging    = false;
+		var dragging        = false;
-		var startX      = 0;
+		var startX          = 0;
-		var startWidthL = 0;
+		var startWidthL     = 0;
-		var startWidthR = 0;
+		var startTableWidth = 0;
-		var $colL, $colR, $resizerEl;
+		var $colL, $resizerEl;
 		var rafId = null;
 
 		$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -153,11 +159,10 @@
 			var colIdx = $resizerEl.parent().index();
 
 			$colL = $cols.eq(colIdx);
-			$colR = $cols.eq(colIdx + 1);
 
-			startWidthL = $colL[0].getBoundingClientRect().width;
+			startWidthL     = $colL[0].getBoundingClientRect().width;
-			startWidthR = $colR[0].getBoundingClientRect().width;
+			startTableWidth = $table[0].getBoundingClientRect().width;
-			startX      = e.clientX;
+			startX          = e.clientX;
 
 			$resizerEl.addClass('is-resizing');
 			$table.addClass('col-resizing');
@@ -169,12 +174,11 @@
 			if (rafId) return;
 			rafId = requestAnimationFrame(function() {
 				rafId = null;
-				var delta    = e.clientX - startX;
+				var delta   = e.clientX - startX;
-				var newLeft  = startWidthL + delta;
+				var newLeft = startWidthL + delta;
-				var newRight = startWidthR - delta;
+				if (newLeft < 40) return;
-				if (newLeft < 40 || newRight < 40) return;
+				$colL.css('width', newLeft + 'px');
-				$colL.css('width', newLeft  + 'px');
+				$table.css('width', (startTableWidth + delta) + 'px');
-				$colR.css('width', newRight + 'px');
 			});
 		});
 
@@ -1704,7 +1708,7 @@
 				</colgroup>
 				<tr>
 					<td>
-						<div style="max-height:400px; overflow-y:auto;">
+						<div style="width:100%; max-height:400px; overflow-y:auto; overflow-x:auto;">
 							<table class="pmsPopuptable" id="itemListTable">
 								<colgroup>
 									<col width="3%" />   <!-- 번호 -->

WebContent/WEB-INF/view/contractMgmt/estimateRegistFormPopup.jsp

@@ -38,19 +38,25 @@
  }
 
  /* ===== 팝업 폼 전체 너비 확장 ===== */
+ body, html {
+ 	overflow-x: hidden;
+ }
  section.business_popup_min_width {
  	padding: 0 !important;
  	margin: 0 auto !important;
  	width: calc(100% - 16px) !important;
+ 	overflow-x: hidden;
  }
  #EntirePopupFormWrap {
  	width: 100% !important;
  	margin: 5px 0 0 0 !important;
+ 	overflow-x: auto;
  }
 
  /* ===== 품목 그리드 컬럼 리사이즈 ===== */
  #EntirePopupFormWrap > table {
  	width: 100% !important;
+ 	table-layout: fixed;
  }
  #itemListTable {
  	table-layout: fixed;
@@ -133,11 +139,11 @@
 			}
 		});
 
-		var dragging    = false;
+		var dragging        = false;
-		var startX      = 0;
+		var startX          = 0;
-		var startWidthL = 0;
+		var startWidthL     = 0;
-		var startWidthR = 0;
+		var startTableWidth = 0;
-		var $colL, $colR, $resizerEl;
+		var $colL, $resizerEl;
 		var rafId = null;
 
 		$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -149,11 +155,10 @@
 			var colIdx = $resizerEl.parent().index();
 
 			$colL = $cols.eq(colIdx);
-			$colR = $cols.eq(colIdx + 1);
 
-			startWidthL = $colL[0].getBoundingClientRect().width;
+			startWidthL     = $colL[0].getBoundingClientRect().width;
-			startWidthR = $colR[0].getBoundingClientRect().width;
+			startTableWidth = $table[0].getBoundingClientRect().width;
-			startX      = e.clientX;
+			startX          = e.clientX;
 
 			$resizerEl.addClass('is-resizing');
 			$table.addClass('col-resizing');
@@ -165,12 +170,11 @@
 			if (rafId) return;
 			rafId = requestAnimationFrame(function() {
 				rafId = null;
-				var delta    = e.clientX - startX;
+				var delta   = e.clientX - startX;
-				var newLeft  = startWidthL + delta;
+				var newLeft = startWidthL + delta;
-				var newRight = startWidthR - delta;
+				if (newLeft < 40) return;
-				if (newLeft < 40 || newRight < 40) return;
+				$colL.css('width', newLeft + 'px');
-				$colL.css('width', newLeft  + 'px');
+				$table.css('width', (startTableWidth + delta) + 'px');
-				$colR.css('width', newRight + 'px');
 			});
 		});
 
@@ -2260,22 +2264,14 @@
 									</td>
 								</tr>
 							</table>
-						</td>
+			</div>
-					</tr>
-			</table>
 			
 			<!-- 품목정보 영역 -->
 			<div class="form_popup_title" style="margin-top:15px;">
 				<span>품목정보</span>
 				<button type="button" id="btnAddItem" class="plm_btns" style="float:right; margin-top:-5px;">품목 추가</button>
 			</div>
-			<table class="">
+			<div id="itemGridScroll" style="width:100%; max-height:300px; overflow-y:auto; overflow-x:auto; display:block;">
-				<colgroup>
-					<col width="100%" />
-				</colgroup>
-				<tr>
-					<td>
-						<div style="max-height:300px; overflow-y:auto;">
 							<table class="pmsPopuptable" id="itemListTable">
 									<colgroup>
 										<col width="3%" />   <!-- 번호 -->
@@ -2313,9 +2309,6 @@
 									</tbody>
 								</table>
 							</div>
-						</td>
-					</tr>
-				</table>
 				
 				<table class="">
 					<colgroup>

WebContent/WEB-INF/view/contractMgmt/orderRegistFormPopup.jsp

@@ -39,6 +39,20 @@
  	user-select: none;
  }
 
+ body, html {
+ 	overflow-x: hidden;
+ }
+ section.business_popup_min_width {
+ 	overflow-x: hidden;
+ }
+ #EntirePopupFormWrap {
+ 	overflow-x: auto;
+ }
+ #EntirePopupFormWrap > table {
+ 	width: 100%;
+ 	table-layout: fixed;
+ }
+
  /* ===== 컬럼 리사이즈 핸들 ===== */
  #itemListTable th,
  #itemListTable td {
@@ -96,11 +110,11 @@
 			}
 		});
 
-		var dragging    = false;
+		var dragging        = false;
-		var startX      = 0;
+		var startX          = 0;
-		var startWidthL = 0;
+		var startWidthL     = 0;
-		var startWidthR = 0;
+		var startTableWidth = 0;
-		var $colL, $colR, $resizerEl;
+		var $colL, $resizerEl;
 		var rafId = null;
 
 		$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -112,11 +126,10 @@
 			var colIdx = $resizerEl.parent().index();
 
 			$colL = $cols.eq(colIdx);
-			$colR = $cols.eq(colIdx + 1);
 
-			startWidthL = $colL[0].getBoundingClientRect().width;
+			startWidthL     = $colL[0].getBoundingClientRect().width;
-			startWidthR = $colR[0].getBoundingClientRect().width;
+			startTableWidth = $table[0].getBoundingClientRect().width;
-			startX      = e.clientX;
+			startX          = e.clientX;
 
 			$resizerEl.addClass('is-resizing');
 			$table.addClass('col-resizing');
@@ -128,12 +141,11 @@
 			if (rafId) return;
 			rafId = requestAnimationFrame(function() {
 				rafId = null;
-				var delta    = e.clientX - startX;
+				var delta   = e.clientX - startX;
-				var newLeft  = startWidthL + delta;
+				var newLeft = startWidthL + delta;
-				var newRight = startWidthR - delta;
+				if (newLeft < 40) return;
-				if (newLeft < 40 || newRight < 40) return;
+				$colL.css('width', newLeft + 'px');
-				$colL.css('width', newLeft  + 'px');
+				$table.css('width', (startTableWidth + delta) + 'px');
-				$colR.css('width', newRight + 'px');
 			});
 		});
 
@@ -624,7 +636,7 @@
 					</colgroup>
 					<tr>
 						<td>
-							<div style="max-height:300px; overflow-y:auto;">
+							<div style="width:100%; max-height:300px; overflow-y:auto; overflow-x:auto;">
 								<table class="pmsPopuptable" id="itemListTable">
 									<colgroup>
 										<col width="3%" />   <!-- 번호 -->