API 그룹 팝업 JSP 추가 - Swagger Validator JS 등록 - Summernote CSS 추가

- API 그룹 팝업(djbApiGroupPopup.jsp) 화면 파일 추가 - Swagger Validator (djb-swagger-validator.js) 및 관련 리팩토링 - Summernote 콘텐츠 스타일 정의 (editor-content.css) 추가
2026-07-03 16:54:47 +09:00
parent 6c0fca22f3
commit b7c8e7f41c
14 changed files with 1242 additions and 381 deletions
@@ -0,0 +1,334 @@
+/**
+ * Editor Content Styles (editor-content.css)
+ *
+ * Summernote 에디터로 작성된 HTML 콘텐츠의 공통 스타일
+ * 관리자포탈/개발자포탈 양쪽에서 동일하게 사용
+ *
+ * 사용법:
+ * - 관리자포탈: Summernote .note-editable에 .editor-content 클래스 추가
+ * - 개발자포탈: 콘텐츠 wrapper에 .editor-content 클래스 추가
+ *
+ * @version 1.0.0
+ * @date 2025-12-30
+ */
+
+/* ==========================================================================
+   CSS Reset + 기본 설정
+   ========================================================================== */
+
+.editor-content {
+    all: revert;
+    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 1.8 !important;
+    color: #1A1A2E !important;
+    word-wrap: break-word;
+    text-align: left !important;
+}
+
+/* ==========================================================================
+   헤딩 (Headings)
+   ========================================================================== */
+
+.editor-content h1 {
+    font-size: 20px !important;
+    font-weight: 700 !important;
+    margin: 32px 0 16px !important;
+    line-height: 1.4 !important;
+    color: #1A1A2E !important;
+}
+
+.editor-content h1:first-child {
+    margin-top: 0 !important;
+}
+
+.editor-content h2 {
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    margin: 24px 0 8px !important;
+    line-height: 1.4 !important;
+    color: #1A1A2E !important;
+}
+
+.editor-content h3 {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 8px !important;
+    line-height: 1.4 !important;
+    color: #1A1A2E !important;
+}
+
+.editor-content h4,
+.editor-content h5,
+.editor-content h6 {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 8px !important;
+    line-height: 1.4 !important;
+    color: #1A1A2E !important;
+}
+
+/* ==========================================================================
+   단락 (Paragraphs)
+   ========================================================================== */
+
+.editor-content p {
+    margin-bottom: 16px !important;
+    line-height: 1.8 !important;
+    font-size: 16px !important;
+}
+
+.editor-content p:last-child {
+    margin-bottom: 0 !important;
+}
+
+/* ==========================================================================
+   리스트 (Lists) - 글로벌 reset 대응
+   ========================================================================== */
+
+.editor-content ul {
+    list-style-type: disc !important;
+    padding-left: 32px !important;
+    margin: 16px 0 !important;
+}
+
+.editor-content ol {
+    list-style-type: decimal !important;
+    padding-left: 32px !important;
+    margin: 16px 0 !important;
+}
+
+.editor-content li {
+    margin-bottom: 8px !important;
+    line-height: 1.8 !important;
+    font-size: 16px !important;
+}
+
+.editor-content li:last-child {
+    margin-bottom: 0 !important;
+}
+
+/* 중첩 리스트 */
+.editor-content ul ul {
+    list-style-type: circle !important;
+    margin: 8px 0 !important;
+}
+
+.editor-content ul ul ul {
+    list-style-type: square !important;
+}
+
+.editor-content ol ol {
+    list-style-type: lower-alpha !important;
+    margin: 8px 0 !important;
+}
+
+.editor-content ol ol ol {
+    list-style-type: lower-roman !important;
+}
+
+/* ==========================================================================
+   테이블 (Tables)
+   ========================================================================== */
+
+.editor-content table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    margin: 24px 0 !important;
+    border: 1px solid #E2E8F0 !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    font-size: 14px !important;
+}
+
+.editor-content th,
+.editor-content td {
+    border: 1px solid #E2E8F0 !important;
+    padding: 8px 16px !important;
+    text-align: left !important;
+    vertical-align: top !important;
+}
+
+.editor-content th {
+    background: #EFF6FF !important;
+    font-weight: 600 !important;
+    color: #1A1A2E !important;
+}
+
+.editor-content tr:hover {
+    background: #F8FAFC !important;
+}
+
+/* ==========================================================================
+   링크 (Links)
+   ========================================================================== */
+
+.editor-content a {
+    color: #0049b4 !important;
+    text-decoration: underline !important;
+    transition: color 0.3s ease !important;
+}
+
+.editor-content a:hover {
+    color: #003080 !important;
+}
+
+/* ==========================================================================
+   인용문 (Blockquote)
+   ========================================================================== */
+
+.editor-content blockquote {
+    border-left: 4px solid #0049b4 !important;
+    padding: 16px 24px !important;
+    margin: 24px 0 !important;
+    background: #F8FAFC !important;
+    font-style: italic !important;
+    color: #64748B !important;
+    border-radius: 0 8px 8px 0 !important;
+}
+
+.editor-content blockquote p {
+    margin-bottom: 0 !important;
+}
+
+/* ==========================================================================
+   이미지 (Images)
+   ========================================================================== */
+
+.editor-content img {
+    max-width: 100% !important;
+    height: auto !important;
+    border-radius: 8px !important;
+    margin: 16px 0 !important;
+    display: block !important;
+}
+
+/* ==========================================================================
+   코드 (Code)
+   ========================================================================== */
+
+.editor-content code {
+    background: #F8FAFC !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-family: 'Fira Code', 'Courier New', monospace !important;
+    font-size: 0.9em !important;
+    color: #0049b4 !important;
+}
+
+.editor-content pre {
+    background: #F8FAFC !important;
+    border: 1px solid #E2E8F0 !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    overflow-x: auto !important;
+    margin: 16px 0 !important;
+}
+
+.editor-content pre code {
+    background: transparent !important;
+    padding: 0 !important;
+    color: #1A1A2E !important;
+}
+
+/* ==========================================================================
+   구분선 (Horizontal Rule)
+   ========================================================================== */
+
+.editor-content hr {
+    border: none !important;
+    border-top: 1px solid #E2E8F0 !important;
+    margin: 32px 0 !important;
+}
+
+/* ==========================================================================
+   텍스트 강조 (Text Emphasis)
+   ========================================================================== */
+
+.editor-content strong,
+.editor-content b {
+    font-weight: 700 !important;
+}
+
+.editor-content em,
+.editor-content i {
+    font-style: italic !important;
+}
+
+.editor-content u {
+    text-decoration: underline !important;
+}
+
+.editor-content s,
+.editor-content strike,
+.editor-content del {
+    text-decoration: line-through !important;
+}
+
+.editor-content mark {
+    background-color: #FEF3C7 !important;
+    padding: 0 2px !important;
+}
+
+.editor-content sub {
+    vertical-align: sub !important;
+    font-size: 0.8em !important;
+}
+
+.editor-content sup {
+    vertical-align: super !important;
+    font-size: 0.8em !important;
+}
+
+/* ==========================================================================
+   반응형 (Responsive)
+   ========================================================================== */
+
+@media (max-width: 768px) {
+    .editor-content {
+        font-size: 14px !important;
+    }
+
+    .editor-content h1 {
+        font-size: 18px !important;
+    }
+
+    .editor-content h2 {
+        font-size: 16px !important;
+    }
+
+    .editor-content h3,
+    .editor-content h4,
+    .editor-content h5,
+    .editor-content h6 {
+        font-size: 14px !important;
+    }
+
+    .editor-content p,
+    .editor-content li {
+        font-size: 14px !important;
+    }
+
+    .editor-content table {
+        font-size: 12px !important;
+    }
+
+    .editor-content th,
+    .editor-content td {
+        padding: 4px 8px !important;
+    }
+
+    .editor-content ul,
+    .editor-content ol {
+        padding-left: 24px !important;
+    }
+
+    .editor-content blockquote {
+        padding: 8px 16px !important;
+    }
+
+    .editor-content pre {
+        padding: 8px !important;
+    }
+}
@@ -23,7 +23,7 @@
    <script language="javascript" >
        var url = '<c:url value="/onl/apim/apigroup/apiGroupMan.json"/>';
        var url_view = '<c:url value="/onl/apim/apigroup/apiGroupMan.view"/>';
