아이디 찾기 - 디자인 적용

src/main/java/com/eactive/apim/portal/apps/login/controller/AccountRecoveryController.java

@@ -6,6 +6,7 @@ import com.eactive.apim.portal.apps.user.dto.PortalUserDTO;
 import com.eactive.apim.portal.apps.user.service.PortalUserAuthService;
 
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
@@ -79,7 +80,7 @@ public class AccountRecoveryController {
         }
 
         try {
-            PortalUserDTO foundId = portalUserAuthService.findUsersByNameAndMobile(findIdDTO.getUserName(), findIdDTO.getMobileNumber());
+            List<PortalUserDTO> foundUsers = portalUserAuthService.findAllUsersByNameAndMobile(findIdDTO.getUserName(), findIdDTO.getMobileNumber());
 
             // 인증 관련 세션 정보 제거
             session.removeAttribute("mobileNumber");
@@ -87,7 +88,7 @@ public class AccountRecoveryController {
 
             //redirect 가 아닌 경우에는 model 을 사용해서 페이지 렌더링 처리
             model.addAttribute("findIdDTO", findIdDTO);
-            model.addAttribute("foundId", foundId);
+            model.addAttribute("foundUsers", foundUsers);
 
             return ACCOUNT_RECOVERY_RESULT;
         } catch (UserNotFoundException e) {

src/main/java/com/eactive/apim/portal/apps/user/service/PortalUserAuthService.java

@@ -18,6 +18,16 @@ import com.eactive.apim.portal.template.entity.MessageRequest;
 import com.eactive.apim.portal.template.repository.MessageRequestRepository;
 import com.eactive.apim.portal.template.service.MessageHandlerService;
 import com.eactive.apim.portal.template.service.MessageRecipient;
+import java.nio.charset.StandardCharsets;
+import java.security.InvalidKeyException;
+import java.security.NoSuchAlgorithmException;
+import java.time.format.DateTimeFormatter;
+import java.util.HashMap;
+import java.util.List;
+import java.util.stream.Collectors;
+import javax.crypto.BadPaddingException;
+import javax.crypto.IllegalBlockSizeException;
+import javax.crypto.NoSuchPaddingException;
 import lombok.RequiredArgsConstructor;
 import org.apache.xerces.impl.dv.util.Base64;
 import org.springframework.security.core.authority.SimpleGrantedAuthority;
@@ -28,16 +38,6 @@ import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
-import javax.crypto.BadPaddingException;
-import javax.crypto.IllegalBlockSizeException;
-import javax.crypto.NoSuchPaddingException;
-import java.nio.charset.StandardCharsets;
-import java.security.InvalidKeyException;
-import java.security.NoSuchAlgorithmException;
-import java.time.format.DateTimeFormatter;
-import java.util.HashMap;
-import java.util.List;
-
 @Service
 @Transactional
 @RequiredArgsConstructor
@@ -73,17 +73,21 @@ public class PortalUserAuthService implements UserDetailsService {
         }
     }
 
-    public PortalUserDTO findUsersByNameAndMobile(String userName, String mobileNumber) {
+    public List<PortalUserDTO> findAllUsersByNameAndMobile(String userName, String mobileNumber) {
         try {
-            PortalUser user = portalUserRepository.findByUserNameAndMobileNumber(userName, mobileNumber);
+            // 전화번호에서 - 제거하여 조회
-            if (user == null) {
+            String normalizedMobileNumber = mobileNumber != null ? mobileNumber.replace("-", "") : null;
+            List<PortalUser> users = portalUserRepository.findAllByUserNameAndMobileNumber(userName, normalizedMobileNumber);
+            if (users == null || users.isEmpty()) {
                 throw new UserNotFoundException("입력하신 사용자 정보가 올바르지 않습니다. 다시 확인해 주세요.");
             }
-            PortalUserDTO dto = portalUserMapper.toDTO(user);
-            dto.setMaskedEmailAddr(StringMaskingUtil.maskEmail(dto.getLoginId()));
 
-            dto.setLoginId(null);
+            return users.stream().map(user -> {
-            return dto;
+                PortalUserDTO dto = portalUserMapper.toDTO(user);
+                dto.setMaskedEmailAddr(StringMaskingUtil.maskEmail(dto.getLoginId()));
+                dto.setLoginId(null);
+                return dto;
+            }).collect(Collectors.toList());
 
         } catch (UserNotFoundException e) {
             throw e;

src/main/resources/static/sass/pages/_account-recovery.scss

@@ -1,26 +1,26 @@
 // -----------------------------------------------------------------------------
-// Account Recovery Page Styles (Find ID / Reset Password) - Modern Design
+// Account Recovery Page Styles (Find ID / Reset Password) - Figma: 1029-2249
-// Matches login.html design system for consistency
+// Matches terms_agreements.html tab design for consistency
 // -----------------------------------------------------------------------------
 
 .account-recovery-page {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  background: #EDF9FE;
+  background: transparent;
-  padding: 40px 20px;
+  padding: 0;
   position: relative;
-  min-height: calc(100vh - 200px);
+  min-height: auto;
-  margin-top: 60px;
+  margin: 0;
-  margin-bottom: 60px;
-  border-radius: 12px;
 }
 
 .account-recovery-container {
   width: 100%;
-  max-width: 540px;
+  max-width: 1228px;
   margin: 0 auto;
   position: relative;
+  padding: $spacing-lg
+;
 }
 
 .account-recovery-card {
@@ -28,7 +28,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   position: relative;
 
   @media (max-width: 576px) {
@@ -36,72 +36,66 @@
   }
 }
 
-// Logo
+// Logo - 숨김 처리 (Figma 디자인에 없음)
 .account-recovery-logo {
-  width: 90px;
+  display: none;
-  height: 90px;
-  margin-bottom: 24px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
 }
 
-// Title
+// Title - 숨김 처리 (페이지 타이틀 배너에서 표시)
 .account-recovery-title {
-  font-family: 'Noto Sans KR', sans-serif;
+  display: none;
-  font-size: 28px;
-  font-weight: 700;
-  color: #000000;
-  text-align: center;
-  margin: 0 0 32px 0;
-  line-height: 1.3;
-
-  @media (max-width: 576px) {
-    font-size: 24px;
-    margin-bottom: 24px;
-  }
 }
 
-// Tab Navigation
+// Tab Navigation (Figma 디자인: 약관 페이지와 동일)
 .account-recovery-tabs {
   display: flex;
   gap: 0;
-  margin-bottom: 40px;
+  margin-bottom: 0;
   width: 100%;
-  background: #F8F9FA;
+  background: transparent;
-  border-radius: 12px;
+  border-radius: 0;
-  padding: 4px;
+  padding: 0;
 
   .tab-link {
     flex: 1;
-    padding: 14px 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 18px 24px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 16px;
+    font-size: 22px;
-    font-weight: 600;
+    font-weight: 700;
-    color: #64748B;
+    color: #8c959f;
     text-decoration: none;
     text-align: center;
-    background: transparent;
+    background: #eceff4;
-    border-radius: 8px;
+    border-radius: 0;
     transition: all 0.3s ease;
 
+    // 왼쪽 탭 둥근 모서리
+    &:first-child {
+      border-radius: 30px 0 0 0;
+    }
+
+    // 오른쪽 탭 둥근 모서리
+    &:last-child {
+      border-radius: 0 30px 0 0;
+    }
+
     &:hover {
-      color: #0049B4;
+      color: #3ba4ed;
-      background: rgba(0, 73, 180, 0.05);
+      background: #e4e8ed;
     }
 
     &.active {
       color: #FFFFFF;
-      background: #0049B4;
+      background: #3ba4ed;
-      box-shadow: 0 2px 4px rgba(0, 73, 180, 0.2);
+      font-weight: 700;
     }
 
     @media (max-width: 576px) {
-      padding: 12px 16px;
+      padding: 14px 16px;
-      font-size: 15px;
+      font-size: 16px;
     }
   }
 }
@@ -143,53 +137,82 @@
   }
 }
 
-// Form
+// Form Content Area (Figma: 아이디찾기BG_box)
 .account-recovery-form {
   width: 100%;
   margin-bottom: 0;
+  background: #F6F9FB;
+  padding: 40px;
+  border-radius: 0 0 12px 12px;
+
+  @media (max-width: 576px) {
+    padding: 24px 16px;
+  }
 
   .form-group {
-    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
 
     &:last-of-type {
       margin-bottom: 0;
     }
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 10px;
+    }
   }
 
   .form-label {
-    display: block;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 170px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 15px;
+    font-size: 20px;
-    font-weight: 600;
+    font-weight: 400;
-    color: #1A1A2E;
+    color: #212529;
-    margin-bottom: 10px;
+    margin-bottom: 0;
+
+    .required {
+      color: #ed5b5b;
+      margin-left: 2px;
+    }
+
+    @media (max-width: 768px) {
+      width: 100%;
+      font-size: 16px;
+    }
   }
 
   .form-input {
-    width: 100%;
+    flex: 1;
-    height: 70px;
+    height: 60px;
-    padding: 0 24px;
+    padding: 0 20px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 400;
-    color: #1A1A2E;
+    color: #212529;
     background: #FFFFFF;
-    border: 1px solid #DDDDDD;
+    border: 1px solid #dadada;
     border-radius: 12px;
     outline: none;
     transition: all 0.3s ease;
 
     &::placeholder {
-      color: #94A3B8;
+      color: #dadada;
     }
 
     &:hover {
-      border-color: #CBD5E1;
+      border-color: #3ba4ed;
     }
 
     &:focus {
-      border-color: #0049B4;
+      border-color: #3ba4ed;
-      box-shadow: 0 0 0 4px rgba(0, 73, 180, 0.08);
+      box-shadow: 0 0 0 2px rgba(59, 164, 237, 0.1);
     }
 
     &:disabled {
@@ -200,37 +223,43 @@
     }
 
     &.error {
-      border-color: #FF6B6B;
+      border-color: #ed5b5b;
+    }
+
+    @media (max-width: 576px) {
+      height: 50px;
+      font-size: 16px;
     }
   }
 
   .form-select {
-    width: 100%;
+    height: 60px;
-    height: 70px;
+    padding: 0 40px 0 20px;
-    padding: 0 24px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 400;
-    color: #1A1A2E;
+    color: #515151;
     background: #FFFFFF;
-    border: 1px solid #DDDDDD;
+    border: 1px solid #dadada;
     border-radius: 12px;
     outline: none;
     cursor: pointer;
     transition: all 0.3s ease;
     appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
-    background-position: right 24px center;
+    background-position: right 16px center;
-    padding-right: 50px;
+    background-size: 10px 5px;
 
     &:hover {
-      border-color: #CBD5E1;
+      border-color: #3ba4ed;
     }
 
     &:focus {
-      border-color: #0049B4;
+      border-color: #3ba4ed;
-      box-shadow: 0 0 0 4px rgba(0, 73, 180, 0.08);
+      box-shadow: 0 0 0 2px rgba(59, 164, 237, 0.1);
     }
 
     &:disabled {
@@ -245,95 +274,130 @@
       padding: 12px;
       font-size: 16px;
     }
+
+    @media (max-width: 576px) {
+      height: 50px;
+      font-size: 16px;
+    }
   }
 }
 
-// Phone Input Group
+// Phone Input Group (Figma: 휴대폰번호+텍스트필드)
 .phone-input-group {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
+  flex: 1;
 
   .phone-prefix {
-    flex: 0 0 140px;
+    width: 180px;
+    flex-shrink: 0;
   }
 
   .phone-middle,
   .phone-last {
-    flex: 1;
+    width: 180px;
+    flex-shrink: 0;
   }
 
   .phone-separator {
-    font-size: 16px;
+    display: flex;
-    color: #64748B;
+    align-items: center;
-    font-weight: 500;
+    justify-content: center;
+    width: 14px;
+    height: 1px;
+    background: #515151;
+    flex-shrink: 0;
   }
 
-  @media (max-width: 576px) {
+  @media (max-width: 768px) {
-    .phone-prefix {
+    flex-wrap: wrap;
-      flex: 0 0 110px;
+    gap: 10px;
+
+    .phone-prefix,
+    .phone-middle,
+    .phone-last {
+      width: calc(33% - 20px);
+      min-width: 80px;
     }
 
     .phone-separator {
-      font-size: 14px;
+      width: 10px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .phone-prefix,
+    .phone-middle,
+    .phone-last {
+      width: 100%;
+    }
+
+    .phone-separator {
+      display: none;
     }
   }
 }
 
-// Auth Number Group
+// Auth Number Group (Figma: 인증번호+텍스트필드)
 .auth-number-group {
-  margin-top: 24px;
+  margin-top: 0;
 }
 
 .auth-input-group {
   position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
 
   .auth-input {
-    padding-right: 100px;
+    flex: 1;
+    padding-right: 80px;
   }
 
   .auth-timer {
     position: absolute;
-    right: 24px;
+    right: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 16px;
+    font-size: 20px;
-    font-weight: 600;
+    font-weight: 400;
-    color: #FF6B6B;
+    color: #ed5b5b;
     pointer-events: none;
 
     @media (max-width: 576px) {
-      font-size: 14px;
+      font-size: 16px;
       right: 16px;
     }
   }
 }
 
-// Buttons
+// Buttons (Figma: 인증번호 받기/확인)
 .auth-request-button,
 .auth-verify-button {
-  width: 100%;
+  width: 172px;
-  height: 70px;
+  height: 60px;
-  padding: 0 32px;
+  padding: 10px;
   font-family: 'Noto Sans KR', sans-serif;
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
-  background: #0049B4;
+  background: #a4d6ea;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
-  margin-top: 16px;
+  margin: 0;
+  flex-shrink: 0;
   line-height: 1;
 
   &:hover {
-    background: darken(#0049B4, 5%);
+    background: darken(#a4d6ea, 5%);
   }
 
   &:active {
-    background: darken(#0049B4, 10%);
+    background: darken(#a4d6ea, 10%);
   }
 
   &:disabled {
@@ -342,49 +406,53 @@
   }
 
   @media (max-width: 576px) {
-    height: 60px;
+    width: 100%;
+    height: 50px;
     font-size: 16px;
+    margin-top: 10px;
   }
 }
 
-// Form Actions - Account Recovery specific styles
+// Form Actions (Figma: btn_취소, btn_신청)
-// Scoped to avoid conflict with common .form-actions in _forms.scss
 .account-recovery-card .form-actions {
   display: flex;
-  gap: 12px;
+  justify-content: center;
-  margin-top: 32px;
+  gap: 20px;
-  padding-top: 0;
+  margin-top: 40px;
+  padding: 40px 0;
   border-top: none;
+  background: transparent;
 
   .cancel-button,
   .submit-button {
-    flex: 1;
+    width: 200px;
-    height: 70px;
+    height: 60px;
-    padding: 0 32px;
+    padding: 10px;
     font-family: 'Noto Sans KR', sans-serif;
-    font-size: 17px;
+    font-size: 18px;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s ease;
     line-height: 1;
+    // <a> 태그 지원
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
   }
 
   .cancel-button {
-    color: #64748B;
+    color: #5f666c;
-    background: #FFFFFF;
+    background: #e5e7eb;
-    border: 2px solid #E2E8F0;
 
     &:hover {
-      background: #F8F9FA;
+      background: darken(#e5e7eb, 5%);
-      border-color: #CBD5E1;
-      color: #475569;
     }
 
     &:active {
-      background: #F1F5F9;
+      background: darken(#e5e7eb, 10%);
-      border-color: #94A3B8;
     }
   }
 
@@ -409,10 +477,12 @@
   @media (max-width: 576px) {
     flex-direction: column;
     gap: 12px;
+    padding: 24px 0;
 
     .cancel-button,
     .submit-button {
-      height: 60px;
+      width: 100%;
+      height: 50px;
       font-size: 16px;
     }
   }
@@ -511,3 +581,163 @@
     margin-top: 24px;
   }
 }
+
+// Result Page Styles (아이디 찾기 결과 페이지)
+.account-recovery-result {
+  width: 100%;
+  background: #F6F9FB;
+  padding: 60px 40px;
+  border-radius: 0 0 12px 12px;
+  text-align: center;
+
+  @media (max-width: 576px) {
+    padding: 40px 20px;
+  }
+
+  .result-header {
+    margin-bottom: 40px;
+
+    .result-icon {
+      font-size: 60px;
+      color: #6BCF7F;
+      margin-bottom: 20px;
+      display: block;
+
+      @media (max-width: 576px) {
+        font-size: 48px;
+      }
+    }
+
+    .result-title {
+      font-family: 'Noto Sans KR', sans-serif;
+      font-size: 24px;
+      font-weight: 700;
+      color: #212529;
+      margin-bottom: 12px;
+
+      @media (max-width: 576px) {
+        font-size: 20px;
+      }
+    }
+
+    .result-description {
+      font-family: 'Noto Sans KR', sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      color: #5f666c;
+      margin: 0;
+
+      strong {
+        color: #0049B4;
+        font-weight: 700;
+      }
+
+      @media (max-width: 576px) {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// Found Users List
+.found-users-list {
+  max-width: 600px;
+  margin: 0 auto 40px;
+
+  .found-user-item {
+    background: #FFFFFF;
+    border: 1px solid #dadada;
+    border-radius: 12px;
+    padding: 20px 24px;
+    margin-bottom: 12px;
+    transition: all 0.3s ease;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      border-color: #3ba4ed;
+      box-shadow: 0 2px 8px rgba(59, 164, 237, 0.15);
+    }
+
+    .user-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      flex-wrap: wrap;
+
+      @media (max-width: 576px) {
+        flex-direction: column;
+        gap: 6px;
+      }
+    }
+
+    .user-email {
+      font-family: 'Noto Sans KR', sans-serif;
+      font-size: 20px;
+      font-weight: 700;
+      color: #212529;
+
+      @media (max-width: 576px) {
+        font-size: 18px;
+      }
+    }
+
+    .user-date {
+      font-family: 'Noto Sans KR', sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      color: #8c959f;
+
+      @media (max-width: 576px) {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// Result Info Box
+.result-info-box {
+  max-width: 600px;
+  margin: 0 auto;
+  background: rgba(0, 73, 180, 0.05);
+  border: 1px solid rgba(0, 73, 180, 0.2);
+  border-radius: 12px;
+  padding: 16px 24px;
+
+  .info-text {
+    font-family: 'Noto Sans KR', sans-serif;
+    font-size: 15px;
+    font-weight: 400;
+    color: #5f666c;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+
+    i {
+      color: #0049B4;
+      font-size: 16px;
+    }
+
+    .info-link {
+      color: #0049B4;
+      font-weight: 700;
+      text-decoration: underline;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: darken(#0049B4, 10%);
+      }
+    }
+
+    @media (max-width: 576px) {
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}

src/main/resources/templates/views/apps/login/findId.html

@@ -1,35 +1,33 @@
 <!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
 <body>
+<section layout:fragment="title">
+  <div class="page-title-banner">
+    <img th:src="@{/img/img_title_bg.png}" class="title-image">
+    <h1>아이디 찾기</h1>
+  </div>
+</section>
 <th:block layout:fragment="contentFragment">
   <div class="account-recovery-page">
     <div class="account-recovery-container">
       <div class="account-recovery-card">
-        <!-- Logo -->
+        <!-- Tab Navigation (Figma 디자인: 약관 페이지와 동일) -->
-        <div class="account-recovery-logo">
-          <img th:src="@{/img/logo/logo_box.png}" alt="광주은행">
-        </div>
-
-        <!-- Header Title -->
-        <h2 class="account-recovery-title">아이디 찾기</h2>
-
-        <!-- Tab Navigation -->
         <div class="account-recovery-tabs">
-          <a href="#" class="tab-link active">아이디 찾기</a>
+          <a href="#" class="tab-link active">아이디찾기</a>
           <a th:href="@{/account_recovery(tab='resetPassword')}" class="tab-link">비밀번호 초기화</a>
         </div>
 
         <!-- Alert Messages -->
         <div id="alertContainer"></div>
 
-        <!-- Account Recovery Form -->
+        <!-- Account Recovery Form (Figma: 아이디찾기BG_box) -->
         <form id="accountForm" role="form" name="accountForm" th:action="@{/find_id}" method="post" class="account-recovery-form">
           <input type="hidden" id="mobileNumber" name="mobileNumber" th:value="${mobileNumber}">
 
-          <!-- Name Field -->
+          <!-- Name Field (Figma: 성명 + 텍스트필드) -->
           <div class="form-group">
-            <label for="userName" class="form-label">성명</label>
+            <label for="userName" class="form-label">성명<span class="required">*</span></label>
             <input type="text"
                    id="userName"
                    name="userName"
@@ -39,9 +37,9 @@
                    required>
           </div>
 
-          <!-- Phone Number Fields -->
+          <!-- Phone Number Fields (Figma: 휴대폰번호 + 텍스트필드) -->
           <div class="form-group">
-            <label class="form-label">휴대폰 번호</label>
+            <label class="form-label">휴대폰 번호<span class="required">*</span></label>
             <div class="phone-input-group">
               <select id="phonePrefix" class="form-select phone-prefix" required>
                 <option value="">선택</option>
@@ -51,37 +49,35 @@
                 <option value="017">017</option>
                 <option value="018">018</option>
               </select>
-              <span class="phone-separator">-</span>
+              <span class="phone-separator"></span>
               <input type="tel"
                      id="phoneMiddle"
                      name="phoneMiddle"
                      maxlength="4"
                      class="form-input phone-middle"
-                     placeholder="0000"
+                     placeholder="1234"
                      pattern="[0-9]*"
                      inputmode="numeric"
                      required>
-              <span class="phone-separator">-</span>
+              <span class="phone-separator"></span>
               <input type="tel"
                      id="phoneLast"
                      name="phoneLast"
                      maxlength="4"
                      class="form-input phone-last"
-                     placeholder="0000"
+                     placeholder="1234"
                      pattern="[0-9]*"
                      inputmode="numeric"
                      required>
+              <button type="button" class="auth-request-button" id="requestAuthButton">
+                인증번호 받기
+              </button>
             </div>
           </div>
 
-          <!-- Auth Number Request Button -->
+          <!-- Auth Number Input (Figma: 인증번호 입력 + 텍스트필드) -->
-          <button type="button" class="auth-request-button" id="requestAuthButton">
-            인증번호 받기
-          </button>
-
-          <!-- Auth Number Input -->
           <div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
-            <label for="authNumber" class="form-label">인증번호 입력</label>
+            <label for="authNumber" class="form-label">인증번호 입력<span class="required">*</span></label>
             <div class="auth-input-group">
               <input type="text"
                      id="authNumber"
@@ -94,20 +90,18 @@
                      required>
               <span class="auth-timer" id="authTimer">03:00</span>
             </div>
-          </div>
+            <button type="button" class="auth-verify-button" id="verifyAuthButton">
-
+              인증번호 확인
-          <!-- Auth Number Verify Button -->
+            </button>
-          <button type="button" class="auth-verify-button" id="verifyAuthButton" style="display: none;">
-            인증번호 확인
-          </button>
-
-          <!-- Submit Buttons -->
-          <div class="form-actions">
-            <button type="button" class="cancel-button" id="cancelButton">취소</button>
-            <button type="submit" class="submit-button" id="submitButton">아이디 찾기</button>
           </div>
         </form>
 
+        <!-- Submit Buttons (Figma: btn_취소, btn_신청) -->
+        <div class="form-actions">
+          <button type="button" class="cancel-button" id="cancelButton">취소</button>
+          <button type="submit" class="submit-button" id="submitButton" form="accountForm">아이디 찾기</button>
+        </div>
+
         <!-- Loading State -->
         <div class="loading-overlay" id="loadingOverlay">
           <div class="spinner"></div>
@@ -122,32 +116,15 @@
     $(document).ready(function() {
       const errorMsg = [[${error}]];
       if (errorMsg) {
-        showAlert(errorMsg, 'error');
+        customPopups.showAlert(errorMsg, 'error');
       }
 
       const paramError = new URL(window.location.href).searchParams.get('error');
       if (paramError) {
-        showAlert(decodeURIComponent(paramError), 'error');
+        customPopups.showAlert(decodeURIComponent(paramError), 'error');
       }
     });
 
-    // Alert 표시 함수
-    function showAlert(message, type = 'info') {
-      const alertContainer = $('#alertContainer');
-      const alertClass = type === 'error' ? 'alert-error' : type === 'success' ? 'alert-success' : 'alert-info';
-      const iconClass = type === 'error' ? 'fa-exclamation-circle' : type === 'success' ? 'fa-check-circle' : 'fa-info-circle';
-
-      const alertHtml = `
-        <div class="account-alert ${alertClass}">
-          <i class="fas ${iconClass}"></i>
-          <span>${message}</span>
-        </div>
-      `;
-
-      alertContainer.html(alertHtml);
-      setTimeout(() => alertContainer.empty(), 5000);
-    }
-
     // 휴대폰 번호 결합 함수
     function combineMobileNumber() {
       const prefix = $('#phonePrefix').val();
@@ -175,7 +152,7 @@
         if (remainingTime <= 0) {
           clearInterval(countdownInterval);
           $('#authTimer').text('시간 초과').css('color', '#FF6B6B');
-          showAlert('입력 시간이 초과되었습니다. 인증번호를 다시 발송해주세요.', 'error');
+          customPopups.showAlert('입력 시간이 초과되었습니다. 인증번호를 다시 발송해주세요.', 'error');
 
           // 필드 활성화
           $('#phonePrefix, #phoneMiddle, #phoneLast').prop('disabled', false);
@@ -198,7 +175,7 @@
       const mobileNumber = combineMobileNumber();
 
       if (!mobileNumber) {
-        showAlert('휴대폰 번호를 올바르게 입력해주세요.', 'error');
+        customPopups.showAlert('휴대폰 번호를 올바르게 입력해주세요.', 'error');
         return;
       }
 
@@ -216,7 +193,7 @@
           $('#loadingOverlay').fadeOut(200);
 
           if (response.valid) {
-            showAlert(response.message || '인증번호가 발송되었습니다.', 'success');
+            customPopups.showAlert(response.message || '인증번호가 발송되었습니다.', 'success');
 
             // 휴대폰 번호 필드 비활성화
             $('#phonePrefix, #phoneMiddle, #phoneLast').prop('disabled', true);
@@ -229,12 +206,12 @@
             isAuthNumberRequested = true;
             startAuthTimer();
           } else {
-            showAlert(response.message || '인증번호 발송에 실패했습니다.', 'error');
+            customPopups.showAlert(response.message || '인증번호 발송에 실패했습니다.', 'error');
           }
         },
         error: function() {
           $('#loadingOverlay').fadeOut(200);
-          showAlert('처리 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
+          customPopups.showAlert('처리 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
         }
       });
     });
@@ -242,14 +219,14 @@
     // 인증번호 확인 버튼
     $('#verifyAuthButton').on('click', function() {
       if (!isAuthNumberRequested) {
-        showAlert('휴대폰 번호 인증을 먼저 진행해주세요.', 'error');
+        customPopups.showAlert('휴대폰 번호 인증을 먼저 진행해주세요.', 'error');
         return;
       }
 
       const authNumber = $('#authNumber').val().trim();
 
       if (authNumber.length !== 6) {
-        showAlert('인증번호 6자리를 입력해주세요.', 'error');
+        customPopups.showAlert('인증번호 6자리를 입력해주세요.', 'error');
         return;
       }
 
@@ -268,7 +245,7 @@
           $('#loadingOverlay').fadeOut(200);
 
           if (response.valid) {
-            showAlert(response.message || '인증이 완료되었습니다.', 'success');
+            customPopups.showAlert(response.message || '인증이 완료되었습니다.', 'success');
 
             // 인증번호 입력 필드 비활성화
             $('#authNumber').prop('disabled', true);
@@ -279,12 +256,12 @@
 
             isAuthVerified = true;
           } else {
-            showAlert(response.message || '인증번호가 일치하지 않습니다.', 'error');
+            customPopups.showAlert(response.message || '인증번호가 일치하지 않습니다.', 'error');
           }
         },
         error: function() {
           $('#loadingOverlay').fadeOut(200);
-          showAlert('처리 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
+          customPopups.showAlert('처리 중 오류가 발생했습니다. 다시 시도해주세요.', 'error');
         }
       });
     });
@@ -295,23 +272,23 @@
 
       const userName = $('#userName').val().trim();
       if (!userName) {
-        showAlert('성명을 입력해주세요.', 'error');
+        customPopups.showAlert('성명을 입력해주세요.', 'error');
         return;
       }
 
       const mobileNumber = combineMobileNumber();
       if (!mobileNumber) {
-        showAlert('휴대폰 번호를 올바르게 입력해주세요.', 'error');
+        customPopups.showAlert('휴대폰 번호를 올바르게 입력해주세요.', 'error');
         return;
       }
 
       if (!isAuthNumberRequested) {
-        showAlert('휴대폰 인증을 먼저 진행해주세요.', 'error');
+        customPopups.showAlert('휴대폰 인증을 먼저 진행해주세요.', 'error');
         return;
       }
 
       if (!isAuthVerified) {
-        showAlert('휴대폰 인증을 완료해주세요.', 'error');
+        customPopups.showAlert('휴대폰 인증을 완료해주세요.', 'error');
         return;
       }
 

src/main/resources/templates/views/apps/login/findIdResult.html

@@ -1,43 +1,65 @@
 <!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kbank_base_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
 <body>
-<section layout:fragment="contentFragment" class="content">
+<section layout:fragment="title">
-    <div class="content_wrap">
+  <div class="page-title-banner">
-        <!-- 타이틀 -->
+    <img th:src="@{/img/img_title_bg.png}" class="title-image">
-        <div class="sub_title2" id="title-find-id">
+    <h1>아이디 찾기</h1>
-            <h2 class="title add5">아이디 찾기</h2>
+  </div>
-        </div>
-
-        <div class="inner i_cs10 h_inner2">
-            <!-- 탭 메뉴 -->
-            <div class="tab-wrap">
-                <div class="tabs">
-                    <div class="tab active" id="tab1">
-                        <div class="form_type">
-
-                            <div class="result_view">
-                                <p class="title">회원님의 아이디는 아래와 같습니다.</p>
-                                <ul>
-                                    <li>
-                                        <span th:text="${foundId.maskedEmailAddr}"></span>
-                                        <th:block th:text="'(' + ${#temporals.format(foundId.createdDate, 'yyyy.MM.dd.')} + ' 가입)'"></th:block>
-                                    </li>
-                                </ul>
-                                <div class="result_info_box">
-                                    <p class="infor">비밀번호가 기억나지 않는 경우에는 <span><a href="/account_recovery?tab=resetPassword">비밀번호 초기화</a></span>를 이용해 주세요.</p>
-                                </div>
-                            </div>
-                            <div class="btn_application btn_top3">
-                                <a href="/login" class="common-btnType-1"><span>로그인</span></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
 </section>
+<th:block layout:fragment="contentFragment">
+  <div class="account-recovery-page">
+    <div class="account-recovery-container">
+      <div class="account-recovery-card">
+        <!-- Tab Navigation -->
+        <div class="account-recovery-tabs">
+          <a href="#" class="tab-link active">아이디찾기</a>
+          <a th:href="@{/account_recovery(tab='resetPassword')}" class="tab-link">비밀번호 초기화</a>
+        </div>
+
+        <!-- Result Content Area -->
+        <div class="account-recovery-result">
+          <div class="result-header">
+            <i class="fas fa-check-circle result-icon"></i>
+            <h2 class="result-title">회원님의 아이디를 찾았습니다.</h2>
+            <p class="result-description" th:if="${#lists.size(foundUsers) > 1}">
+              동일한 정보로 가입된 계정이 <strong th:text="${#lists.size(foundUsers)}">2</strong>개 있습니다.
+            </p>
+          </div>
+
+          <!-- Found Users List -->
+          <div class="found-users-list">
+            <div class="found-user-item" th:each="user, stat : ${foundUsers}">
+              <div class="user-info">
+                <span class="user-email" th:text="${user.maskedEmailAddr}">te***@example.com</span>
+                <span class="user-date">
+                  (<th:block th:text="${#temporals.format(user.createdDate, 'yyyy.MM.dd')}">2024.01.01</th:block> 가입)
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Info Box -->
+          <div class="result-info-box">
+            <p class="info-text">
+              <i class="fas fa-info-circle"></i>
+              비밀번호가 기억나지 않는 경우에는
+              <a th:href="@{/account_recovery(tab='resetPassword')}" class="info-link">비밀번호 초기화</a>를
+              이용해 주세요.
+            </p>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="form-actions">
+          <a th:href="@{/account_recovery(tab='findId')}" class="cancel-button">다시 찾기</a>
+          <a th:href="@{/login}" class="submit-button">로그인</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</th:block>
 </body>
 <th:block layout:fragment="contentScript">
 </th:block>