- popup text -> html 변경

- 회원가입 완료 페이지 주소 분리
- 초대 페이지 디자인 적용

src/main/java/com/eactive/apim/portal/apps/user/controller/UserRegisterController.java

@@ -113,6 +113,7 @@ public class UserRegisterController {
                                @Valid @ModelAttribute("portalUser") PortalUserRegistrationDTO portalUserRegistrationDTO,
                                BindingResult bindingResult,
                                HttpSession session,
+                               RedirectAttributes redirectAttributes,
                                Model model) {
         try {
             if (bindingResult.hasErrors()) {
@@ -135,10 +136,10 @@ public class UserRegisterController {
                 setModelForError(session, model, agreement, portalUserRegistrationDTO, response.getMessage());
                 return MAIN_USER_REGISTER;
             }
-            // 성공 시
+            // 성공 시 PRG 패턴 적용: 결과 페이지로 리다이렉트
             session.removeAttribute("invitationToken");
-            model.addAttribute("message", "회원가입이 완료되었습니다.");
-            return invitationToken != null ? MAIN_EMAIL_COMPLETED : MAIN_REGISTER_RESULT;
+            redirectAttributes.addFlashAttribute("message", "회원가입이 완료되었습니다.");
+            return invitationToken != null ? "redirect:/signup/complete/corporate" : "redirect:/signup/complete";
         } catch (Exception e) {
             setModelForError(session, model, agreement, portalUserRegistrationDTO,
                     "처리 중 오류가 발생했습니다: " + e.getMessage());
@@ -146,6 +147,28 @@ public class UserRegisterController {
         }
     }
 
+    /**
+     * 개인회원 가입 완료 페이지
+     */
+    @GetMapping("/signup/complete")
+    public String showRegistrationComplete(Model model) {
+        if (!model.containsAttribute("message")) {
+            return "redirect:/";
+        }
+        return MAIN_REGISTER_RESULT;
+    }
+
+    /**
+     * 법인회원 가입 완료 페이지
+     */
+    @GetMapping("/signup/complete/corporate")
+    public String showCorporateRegistrationComplete(Model model) {
+        if (!model.containsAttribute("message")) {
+            return "redirect:/";
+        }
+        return MAIN_EMAIL_COMPLETED;
+    }
+
     @GetMapping("/signup/decision")
     public String showDecisionPage(@RequestParam(name = "invitation", required = false) String invitationToken,
                                    HttpSession session,
@@ -232,6 +255,7 @@ public class UserRegisterController {
                                     BindingResult bindingResult,
                                     @RequestParam(name = "invitationToken") String invitationToken,
                                     RedirectAttributes redirectAttributes,
+                                    HttpSession session,
                                     Model model) {
 
         agreementValidator.validate(agreement, bindingResult);
@@ -253,6 +277,12 @@ public class UserRegisterController {
         } else {
             ValidationResponse response = userRegisterFacade.processInvitation(action, invitation.get());
 
+            // 초대 처리 완료 후 세션에서 초대 관련 속성 제거
+            session.removeAttribute("pendingInvitation");
+            session.removeAttribute("pendingInvitationToken");
+            session.removeAttribute("pendingInvitationOrgName");
+            session.removeAttribute("decisionToken");
+
             redirectAttributes.addFlashAttribute("success", response.getMessage());
             return "redirect:/";
         }

src/main/resources/static/js/popup/custom-popups.js

@@ -6,7 +6,7 @@ const customPopups = {
      */
     showAlert: function (message, callback) {
         // 메시지 설정
-        $('#customAlertMessage').text(message);
+        $('#customAlertMessage').html(message);
 
         // 팝업 표시 (modal 구조 사용)
         $('#customAlert').show();
@@ -102,7 +102,7 @@ const customPopups = {
 
         // 팝업 내용 설정
         $('#passwordPopupTitle').text(title);
-        $('#passwordPopupMessage').text(message);
+        $('#passwordPopupMessage').html(message);
 
         // 입력 필드 및 에러 초기화
         $('#passwordPopupInput').val('').removeClass('error');
@@ -216,7 +216,7 @@ const customPopups = {
      */
     showConfirm: function (message, callback) {
         // 메시지 설정
-        $('#customConfirmMessage').text(message);
+        $('#customConfirmMessage').html(message);
 
         // 팝업 표시 (modal 구조 사용)
         $('#customConfirm').show();
@@ -302,7 +302,7 @@ const customPopups = {
         $(document).off('keydown.customConfirmEsc');
     },
     showEmailValidationPopup: function (message, onConvertCallback, onChangeEmailCallback) {
-        $('#emailValidationPopupMessage').text(message);
+        $('#emailValidationPopupMessage').html(message);
         $('#emailValidationPopup').css('display', 'flex');
 
         $('#emailConvertButton').one('click', function () {
@@ -320,7 +320,7 @@ const customPopups = {
         });
     },
     showEmailResendPopup: function (message, loginId) {
-        $('#emailResendMessage').text(message);
+        $('#emailResendMessage').html(message);
         $('#userLoginId').val(loginId);
         $('#emailResend').show();
     },

src/main/resources/templates/views/apps/register/userDecisionAccept.html

@@ -1,63 +1,70 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kbank_mypage_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
-<section layout:fragment="contentFragment" class="content">
-    <div class="content_wrap">
-        <div class="sub_title2">
-            <h2 class="title">법인회원 초대</h2>
-        </div>
-        <div class="inner i_cs11 h_inner8">
-            <form id="invitationForm" th:action="@{/signup/decision_process}" method="get" class="form_type">
-                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-                <input type="hidden" name="invitationToken" th:value="${param.invitation}"/>
-                <input type="hidden" id="actionInput" name="action" value=""/>
+<section layout:fragment="title">
+    <div class="page-title-banner">
+        <img th:src="@{/img/img_title_bg.png}" alt="법인회원 초대" class="title-image">
+        <h1>법인회원 초대</h1>
+    </div>
+</section>
 
-                <div class="con_title m_btm0">
-                    <p class="tit_txt">
-                        <span th:text="${userName}"></span>님 안녕하세요.<br><br>
-                        <span th:text="${orgName}"></span>에서 귀하를 Kbank API Portal 법인회원으로 초대하였습니다.<br>
-                        <br> 광주은행과 함께 금융서비스를 손쉽게 개발해 보세요.<br><br>
-                        로그인 하여 법인회원 전환을 진행하세요.<br>
-                    </p>
+<th:block layout:fragment="contentFragment">
+    <div class="account-recovery-page">
+        <div class="account-recovery-container">
+            <div class="account-recovery-card">
+                <!-- Result Content Area -->
+                <div class="account-recovery-result">
+                    <div class="result-header">
+                        <i class="fas fa-envelope-open-text result-icon" style="color: #1a73e8;"></i>
+                        <h2 class="result-title">법인회원 초대가 도착했습니다.</h2>
+                    </div>
+
+                    <!-- Info Box -->
+                    <div class="result-info-box">
+                        <p class="info-text">
+                            <strong th:text="${userName}"></strong>님, 안녕하세요.
+                        </p>
+                        <p class="info-text" style="margin-top: 16px;">
+                            <strong th:text="${orgName}"></strong>에서
+                            Kbank API Portal 법인회원으로 초대하였습니다.
+                        </p>
+                    </div>
+
+                    <div class="result-info-box" style="background-color: #fff3cd; border-color: #ffc107; margin-top: 16px;">
+                        <p class="info-text" style="margin: 0;">
+                            <strong>초대코드:</strong>
+                            <span th:text="${invitationCode}" style="font-family: monospace; font-size: 18px; font-weight: bold; color: #333; letter-spacing: 3px; margin-left: 8px;"></span>
+                        </p>
+                        <p style="margin: 8px 0 0 0; font-size: 12px; color: #856404;">
+                            이메일로 받은 초대코드와 일치하는지 확인해 주세요.
+                        </p>
+                    </div>
+
+                    <div class="result-info-box" style="background-color: #e7f3ff; border-color: #1a73e8; margin-top: 16px;">
+                        <p class="info-text" style="margin: 0; color: #1a73e8;">
+                            <i class="fas fa-info-circle"></i>
+                            초대를 수락하려면 <strong>로그인</strong>이 필요합니다.
+                        </p>
+                    </div>
                 </div>
-                <div class="info_box" style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;">
-                    <p style="margin: 0; font-size: 14px; color: #666;">
-                        <strong>초대코드:</strong>
-                        <span th:text="${invitationCode}" style="font-family: monospace; font-size: 16px; font-weight: bold; color: #333; letter-spacing: 2px;"></span>
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: #999;">
-                        이메일로 받은 초대코드와 일치하는지 확인해 주세요.
-                    </p>
+
+                <!-- Action Buttons -->
+                <div class="form-actions">
+                    <a th:href="@{/login}" class="submit-button">로그인하기</a>
                 </div>
-                <div class="btn_application m_top">
-                    <button type="button" onclick="submitForm('reject')" class="common_btn_type_1 gray">
-                        <span>취소</span>
-                    </button>
-                    <div class="btn_gap"></div>
-                    <button type="button" onclick="submitForm('accept')" class="common_btn_type_1">
-                        <span>수락</span>
-                    </button>
-                </div>
-            </form>
+            </div>
         </div>
     </div>
+</th:block>
+
+<th:block layout:fragment="contentScript">
     <script th:if="${error}" th:inline="javascript">
         $(document).ready(function () {
             customPopups.showAlert([[${error}]]);
-        })
+        });
     </script>
-    <script>
-        function submitForm(action) {
-            if (action === 'accept') {
-                document.getElementById('actionInput').value = action;
-                document.getElementById('invitationForm').submit();
-            } else {
-                window.location.href = '/signup/deny';
-            }
-        }
-    </script>
-</section>
+</th:block>
 </body>
-</html>
+</html>

src/main/resources/templates/views/apps/register/userDecisionProcess.html

@@ -1,93 +1,139 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org"
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kbank_mypage_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
-<section layout:fragment="contentFragment" class="content">
-    <div class="content_wrap">
-        <div class="sub_title2">
-            <h2 class="title">법인회원 초대</h2>
-        </div>
-        <div class="inner i_cs h_inner2">
-            <th:block
-                    th:replace="~{apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})}"></th:block>
-            <form id="invitationForm" th:action="@{/signup/decision}" method="post" class="form_type">
+<section layout:fragment="title">
+    <div class="page-title-banner">
+        <img th:src="@{/img/img_title_bg.png}" alt="법인회원 초대" class="title-image">
+        <h1>법인회원 초대</h1>
+    </div>
+</section>
+
+<th:block layout:fragment="contentFragment">
+    <div class="org-register-page">
+        <div class="org-register-container">
+            <!-- Hidden Fields -->
+            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
+
+            <!-- Alert Container -->
+            <div id="alertContainer"></div>
+
+            <!-- Invitation Info Section -->
+            <div class="org-section-header org-section-header--agreement">
+                <h3>초대 정보</h3>
+            </div>
+
+            <div class="account-recovery-card" style="margin-bottom: 32px;">
+                <div class="account-recovery-result">
+                    <div class="result-header">
+                        <i class="fas fa-envelope-open-text result-icon" style="color: #1a73e8;"></i>
+                        <h2 class="result-title" style="font-size: 18px;">
+                            <strong th:text="${userName}"></strong>님, 법인회원 초대가 도착했습니다.
+                        </h2>
+                    </div>
+
+                    <div class="result-info-box">
+                        <p class="info-text">
+                            <strong th:text="${orgName}"></strong>에서
+                            Kbank API Portal 법인회원으로 초대하였습니다.
+                        </p>
+                        <p class="info-text" style="margin-top: 8px;">
+                            초대를 수락하시면 법인회원으로 전환됩니다.
+                        </p>
+                    </div>
+
+                    <div class="result-info-box" style="background-color: #fff3cd; border-color: #ffc107; margin-top: 16px;">
+                        <p class="info-text" style="margin: 0;">
+                            <strong>초대코드:</strong>
+                            <span th:text="${invitationCode}" style="font-family: monospace; font-size: 18px; font-weight: bold; color: #333; letter-spacing: 3px; margin-left: 8px;"></span>
+                        </p>
+                        <p style="margin: 8px 0 0 0; font-size: 12px; color: #856404;">
+                            이메일로 받은 초대코드와 일치하는지 확인해 주세요.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Agreement Section -->
+            <th:block th:replace="~{apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})}"></th:block>
+
+            <form id="invitationForm" th:action="@{/signup/decision}" method="post">
                 <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-                <input type="hidden" name="invitationToken" th:value="${param.invitation}"/>
+                <input type="hidden" name="invitationToken" th:value="${invitationCode}"/>
                 <input type="hidden" id="actionInput" name="action" value=""/>
 
-                <div class="terms_box">
-                    <p>초대 수락</p>
-                </div>
-                <div class="con_title m_btm0">
-                    <p class="tit_txt">
-                        <span th:text="${userName}"></span>님 안녕하세요.<br><br>
-                        <span th:text="${orgName}"></span>에서 귀하를 Kbank API Portal 법인회원으로 초대하였습니다.<br>
-                        <br> Kbank와 함께 금융서비스를 손쉽게 개발해 보세요.<br><br>
-                        초대를 수락하시면 법인회원으로 전환됩니다.<br>
-                    </p>
-                </div>
-                <div class="info_box" style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;">
-                    <p style="margin: 0; font-size: 14px; color: #666;">
-                        <strong>초대코드:</strong>
-                        <span th:text="${invitationCode}" style="font-family: monospace; font-size: 16px; font-weight: bold; color: #333; letter-spacing: 2px;"></span>
-                    </p>
-                    <p style="margin: 8px 0 0 0; font-size: 12px; color: #999;">
-                        이메일로 받은 초대코드와 일치하는지 확인해 주세요.
-                    </p>
-                </div>
-                <div class="btn_application m_top">
-                    <button type="button" onclick="submitForm('reject')" class="common_btn_type_1 gray">
-                        <span>거절</span>
-                    </button>
-                    <div class="btn_gap"></div>
-                    <button type="button" onclick="submitForm('accept')" class="common_btn_type_1">
-                        <span>수락</span>
-                    </button>
+                <!-- Action Buttons -->
+                <div class="org-action-buttons">
+                    <button type="button" class="btn btn-secondary" id="rejectButton">거절</button>
+                    <button type="button" class="btn btn-primary" id="acceptButton">수락</button>
                 </div>
             </form>
+
+            <!-- Loading Overlay -->
+            <div class="org-loading-overlay" id="loadingOverlay">
+                <div class="spinner"></div>
+            </div>
         </div>
     </div>
+</th:block>
+
+<th:block layout:fragment="contentScript">
     <script th:replace="~{apps/register/userAgreementContent :: agreementScript}"></script>
     <script th:if="${error}" th:inline="javascript">
         $(document).ready(function () {
             customPopups.showAlert([[${error}]]);
-        })
+        });
     </script>
     <script>
-        function submitForm(action) {
+        document.addEventListener('DOMContentLoaded', function () {
             let form = document.getElementById('invitationForm');
-            form.action.value = action;
             let agreementForm = document.getElementById('agreementForm');
-            agreementForm.classList.add('was-validated');
+            let acceptButton = document.getElementById('acceptButton');
+            let rejectButton = document.getElementById('rejectButton');
 
-            let agreementFormData = new FormData(agreementForm);
-            if (action === 'accept') {
-                if (agreementForm.checkValidity()) {
-                    // 약관 동의 폼의 데이터를 hidden input으로 추가
-                    let agreementFormData = new FormData(agreementForm);
-                    for (let pair of agreementFormData.entries()) {
-                        if (!form.querySelector('input[name="' + pair[0] + '"]')) {
-                            let input = document.createElement('input');
-                            input.type = 'hidden';
-                            input.name = pair[0];
-                            input.value = pair[1];
-                            form.appendChild(input);
+            function submitForm(action) {
+                if (action === 'accept') {
+                    agreementForm.classList.add('was-validated');
+
+                    if (agreementForm.checkValidity()) {
+                        // 약관 동의 폼의 데이터를 hidden input으로 추가
+                        let agreementFormData = new FormData(agreementForm);
+                        for (let pair of agreementFormData.entries()) {
+                            if (!form.querySelector('input[name="' + pair[0] + '"]')) {
+                                let input = document.createElement('input');
+                                input.type = 'hidden';
+                                input.name = pair[0];
+                                input.value = pair[1];
+                                form.appendChild(input);
+                            }
                         }
+                        document.getElementById('actionInput').value = action;
+                        document.getElementById('loadingOverlay').classList.add('active');
+                        form.submit();
+                    } else {
+                        customPopups.showAlert('모든 약관에 동의해 주세요.');
                     }
-
-                    form.submit();
                 } else {
-                    customPopups.showAlert('모든 약관에 동의해 주세요.');
+                    document.getElementById('actionInput').value = action;
+                    document.getElementById('loadingOverlay').classList.add('active');
+                    form.submit();
                 }
-            } else {
-                form.submit();
             }
 
-            document.getElementById('actionInput').value = action;
-            document.getElementById('invitationForm').submit();
-        }
+            acceptButton.addEventListener('click', function () {
+                submitForm('accept');
+            });
+
+            rejectButton.addEventListener('click', function () {
+                customPopups.showConfirm('초대를 거절하시겠습니까?', function (confirmed) {
+                    if (confirmed) {
+                        submitForm('reject');
+                    }
+                });
+            });
+        });
     </script>
-</section>
+</th:block>
 </body>
-</html>
+</html>