-        var url_popup_view = '<c:url value="/onl/transaction/apim/apiSpecManPopup.view"/>';
+        var url_popup_view = '<c:url value="/onl/transaction/apim/apiSpecMan.view"/>';

        var isDetail = false;
        let dialog;
@@ -86,9 +86,11 @@
                editurl: "clientArray",
                colNames: ['<%= localeMessage.getString("propertyDetail.propertyKey") %>',
                    '<%= localeMessage.getString("propertyDetail.propertyValue") %>',
+                    '설명',
                    '<%= localeMessage.getString("propertyDetail.delYn") %>'],
                colModel: [{name: 'PRPTYNAME', width: 50, align: 'left', editable: true},
-                    {name: 'PRPTY2VAL', width: 200, align: 'left', editable: true},
+                    {name: 'PRPTY2VAL', width: 150, align: 'left', editable: true},
+                    {name: 'PRPTYDESC', width: 200, align: 'left', editable: true, edittype: 'textarea', editoptions: {rows: 2}},
                    {
                        name: 'DELETEYN',
                        width: 20,
@@ -258,6 +260,7 @@
                var data = new Object();
                data["PRPTYNAME"] = $("input[name=prptyName]").val();
                data["PRPTY2VAL"] = $("input[name=prpty2Val]").val();
+                data["PRPTYDESC"] = $("input[name=prptyDesc]").val();

                var rows = $("#grid")[0].rows;
                var index = Number($(rows[rows.length - 1]).attr("id"));
@@ -340,6 +343,11 @@
                <td colspan="3"><input type="text" name="prpty2Val"/>
                </td>
            </tr>
+            <tr>
+                <th>설명</th>
+                <td colspan="3"><input type="text" name="prptyDesc"/>
+                </td>
+            </tr>
        </table>
        <!-- grid -->
        <table id="grid"></table>
@@ -23,7 +23,7 @@
    </style>
    <script language="javascript">
        var url = '<c:url value="/onl/transaction/apim/apiSpecMan.json" />';
-        var url_org ='<c:url value="/onl/transaction/apim/apiSpecManPopup.view" />';
+        var url_org ='<c:url value="/onl/transaction/apim/apiSpecMan.view" />';
        var isDetail = false;
        var sampleRequestEditor, sampleResponseEditor, testbedSpecEditor;

@@ -0,0 +1,132 @@
+<%@ page language="java" contentType="text/html; charset=utf-8"%>
+<%@ page import="java.io.*"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ include file="/jsp/common/include/localemessage.jsp" %>
+<%
+    response.setHeader("Pragma", "No-cache");
+    response.setHeader("Cache-Control", "no-cache");
+    response.setHeader("Expires", "0");
+%>
+<html>
+<head>
+    <title>API 그룹 선택</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <jsp:include page="/jsp/common/include/css_custom.jsp"/>
+    <jsp:include page="/jsp/common/include/css.jsp"/>
+    <jsp:include page="/jsp/common/include/script.jsp"/>
+    <script language="javascript">
+        var url = '<c:url value="/onl/apim/apigroup/apiGroupMan.json" />';
+
+        function search() {
+            var postData = getSearchForJqgrid("cmd", "LIST");
+            $("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
+        }
+
+        $(document).ready(function() {
+            var urlParams = new URLSearchParams(window.location.search);
+            var selectedGroupIds = urlParams.get("selectedGroupIds");
+
+            if (selectedGroupIds) {
+                selectedGroupIds = selectedGroupIds.split(','); // 콤마로 구분된 ID들을 배열로 변환
+            } else {
+                selectedGroupIds = [];
+            }
+
+            $('#grid').jqGrid({
+                datatype: "json",
+                mtype: 'POST',
+                url: url,
+                postData: getSearchForJqgrid("cmd", "LIST"),
+                colNames: ['API 그룹 ID', 'API 그룹 명', '설명'],
+                colModel: [
+                    {name: 'id', hidden: true},
+                    {name: 'groupName', align: 'center', width: "180"},
+                    {name: 'groupDesc', align: 'left', width: "200"}
+                ],
+                jsonReader: {
+                    repeatitems: false
+                },
+                pager: $('#pager'),
+                page: '${param.page}',
+                rowNum: '${rmsDefaultRowNum}',
+                autoheight: true,
+                height: 'auto',
+                width: 410,
+                autowidth: false,
+                viewrecords: true,
+                shrinkToFit: false,
+                multiselect: true,
+                multiboxonly: false,
+                loadComplete: function(data) {
+                    var $grid = $(this);
+                    $.each($grid.getDataIDs(), function(_, id) {
+                        var rowData = $grid.getRowData(id);
+                        if ($.inArray(rowData.id, selectedGroupIds) !== -1) {
+                            $grid.jqGrid('setSelection', id, true);
+                        }
+                    });
+                }
+            });
+
+            $("#btn_search").click(search);
+
+            $("#btn_save").click(function() {
+                var selectedRows = $('#grid').getGridParam('selarrrow');
+
+                var selectedGroups = [];
+                if (selectedRows.length > 0) {
+                    selectedGroups = selectedRows.map(function(rowid) {
+                        var rowData = $('#grid').getRowData(rowid);
+                        return {
+                            id: rowData.id,
+                            groupName: rowData.groupName
+                        };
+                    });
+                }
+                // 부모 창의 selectApiGroup 함수 호출
+                if (window.parent && typeof window.parent.selectApiGroup === "function") {
+                    window.parent.selectApiGroup(selectedGroups);
+                    window.close();
+                }
+            });
+
+            $("#btn_close").click(function () {
+                window.close();
+            });
+
+            // 검색어 입력 후 엔터 키 처리
+            $("input[name=searchGroupName]").keydown(function(key) {
+                if (key.keyCode == 13) {
+                    search();
+                }
+            });
+        });
+    </script>
+</head>
+<body>
+<div class="popup_box">
+    <div class="search_wrap">
+        <button type="button" class="cssbtn" id="btn_save" level="W">
+            <i class="material-icons">save</i> <%= localeMessage.getString("button.save") %>
+        </button>
+        <button type="button" class="cssbtn" id="btn_search" level="R">
+            <i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
+        </button>
+        <button type="button" class="cssbtn" id="btn_close" level="R" status="DETAIL"><i
+                class="material-icons">close</i> <%= localeMessage.getString("button.close") %>
+        </button>
+    </div>
+    <div class="title"></div>
+    <table class="search_condition" cellspacing="0">
+        <tr>
+            <th style="width:80px;">API 그룹 명</th>
+            <td>
+                <input type="text" name="searchGroupName" value="${param.searchGroupName}">
+            </td>
+        </tr>
+    </table>
+    <table id="grid"></table>
+    <div id="pager"></div>
+</div>
+</body>
+</html>
@@ -10,7 +10,7 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=1600" />
-  <title>DJB API 문서 에디터 — OpenAPI Editor</title>
+  <title>OpenAPI Spec 에디터</title>

  <%-- Tailwind (벤더된 Play CDN JS, 오프라인) --%>
  <script src="<c:url value='/plugins/openapi/tailwind.js'/>"></script>
@@ -33,9 +33,12 @@
  <link rel="stylesheet" href="<c:url value='/addon/codemirror/lib/codemirror.css'/>" />
  <script src="<c:url value='/addon/codemirror/lib/codemirror.js'/>"></script>
  <script src="<c:url value='/addon/codemirror/mode/yaml/yaml.js'/>"></script>
+  <script src="<c:url value='/addon/codemirror/mode/javascript/javascript.js'/>"></script>

  <%-- jQuery + Summernote(lite, 무-Bootstrap) — 설명 리치 에디터 --%>
  <link rel="stylesheet" href="<c:url value='/addon/summernote/summernote-lite.css'/>" />
+  <%-- 개발자포탈과 동일한 에디터 콘텐츠 스타일(.editor-content, Noto Sans KR 16px) --%>
+  <link rel="stylesheet" href="<c:url value='/js/djb/apispec/editor-content.css'/>" />
  <script src="<c:url value='/js/jquery-1.12.1.min.js'/>"></script>
  <script src="<c:url value='/addon/summernote/summernote-lite.min.js'/>"></script>
  <script src="<c:url value='/addon/summernote/lang/summernote-ko-KR.js'/>"></script>
@@ -64,7 +67,8 @@
      saveUrl:   "<c:url value='/onl/transaction/apim/djbApiSpecMan.json'/>?cmd=SAVE&serviceType=APIGW",
      swaggerBase: "<c:url value='/plugins/swaggerUI/'/>",
      gwAddress: "${gwAddress}",
-      orgPopupUrl: "<c:url value='/onl/transaction/apim/apiSpecManPopup.view'/>",
+      orgPopupUrl: "<c:url value='/onl/transaction/apim/apiSpecMan.view'/>",
+      groupPopupUrl: "<c:url value='/onl/transaction/apim/djbApiSpecMan.view'/>?cmd=GROUP_POPUP",
      jsonUrl: "<c:url value='/onl/transaction/apim/djbApiSpecMan.json'/>"
    };
  </script>
@@ -103,7 +107,7 @@
      <div class="h-1 bg-slate-100">
        <div id="stepper-progress" class="h-1 bg-brand-500 transition-all duration-300" style="width:16.66%"></div>
      </div>
-      <ol id="stepper" class="grid grid-cols-6 px-2"></ol>
+      <ol id="stepper" class="grid grid-cols-5 px-2"></ol>
    </nav>

    <!-- ===== Body ===== -->
@@ -111,7 +115,7 @@
      <section id="form-panel" class="bg-white border-r border-slate-200 transition-all duration-300" style="width:960px;">
        <div class="flex items-center justify-between px-6 py-3 border-b border-slate-100 sticky bg-white z-10" style="top:128px;">
          <div class="flex items-baseline gap-3">
-            <span class="text-xs uppercase tracking-wide text-slate-400">Step <span id="form-step-num">1</span> / 6</span>
+            <span class="text-xs uppercase tracking-wide text-slate-400">Step <span id="form-step-num">1</span> / 5</span>
            <h2 class="text-base font-semibold text-slate-800" id="form-step-title">기본정보</h2>
          </div>
          <button id="btn-toggle-preview-from-form" class="hidden text-xs px-2 py-1 rounded border border-slate-200 text-slate-600 hover:bg-slate-50">▶ 미리보기 다시 열기</button>