회원 가입 유형 선택

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

@@ -5318,6 +5318,342 @@ select.form-control {
     transform: rotate(360deg);
   }
 }
+.signup-selection-page {
+  min-height: calc(100vh - 140px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);
+  padding: 64px 24px;
+  position: relative;
+  overflow: hidden;
+}
+.signup-selection-page::before {
+  content: "";
+  position: absolute;
+  top: -30%;
+  right: -15%;
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, #00D4FF 0%, transparent 70%);
+  opacity: 0.08;
+  border-radius: 50%;
+}
+.signup-selection-page::after {
+  content: "";
+  position: absolute;
+  bottom: -25%;
+  left: -10%;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #4B9BFF 0%, transparent 70%);
+  opacity: 0.08;
+  border-radius: 50%;
+}
+@media (max-width: 768px) {
+  .signup-selection-page {
+    padding: 48px 16px;
+  }
+}
+
+.signup-selection-container {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.signup-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+.signup-header .signup-title {
+  font-size: 48px;
+  font-weight: 800;
+  color: #1A1A2E;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+@media (max-width: 768px) {
+  .signup-header .signup-title {
+    font-size: 40px;
+  }
+}
+.signup-header .signup-subtitle {
+  font-size: 18px;
+  color: #64748B;
+  line-height: 1.8;
+  margin: 0;
+}
+.signup-header .signup-subtitle strong {
+  color: #4B9BFF;
+  font-weight: 700;
+}
+@media (max-width: 768px) {
+  .signup-header .signup-subtitle {
+    font-size: 16px;
+  }
+}
+
+.signup-selection-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+  margin-bottom: 48px;
+}
+@media (max-width: 1024px) {
+  .signup-selection-cards {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+}
+
+.signup-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 48px;
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+  border: 2px solid transparent;
+  transition: all all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+}
+.signup-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  opacity: 0;
+  transition: opacity all 0.3s ease;
+}
+.signup-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+  border-color: #4B9BFF;
+}
+.signup-card:hover::before {
+  opacity: 1;
+}
+.signup-card:hover .signup-card-icon {
+  transform: scale(1.1);
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+}
+.signup-card:hover .signup-card-icon i {
+  color: #FFFFFF;
+}
+@media (max-width: 768px) {
+  .signup-card {
+    padding: 40px;
+    min-height: auto;
+  }
+}
+.signup-card.signup-card-featured {
+  border-color: #4B9BFF;
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.signup-card.signup-card-featured::before {
+  opacity: 1;
+}
+.signup-card.signup-card-featured .signup-card-icon {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+}
+.signup-card.signup-card-featured .signup-card-icon i {
+  color: #FFFFFF;
+}
+.signup-card.signup-card-featured .signup-card-btn {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+}
+
+.signup-card-badge {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  color: #FFFFFF;
+  padding: 4px 16px;
+  border-radius: 50px;
+  font-size: 12px;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  z-index: 2;
+}
+
+.signup-card-icon {
+  width: 80px;
+  height: 80px;
+  background: #EFF6FF;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  transition: all all 0.3s ease;
+}
+.signup-card-icon i {
+  font-size: 36px;
+  color: #4B9BFF;
+  transition: color all 0.3s ease;
+}
+@media (max-width: 768px) {
+  .signup-card-icon {
+    width: 64px;
+    height: 64px;
+  }
+  .signup-card-icon i {
+    font-size: 28px;
+  }
+}
+
+.signup-card-content {
+  flex: 1;
+  margin-bottom: 32px;
+}
+.signup-card-content .signup-card-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1A1A2E;
+  margin-bottom: 16px;
+}
+@media (max-width: 768px) {
+  .signup-card-content .signup-card-title {
+    font-size: 24px;
+  }
+}
+.signup-card-content .signup-card-description {
+  font-size: 16px;
+  color: #64748B;
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+.signup-card-features {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.signup-card-features li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 14px;
+  color: #1A1A2E;
+}
+.signup-card-features li i {
+  color: #6BCF7F;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.signup-card-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 16px 24px;
+  background: #EFF6FF;
+  color: #4B9BFF;
+  text-decoration: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  transition: all all 0.3s ease;
+  border: 2px solid transparent;
+  margin-top: auto;
+}
+.signup-card-btn i {
+  font-size: 16px;
+  transition: transform all 0.15s ease;
+}
+.signup-card-btn:hover {
+  background: #4B9BFF;
+  color: #FFFFFF;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+.signup-card-btn:hover i {
+  transform: translateX(4px);
+}
+@media (max-width: 768px) {
+  .signup-card-btn {
+    padding: 16px;
+    font-size: 14px;
+  }
+}
+
+.signup-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  padding: 32px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .signup-navigation {
+    gap: 16px;
+    padding: 24px;
+  }
+}
+
+.signup-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  color: #64748B;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all all 0.3s ease;
+}
+.signup-nav-link i {
+  font-size: 16px;
+  color: #94A3B8;
+  transition: color all 0.3s ease;
+}
+.signup-nav-link:hover {
+  color: #4B9BFF;
+  background: #EFF6FF;
+}
+.signup-nav-link:hover i {
+  color: #4B9BFF;
+}
+
+.signup-nav-separator {
+  color: #E2E8F0;
+  font-size: 14px;
+}
+@media (max-width: 480px) {
+  .signup-nav-separator {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .signup-selection-page {
+    min-height: auto;
+  }
+  .signup-selection-cards {
+    margin-bottom: 40px;
+  }
+}
 .apikey-container {
   max-width: 1280px;
   margin: 0 auto;

src/main/resources/static/sass/main.scss

@@ -38,6 +38,7 @@
 @import 'pages/api-market';
 @import 'pages/documentation';
 @import 'pages/login';
+@import 'pages/signup-selection';
 @import 'pages/mypage';
 @import 'pages/apikey-register';
 @import 'pages/apikey-detail';

src/main/resources/static/sass/pages/_signup-selection.scss

@@ -0,0 +1,390 @@
+// -----------------------------------------------------------------------------
+// Signup Selection Page Styles - Modern Design
+// -----------------------------------------------------------------------------
+
+.signup-selection-page {
+  min-height: calc(100vh - 140px); // Account for header and footer
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, $light-bg 0%, $gray-bg 100%);
+  padding: $spacing-4xl $spacing-lg;
+  position: relative;
+  overflow: hidden;
+
+  // Decorative background elements
+  &::before {
+    content: '';
+    position: absolute;
+    top: -30%;
+    right: -15%;
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, $accent-cyan 0%, transparent 70%);
+    opacity: 0.08;
+    border-radius: $border-radius-circle;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -25%;
+    left: -10%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, $primary-blue 0%, transparent 70%);
+    opacity: 0.08;
+    border-radius: $border-radius-circle;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-3xl $spacing-md;
+  }
+}
+
+.signup-selection-container {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+// ===========================
+// Page Header
+// ===========================
+.signup-header {
+  text-align: center;
+  margin-bottom: $spacing-4xl;
+
+  .signup-title {
+    font-size: $font-size-4xl;
+    font-weight: $font-weight-extrabold;
+    color: $text-dark;
+    margin-bottom: $spacing-md;
+    background: $gradient-primary;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-3xl;
+    }
+  }
+
+  .signup-subtitle {
+    font-size: $font-size-md;
+    color: $text-gray;
+    line-height: $line-height-loose;
+    margin: 0;
+
+    strong {
+      color: $primary-blue;
+      font-weight: $font-weight-bold;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-base;
+    }
+  }
+}
+
+// ===========================
+// Selection Cards Grid
+// ===========================
+.signup-selection-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacing-xl;
+  margin-bottom: $spacing-3xl;
+
+  @media (max-width: $breakpoint-md) {
+    grid-template-columns: 1fr;
+    gap: $spacing-lg;
+  }
+}
+
+// ===========================
+// Signup Card
+// ===========================
+.signup-card {
+  background: $white;
+  border-radius: $border-radius-2xl;
+  padding: $spacing-3xl;
+  box-shadow: $shadow-lg;
+  border: 2px solid transparent;
+  transition: all $transition-base;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: $gradient-primary;
+    opacity: 0;
+    transition: opacity $transition-base;
+  }
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-xl;
+    border-color: $primary-blue;
+
+    &::before {
+      opacity: 1;
+    }
+
+    .signup-card-icon {
+      transform: scale(1.1);
+      background: $gradient-primary;
+
+      i {
+        color: $white;
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-2xl;
+    min-height: auto;
+  }
+
+  // Featured card (organization)
+  &.signup-card-featured {
+    border-color: $primary-blue;
+    box-shadow: $shadow-xl;
+
+    &::before {
+      opacity: 1;
+    }
+
+    .signup-card-icon {
+      background: $gradient-primary;
+
+      i {
+        color: $white;
+      }
+    }
+
+    .signup-card-btn {
+      background: $gradient-primary;
+      color: $white;
+    }
+  }
+}
+
+// ===========================
+// Card Badge (Featured)
+// ===========================
+.signup-card-badge {
+  position: absolute;
+  top: $spacing-lg;
+  right: $spacing-lg;
+  background: $gradient-accent;
+  color: $white;
+  padding: $spacing-xs $spacing-md;
+  border-radius: $border-radius-full;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-bold;
+  box-shadow: $shadow-md;
+  z-index: 2;
+}
+
+// ===========================
+// Card Icon
+// ===========================
+.signup-card-icon {
+  width: 80px;
+  height: 80px;
+  background: $light-bg;
+  border-radius: $border-radius-xl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: $spacing-lg;
+  transition: all $transition-base;
+
+  i {
+    font-size: 36px;
+    color: $primary-blue;
+    transition: color $transition-base;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 64px;
+    height: 64px;
+
+    i {
+      font-size: 28px;
+    }
+  }
+}
+
+// ===========================
+// Card Content
+// ===========================
+.signup-card-content {
+  flex: 1;
+  margin-bottom: $spacing-xl;
+
+  .signup-card-title {
+    font-size: $font-size-2xl;
+    font-weight: $font-weight-bold;
+    color: $text-dark;
+    margin-bottom: $spacing-md;
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: $font-size-xl;
+    }
+  }
+
+  .signup-card-description {
+    font-size: $font-size-base;
+    color: $text-gray;
+    line-height: $line-height-normal;
+    margin-bottom: $spacing-lg;
+  }
+}
+
+// ===========================
+// Card Features List
+// ===========================
+.signup-card-features {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    padding: $spacing-sm 0;
+    font-size: $font-size-sm;
+    color: $text-dark;
+
+    i {
+      color: $accent-green;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// ===========================
+// Card Button
+// ===========================
+.signup-card-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  width: 100%;
+  padding: $spacing-md $spacing-lg;
+  background: $light-bg;
+  color: $primary-blue;
+  text-decoration: none;
+  border-radius: $border-radius-lg;
+  font-weight: $font-weight-semibold;
+  font-size: $font-size-base;
+  transition: all $transition-base;
+  border: 2px solid transparent;
+  margin-top: auto;
+
+  i {
+    font-size: 16px;
+    transition: transform $transition-fast;
+  }
+
+  &:hover {
+    background: $primary-blue;
+    color: $white;
+    transform: translateY(-2px);
+    box-shadow: $shadow-md;
+
+    i {
+      transform: translateX(4px);
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    padding: $spacing-md;
+    font-size: $font-size-sm;
+  }
+}
+
+// ===========================
+// Navigation Links
+// ===========================
+.signup-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $spacing-lg;
+  padding: $spacing-xl;
+  background: $white;
+  border-radius: $border-radius-xl;
+  box-shadow: $shadow-md;
+  flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: $spacing-md;
+    padding: $spacing-lg;
+  }
+}
+
+.signup-nav-link {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  color: $text-gray;
+  text-decoration: none;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  border-radius: $border-radius-md;
+  transition: all $transition-base;
+
+  i {
+    font-size: 16px;
+    color: $text-light;
+    transition: color $transition-base;
+  }
+
+  &:hover {
+    color: $primary-blue;
+    background: $light-bg;
+
+    i {
+      color: $primary-blue;
+    }
+  }
+}
+
+.signup-nav-separator {
+  color: $border-gray;
+  font-size: $font-size-sm;
+
+  @media (max-width: $breakpoint-xs) {
+    display: none;
+  }
+}
+
+// ===========================
+// Responsive Adjustments
+// ===========================
+@media (max-width: $breakpoint-sm) {
+  .signup-selection-page {
+    min-height: auto;
+  }
+
+  .signup-selection-cards {
+    margin-bottom: $spacing-2xl;
+  }
+}

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

