From 84ed820cfeb7fd0fe4716ee20f520af5b4f5e8a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B1=EC=98=81?= <xitpsy@xit.co.kr>
Date: Thu, 4 Dec 2025 13:26:23 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EA=B3=A0=20=EC=9E=90=EC=84=B8?=
 =?UTF-8?q?=ED=9E=88=20=EB=B3=BC=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=ED=8C=9D=EC=97=85=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/impl/ComparisonRemarkBuilder.java |  22 ++--
 .../registration/list.jsp                     | 118 +++++++++++++++++-
 2 files changed, 128 insertions(+), 12 deletions(-)

diff --git a/src/main/java/go/kr/project/carInspectionPenalty/registration/service/impl/ComparisonRemarkBuilder.java b/src/main/java/go/kr/project/carInspectionPenalty/registration/service/impl/ComparisonRemarkBuilder.java
index c747bc7..87817be 100644
--- a/src/main/java/go/kr/project/carInspectionPenalty/registration/service/impl/ComparisonRemarkBuilder.java
+++ b/src/main/java/go/kr/project/carInspectionPenalty/registration/service/impl/ComparisonRemarkBuilder.java
@@ -99,23 +99,23 @@ public class ComparisonRemarkBuilder {
         StringBuilder sb = new StringBuilder();
 
         // 첫 줄: 명의이전(25.9.3.) 이전소유자 상품용
-        sb.append("명의이전(").append(chgYmdFormatted).append(") 이전소유자 상품용").append(", ");
+        sb.append("명의이전(").append(chgYmdFormatted).append(") 이전소유자 상품용").append("\n");
 
         // 둘째 줄: 차량번호
-        sb.append(StringUtil.nvl(vhclno)).append(", ");
+        sb.append(StringUtil.nvl(vhclno)).append("\n");
 
         // 셋째 줄: 검사기간 시작일자 - 종료일자
         sb.append(" - 검사기간: ").append(DateUtil.formatDateString(vldPrdExpryYmd))
-                .append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append(", ");
+                .append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append("\n");
 
         // 넷째 줄: 검사일 일자
-        sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append(", ");
+        sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append("\n");
 
         // 다섯째 줄: 명의이전 일자
-        sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
+        sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
 
         // 여섯째 줄: 상품용 일자 (명의이전 일자와 동일)
-        sb.append(" - 상품용: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
+        sb.append(" - 상품용: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
 
         // 일곱째 줄: 일수차이
         sb.append("일수차이: ").append(daysBetween).append("일");
@@ -161,20 +161,20 @@ public class ComparisonRemarkBuilder {
         StringBuilder sb = new StringBuilder();
 
         // 첫 줄: 명의이전(25.9.3.) 이전소유자 상품용
-        sb.append("명의이전(").append(chgYmdFormatted).append(")").append(", ");
+        sb.append("명의이전(").append(chgYmdFormatted).append(")").append("\n");
 
         // 둘째 줄: 차량번호
-        sb.append(StringUtil.nvl(vhclno)).append(", ");
+        sb.append(StringUtil.nvl(vhclno)).append("\n");
 
         // 셋째 줄: 검사기간 시작일자 - 종료일자
         sb.append(" - 검사기간: ").append(DateUtil.formatDateString(vldPrdExpryYmd))
-                .append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append(", ");
+                .append(" - ").append(DateUtil.formatDateString(inspEndYmd)).append("\n");
 
         // 넷째 줄: 검사일 일자
-        sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append(", ");
+        sb.append(" - 검사일: ").append(DateUtil.formatDateString(inspYmd)).append("\n");
 
         // 다섯째 줄: 명의이전 일자
-        sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append(", ");
+        sb.append(" - 명의이전: ").append(DateUtil.formatDateString(ledgerRecord.getChgYmd())).append("\n");
 
         // 일곱째 줄: 일수차이
         sb.append("일수차이: ").append(daysBetween).append("일");
diff --git a/src/main/webapp/WEB-INF/views/carInspectionPenalty/registration/list.jsp b/src/main/webapp/WEB-INF/views/carInspectionPenalty/registration/list.jsp
index ce55146..158dad6 100644
--- a/src/main/webapp/WEB-INF/views/carInspectionPenalty/registration/list.jsp
+++ b/src/main/webapp/WEB-INF/views/carInspectionPenalty/registration/list.jsp
@@ -89,6 +89,17 @@
 </div>
 <!-- /Main body -->
 
+<!-- 비고 레이어 팝업 -->
+<div id="rmrkLayerPopup" style="display: none; position: fixed; z-index: 10000; background: white; border: 2px solid #2196F3; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); min-width: 400px; max-width: 600px;">
+    <div id="rmrkPopupHeader" style="background: #2196F3; color: white; padding: 12px 15px; cursor: move; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; align-items: center;">
+        <span style="font-weight: bold;">비고 상세</span>
+        <span id="rmrkPopupClose" onclick="closeRmrkPopup()" style="cursor: pointer; font-size: 20px; line-height: 1;">&times;</span>
+    </div>
+    <div style="padding: 20px; max-height: 400px; overflow-y: auto;">
+        <pre id="rmrkPopupContent" style="white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit; font-size: 14px; line-height: 1.6;"></pre>
+    </div>
+</div>
+
 <script type="text/javascript">
 
     /**
@@ -423,7 +434,19 @@
                             name: 'rmrk',
                             align: 'left',
                             width: 200,
-                            editor: 'text'
+                            editor: 'text',
+                            formatter: function(e) {
+                                var rmrk = e.value || '';
+                                var displayText = rmrk.length > 30 ? rmrk.substring(0, 30) + '...' : rmrk;
+
+                                if (rmrk && rmrk.trim()) {
+                                    // 비고 값이 있으면 아이콘 + 텍스트 표시
+                                    var escapedRmrk = rmrk.replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
+                                    return '<span class="mdi mdi-note-text" style="color: #2196F3; cursor: pointer; margin-right: 5px;" onclick="showRmrkPopup(\'' + escapedRmrk + '\')"></span>' +
+                                           '<span style="cursor: pointer;" onclick="showRmrkPopup(\'' + escapedRmrk + '\')">' + displayText + '</span>';
+                                }
+                                return displayText;
+                            }
                         },
                         { header: '기본사항조회성명', name: 'carBscMttrInqFlnm', align: 'center', width: 100 },
                         { header: '기본사항조회시군구코드', name: 'carBscMttrInqSggCd', align: 'center', width: 100, hidden: true },
@@ -979,4 +1002,97 @@
         window.open(url, '_blank');
     }
 
+    /**
+     * 비고 레이어 팝업 열기 (전역 함수)
+     */
+    function showRmrkPopup(rmrkText) {
+        var $popup = $('#rmrkLayerPopup');
+        var $content = $('#rmrkPopupContent');
+
+        // 이스케이프된 문자 복원
+        rmrkText = rmrkText.replace(/\\n/g, '\n').replace(/\\'/g, "'");
+
+        // 내용 설정
+        $content.text(rmrkText);
+
+        // 팝업 표시 (화면 중앙) - transform 대신 계산된 위치 사용
+        $popup.css({
+            display: 'block',
+            transform: 'none'
+        });
+
+        // 중앙 위치 계산
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+        var popupWidth = $popup.outerWidth();
+        var popupHeight = $popup.outerHeight();
+
+        $popup.css({
+            left: (windowWidth - popupWidth) / 2 + 'px',
+            top: (windowHeight - popupHeight) / 2 + 'px'
+        });
+
+        // 드래그 기능 초기화
+        initRmrkPopupDrag();
+    }
+
+    /**
+     * 비고 레이어 팝업 닫기 (전역 함수)
+     */
+    function closeRmrkPopup() {
+        $('#rmrkLayerPopup').hide();
+    }
+
+    /**
+     * 비고 레이어 팝업 드래그 기능 초기화
+     */
+    var rmrkPopupDragInitialized = false;
+    function initRmrkPopupDrag() {
+        if (rmrkPopupDragInitialized) {
+            return;
+        }
+
+        var $popup = $('#rmrkLayerPopup');
+        var $header = $('#rmrkPopupHeader');
+        var $closeBtn = $('#rmrkPopupClose');
+        var isDragging = false;
+        var dragOffset = { x: 0, y: 0 };
+
+        $header.on('mousedown', function(e) {
+            // 닫기 버튼 클릭 시 드래그 시작하지 않음
+            if ($(e.target).is($closeBtn) || $(e.target).closest('#rmrkPopupClose').length > 0) {
+                return;
+            }
+
+            isDragging = true;
+            var popupOffset = $popup.offset();
+            dragOffset.x = e.pageX - popupOffset.left;
+            dragOffset.y = e.pageY - popupOffset.top;
+            e.preventDefault(); // 텍스트 선택 방지
+        });
+
+        $(document).on('mousemove', function(e) {
+            if (isDragging) {
+                $popup.css({
+                    left: e.pageX - dragOffset.x + 'px',
+                    top: e.pageY - dragOffset.y + 'px'
+                });
+            }
+        });
+
+        $(document).on('mouseup', function() {
+            isDragging = false;
+        });
+
+        rmrkPopupDragInitialized = true;
+    }
+
+    // 팝업 외부 클릭 시 닫기 (선택사항)
+    $(document).on('click', function(e) {
+        var $popup = $('#rmrkLayerPopup');
+        if ($popup.is(':visible') && !$(e.target).closest('#rmrkLayerPopup, .mdi-note-text').length) {
+            closeRmrkPopup();
+        }
+    });
+
 </script>