- 서비스 가이드 컬럼 레이아웃 개선: 1열 배치로 변경

- 다국어 코드 블럭 간격 문제 수정 및 SASS 재컴파일 - 버튼 및 배지 hover 컬러 RGB % 표기로 변경
Merge branch 'master' into design
2026-07-23 18:12:12 +09:00 · 2026-07-23 18:09:00 +09:00 · 2026-07-23 18:07:58 +09:00 · 2026-07-23 18:05:57 +09:00
15 changed files with 178 additions and 118 deletions
@@ -5,6 +5,7 @@ import com.eactive.apim.portal.apps.session.service.UserSessionService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.ResponseEntity;
+import org.springframework.security.web.csrf.CsrfToken;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -25,6 +26,8 @@ import java.util.Optional;
 *   <li>GET  /api/session/status         - 잔여 시간/유효성 폴링 (인증 필요)</li>
 *   <li>POST /api/session/heartbeat      - 세션 연장 (lastAccessTime 갱신)</li>
 *   <li>POST /api/session/check-duplicate - 로그인 전 중복 세션 확인 (CSRF 예외)</li>
+ *   <li>GET  /api/session/ping           - 익명 세션 keepalive (로그인/회원가입 페이지)</li>
+ *   <li>GET  /api/session/csrf           - 현재 CSRF 토큰 조회 (로그인 제출 직전 안전망)</li>
 * </ul>
 */
@Slf4j
@@ -109,6 +112,37 @@ public class SessionApiController {
        return ResponseEntity.ok(result);
    }

+    /**
+     * 익명(비로그인) 페이지용 세션 keepalive ping.
+     * 요청이 기존 세션에 접근하는 것만으로 컨테이너의 세션 비활성 타이머가 리셋되어
+     * 익명 세션(세션 저장 CSRF 토큰, 회원가입 본인인증 상태 포함)이 유지된다.
+     * 세션이 없으면 새로 만들지 않는다.
+     */
+    @GetMapping("/ping")
+    public ResponseEntity<Void> ping(HttpServletRequest request) {
+        request.getSession(false);
+        return ResponseEntity.noContent().build();
+    }
+
+    /**
+     * 현재 CSRF 토큰 조회 (로그인 제출 직전 안전망).
+     * 세션 만료로 토큰이 사라진 경우 CsrfFilter가 새 토큰을 생성하고,
+     * 이 핸들러가 토큰 값을 읽는 시점에 새 세션에 저장된다(LazyCsrfTokenRepository).
+     * 회원가입 절차는 세션에 본인인증 상태를 들고 있어 토큰 재발급만으로는 복구가 안 되므로
+     * 로그인 페이지 안전망으로만 사용한다.
+     */
+    @GetMapping("/csrf")
+    public ResponseEntity<Map<String, String>> csrfToken(HttpServletRequest request) {
+        CsrfToken token = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
+        Map<String, String> result = new HashMap<>();
+        if (token != null) {
+            result.put("headerName", token.getHeaderName());
+            result.put("parameterName", token.getParameterName());
+            result.put("token", token.getToken());
+        }
+        return ResponseEntity.ok(result);
+    }
+
    /**
     * IP 주소 마스킹 (3번째 옥텟을 ***로 치환)
     * 예: 192.168.240.178 → 192.168.***.178
@@ -20,8 +20,9 @@ import java.util.Optional;
 public class UserSessionService {

    private static final String PROPERTY_GROUP = "Portal";
-    private static final String PROPERTY_NAME = "session.timeout.minutes";
-    private static final String DEFAULT_TIMEOUT_MINUTES = "15";
+
+    /** 세션 타임아웃(분) 고정값. application.yml(timeout: 10m)·weblogic.xml(timeout-secs 600)과 동일하게 유지한다. */
+    public static final int SESSION_TIMEOUT_MINUTES = 10;

    /** 세션 유지(타임아웃 무시) 기능 활성화 여부 프로퍼티 (true/false). 비운영 전용 — prod 가드는 상위(GlobalControllerAdvice)에서 적용 */
    private static final String KEEPALIVE_PROPERTY_NAME = "session.keepalive.enabled";
