API 관련 HTML 템플릿 파일 제거 및 상세 뷰 클래스 추가:

- api_lnb.html, head.html 템플릿 삭제 - API 상세 페이지에 editor-content 클래스 추가
2026-07-22 14:40:12 +09:00
parent 57d4efb4eb
commit 8de0d94063
6 changed files with 38 additions and 120 deletions
@@ -10907,12 +10907,12 @@ body.index-page-body {
  padding-bottom: 0;
  border-bottom: none;
 }
-.api-detail-card .detail-content {
+.api-detail-card .detail-content:not(.editor-content) {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
 }
-.api-detail-card .detail-content pre {
+.api-detail-card .detail-content:not(.editor-content) pre {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
@@ -10920,14 +10920,14 @@ body.index-page-body {
  overflow-x: auto;
  margin: 0;
 }
-.api-detail-card .detail-content pre code {
+.api-detail-card .detail-content:not(.editor-content) pre code {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #1A1A2E;
  white-space: pre-wrap;
  word-break: break-word;
 }
-.api-detail-card .detail-content table {
+.api-detail-card .detail-content:not(.editor-content) table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
@@ -10936,10 +10936,10 @@ body.index-page-body {
  border-radius: 8px;
  overflow: hidden;
 }
-.api-detail-card .detail-content table thead {
+.api-detail-card .detail-content:not(.editor-content) table thead {
  background-color: #EFF6FF;
 }
-.api-detail-card .detail-content table th {
+.api-detail-card .detail-content:not(.editor-content) table th {
  text-align: left;
  padding: 8px 16px;
  font-size: 14px;
@@ -10948,28 +10948,28 @@ body.index-page-body {
  border-bottom: 2px solid #E2E8F0;
  background-color: rgba(0, 73, 180, 0.05);
 }
-.api-detail-card .detail-content table th:not(:last-child) {
+.api-detail-card .detail-content:not(.editor-content) table th:not(:last-child) {
  border-right: 1px solid #E2E8F0;
 }
-.api-detail-card .detail-content table td {
+.api-detail-card .detail-content:not(.editor-content) table td {
  padding: 8px 16px;
  font-size: 14px;
  color: #64748B;
  border-bottom: 1px solid #E2E8F0;
 }
-.api-detail-card .detail-content table td:not(:last-child) {
+.api-detail-card .detail-content:not(.editor-content) table td:not(:last-child) {
  border-right: 1px solid #E2E8F0;
 }
-.api-detail-card .detail-content table tr {
+.api-detail-card .detail-content:not(.editor-content) table tr {
  transition: all 0.3s ease;
 }
-.api-detail-card .detail-content table tr:last-child td {
+.api-detail-card .detail-content:not(.editor-content) table tr:last-child td {
  border-bottom: none;
 }
-.api-detail-card .detail-content table tr:hover {
+.api-detail-card .detail-content:not(.editor-content) table tr:hover {
  background-color: rgba(0, 73, 180, 0.02);
 }
-.api-detail-card .detail-content table tbody tr:nth-child(even) {
+.api-detail-card .detail-content:not(.editor-content) table tbody tr:nth-child(even) {
  background-color: rgba(248, 250, 252, 0.3);
 }

@@ -11076,27 +11076,31 @@ body.index-page-body {
    font-size: 16px;
    margin-bottom: 8px;
  }
-  .api-detail-card .detail-content {
+  .api-detail-card .detail-content.editor-content {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .api-detail-card .detail-content:not(.editor-content) {
    font-size: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
-  .api-detail-card .detail-content table {
+  .api-detail-card .detail-content:not(.editor-content) table {
    min-width: 500px;
    margin: 8px 0;
  }
-  .api-detail-card .detail-content table th,
-  .api-detail-card .detail-content table td {
+  .api-detail-card .detail-content:not(.editor-content) table th,
+  .api-detail-card .detail-content:not(.editor-content) table td {
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
  }
-  .api-detail-card .detail-content pre {
+  .api-detail-card .detail-content:not(.editor-content) pre {
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
-  .api-detail-card .detail-content pre code {
+  .api-detail-card .detail-content:not(.editor-content) pre code {
    font-size: 12px;
    white-space: pre;
    word-break: normal;
@@ -803,7 +803,9 @@
    border-bottom: none;
  }

-  .detail-content {
+  // Summernote(관리자) 작성 콘텐츠는 editor-content.css 가 전담 스타일링하므로
+  // 자체 테이블/폰트 스타일은 .editor-content 미적용 영역(샘플 pre/code)에만 건다
+  .detail-content:not(.editor-content) {
    font-size: $font-size-sm;
    color: $text-gray;
    line-height: $line-height-normal;
@@ -1013,8 +1015,15 @@
      margin-bottom: $spacing-sm;
    }

+    // Summernote 콘텐츠(.editor-content)는 editor-content.css 모바일 규칙 사용,
+    // 넘치는 표 대비 가로 스크롤만 부여
+    .detail-content.editor-content {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
    // Detail Content - 모바일에서 가로 스크롤 지원
-    .detail-content {
+    .detail-content:not(.editor-content) {
      font-size: $font-size-xs;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
@@ -93,7 +93,7 @@
            <div class="api-simple-description" th:if="${apiSpecInfo.apiSimpleDescription != null}">
              <p th:text="${apiSpecInfo.apiSimpleDescription}">Simple API description</p>
            </div>
-            <div class="detail-content" th:utext="${apiSpecInfo.description}">
+            <div class="detail-content editor-content" th:utext="${apiSpecInfo.description}">
              Detailed API description
            </div>
          </div>
@@ -106,7 +106,7 @@
              <div class="org-section-header org-section-header--agreement">
                <h3>Request Specification</h3>
              </div>
-              <div class="detail-content" th:utext="${apiSpecInfo.apiRequestSpec}">
+              <div class="detail-content editor-content" th:utext="${apiSpecInfo.apiRequestSpec}">
                Request spec
              </div>
            </div>
@@ -126,7 +126,7 @@
              <div class="org-section-header org-section-header--agreement">
                <h3>Response Specification</h3>
              </div>
-              <div class="detail-content" th:utext="${apiSpecInfo.apiResponseSpec}">
+              <div class="detail-content editor-content" th:utext="${apiSpecInfo.apiResponseSpec}">
                Response spec
              </div>
            </div>
@@ -1,32 +0,0 @@
-<!doctype html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
-
-<aside layout:fragment="apiAside" class="lnb">
-  <nav th:with="services=${@apiServiceService.searchApiGroupsForLnb()}">
-    <ul class="lnb_list_type">
-      <li>
-        <a href="#none">공통안내</a>
-        <ul class="lnb_list_nav">
-           <li> <a th:href="@{/apis/common}">API 개발 공통</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U3}">가상계좌 응답 코드</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U4}">가상계좌 배치 설계</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U5}">가상계좌 VAN사 코드</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U6}">펌뱅킹 응답코드</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U7}">펌뱅킹 배치 설계</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U8}">대출금리 응답코드</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U9}">케이뱅크 페이 응답코드</a></li>
-           <li> <a th:href="@{/apis/KAPAP004U10}">케이뱅크 페이 복합과세 예제</a></li>
-           <li> <a th:href="@{/apis/token-spec}">케이뱅크 OAuth 2.0 토큰 발급</a></li>
-        </ul>
-      </li>
-      <li th:each="apiService : ${services}">
-        <a href="#none" th:text="${apiService.groupName}">API Group Name</a>
-        <ul class="lnb_list_nav">
-          <li th:each="api : ${apiService.apiGroupApiList}">
-            <a th:href="@{/apis/detail(id=${api.apiId})}" th:text="${api.apiDesc}">API Description</a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-</aside>
@@ -1,63 +0,0 @@
-<!doctype html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
-
-<head th:fragment="headFragment">
-    <title th:text="#{title.html}">개발자 포털</title>
-
-    <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <meta charset="UTF-8"/>
-    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
-    <meta content="index, follow" name="robots"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <meta http-equiv="Pragma" content="no-cache">
-
-    <meta http-equiv="Expires" content="0">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/style2.css}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/common2.css}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/slick.css}">
-    <link rel="stylesheet" type="text/css" th:href="@{/css/daterangepicker.css}">
-
-    <link rel="stylesheet" th:href="@{/plugins/codemirror/codemirror.css}" type="text/css"/>
-    <link rel="stylesheet" th:href="@{/plugins/codemirror/theme/monokai.css}" type="text/css"/>
-    <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-lite.css}" type="text/css" />
-    <link rel="stylesheet" th:href="@{/plugins/jquery-ui/jquery-ui.min.css}" />
-
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
-
-    <script th:src="@{/plugins/jquery/jquery-3.7.1.min.js}"></script>
-    <script th:src="@{/js/lodash.js}"></script>
-
-    <!-- Portal 설정값 전역 노출 -->
-    <script th:inline="javascript">
-        window.PORTAL_CONFIG = {
-            file: {
-                maxSize: /*[[${@portalProperties.file.maxSize}]]*/ '8MB',
-                maxSizeBytes: /*[[${@portalProperties.file.maxSizeBytes}]]*/ 8388608,
-                allowedExtensions: /*[[${@portalProperties.file.allowedExtensions}]]*/ 'pdf,doc,docx,xls,xlsx,ppt,pptx,hwp,gif,jpg,jpeg,png'
-            }
-        };
-    </script>
-
-    <script th:src="@{/js/common.js}"></script>
-    <script th:src="@{/js/moment.min.js}"></script>
-    <script th:src="@{/js/daterangepicker.js}"></script>
-    <script th:src="@{/plugins/codemirror/codemirror.js}"></script>
-    <script th:src="@{/plugins/codemirror/mode/clike.js}"></script>
-    <script th:src="@{/plugins/codemirror/mode/javascript.js}"></script>
-    <script th:src="@{/plugins/codemirror/addon/display/fullscreen.js}"></script>
-    <script th:src="@{/plugins/codemirror/addon/display/placeholder.js}"></script>
-    <script th:src="@{/plugins/summernote/summernote-lite.min.js}"></script>
-    <script th:src="@{/plugins/summernote/summernote-cleaner.js}"></script>
-    <script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script>
-    <script th:src="@{/js/htmx.min.js}"></script>
-</head>
-
-</html>