@@ -2,66 +2,72 @@
 <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}">
+      layout:decorate="~{layout/kjbank_base_layout}">
 <body>
-<section layout:fragment="contentFragment" class="content">
+<th:block layout:fragment="contentFragment">
-    <div class="content_wrap">
+  <div class="signup-selection-page">
-        <div class="sub_title2">
+    <div class="signup-selection-container">
-            <h2 class="title add3">회원가입</h2>
+      <!-- Page Header -->
-        </div>
+      <div class="signup-header">
-        <div class="inner i_cs2">
+        <h1 class="signup-title">회원가입</h1>
-            <div class="con_title">
+        <p class="signup-subtitle">
-                <p>Kbank API Portal을 사용하기 위해<br>
+          광주은행 API Portal을 사용하기 위해<br>
-                    <span class="bold">회원가입</span>해 주세요.
+          <strong>회원가입</strong>해 주세요.
-                </p>
+        </p>
-            </div>
+      </div>
 
-            <div class="member_list">
+      <!-- Selection Cards -->
-                <div class="mb_group1">
+      <div class="signup-selection-cards">
-                    <a th:href="@{/signup/portalUser}" class="signup-btn">
+        <!-- Individual Signup Card -->
-                        <span>개인회원가입</span>
+        <div class="signup-card">
-                    </a>
+          <div class="signup-card-icon">
-                </div>
+            <i class="fas fa-user"></i>
-                <div class="mb_group2">
+          </div>
-                    <a th:href="@{/signup/portalOrg}" class="signup-btn">
+          <div class="signup-card-content">
-                        <span>법인회원가입</span>
+            <h3 class="signup-card-title">개인회원가입</h3>
-                    </a>
+            <p class="signup-card-description">
-                </div>
+              개인 개발자 또는 개인 사업자를 위한 회원가입
-            </div>
+            </p>
-
+          </div>
-            <div class="login_list m-only">
+          <a th:href="@{/signup/portalUser}" class="signup-card-btn">
-                <ul>
+            <span>개인회원 가입하기</span>
-                    <li>
+            <i class="fas fa-arrow-right"></i>
-                        <a th:href="@{/}">
+          </a>
-                            <img th:src="@{/img/icon/icon_home3.png}" alt=""> 홈으로
-                        </a>
-                    </li>
-                    <li class="line">|</li>
-                    <li>
-                        <a th:href="@{/login}">
-                            <img th:src="@{/img/icon/icon_login2.png}" alt=""> 로그인 하기
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <div class="login_list pc-only">
-                <ul>
-                    <li>
-                        <a th:href="@{/}">
-                            <img th:src="@{/img/icon/icon_home.png}" alt=""> 홈으로
-                        </a>
-                    </li>
-                    <li class="line">|</li>
-                    <li>
-                        <a th:href="@{/login}">
-                            <img th:src="@{/img/icon/icon_login.png}" alt=""> 로그인 하기
-                        </a>
-                    </li>
-                </ul>
-            </div>
         </div>
