API 그룹 팝업 JSP 파일 추가 - 예제 코드 및 UI 구조 작성

Summernote 에디터 스타일 CSS 추가 - 텍스트 및 컴포넌트 스타일 정의
OpenAPI POC JS 파일 추가 - API 스펙 빌더 및 스텝별 렌더 구현

WebContent/jsp/onl/transaction/apim/apiInterfaceManDetail.jsp

@@ -84,6 +84,7 @@
         var url ='<c:url value="/onl/transaction/apim/apiInterfaceMan.json" />';
         const url_excel  ='<c:url value="/onl/transaction/apim/apiInterfaceMan.excel" />';
         var url_spec = '<c:url value="/onl/transaction/apim/apiSpecMan.view"/>';
+        var url_openapi_spec = '<c:url value="/onl/transaction/apim/djbApiSpecMan.view"/>';
         var returnUrl ;
         let headerValues = [];
         let headerNames = [];
@@ -993,6 +994,28 @@
             showModal(popupUrl, args, 1200, 800);
         }
 
+        // v2: OpenAPI Spec — 기본은 모달(iframe), Shift+클릭은 새 창.
+        // 컨텍스트는 전부 query string 으로 전달(dialogArguments 미사용).
+        function showOpenApiSpecPopup(e) {
+            var eaiSvcName  = getFullSvcName();
+            var eaiSvcDesc  = $('#eaiSvcDesc').val();
+            var apipath     = $('#apiFullPath').val();   // METHOD|URL ('|' 포함 → 인코딩 필수)
+            var contentType = $('#contentType').val();
+            var baseUrl = url_openapi_spec
+                + '?cmd=DETAIL'
+                + '&eaiSvcName='  + encodeURIComponent(eaiSvcName)
+                + '&apipath='     + encodeURIComponent(apipath)
+                + '&eaiSvcDesc='  + encodeURIComponent(eaiSvcDesc)
+                + '&contentType=' + encodeURIComponent(contentType);
+            if (e && e.shiftKey) {
+                // Shift+클릭: 새 창. window.open 은 serviceType/menuId 자동 부착 안 되므로 직접 붙임.
+                window.open(urlAddServiceType(baseUrl + '&menuId=' + encodeURIComponent(getMenuId())), '_blank');
+            } else {
+                // 기본: 모달 + iframe. showModal 이 serviceType/menuId/pop 을 자동 부착.
+                showModal(baseUrl, { title: 'OpenAPI Spec' }, 1600, 880);
+            }
+        }
+
         $(document).ready(function() {
             makeValidate();
             // var bootstrapButton = $.fn.button.noConflict()
@@ -1007,9 +1030,14 @@
             }
             init(url,key,detail);
 
+            // v1: 기존 API 스펙 (모달) — 기능 비교용 복원
             $("#btn_api_spec").click(function() {
                 showApiSpecPopup();
             });
+            // v2: 신규 OpenAPI Spec (새 탭)
+            $("#btn_openapi_spec").click(function(e) {
+                showOpenApiSpecPopup(e);
+            });
 
             $("#btn_modify").click(modifyApi);
             $("#btn_delete").click(function(){
@@ -1508,7 +1536,10 @@
             <button type="button" class="cssbtn" id="btn_json_export" level="R" status="DETAIL,NEW"><i class="material-icons">download</i> <%=localeMessage.getString("button.exportJson")%></button></button>
             <button type="button" class="cssbtn" id="btn_delete" level="W" status="DETAIL"><i class="material-icons">delete</i> <%= localeMessage.getString("button.delete") %></button>
             <button type="button" class="cssbtn" id="btn_modify" level="R" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.modify") %></button>
+            <!-- v1: 기존 API 스펙 (모달) — 기능 비교용 복원 -->
             <button type="button" class="cssbtn" id="btn_api_spec" level="R" status="DETAIL,NEW"><i class="material-icons">description</i> API 스펙</button>
+            <!-- v2: 신규 OpenAPI Spec (새 탭) -->
+            <button type="button" class="cssbtn" id="btn_openapi_spec" level="R" status="DETAIL,NEW"><i class="material-icons">api</i> OpenAPI Spec</button>
             <button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
         </div>
         <div class="title" id="title" style="font-size:1.4em">${rmsMenuName}</div>