CSS 메인 파일 업데이트:

- "main.min.css"에서 디자인 스타일 및 애니메이션 수정 및 최적화.

script/portal/oracle/1_portal.sql

@@ -254,7 +254,8 @@ CREATE TABLE DVPOWN.PT_MESSAGE_RECIPIENT
 )
 ;
 
-create table DVPOWN.PT_TOKEN
+create table PT_TOKEN
+(
 (
     TOKEN      VARCHAR2(255) not null
         primary key,

src/main/java/com/eactive/apim/portal/PortalApplication.java

@@ -22,6 +22,10 @@ public class PortalApplication extends SpringBootServletInitializer {
 
     private static final Logger portal_logger = LoggerFactory.getLogger(PortalApplication.class);
 
+    public PortalApplication() {
+        super();
+    }
+
     public static void main(String[] args) {
 
         portal_logger.info("##### PortalApplication Start #####");

src/main/java/com/eactive/apim/portal/config/BaseDatasourceConfiguration.java

@@ -85,9 +85,9 @@ public class BaseDatasourceConfiguration {
             persistenceUnit = "gateway";
         }
 
-        // 개발 환경용
+        // 개발 환경용 - local 프로파일에서는 스키마 검증(ddl-auto) 해제
         if (env.matchesProfiles("local")) {
-            properties.put("hibernate.hbm2ddl.auto", "validate");
+            properties.put("hibernate.hbm2ddl.auto", "none");
         }
 
 

src/main/resources/application.yml

@@ -30,6 +30,8 @@ spring:
         default-page-size: '10'
   jpa:
     open-in-view: false
+    hibernate:
+      ddl-auto: none
 
   web:
     resources:

src/main/resources/static/css/main.css

@@ -5686,11 +5686,9 @@ select.form-control {
   cursor: pointer;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1699px) {
   .session-float {
-    top: 12px;
+    display: none;
-    right: 72px;
-    padding: 4px 10px;
   }
 }
 .data-table {
@@ -16415,7 +16413,7 @@ input[type=checkbox]:checked + .custom-checkbox {
     width: 100%;
   }
 }
-.step2-wrap .s2-floating-cart {
+.s2-floating-cart {
   position: fixed;
   bottom: 80px;
   right: 40px;
@@ -16434,13 +16432,13 @@ input[type=checkbox]:checked + .custom-checkbox {
   transition: all 0.3s ease;
   z-index: 1001;
 }
-.step2-wrap .s2-floating-cart .s2-cart-label {
+.s2-floating-cart .s2-cart-label {
   font-size: 14px;
   font-weight: 700;
   color: #ffffff;
   white-space: nowrap;
 }
-.step2-wrap .s2-floating-cart .s2-cart-badge {
+.s2-floating-cart .s2-cart-badge {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -16452,47 +16450,48 @@ input[type=checkbox]:checked + .custom-checkbox {
   flex-shrink: 0;
   margin-right: -8px;
 }
-.step2-wrap .s2-floating-cart .s2-cart-badge .s2-cart-count {
+.s2-floating-cart .s2-cart-badge .s2-cart-count {
   font-size: 24px;
   font-weight: 700;
   color: #212529;
   line-height: 1;
 }
-.step2-wrap .s2-floating-cart .s2-cart-badge .s2-cart-unit {
+.s2-floating-cart .s2-cart-badge .s2-cart-unit {
   font-size: 14px;
   font-weight: 700;
   color: #212529;
   line-height: 1;
   margin-top: 2px;
 }
-.step2-wrap .s2-floating-cart:hover {
+.s2-floating-cart:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 32px rgba(59, 164, 237, 0.5);
 }
 @media (max-width: 768px) {
-  .step2-wrap .s2-floating-cart {
+  .s2-floating-cart {
     bottom: 100px;
     right: 24px;
     width: 160px;
     height: 56px;
     padding: 8px 12px 8px 28px;
   }
-  .step2-wrap .s2-floating-cart .s2-cart-label {
+  .s2-floating-cart .s2-cart-label {
     font-size: 12px;
   }
-  .step2-wrap .s2-floating-cart .s2-cart-badge {
+  .s2-floating-cart .s2-cart-badge {
     width: 48px;
     height: 48px;
     margin-right: -6px;
   }
-  .step2-wrap .s2-floating-cart .s2-cart-badge .s2-cart-count {
+  .s2-floating-cart .s2-cart-badge .s2-cart-count {
     font-size: 20px;
   }
-  .step2-wrap .s2-floating-cart .s2-cart-badge .s2-cart-unit {
+  .s2-floating-cart .s2-cart-badge .s2-cart-unit {
     font-size: 12px;
   }
 }
-.step2-wrap .s2-modal {
+
+.s2-modal {
   position: fixed;
   top: 0;
   left: 0;
@@ -16503,7 +16502,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   align-items: center;
   justify-content: center;
 }
-.step2-wrap .s2-modal .s2-modal-backdrop {
+.s2-modal .s2-modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
@@ -16512,7 +16511,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
 }
-.step2-wrap .s2-modal .s2-modal-dialog {
+.s2-modal .s2-modal-dialog {
   position: relative;
   background: #ffffff;
   border-radius: 20px;
@@ -16525,40 +16524,40 @@ input[type=checkbox]:checked + .custom-checkbox {
   overflow: hidden;
   z-index: 1;
 }
-.step2-wrap .s2-modal .s2-modal-header {
+.s2-modal .s2-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid #e8edf5;
 }
-.step2-wrap .s2-modal .s2-modal-header .s2-modal-title {
+.s2-modal .s2-modal-header .s2-modal-title {
   font-size: 18px;
   font-weight: 700;
   color: #0d0e11;
   margin: 0;
 }
-.step2-wrap .s2-modal .s2-modal-header .s2-modal-close {
+.s2-modal .s2-modal-header .s2-modal-close {
   background: none;
   border: none;
   font-size: 20px;
   cursor: pointer;
   color: #94a3b8;
 }
-.step2-wrap .s2-modal .s2-modal-header .s2-modal-close:hover {
+.s2-modal .s2-modal-header .s2-modal-close:hover {
   color: #0d0e11;
 }
-.step2-wrap .s2-modal .s2-modal-body {
+.s2-modal .s2-modal-body {
   padding: 24px;
   max-height: 300px;
   overflow-y: auto;
 }
-.step2-wrap .s2-modal .s2-selected-list {
+.s2-modal .s2-selected-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
-.step2-wrap .s2-modal .s2-api-pill {
+.s2-modal .s2-api-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -16568,13 +16567,13 @@ input[type=checkbox]:checked + .custom-checkbox {
   font-size: 14px;
   color: #0d0e11;
 }
-.step2-wrap .s2-modal .s2-api-pill .s2-api-pill-name {
+.s2-modal .s2-api-pill .s2-api-pill-name {
   max-width: 250px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.step2-wrap .s2-modal .s2-api-pill .s2-api-pill-remove {
+.s2-modal .s2-api-pill .s2-api-pill-remove {
   background: none;
   border: none;
   font-size: 14px;
@@ -16585,16 +16584,16 @@ input[type=checkbox]:checked + .custom-checkbox {
   align-items: center;
   justify-content: center;
 }
-.step2-wrap .s2-modal .s2-api-pill .s2-api-pill-remove:hover {
+.s2-modal .s2-api-pill .s2-api-pill-remove:hover {
   color: #f4253c;
 }
-.step2-wrap .s2-modal .s2-modal-footer {
+.s2-modal .s2-modal-footer {
   padding: 16px 24px;
   border-top: 1px solid #e8edf5;
   display: flex;
   justify-content: flex-end;
 }
-.step2-wrap .s2-modal .s2-btn-close-modal {
+.s2-modal .s2-btn-close-modal {
   height: 40px;
   padding: 0 20px;
   background: #f1f5f9;
@@ -16605,7 +16604,7 @@ input[type=checkbox]:checked + .custom-checkbox {
   font-weight: 500;
   cursor: pointer;
 }
-.step2-wrap .s2-modal .s2-btn-close-modal:hover {
+.s2-modal .s2-btn-close-modal:hover {
   background: #e2e8f0;
 }
 

src/main/resources/static/sass/components/_session-timer.scss

@@ -71,12 +71,12 @@
   }
 }
 
-// 모바일: 헤더 우측 햄버거(메뉴 버튼) 바로 왼쪽에 나란히 배치.
+// 가로 여유가 있을 때만 노출.
-// right = 헤더 padding(20px) + 햄버거 폭(~32px) + 간격(~20px) ≈ 72px
+// 헤더 .container(max-width:1280px, 중앙정렬)의 우측 여백에 위젯(폭 ~200px)이 들어갈 만큼
-@media (max-width: $breakpoint-sm) {
+// 넓은 화면(약 1700px 이상)에서만 표시 → 그 외에는 헤더 우측 메뉴(사용자명·로그아웃·마이페이지)를 가리므로 숨김.
+// (PC 전용: 모바일 ≤768px 도 당연히 숨김)
+@media (max-width: 1699px) {
   .session-float {
-    top: 12px;
+    display: none;
-    right: 72px;
-    padding: 4px 10px;
   }
 }

src/main/resources/static/sass/pages/_apikey-register.scss

@@ -4027,7 +4027,8 @@ input[type="checkbox"]:checked+.custom-checkbox {
   }
 
   // ── Floating Cart Button ──
-  .s2-floating-cart {
+  // @at-root: body 직속(pagePopups)으로 렌더되므로 step2-wrap 스코프 밖 전역 규칙으로 컴파일
+  @at-root .s2-floating-cart {
     position: fixed;
     bottom: 80px;
     right: 40px;
@@ -4114,7 +4115,8 @@ input[type="checkbox"]:checked+.custom-checkbox {
   }
 
   // ── Selected APIs Modal ──
-  .s2-modal {
+  // @at-root: body 직속(pagePopups)으로 렌더되므로 step2-wrap 스코프 밖 전역 규칙으로 컴파일
+  @at-root .s2-modal {
     position: fixed;
     top: 0;
     left: 0;

src/main/resources/templates/views/apps/community/mainInquiryList.html

@@ -150,7 +150,7 @@
 <th:block layout:fragment="contentScript">
   <script th:inline="javascript">
     $(document).ready(function () {
-      var successMsg = [[${success}]];
+      var successMsg = [[${ success }]];
       if (successMsg) {
         customPopups.showAlert(successMsg);
       }

src/main/resources/templates/views/apps/mypage/apiKeyModifyStep2.html

@@ -176,7 +176,10 @@
       </div>
     </div>
   </div>
+</th:block>
 
+<!-- 화면 전체 오버레이/플로팅은 body 직속(pagePopups)으로 렌더 → wrapper transform·overflow 영향 없이 뷰포트 기준 중앙 정렬 -->
+<section layout:fragment="pagePopups">
   <!-- Floating Cart Button -->
   <button type="button" class="s2-floating-cart" id="floatingCartBtn" style="display: none;">
     <span class="s2-cart-label">선택된 API</span>
@@ -204,7 +207,7 @@
       </div>
     </div>
   </div>
-</th:block>
+</section>
 
 <th:block layout:fragment="contentScript">
   <script th:inline="javascript">
@@ -614,7 +617,7 @@
 
       // Open modal
       function openModal() {
-        selectedApisModal.style.display = 'block';
+        selectedApisModal.style.display = 'flex'; // .s2-modal은 flex 중앙정렬 → block 금지
         // Add show class to backdrop and modal for visibility
         setTimeout(function() {
           if (modalOverlay) {
@@ -663,7 +666,7 @@
 
       // Close modal on ESC key
       document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape' && selectedApisModal.style.display === 'block') {
+        if (e.key === 'Escape' && selectedApisModal.style.display === 'flex') {
           closeModal();
         }
       });

src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html

@@ -174,7 +174,10 @@
       </div>
     </div>
   </div>
+</th:block>
 
+<!-- 화면 전체 오버레이/플로팅은 body 직속(pagePopups)으로 렌더 → wrapper transform·overflow 영향 없이 뷰포트 기준 중앙 정렬 -->
+<section layout:fragment="pagePopups">
   <!-- Floating Cart Button -->
   <button type="button" class="s2-floating-cart" id="floatingCartBtn" style="display: none;">
     <span class="s2-cart-label">선택된 API</span>
@@ -202,7 +205,7 @@
       </div>
     </div>
   </div>
-</th:block>
+</section>
 
 <th:block layout:fragment="contentScript">
   <script th:inline="javascript">
@@ -569,7 +572,7 @@
 
       // Open modal
       function openModal() {
-        selectedApisModal.style.display = 'block';
+        selectedApisModal.style.display = 'flex'; // .s2-modal은 flex 중앙정렬 → block 금지
         // Add show class to backdrop and modal for visibility
         setTimeout(function() {
           if (modalOverlay) {
@@ -618,7 +621,7 @@
 
       // Close modal on ESC key
       document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape' && selectedApisModal.style.display === 'block') {
+        if (e.key === 'Escape' && selectedApisModal.style.display === 'flex') {
           closeModal();
         }
       });

src/main/resources/templates/views/fragment/djbank/header_container.html

@@ -76,16 +76,6 @@
             <!-- Logout State (Authenticated) -->
             <div class="auth-group authenticated" sec:authorize="isAuthenticated()">
               <div class="header-user-info">
-                <span class="session-timer" id="sessionTimer" title="남은 세션 시간">
-                  <i class="fas fa-clock session-timer-icon"></i>
-                  <span class="session-timer-text" id="sessionRemainingTime">--:--</span>
-                </span>
-                <!-- 세션 유지(타임아웃 무시) 체크박스: 비운영 + property 활성 시에만 렌더 (prod 미노출) -->
-                <label class="session-keepalive" th:if="${sessionKeepAliveAllowed}" title="세션 자동 유지 (비운영 전용)">
-                  <input type="checkbox" id="sessionKeepAliveToggle">
-                  <span>세션 유지</span>
-                </label>
-                <span class="divider">•</span>
                 <div class="user-identity">
                   <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">
                   <span class="user-name">[[${#authentication.principal.userName}]]님</span>
@@ -140,6 +130,19 @@
     </div>
   </header>
 
+  <!-- 우측 상단 Float 세션 타이머 (인증 사용자, PC 전용). 모바일에서는 CSS로 숨김 -->
+  <div class="session-float" sec:authorize="isAuthenticated()">
+    <span class="session-timer" id="sessionTimer" title="남은 세션 시간">
+      <i class="fas fa-clock session-timer-icon"></i>
+      <span class="session-timer-text" id="sessionRemainingTime">--:--</span>
+    </span>
+    <!-- 세션 유지(타임아웃 무시) 체크박스: 비운영 + property 활성 시에만 렌더 (prod 미노출) -->
+    <label class="session-keepalive" th:if="${sessionKeepAliveAllowed}" title="세션 자동 유지 (비운영 전용)">
+      <input type="checkbox" id="sessionKeepAliveToggle">
+      <span>세션 유지</span>
+    </label>
+  </div>
+
   <!-- Mobile Drawer/Modal -->
   <div class="mobile-drawer" id="mobileDrawer">
     <div class="drawer-overlay" id="drawerOverlay"></div>