@@ -120,21 +121,10 @@ public class UserSessionService {
    }

    /**
-     * DB(PortalProperty)에서 세션 타임아웃 값 조회 (분)
+     * 세션 타임아웃(분). {@value #SESSION_TIMEOUT_MINUTES}분 고정 (DB property 관리 폐지).
     */
    public int getSessionTimeoutMinutes() {
-        String value = portalPropertyService.getOrCreateProperty(
-                PROPERTY_GROUP,
-                PROPERTY_NAME,
-                DEFAULT_TIMEOUT_MINUTES,
-                "세션 타임아웃 시간 (분)"
-        );
-        try {
-            return Integer.parseInt(value.trim());
-        } catch (NumberFormatException e) {
-            log.warn("세션 타임아웃 값 파싱 실패: {}, 기본값 {}분 사용", value, DEFAULT_TIMEOUT_MINUTES);
-            return Integer.parseInt(DEFAULT_TIMEOUT_MINUTES);
-        }
+        return SESSION_TIMEOUT_MINUTES;
    }

    /**
@@ -62,7 +62,7 @@ public class GlobalControllerAdvice {
    }

    /**
-     * 화면 세션 타이머 기준이 되는 타임아웃(분). PortalProperty(Portal/session.timeout.minutes)에서 조회.
+     * 화면 세션 타이머 기준이 되는 타임아웃(분). 10분 고정 (UserSessionService.SESSION_TIMEOUT_MINUTES).
     */
    @ModelAttribute("sessionTimeoutMinutes")
    public int sessionTimeoutMinutes() {
@@ -122,8 +122,8 @@ public class PortalAuthenticationSuccessHandler implements AuthenticationSuccess
        userSessionService.registerSession(sessionId, String.valueOf(user.getId()), normalizedUsername,
            clientIp, request.getHeader("User-Agent"));

-        // 물리 세션 타임아웃을 DB property(Portal/session.timeout.minutes)와 일치시킴.
-        // yml/weblogic.xml 기본값을 이 세션에 대해 override → 물리=논리 단일화(CSRF 수명 포함).
+        // 물리 세션 타임아웃 10분 고정. yml(timeout: 10m)·weblogic.xml(timeout-secs 600)과 동일 값이지만
+        // 컨테이너 설정(콘솔 override 등)과 무관하게 보장하기 위해 명시 적용 → 물리=논리 단일화(CSRF 수명 포함).
        session.setMaxInactiveInterval(userSessionService.getSessionTimeoutMinutes() * 60);

        // 로그인 성공 시 세션 정보 로깅
@@ -86,6 +86,7 @@ public class PortalConfigSecurity {
            // 운영(prod/eapim/devportal)은 동일 호스트(IP:PORT)에 여러 서비스가 떠 있어
            // 쿠키가 호스트 단위로 공유·과포화되면서 XSRF-TOKEN 쿠키가 누락 → 로그인 403이 발생했다.
            // 기존 클라이언트(X-XSRF-TOKEN 헤더, _csrf 파라미터)와 호환되도록 헤더명을 고정한다.
+            // 세션에 저장되므로 CSRF 토큰 수명은 세션 타임아웃(10분)과 동일하다.
            HttpSessionCsrfTokenRepository csrfTokenRepository = new HttpSessionCsrfTokenRepository();
            csrfTokenRepository.setHeaderName("X-XSRF-TOKEN");

@@ -2,11 +2,10 @@ server:
  servlet:
    context-path: /
    session:
-      # 물리 세션 타임아웃은 DB PortalProperty(Portal/session.timeout.minutes)로 관리한다.
-      # 로그인 성공 시 PortalAuthenticationSuccessHandler 가
-      #   session.setMaxInactiveInterval(session.timeout.minutes * 60) 으로 적용 → 물리=논리 일치.
-      # 익명/로그인 전 세션은 컨테이너 기본값으로 fallback (weblogic.xml <timeout-secs>1800).
-      # timeout: 10m
+      # 세션 타임아웃 10분 고정 (DB property 관리 폐지).
+      # WebLogic 배포 시에는 weblogic.xml <timeout-secs>600 이 동일 값을 적용한다.
+      # CSRF 토큰은 세션에 저장(HttpSessionCsrfTokenRepository)되므로 수명도 이 값과 동일하다.
+      timeout: 10m
      cookie:
        name: JSESSIONID_PORTAL
    encoding:
@@ -1229,7 +1229,7 @@ body.design-survey-active .global-header {
  transition: all 0.3s ease;
 }
 .mobile-drawer .drawer-welcome .btn-drawer-login:hover {
-  background: rgb(0, 65.7, 162);
+  background: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
 .mobile-drawer .drawer-welcome.authenticated {
  flex-direction: row;
@@ -2525,7 +2525,7 @@ body.design-survey-active .global-header {
  color: #FFFFFF;
 }
 .btn-success:hover {
-  background: rgb(83.2897959184, 199.3102040816, 106.493877551);
+  background: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
  transform: translateY(-3px);
 }
 .btn-danger {
@@ -2533,7 +2533,7 @@ body.design-survey-active .global-header {
  color: #FFFFFF;
 }
 .btn-danger:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
  transform: translateY(-3px);
 }
 .btn-ghost {
@@ -2799,7 +2799,7 @@ body.design-survey-active .global-header {
 .action-btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
-  background: rgb(255, 88.9, 88.9);
+  background: rgb(100%, 34.862745098%, 34.862745098%);
 }
 .action-btn-delete:active {
  transform: translateY(0);
@@ -2917,7 +2917,7 @@ body.design-survey-active .global-header {
  background: #a4d6ea;
 }
 .btn-input-action.btn-change:hover {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
 }
@@ -2992,7 +2992,7 @@ body.design-survey-active .global-header {
  border: none;
 }
 .btn-action-primary:hover {
-  background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
+  background: rgb(12.4992826399%, 36.3615494978%, 80.6771879484%);
  transform: translateY(-2px);
  color: #fff;
 }
@@ -3031,7 +3031,7 @@ body.design-survey-active .global-header {
 }
 .status-badge.status-processing {
  background: rgba(255, 217, 61, 0.1);
-  color: rgb(221.2, 177.8721649485, 0);
+  color: rgb(86.7450980392%, 69.7537901759%, 0%);
 }
 .status-badge.status-failed {
  background: rgba(255, 107, 107, 0.1);
@@ -3071,7 +3071,7 @@ body.design-survey-active .global-header {
 }
 .status-badge-header.status-processing {
  background: rgba(255, 217, 61, 0.1);
-  color: rgb(221.2, 177.8721649485, 0);
+  color: rgb(86.7450980392%, 69.7537901759%, 0%);
 }

 .badge-sm {
@@ -4259,7 +4259,7 @@ select.form-control {
 .file-upload-wrapper .file-remove-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
-  background: rgb(255, 88.9, 88.9);
+  background: rgb(100%, 34.862745098%, 34.862745098%);
 }
 .file-upload-wrapper .file-remove-btn:active {
  transform: translateY(0);
@@ -4580,7 +4580,7 @@ select.form-control {
  transition: all 0.3s ease;
 }
 .form-actions--with-withdrawal .withdrawal-link:hover {
-  background: rgb(210.2090909091, 232.6045454545, 242.9409090909);
+  background: rgb(82.4349376114%, 91.2174688057%, 95.2709447415%);
 }
 .form-actions--with-withdrawal .withdrawal-link img {
  width: 22px;
@@ -4735,7 +4735,7 @@ select.form-control {
  text-decoration: underline;
 }
 .notice-content-box a:hover {
-  color: rgb(0, 65.7, 162);
+  color: rgb(0%, 25.7647058824%, 63.5294117647%);
 }

 .form-row--content .form-label-wrapper {
@@ -5606,7 +5606,7 @@ select.form-control {
  font-size: 16px;
 }
 .drawer-logout-btn:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
 }
@@ -6227,7 +6227,7 @@ select.form-control {
  color: #64748b;
 }
 .list-table-btn--default:hover {
-  background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
+  background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
 }
 .list-table-btn--primary {
  background-color: #ecf0fa;
@@ -6235,7 +6235,7 @@ select.form-control {
  color: #2a69de;
 }
 .list-table-btn--primary:hover {
-  background-color: rgb(216.7625, 224.8125, 244.9375);
+  background-color: rgb(85.0049019608%, 88.1617647059%, 96.0539215686%);
 }
 .list-table-btn--secondary {
  background-color: #f5f5f4;
@@ -6243,7 +6243,7 @@ select.form-control {
  color: #64748b;
 }
 .list-table-btn--secondary:hover {
-  background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
+  background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
 }
 .list-table-btn--danger {
  background-color: #fbe7e9;
@@ -6251,7 +6251,7 @@ select.form-control {
  color: #bb1026;
 }
 .list-table-btn--danger:hover {
-  background-color: rgb(247.5571428571, 210.3428571429, 214.0642857143);
+  background-color: rgb(97.081232493%, 82.487394958%, 83.9467787115%);
 }

 .table-pagination {
@@ -6893,7 +6893,7 @@ select.form-control {
 .alert.alert-error {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
-  color: rgb(255, 70.8, 70.8);
+  color: rgb(100%, 27.7647058824%, 27.7647058824%);
  align-items: center;
 }
 .alert.alert-error svg {
@@ -6907,7 +6907,7 @@ select.form-control {
 .alert.alert-success {
  background: rgba(107, 207, 127, 0.1);
  border: 1px solid rgba(107, 207, 127, 0.3);
-  color: rgb(61.5183673469, 189.6816326531, 87.1510204082);
+  color: rgb(24.12484994%, 74.3849539816%, 34.1768707483%);
 }
 .alert.alert-info {
  background: rgba(0, 73, 180, 0.1);
@@ -11295,10 +11295,10 @@ body.index-page-body {
  line-height: 1;
 }
 .login-button:hover {
-  background: rgb(0, 69.35, 171);
+  background: rgb(0%, 27.1960784314%, 67.0588235294%);
 }
 .login-button:active {
-  background: rgb(0, 65.7, 162);
+  background: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
 .login-button:disabled {
  opacity: 0.6;
@@ -11823,11 +11823,11 @@ body.index-page-body {
 }
 .auth-request-button:hover,
 .auth-verify-button:hover {
-  background: rgb(147.83125, 206.7151785714, 230.26875);
+  background: rgb(57.9730392157%, 81.0647759104%, 90.3014705882%);
 }
 .auth-request-button:active,
 .auth-verify-button:active {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
 }
 .auth-request-button:disabled,
 .auth-verify-button:disabled {
@@ -11876,20 +11876,20 @@ body.index-page-body {
  background: #e5e7eb;
 }
 .account-recovery-card .form-actions .cancel-button:hover {
-  background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+  background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
 }
 .account-recovery-card .form-actions .cancel-button:active {
-  background: rgb(202.7739130435, 206.7913043478, 214.8260869565);
+  background: rgb(79.5191815857%, 81.094629156%, 84.2455242967%);
 }
 .account-recovery-card .form-actions .submit-button {
  color: #FFFFFF;
  background: #0049B4;
 }
 .account-recovery-card .form-actions .submit-button:hover {
-  background: rgb(0, 69.35, 171);
+  background: rgb(0%, 27.1960784314%, 67.0588235294%);
 }
 .account-recovery-card .form-actions .submit-button:active {
-  background: rgb(0, 65.7, 162);
+  background: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
 .account-recovery-card .form-actions .submit-button:disabled {
  opacity: 0.6;
@@ -12098,7 +12098,7 @@ body.index-page-body {
  transition: color 0.3s ease;
 }
 .result-info-box .info-text .info-link:hover {
-  color: rgb(0, 65.7, 162);
+  color: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
@media (max-width: 576px) {
  .result-info-box .info-text {
@@ -17134,7 +17134,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .btn-copy-action:hover {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
 }
@media (max-width: 768px) {
  .btn-copy-action {
@@ -17161,7 +17161,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .btn-view-secret:hover {
-  background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
+  background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
 }
 .btn-view-secret svg {
  width: 20px;
@@ -17346,7 +17346,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border-radius: 8px;
  }
  .btn-copy-action:hover {
-    background: rgb(131.6625, 199.4303571429, 226.5375);
+    background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
  }
  .btn-view-secret {
    width: 100% !important;
@@ -17362,7 +17362,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    height: 16px;
  }
  .btn-view-secret:hover {
-    background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
+    background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
  }
  #revealedSecretBox {
    width: 100%;
@@ -17635,7 +17635,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  flex-shrink: 0;
 }
 .detail-wrap .dt-btn-copy:hover {
-  background: rgb(189.6, 230.0857142857, 255);
+  background: rgb(74.3529411765%, 90.2296918768%, 100%);
 }
 .detail-wrap .dt-btn-copy svg {
  color: #2a69de;
@@ -17780,7 +17780,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .detail-wrap .dt-btn-gray:hover {
-  background: rgb(170.6589473684, 183.4378947368, 193.6610526316);
+  background: rgb(66.9250773994%, 71.9364293086%, 75.9455108359%);
 }
 .detail-wrap .dt-btn-red {
  width: 156px;
@@ -17798,7 +17798,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .detail-wrap .dt-btn-red:hover {
-  background: rgb(255, 70.0915337423, 64.24);
+  background: rgb(100%, 27.4868759774%, 25.1921568627%);
 }
 .detail-wrap .dt-btn-blue {
  width: 156px;
@@ -18535,7 +18535,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-notice-list:hover {
-  background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
+  background: rgb(12.4992826399%, 36.3615494978%, 80.6771879484%);
  transform: translateY(-2px);
 }
 .btn-notice-list:active {
@@ -19101,7 +19101,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-list:hover {
-  background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+  background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
 }
 .btn-inquiry-list:active {
  transform: scale(0.98);
@@ -19134,7 +19134,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-edit:hover {
-  background: rgb(0, 69.35, 171);
+  background: rgb(0%, 27.1960784314%, 67.0588235294%);
 }
 .btn-inquiry-edit:active {
  transform: scale(0.98);
@@ -19167,7 +19167,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-delete:hover {
-  background: rgb(217.9841772152, 41.3658227848, 58.2873417722);
+  background: rgb(85.4839910648%, 16.2218912882%, 22.8577810871%);
 }
 .btn-inquiry-delete:active {
  transform: scale(0.98);
@@ -19239,7 +19239,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  margin-left: 8px;
 }
 .file-upload-inline .btn-remove-file-inline:hover {
-  background: rgb(209.4151898734, 36.2848101266, 52.8721518987);
+  background: rgb(82.1236038719%, 14.2293373045%, 20.7341772152%);
 }
 .file-upload-inline .btn-remove-file-inline svg {
  width: 12px;
@@ -19271,7 +19271,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .file-upload-inline .btn-file-attach:hover {
-  background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
+  background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
 }
 .file-upload-inline .btn-file-attach svg {
  width: 22px;
@@ -19331,7 +19331,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border: none;
  }
  .inquiry-form-container .form-actions .btn-secondary:hover {
-    background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+    background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
  }
  .inquiry-form-container .form-actions .btn-primary {
    background: #0049b4;
@@ -19339,7 +19339,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border: none;
  }
  .inquiry-form-container .form-actions .btn-primary:hover {
-    background: rgb(0, 69.35, 171);
+    background: rgb(0%, 27.1960784314%, 67.0588235294%);
  }
  .inquiry-form-container .file-upload-inline .file-input-display {
    min-height: 50px;
@@ -20114,7 +20114,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  cursor: pointer;
 }
 .djb-board-write-container .form-actions .btn-submit:hover {
-  background-color: rgb(33.643902439, 97.8731707317, 217.156097561);
+  background-color: rgb(13.193687231%, 38.3816355811%, 85.1592539455%);
 }

 .org-register-page {
@@ -20589,7 +20589,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: all 0.3s ease;
 }
 .org-file-remove:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
 }

 .org-file-notice {
@@ -21477,7 +21477,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .status-indicator.status-active {
  background-color: rgba(107, 207, 127, 0.1);
-  color: rgb(83.2897959184, 199.3102040816, 106.493877551);
+  color: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
 }
 .status-indicator.status-active .status-dot {
  background-color: #6BCF7F;
@@ -23253,7 +23253,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .oauth2-2legged__prereq-grid {
  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
  gap: 16px;
 }
 .oauth2-2legged__prereq-card {
@@ -23315,17 +23315,23 @@ input[type=checkbox]:checked + .custom-checkbox {
  flex-direction: column;
  gap: 24px;
 }
+.oauth2-2legged__step-grid + .oauth2-2legged__step-grid {
+  margin-top: 24px;
+}
 .oauth2-2legged__endpoint-box {
  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 16px;
+  grid-template-columns: 1fr;
+  gap: 8px;
  padding: 16px 24px;
  margin-bottom: 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
 }
+.oauth2-2legged__endpoint-box .oauth2-2legged__method,
+.oauth2-2legged__endpoint-box .oauth2-2legged__endpoint-content-type {
+  justify-self: start;
+}
 .oauth2-2legged__method {
  display: inline-block;
  padding: 5px 14px;
@@ -1008,7 +1008,7 @@ $o2leg-err-fg: #a23b3b;
  // -- Section 2: 사전 준비 ----------------------------------------------------
  &__prereq-grid {
    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
    gap: 16px;
  }

@@ -1079,18 +1079,28 @@ $o2leg-err-fg: #a23b3b;
    display: flex;
    flex-direction: column;
    gap: 24px;
+
+    // 연속 배치된 grid 사이 간격을 내부 gap(24px)과 동일하게 유지
+    // (언어별 코드 블럭이 두 grid 에 나뉘어 있어 간격이 달라 보이는 문제 방지)
+    + .oauth2-2legged__step-grid {
+      margin-top: 24px;
+    }
  }

  &__endpoint-box {
    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    gap: 16px;
+    grid-template-columns: 1fr;
+    gap: 8px;
    padding: 16px 24px;
    margin-bottom: 20px;
    background: #FFFFFF;
    border: 1px solid $o2leg-border;
    border-radius: 12px;
+
+    .oauth2-2legged__method,
+    .oauth2-2legged__endpoint-content-type {
+      justify-self: start;
+    }
  }

  &__method {
@@ -115,6 +115,24 @@
            form.checkId.checked = ((form.id.value = getCookie('saveid')) !== null);
        }

+        // CSRF 토큰 재발급 안전망: keepalive ping이 끊긴 경우(절전·네트워크 단절 등)
+        // 세션이 만료됐어도 제출 직전 새 토큰을 받아 403(만료) 대신 정상 로그인되게 한다.
+        // 재발급 실패 시에는 기존 토큰으로 그대로 제출한다.
+        function refreshCsrfAndThen(form, next) {
+            $.ajax({
+                url: /*[[@{/api/session/csrf}]]*/ '/api/session/csrf',
+                type: 'GET',
+                success: function (data) {
+                    if (data && data.token) {
+                        if (form['_csrf']) { form['_csrf'].value = data.token; }
+                        var meta = document.querySelector('meta[name="_csrf"]');
+                        if (meta) { meta.content = data.token; }
+                    }
+                },
+                complete: function () { next(); }
+            });
+        }
+
        // 로그인 전 중복 접속 확인 → 중복 시 기존 세션 강제 로그아웃 여부 질의
        function checkDuplicateAndLogin(form) {
            var loginId = form.id.value;
@@ -157,26 +175,8 @@

        $(function () {

-            // CSRF 토큰은 세션 기반 → 세션 만료(server.servlet.session.timeout=10m) 전에
-            // 메인 페이지로 이동시켜 stale 토큰 제출(403) 방지. 이동은 서버 요청이라 세션 idle도 리셋됨.
-            // 단, 입력 중에는 이탈 금지 → idle 타이머(활동 시 리셋, 입력값/포커스 있으면 보류).
-            // 만료 시간은 하드코딩하지 않고 서버 세션 타임아웃(초)을 렌더 시점에 읽어 파생 → yml 변경 시 자동 반영.
-            var SESSION_TIMEOUT_SEC = /*[[${#request.session.maxInactiveInterval}]]*/ 600;
-            var LOGIN_IDLE_LIMIT_MS = Math.max(60, SESSION_TIMEOUT_SEC - 120) * 1000;   // 세션 만료 2분 전
-            var loginIdleTimer;
-            function scheduleIdleRedirect() {
-                clearTimeout(loginIdleTimer);
-                loginIdleTimer = setTimeout(function () {
-                    var idEl = document.getElementById('id');
-                    var pwEl = document.getElementById('password');
-                    var busy = document.activeElement === idEl || document.activeElement === pwEl
-                            || (idEl && idEl.value) || (pwEl && pwEl.value);
-                    if (busy) { scheduleIdleRedirect(); return; }   // 입력 중/입력값 있음 → 이탈 보류
-                    window.location.href = /*[[@{/}]]*/ '/';
-                }, LOGIN_IDLE_LIMIT_MS);
-            }
-            $('#id, #password, #checkId').on('input keydown focus click', scheduleIdleRedirect);
-            scheduleIdleRedirect();
+            // 세션 만료 대응은 head의 익명 keepalive ping(/api/session/ping)이 담당하고,
+            // 제출 직전 refreshCsrfAndThen()이 CSRF 토큰 재발급 안전망 역할을 한다.

            var successMsg = [[${success}]];
            console.log("Success message:", successMsg);
@@ -225,7 +225,9 @@
                        $('#loginLoading').removeClass('active');
                        customPopups.showAlert('[[#{login.passLengthShort}]]');
                    } else {
-                        checkDuplicateAndLogin(form);
+                        refreshCsrfAndThen(form, function () {
+                            checkDuplicateAndLogin(form);
+                        });
                    }
                }
                form.classList.add('was-validated');
@@ -92,7 +92,7 @@
                                <span class="oauth2-2legged__prereq-num">3</span>
                                <div class="oauth2-2legged__prereq-body">
                                    <h3 class="oauth2-2legged__prereq-title">Scope 확인</h3>
-                                    <p>호출하려는 API에 필요한 scope</p>
+                                    <p>scope 는 고정값 "api" 사용</p>
                                    <p>권한이 부여됐는지 확인합니다.</p>
                                </div>
                            </article>
@@ -136,7 +136,7 @@
                                <text x="560" y="102" text-anchor="middle" font-size="12" font-weight="700"
                                    fill="#0049b4">① POST /dj/oauth/token</text>
                                <text x="560" y="118" text-anchor="middle" font-size="11" font-weight="500"
-                                    fill="#64748B">grant_type=client_credentials, client_id, client_secret, scope</text>
+                                    fill="#64748B">grant_type=client_credentials, client_id, client_secret, scope=api</text>
                                <line x1="240" y1="128" x2="880" y2="128" stroke="#0049b4" stroke-width="2"
                                    marker-end="url(#o2leg-arrow-primary)" />

@@ -145,11 +145,11 @@
                                <line x1="880" y1="170" x2="240" y2="170" stroke="#64748B" stroke-width="2"
                                    marker-end="url(#o2leg-arrow-gray)" />
                                <text x="560" y="188" text-anchor="middle" font-size="11" font-weight="500"
-                                    fill="#64748B">{ access_token, token_type:"bearer", expires_in:86400, scope, jti
+                                    fill="#64748B">{ access_token, token_type:"bearer", expires_in:86400, scope:"api", jti
                                    }</text>

                                <text x="560" y="216" text-anchor="middle" font-size="12" font-weight="700"
-                                    fill="#0049b4">③ GET /api/v1/... · Authorization: Bearer &lt;access_token&gt;</text>
+                                    fill="#0049b4">③ GET /api/v1/... · X-AUTH-TOKEN: Bearer &lt;access_token&gt;</text>
                                <line x1="240" y1="226" x2="880" y2="226" stroke="#0049b4" stroke-width="2"
                                    marker-end="url(#o2leg-arrow-primary)" />

@@ -210,9 +210,9 @@
                                        <tr>
                                            <td><code>scope</code></td>
                                            <td><span
-                                                    class="oauth2-2legged__req-badge oauth2-2legged__req-badge--optional">선택</span>
+                                                    class="oauth2-2legged__req-badge oauth2-2legged__req-badge--required">필수</span>
                                            </td>
-                                            <td>호출 권한 범위 (공백 구분)</td>
+                                            <td>고정값 "api"</td>
                                        </tr>
                                    </tbody>
                                </table>
@@ -228,7 +228,7 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
  -d <span class="o2leg-c">'grant_type=client_credentials'</span> \
  -d <span class="o2leg-c">'client_id=YOUR_CLIENT_ID'</span> \
  -d <span class="o2leg-c">'client_secret=YOUR_CLIENT_SECRET'</span> \
-  -d <span class="o2leg-c">'scope=read.accounts'</span>
+  -d <span class="o2leg-c">'scope=api'</span>

 <span class="o2leg-g"># 응답: 200 OK + JSON</span></pre>
                            </div>
@@ -248,7 +248,7 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
  <span class="o2leg-c">"access_token"</span>: <span class="o2leg-y">"eyJhbGciOiJSUzI1NiJ9..."</span>,
  <span class="o2leg-c">"token_type"</span>: <span class="o2leg-y">"bearer"</span>,
  <span class="o2leg-c">"expires_in"</span>: <span class="o2leg-p">86400</span>,
-  <span class="o2leg-c">"scope"</span>: <span class="o2leg-y">"read.accounts"</span>,
+  <span class="o2leg-c">"scope"</span>: <span class="o2leg-y">"api"</span>,
  <span class="o2leg-c">"jti"</span>: <span class="o2leg-y">"f47ac10b-58cc-4372-..."</span>
 }

@@ -284,7 +284,7 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
                                        <tr>
                                            <td><code class="oauth2-2legged__field-name">scope</code></td>
                                            <td>string</td>
-                                            <td>실제 부여된 권한 범위</td>
+                                            <td>부여된 권한 범위 (api)</td>
                                        </tr>
                                        <tr>
                                            <td><code class="oauth2-2legged__field-name">jti</code></td>
@@ -301,13 +301,13 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
                    <section class="oauth2-2legged__step" aria-labelledby="o2leg-step3-title">
                        <span class="oauth2-2legged__eyebrow">STEP 3</span>
                        <h2 class="oauth2-2legged__h2" id="o2leg-step3-title">발급 토큰으로 API 호출</h2>
-                        <p class="oauth2-2legged__desc">Authorization 헤더에 Bearer 토큰을 실어 보호 자원 API 를 호출합니다.</p>
+                        <p class="oauth2-2legged__desc">X-AUTH-TOKEN 헤더에 Bearer 토큰을 실어 보호 자원 API 를 호출합니다.</p>

                        <div class="oauth2-2legged__step-grid">
                            <div class="oauth2-2legged__panel">
                                <h3 class="oauth2-2legged__panel-title">필수 헤더</h3>
                                <div class="oauth2-2legged__header-box">
-                                    <code class="oauth2-2legged__header-key">Authorization:</code>
+                                    <code class="oauth2-2legged__header-key">X-AUTH-TOKEN:</code>
                                    <code class="oauth2-2legged__header-value">Bearer eyJhbGciOiJSUzI1NiJ9...</code>
                                </div>

@@ -316,8 +316,7 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
                                    <li>동일 토큰은 expires_in(기본 86400초) 동안 재사용</li>
                                    <li>만료 임박 시 재발급 후 교체 (예: TTL의 80% 시점)</li>
                                    <li>매 호출마다 토큰을 새로 발급하지 마세요</li>
-                                    <li>권한이 다른 API 는 scope 별로 토큰을 분리 발급</li>
-                                </ul>
+                                                                    </ul>
                            </div>

                            <div class="oauth2-2legged__code-panel">
@@ -325,7 +324,7 @@ curl -X <span class="o2leg-y">POST</span> <span class="o2leg-c">'https://openapi
                                <pre class="oauth2-2legged__code-block"><span class="o2leg-cm"># 보호 자원 API 호출</span>
 curl -X <span class="o2leg-y">GET</span> \
  <span class="o2leg-c">'https://openapi.djbank.co.kr/api/v1/accounts'</span> \
-  -H <span class="o2leg-c">'Authorization: Bearer eyJhbGciOiJSUzI..'</span> \
+  -H <span class="o2leg-c">'X-AUTH-TOKEN: Bearer eyJhbGciOiJSUzI..'</span> \
  -H <span class="o2leg-c">'Accept: application/json'</span>

 <span class="o2leg-g"># 응답</span>
@@ -351,12 +351,12 @@ valid    = constantTimeEquals(received, expected)</pre>
                            <tr>
                                <td><code>400</code></td>
                                <td>필수 헤더 누락</td>
-                                <td>실패 기록 + 재시도</td>
+                                <td>실패 기록</td>
                            </tr>
                            <tr>
                                <td><code>401</code></td>
                                <td>서명 불일치 / timestamp 만료</td>
-                                <td>실패 기록 + 재시도</td>
+                                <td>실패 기록</td>
                            </tr>
                            <tr>
                                <td><code>5xx</code> · 타임아웃</td>
@@ -365,7 +365,7 @@ valid    = constantTimeEquals(received, expected)</pre>
                            </tr>
                        </tbody>
                    </table>
-                    <p class="oauth2-2legged__warning">⚠ 2xx 이외 응답과 네트워크 오류는 <strong>일정 간격을 두고 재시도</strong>됩니다(기본 3회). 재시도로 인한 중복 수신은 <code>eventId</code> 멱등 처리로 방어하세요.</p>
+                    <p class="oauth2-2legged__warning">⚠ 5xx 응답·타임아웃과 네트워크 오류는 <strong>일정 간격을 두고 재시도</strong>됩니다(기본 3회). 재시도로 인한 중복 수신은 <code>eventId</code> 멱등 처리로 방어하세요.</p>

                    <h4 class="oauth2-2legged__panel-subtitle">응답 가이드</h4>
                    <ul class="oauth2-2legged__tips">
@@ -1,5 +1,6 @@
 <!doctype html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

 <head th:fragment="headFragment">
    <title th:text="#{title.html}">개발자 포털</title>
@@ -27,6 +28,23 @@
    <!-- CSRF 토큰 (세션 기반). 정적 JS/AJAX에서 토큰·헤더명을 읽어 사용한다. -->
    <meta name="_csrf" th:content="${_csrf != null ? _csrf.token : ''}"/>
    <meta name="_csrf_header" th:content="${_csrf != null ? _csrf.headerName : 'X-XSRF-TOKEN'}"/>
+
+    <!-- 익명(비로그인) 세션 keepalive: 로그인/회원가입 등에서 페이지에 머무는 동안 주기적 ping으로
+         세션 비활성 타이머를 리셋해 세션 저장 CSRF 토큰·회원가입 본인인증 상태의 만료(10분)를 방지한다.
+         탭을 닫으면 ping이 멈춰 정상 만료. 인증 사용자는 헤더의 세션 타이머/heartbeat가 대신 처리한다. -->
+    <script sec:authorize="isAnonymous()" th:inline="javascript">
+        (function () {
+            var PING_URL = /*[[@{/api/session/ping}]]*/ '/api/session/ping';
+            var PING_INTERVAL_MS = 4 * 60 * 1000; // 세션 타임아웃(10분)의 절반 이하
+            setInterval(function () {
+                try {
+                    var xhr = new XMLHttpRequest();
+                    xhr.open('GET', PING_URL, true);
+                    xhr.send();
+                } catch (ignore) { /* keepalive 실패는 화면 동작에 영향 없음 */ }
+            }, PING_INTERVAL_MS);
+        })();
+    </script>
    <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">
@@ -284,7 +284,7 @@
      var FORCE_LOGOUT_URL = /*[[@{/login?forceLogout=true}]]*/ '/login?forceLogout=true';
      var LOGOUT_URL = /*[[@{/actionLogout.do}]]*/ '/actionLogout.do';

-      var timeoutMinutes = /*[[${sessionTimeoutMinutes}]]*/ 15;
+      var timeoutMinutes = /*[[${sessionTimeoutMinutes}]]*/ 10;
      var remainingSeconds = timeoutMinutes * 60;
      var WARNING_SECONDS = 60;       // 만료 60초 전 연장 확인 모달
      var POLL_INTERVAL_MS = 30000;   // 서버 잔여시간 동기화 주기
@@ -14,7 +14,8 @@
    </container-descriptor>

    <session-descriptor>
-        <timeout-secs>1800</timeout-secs>
+        <!-- 세션 타임아웃 10분 고정 (application.yml server.servlet.session.timeout=10m 과 동일 값 유지) -->
+        <timeout-secs>600</timeout-secs>
        <cookie-name>JSESSIONID_PORTAL</cookie-name>
        <persistent-store-type>replicated_if_clustered</persistent-store-type>
    </session-descriptor>
Author	SHA1	Message	Date
Rinjae	a5611cf775	- 서비스 가이드 컬럼 레이아웃 개선: 1열 배치로 변경 - 다국어 코드 블럭 간격 문제 수정 및 SASS 재컴파일 - 버튼 및 배지 hover 컬러 RGB % 표기로 변경	2026-07-23 18:12:12 +09:00
Rinjae	c733e6b200	Merge branch 'master' into design # Conflicts: # src/main/resources/templates/views/apps/service/oauth2-guide.html	2026-07-23 18:09:00 +09:00
Rinjae	a2813f391c	- OAuth2 가이드 scope 고정값 "api" 반영(master 이식) - 인증 헤더 표기 X-AUTH-TOKEN 으로 수정 - 가이드 히어로/사전준비/엔드포인트 1열 배치 전환 - webhook 개발가이드 문구 정리, SASS 재컴파일 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-07-23 18:07:58 +09:00
Rinjae	f221c20ece	- 세션 타임아웃 10분 고정: 서버/DB 설정 통일 및 관리 단순화 eapim-portal CI / build (push) Has been cancelled Details eapim-portal Test / test (push) Has been cancelled Details - CSRF 토큰 조회/재발급 API 추가 - 익명 세션 유지 핑 로직 구현 - OAuth2 가이드 scope 고정값 "api"로 수정	2026-07-23 18:05:57 +09:00