+
+        <!-- Organization Signup Card -->
+        <div class="signup-card">
+          <div class="signup-card-icon">
+            <i class="fas fa-building"></i>
+          </div>
+          <div class="signup-card-content">
+            <h3 class="signup-card-title">법인회원가입</h3>
+            <p class="signup-card-description">
+              기업 및 법인 사업자를 위한 회원가입
+            </p>
+          </div>
+          <a th:href="@{/signup/portalOrg}" class="signup-card-btn">
+            <span>법인회원 가입하기</span>
+            <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+
+      <!-- Navigation Links -->
+      <div class="signup-navigation">
+        <a th:href="@{/}" class="signup-nav-link">
+          <i class="fas fa-home"></i>
+          <span>홈으로</span>
+        </a>
+        <span class="signup-nav-separator">|</span>
+        <a th:href="@{/login}" class="signup-nav-link">
+          <i class="fas fa-sign-in-alt"></i>
+          <span>로그인 하기</span>
+        </a>
+      </div>
     </div>
-</section>
+  </div>
+</th:block>
 <th:block layout:fragment="script">
     <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
     <script th:src="@{/js/daterangepicker.js}"></script>
@@ -70,11 +76,8 @@
 </th:block>
 <th:block layout:fragment="contentScript">
     <script>
-        $(function () {
+        // Modern signup selection page - no custom JS needed
-            $('.mb_group1, .mb_group2').on('click', function () {
+        // Card interactions handled by CSS and standard anchor tags
-                window.location.href = $(this).find('a').attr('href');
-            });
-        });
     </script>
 </th:block>
 </body>