로그인 이후 스타일 적용

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

@@ -1225,6 +1225,114 @@ body {
     display: none;
   }
 }
+.header-user-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 6px;
+}
+.header-user-info .user-identity {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.header-user-info .user-identity .user-icon {
+  width: 16px;
+  height: 18px;
+  display: block;
+}
+.header-user-info .user-identity .user-name {
+  font-family: "Noto Sans CJK KR", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: #515961;
+  white-space: nowrap;
+}
+.header-user-info .divider {
+  font-size: 8px;
+  color: var(--text-gray);
+  line-height: 1;
+}
+.header-user-info .header-link {
+  font-family: "Noto Sans CJK KR", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: #515961;
+  text-decoration: none;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+.header-user-info .header-link:hover {
+  color: var(--primary-blue);
+}
+.header-user-info .mypage-dropdown {
+  position: relative;
+}
+.header-user-info .mypage-dropdown .mypage-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 200px;
+  background: var(--white);
+  border: 1px solid var(--border-gray);
+  border-radius: 12px;
+  box-shadow: var(--shadow-xl);
+  padding: 8px 0;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 100;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li {
+  margin: 0;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 24px;
+  color: var(--text-dark);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a i {
+  font-size: 14px;
+  width: 16px;
+  text-align: center;
+}
+.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
+.header-user-info .mypage-dropdown.active .mypage-dropdown-menu {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 768px) {
+  .header-user-info {
+    display: none;
+  }
+}
 .global-footer {
   background: #1A1A2E;
   color: #FFFFFF;

src/main/resources/static/img/user_icon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.33301 8.4209C11.3829 8.4209 14.6659 11.5629 14.666 15.4385C14.666 15.7484 14.4154 15.9998 14.1055 16H14.0547C13.7446 16 13.4932 15.7485 13.4932 15.4385C13.4931 12.183 10.7349 9.54395 7.33301 9.54395C3.93135 9.5442 1.1739 12.1831 1.17383 15.4385C1.17383 15.7485 0.922359 16 0.612305 16H0.561523C0.251638 15.9998 0 15.7484 0 15.4385C7.26983e-05 11.563 3.28337 8.42115 7.33301 8.4209ZM7.62695 0C9.89485 0 11.7333 1.75937 11.7334 3.92969C11.7334 6.10007 9.8949 7.85938 7.62695 7.85938C5.3591 7.85927 3.52051 6.10001 3.52051 3.92969C3.52059 1.75943 5.35915 0.000103665 7.62695 0ZM7.62695 1.12305C6.00713 1.12315 4.69441 2.37954 4.69434 3.92969C4.69434 5.4799 6.00708 6.7372 7.62695 6.7373C9.24692 6.7373 10.5605 5.47996 10.5605 3.92969C10.5605 2.37948 9.24687 1.12305 7.62695 1.12305Z" fill="#515961"/>
+</svg>

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

@@ -822,3 +822,131 @@ body {
   }
 
 }
+
+// ===========================
+// Header User Info (Authenticated State)
+// ===========================
+.header-user-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 6px;
+
+  .user-identity {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    .user-icon {
+      width: 16px;
+      height: 18px;
+      display: block;
+    }
+
+    .user-name {
+      font-family: 'Noto Sans CJK KR', sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      color: #515961;
+      white-space: nowrap;
+    }
+  }
+
+  .divider {
+    font-size: 8px;
+    color: var(--text-gray);
+    line-height: 1;
+  }
+
+  .header-link {
+    font-family: 'Noto Sans CJK KR', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    color: #515961;
+    text-decoration: none;
+    white-space: nowrap;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: var(--primary-blue);
+    }
+  }
+
+  .mypage-dropdown {
+    position: relative;
+
+    .mypage-toggle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .mypage-dropdown-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      min-width: 200px;
+      background: var(--white);
+      border: 1px solid var(--border-gray);
+      border-radius: $border-radius-lg;
+      box-shadow: var(--shadow-xl);
+      padding: $spacing-sm 0;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: all 0.3s ease;
+      z-index: $z-index-dropdown;
+
+      .mypage-menu-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          margin: 0;
+
+          a {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: $spacing-sm $spacing-lg;
+            color: var(--text-dark);
+            text-decoration: none;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-medium;
+            transition: all 0.3s ease;
+
+            i {
+              font-size: 14px;
+              width: 16px;
+              text-align: center;
+            }
+
+            &:hover {
+              background: var(--light-bg);
+              color: var(--primary-blue);
+            }
+          }
+        }
+      }
+    }
+
+    &.active .mypage-dropdown-menu {
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+// Mobile responsive
+@media (max-width: 768px) {
+  .header-user-info {
+    display: none; // Hide on mobile, use drawer instead
+  }
+}

src/main/resources/templates/views/apps/main/index.html

@@ -1,476 +1,372 @@
 <!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_index_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_index_layout}">
 
 
 <body>
-<section layout:fragment="contentFragment" class="content main">
-  <script th:src="@{/js/htmx.min.js}"></script>
-  <!-- main slick -->
-  <div class="slider-container">
-    <div class="slider m-only">
-      <div class="slider_box">
-
-        <img th:src="@{/img/img_mainslick_m.png}" alt="슬라이드 1">
-        <div class="slick_txt">
-          <p>디지털 금융 리더 <span>케이뱅크</span>가<br/>새로운 비즈니스 기회를<br/>제공합니다.</p>
+<th:block layout:fragment="contentFragment">
+  <section class="hero-section">
+    <div class="hero-patterns">
+      <div class="pattern-circle pattern-1"></div>
+      <div class="pattern-circle pattern-2"></div>
+      <div class="pattern-dots"></div>
+    </div>
+    <div class="container">
+      <div class="hero-content">
+        <div class="hero-badge">
+          <span class="badge-icon">🚀</span>
+          <span>Wa bank 생태계에 오신 것을 환영합니다!</span>
         </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick2_m.png}" alt="슬라이드 2">
-        <div class="slick_txt">
-          <p>차별화된 <span>API와<br> 편리한 테스트 환경</span>을<br> 지원합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick3_m.png}" alt="슬라이드 3">
-        <div class="slick_txt">
-          <p><span>디지털 금융 혁신</span>을<br> 케이뱅크가<br> 함께합니다</p>
+        <h1 class="main-headline">
+          <span class="headline-wa">Wa한</span> 금융 혁신,<br>
+          여러분의 아이디어로 시작됩니다
+        </h1>
+        <h2 class="sub-headline">
+          광주은행 오픈 API로 새로운 금융 서비스를 만들어보세요.<br>
+          안전하고 빠르게, 그리고 쉽게 연동할 수 있습니다.
+        </h2>
+        <div class="hero-buttons">
+          <a href="/apis" class="btn btn-primary">
+            <i class="fas fa-code"></i> API 둘러보기
+          </a>
+          <a href="#get-started" class="btn btn-secondary">
+            <i class="fas fa-play"></i> 5분 만에 시작하기
+          </a>
         </div>
       </div>
     </div>
-    <div class="slider pc-only">
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick_pc.png}" alt="슬라이드 1">
-        <div class="slick_txt">
-          <p><span>케이뱅크</span>가 새로운 비즈니스<br> 기회를 제공합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick2_pc.png}" alt="슬라이드 2">
-        <div class="slick_txt">
-          <p>차별화된 <span>API와</span><br/>
-            <span>편리한 테스트 환경</span>을<br/>지원합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick3_pc.png}" alt="슬라이드 3">
-        <div class="slick_txt">
-          <p><span>디지털 금융 혁신</span>을<br>케이뱅크가<br>함께합니다</p>
-        </div>
-      </div>
-    </div>
-    <button class="slick-prev" aria-label="Previous" type="button">이전</button>
-    <button class="slick-next" aria-label="Next" type="button">다음</button>
-    <ul class="slick-dots">
-      <li>
-        <button type="button">1</button>
-      </li>
-      <li>
-        <button type="button">2</button>
-      </li>
-      <li>
-        <button type="button">3</button>
-      </li>
-    </ul>
-  </div>
-  <!-- // main slick -->
+  </section>
 
-  <div class="main-container">
-    <div class="search_type">
-      <form th:action="@{/apis}" id="searchForm" method="get">
-        <div class="search-container">
-          <input type="text" name="keyword" class="search-box" id="search-box" placeholder="어떤 API를 찾고 계신가요?">
-          <button class="search-button" type="submit"></button>
-        </div>
-      </form>
-    </div>
-    <div class="hashtag">
-      <ul>
-        <li th:each="tag: ${hashtags}"><a href="#" th:text="${tag}">#인증</a></li>
-      </ul>
-    </div>
-
-    <div class="main_keyword">
-      <div class="api_tit">
-        <h2>가장 많이 찾는 API</h2>
-        <p class="total_view">
-          <a href="/apis">전체보기</a>
-        </p>
-      </div>
-      <div class="api_keyword">
-        <ul class="keyword_list tab_list">
-          <li>
-            <a href="#"
-               hx-get="/api_fragments"
-               hx-target="#api_spec_list"
-               hx-trigger="click"
-               onclick="setActive(this)">전체<span class="number" th:text="${totalApiCount}"></span></a>
-          </li>
-          <li th:each="item : ${services}">
-            <a href="#"
-               th:hx-get="@{/api_fragments(id=${item.id})}"
-               hx-target="#api_spec_list"
-               hx-trigger="click"
-               onclick="setActive(this)">
-              [[${item.groupName}]]<span class="number" th:text="${item.apiGroupApiList.size()}"></span>
-            </a>
-          </li>
-        </ul>
-        <div class="more_type m-only">
-          <button class="showmore" type="button">
-            <img th:src="@{/img/icon/icon_more_btn.png}" alt="더보기 버튼">
-          </button>
-        </div>
-        <div class="more_type pc-only">
-          <button class="showmore" type="button">
-            <img th:src="@{/img/icon/icon_more_btn2.png}" alt="더보기 버튼">
-          </button>
-        </div>
-      </div>
-
-      <div class="api_info_container box_list" id="api_spec_list">
-        <div class="api_info_box" th:each="api : ${apis}" th:data-href="@{/apis/detail(id=${api.apiId})}">
-          <div class="api_list" th:data-href="@{/apis/detail(id=${api.apiId})}">
-            <p class="txt1" th:text="${api.apiName}"></p>
-            <p class="txt2" th:text="${api.apiSimpleDescription}"></p>
+  <!-- API 검색 섹션 -->
+  <section class="api-search-section">
+    <div class="container">
+      <div class="search-container">
+        <form th:action="@{/apis}" method="get" class="search-form">
+          <div class="search-wrapper">
+            <input type="text" class="search-input" placeholder="원하는 API를 검색해보세요" id="apiSearchInput" name="keyword">
+            <button class="search-button" type="submit">
+              <i class="fas fa-search"></i>
+              <span>검색하기</span>
+            </button>
           </div>
-          <div class="api_img" style="height: 48px;">
-            <a th:href="@{/apis/detail(id=${api.apiId})}" class="btn btn-primary">
-              <img th:if="${#strings.isEmpty(api.mainIcon) == false}" th:src="${api.mainIcon}" alt="">
-            </a>
+        </form>
+        <div class="hashtag-suggestions" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
+          <span class="hashtag-label">추천 검색어:</span>
+          <a href="#" class="hashtag" th:each="tag : ${hashtags}"
+             th:data-search="${tag}"
+             th:text="${'#' + tag}">
+          </a>
+        </div>
+        <!-- Fallback hashtags if no hashtags from controller -->
+        <div class="hashtag-suggestions" th:unless="${hashtags != null and not #lists.isEmpty(hashtags)}">
+          <span class="hashtag-label">추천 검색어:</span>
+          <a href="#" class="hashtag" data-search="계좌조회">#계좌조회</a>
+          <a href="#" class="hashtag" data-search="송금API">#송금API</a>
+          <a href="#" class="hashtag" data-search="실시간결제">#실시간결제</a>
+          <a href="#" class="hashtag" data-search="오픈뱅킹">#오픈뱅킹</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="api-showcase">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="title-highlight">인기 API</span>로 바로 시작하세요
+        </h2>
+        <p class="section-subtitle">가장 많이 사용되는 API를 확인하고 바로 테스트해보세요</p>
+      </div>
+      <div class="api-grid">
+        <!-- Dynamic API Cards from Controller (max 4) -->
+        <div th:each="api, iterStat : ${apis}"
+             th:if="${iterStat.index < 4}"
+             class="api-card"
+             th:classappend="${iterStat.index == 0} ? 'api-card-popular' : (${iterStat.index == 3} ? 'api-card-new' : '')">
+
+          <!-- Show badge for first (인기) and last (NEW) items -->
+          <div th:if="${iterStat.index == 0}" class="api-badge">인기</div>
+          <div th:if="${iterStat.index == 3}" class="api-badge new">NEW</div>
+
+          <!-- API Icon - using different icons based on index or API type -->
+          <div class="api-icon">
+            <!-- Icon selection based on API name or service type -->
+            <i th:if="${api.apiName != null}"
+               th:class="${#strings.containsIgnoreCase(api.apiName, '계좌') or #strings.containsIgnoreCase(api.apiName, '조회')} ? 'fas fa-wallet' :
+                        (${#strings.containsIgnoreCase(api.apiName, '송금') or #strings.containsIgnoreCase(api.apiName, '이체')} ? 'fas fa-exchange-alt' :
+                        (${#strings.containsIgnoreCase(api.apiName, '카드') or #strings.containsIgnoreCase(api.apiName, '결제')} ? 'fas fa-credit-card' :
+                        (${#strings.containsIgnoreCase(api.apiName, 'AI') or #strings.containsIgnoreCase(api.apiName, '분석')} ? 'fas fa-chart-line' :
+                        (${iterStat.index == 0} ? 'fas fa-wallet' :
+                        (${iterStat.index == 1} ? 'fas fa-exchange-alt' :
+                        (${iterStat.index == 2} ? 'fas fa-credit-card' : 'fas fa-chart-line'))))))"></i>
+          </div>
+
+          <!-- API Name -->
+          <h3 class="api-name" th:text="${api.apiName}">API 이름</h3>
+
+          <!-- API Description -->
+          <p class="api-description" th:text="${api.apiSimpleDescription != null ? api.apiSimpleDescription : api.description}">API 설명</p>
+
+          <!-- API Features/Method Info -->
+          <div class="api-features">
+            <span class="feature-tag" th:if="${api.apiMethod != null}" th:text="${api.apiMethod}">GET</span>
+            <span class="feature-tag" th:if="${api.service != null}" th:text="${api.service}">서비스</span>
+          </div>
+
+          <!-- Test Link -->
+          <a th:href="@{/apis/detail(id=${api.apiId})}" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+
+        <!-- Fallback: Show static cards if no APIs from controller -->
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card api-card-popular">
+          <div class="api-badge">인기</div>
+          <div class="api-icon">
+            <i class="fas fa-wallet"></i>
+          </div>
+          <h3 class="api-name">계좌 조회 API</h3>
+          <p class="api-description">실시간 잔액 조회와 거래내역을 안전하게 확인</p>
+          <div class="api-features">
+            <span class="feature-tag">실시간</span>
+            <span class="feature-tag">OAuth 2.0</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card">
+          <div class="api-icon">
+            <i class="fas fa-exchange-alt"></i>
+          </div>
+          <h3 class="api-name">송금 API</h3>
+          <p class="api-description">간편하고 안전한 송금 서비스 구현</p>
+          <div class="api-features">
+            <span class="feature-tag">간편송금</span>
+            <span class="feature-tag">실명확인</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card">
+          <div class="api-icon">
+            <i class="fas fa-credit-card"></i>
+          </div>
+          <h3 class="api-name">카드 결제 API</h3>
+          <p class="api-description">온/오프라인 결제 솔루션 통합</p>
+          <div class="api-features">
+            <span class="feature-tag">PG연동</span>
+            <span class="feature-tag">간편결제</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card api-card-new">
+          <div class="api-badge new">NEW</div>
+          <div class="api-icon">
+            <i class="fas fa-chart-line"></i>
+          </div>
+          <h3 class="api-name">AI 신용평가 API</h3>
+          <p class="api-description">머신러닝 기반 실시간 신용 분석</p>
+          <div class="api-features">
+            <span class="feature-tag">AI/ML</span>
+            <span class="feature-tag">실시간</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 정보 섹션 -->
+  <section class="info-section">
+    <div class="container">
+      <div class="info-wrapper">
+        <div class="image-container">
+          <div class="image-placeholder">
+            <i class="fas fa-chart-line"></i>
+            <span>금융 혁신</span>
           </div>
         </div>
-      </div>
-    </div>
 
-    <div class="main_con">
-      <p class="con_tit m-only"><img th:src="@{/img/img_con_tit.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_tit pc-only"><img th:src="@{/img/img_con_tit2.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_img m-only"><img th:src="@{/img/img_mask_group.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_img pc-only"><img th:src="@{/img/img_mask_group2.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_txt m-only">
-        <span>Kbank API Portal</span>은 기업이 금융서비스를<br>
-        편리하게 개발할 수 있도록 차별화된<br>
-        API와 테스트환경을 제공합니다.<br>
-      </p>
-      <p class="con_txt pc-only">
-        <span>Kbank API Portal</span>은 기업이 금융서비스를 편리하게 개발할 수 있도록 차별화된 API와 테스트환경을 제공합니다.
-      </p>
-      <div class="main_btn">
-        <a th:href="@{/intro}" class="common_btn_type_5"><span>처음 만나는 케이뱅크 API</span></a>
-        <a th:href="@{/partnership}" class="common_btn_type_5 m_btn"><span>사업 제휴 문의</span></a>
-      </div>
-    </div>
-  </div>
-
-  <div class="tiding_box">
-    <div class="api_type">
-      <div class="api_tiding">
-        <div class="api_tit">
-          <h2>새로운 케이뱅크 API 소식을<br> 만나보세요</h2>
-          <p class="total_view">
-            <a href="/portalnotice">전체보기</a>
+        <div class="info-content">
+          <p class="highlight-text">
+            광주은행 <span class="text-accent">API Portal</span>은 기업이 금융서비스를 편리하게 개발할 수 있도록<br>
+            차별화된 API와 테스트환경을 제공합니다.
           </p>
-        </div>
-        <div class="api_tiding_list">
-          <ul>
-            <li th:each="notice : ${portalNotices}">
-              <a th:href="@{/portalnotice/detail(id=${notice.id})}">
-                <p th:text="${notice.noticeSubject}"></p>
-              </a>
-              <span th:text="${#temporals.format(notice.createdDate, 'yyyy.MM.dd')}"></span>
-            </li>
-          </ul>
+
+          <div class="action-buttons">
+            <a href="#" class="action-btn">
+              <span class="btn-number">1</span>
+              <span class="btn-text">처음 만나는 광주뱅크 API</span>
+              <i class="fas fa-arrow-right"></i>
+            </a>
+            <a href="#" class="action-btn">
+              <span class="btn-number">2</span>
+              <span class="btn-text">사업 제휴 문의</span>
+              <i class="fas fa-arrow-right"></i>
+            </a>
+          </div>
         </div>
       </div>
-      <div class="api_info">
-        <ul>
-          <li class="img1">
-            <a th:href="@{/faq_list}">
-              <p>FAQ</p>
-              <span>자주 묻는 질문과 답변을<br> 확인해보세요</span>
-              <img th:src="@{/img/icon/icon_petals01.png}" alt="faq 이미지">
-            </a>
-          </li>
-          <li class="img2">
-            <a th:href="@{/inquiry}">
-              <p>Q&amp;A</p>
-              <span>문의사항에<br> 친절하게 답변 드리겠습니다</span>
-              <img th:src="@{/img/icon/icon_petals02.png}" alt="Q&A 이미지">
-            </a>
-          </li>
-          <li class="img3">
-            <a th:href="@{/partnership}">
-              <p>사업제휴</p>
-              <span>온라인 비즈니스 혁신을 위한<br> 사업 제안을 환영합니다</span>
-              <img th:src="@{/img/icon/icon_petals03.png}" alt="사업제휴 이미지">
-            </a>
-          </li>
-        </ul>
+    </div>
+  </section>
+
+  <!-- 지원 센터 섹션 -->
+  <section class="support-center">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          도움이 <span class="title-highlight">필요하신가요?</span>
+        </h2>
+        <p class="section-subtitle">다양한 방법으로 필요한 정보를 찾아보세요</p>
+      </div>
+      <div class="support-grid">
+        <a th:href="@{/portalnotice}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-bullhorn"></i>
+          </div>
+          <h3>공지사항</h3>
+          <p>최신 업데이트와 중요한 소식을 확인하세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
+        <a th:href="@{/faq_list}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-question-circle"></i>
+          </div>
+          <h3>자주 묻는 질문</h3>
+          <p>자주 묻는 질문과 답변을 빠르게 찾아보세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
+        <a th:href="@{/inquiry}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-comments"></i>
+          </div>
+          <h3>문의하기</h3>
+          <p>추가 도움이 필요하시면 직접 문의해주세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="api_count">
-    <div class="api_total_box">
-      <p class="txt m-only">우리곁의 수많은 서비스들이<br> <em>케이뱅크API</em>와<br> 함께하고 있습니다</p>
-      <p class="txt pc-only">우리곁의 수많은 서비스들이<br> <em>케이뱅크API와 함께</em>하고 있습니다</p>
-      <div class="api_total">
-        <ul>
-          <li>
-            <img th:src="@{/img/icon/icon_api01.png}" alt="서비스 이용 수">
-            <div class="api_num">
-              <p th:text="${serviceCount}"></p>
-              <span>서비스 이용</span>
-            </div>
-          </li>
-          <li>
-            <img th:src="@{/img/icon/icon_api02.png}" alt="API 이용건수">
-            <div class="api_num">
-              <p th:text="${selectedApiCount}"></p>
-              <span>API 이용</span>
-            </div>
-          </li>
-          <li>
-            <img th:src="@{/img/icon/icon_api03.png}" alt="API 활용기업">
-            <div class="api_num">
-              <p th:text="${approvedOrgCount}"></p>
-              <span>API 활용 기업</span>
-            </div>
-          </li>
-        </ul>
+  <!-- API 활용 현황 섹션 -->
+  <section class="api-stats-section">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          우리곁의 수많은 서비스들이<br>
+          <span class="title-highlight">광주은행 API</span>와 함께하고 있습니다
+        </h2>
+      </div>
+      <div class="stats-cards">
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-store"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${serviceCount != null ? serviceCount : 0}" th:text="${serviceCount != null ? serviceCount : 0}">0</div>
+            <div class="stat-label">서비스 이용 수</div>
+            <div class="stat-description">다양한 분야의 서비스가 활용중</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-exchange-alt"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${totalApiCount != null ? totalApiCount : 0}" th:text="${totalApiCount != null ? totalApiCount : 0}">0</div>
+            <div class="stat-label">API 이용 건수</div>
+            <div class="stat-description">일일 평균 API 호출 수</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-building"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${approvedOrgCount != null ? approvedOrgCount : 0}" th:text="${approvedOrgCount != null ? approvedOrgCount : 0}">0</div>
+            <div class="stat-label">API 활용 기업</div>
+            <div class="stat-description">혁신적인 파트너사와 함께</div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-
-  <div id="main_bg"></div>
-</section>
+  </section>
+</th:block>
 </body>
 <th:block layout:fragment="contentScript">
-  <script th:inline="javascript">
-    $(document).ready(function() {
-      // 기존 success 메시지 처리
-      var successMsg = [[${success}]];
-      console.log("Success message:", successMsg);
-      if (successMsg) {
-        console.log("Showing alert");
-        customPopups.showAlert(successMsg);
-      }
-
-      // 이메일 인증 체크
-      const emailVerificationRequired = [[${session.emailVerificationRequired}]];
-      if (emailVerificationRequired) {
-        const emailVerifyMsg = /*[[${session.success}]]*/ '';
-        const redirectUrl = /*[[${session.redirectUrl}]]*/ '';
-
-        console.log('emailVerifyMsg:', emailVerifyMsg);
-        console.log('redirectUrl:', redirectUrl);
-
-        customPopups.showAlert(emailVerifyMsg);
-        $('#customAlertOkButton').off('click.custom').on('click.custom', function () {
-          customPopups.hideAlert('#customAlert');
-          window.location.href = redirectUrl;
-        });
-        return;  // 다른 체크 중단
-      }
-
-      // 장기미사용 계정 체크
-      const dormantAccount = [[${session.dormantAccount}]];
-      if (dormantAccount) {
-        const dormantMsg = /*[[${session.success}]]*/ '';
-        const redirectUrl = /*[[${session.redirectUrl}]]*/ '';
-
-        console.log('dormantMsg:', dormantMsg);
-        console.log('redirectUrl:', redirectUrl);
-
-        customPopups.showAlert(dormantMsg);
-        $('#customAlertOkButton').off('click.custom').on('click.custom', function () {
-          customPopups.hideAlert('#customAlert');
-          window.location.href = redirectUrl;
-        });
-        return;  // 다른 체크 중단
-      }
-
-      // 비밀번호 만료 체크 추가
-      const passwordExpired = [[${session.passwordExpired}]];
-      if (passwordExpired) {
-        const pwdExpiredMsg = /*[[${session.success}]]*/ '';
-        const formattedMsg = pwdExpiredMsg.replace(/\n/g, '<br>');
-        const redirectUrl = /*[[${session.redirectUrl}]]*/ '';
-
-        console.log('pwdExpiredMsg:', pwdExpiredMsg);
-        console.log('redirectUrl:', redirectUrl);
-
-        $('#customAlertMessage').html(formattedMsg);
-        $('#customAlert').css('display','flex');
-
-        $('#customAlertOkButton').off('click.custom').on('click.custom', function () {
-          customPopups.hideAlert('#customAlert');
-          window.location.href = redirectUrl;
-        });
-      }
-    });
-  </script>
   <script>
-    function setActive(element) {
-      // Remove 'active' class from all links
-      document.querySelectorAll('.keyword_list a').forEach(el => {
-        el.classList.remove('active');
-      });
-      // Add 'active' class to clicked link
-      element.classList.add('active');
-    }
+    // 숫자 카운트업 애니메이션
+    document.addEventListener('DOMContentLoaded', function() {
+      const observerOptions = {
+        threshold: 0.5,
+        rootMargin: '0px 0px -100px 0px'
+      };
 
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const ITEMS_PER_PAGE = 4;
-      let isExpanded = false;
+      const animateNumbers = (entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const numbers = entry.target.querySelectorAll('.stat-number');
 
-      // 더보기 버튼 초기화
-      function initMoreButton() {
-        const mobileMoreBtn = document.querySelector('.more_type.m-only .showmore');
-        const pcMoreBtn = document.querySelector('.more_type.pc-only .showmore');
-        const apiInfoBoxes = document.querySelectorAll('.api_info_box');
+            numbers.forEach(number => {
+              const target = parseInt(number.getAttribute('data-target'));
+              const duration = 2000; // 2초
+              const increment = target / (duration / 16);
+              let current = 0;
 
-        // 5개 미만이면 더보기 버튼 숨기기
-        const mobileMoreContainer = document.querySelector('.more_type.m-only');
-        const pcMoreContainer = document.querySelector('.more_type.pc-only');
+              const updateNumber = () => {
+                current += increment;
+                if (current < target) {
+                  number.textContent = Math.floor(current).toLocaleString('ko-KR');
+                  requestAnimationFrame(updateNumber);
+                } else {
+                  number.textContent = target.toLocaleString('ko-KR');
+                }
+              };
 
-        console.log('더보기 버튼 초기화:', {
-          항목개수: apiInfoBoxes.length,
-          보여질상태: apiInfoBoxes.length >= 5 ? 'block' : 'none'
-        });
+              updateNumber();
+            });
 
-        // 더보기 버튼 표시 여부 설정
-        if (apiInfoBoxes.length < 5) {
-          mobileMoreContainer.style.setProperty('display', 'none', 'important');
-          pcMoreContainer.style.setProperty('display', 'none', 'important');
-        } else {
-          mobileMoreContainer.style.setProperty('display', 'block', 'important');
-          pcMoreContainer.style.setProperty('display', 'block', 'important');
-        }
-
-        // 초기 상태 설정
-        updateApiListVisibility();
-
-        // 더보기 버튼 이벤트 리스너 설정
-        [mobileMoreBtn, pcMoreBtn].forEach(btn => {
-          if (btn) {
-            btn.removeEventListener('click', handleMoreClick);
-            btn.addEventListener('click', handleMoreClick);
+            observer.unobserve(entry.target);
           }
         });
+      };
+
+      const observer = new IntersectionObserver(animateNumbers, observerOptions);
+      const statsSection = document.querySelector('.api-stats-section');
+
+      if (statsSection) {
+        observer.observe(statsSection);
       }
 
-      function handleMoreClick(e) {
-        e.preventDefault();
-        console.log('더보기 버튼 클릭');
-        isExpanded = !isExpanded;  // 상태 토글
+      // API 검색 기능
+      const searchInput = document.getElementById('apiSearchInput');
+      const searchForm = document.querySelector('.search-form');
+      const hashtags = document.querySelectorAll('.hashtag');
 
-        // 버튼 이미지/텍스트 변경
-        const mobileMoreBtn = document.querySelector('.more_type.m-only .showmore img');
-        const pcMoreBtn = document.querySelector('.more_type.pc-only .showmore img');
-        if (mobileMoreBtn) {
-          mobileMoreBtn.alt = isExpanded ? "접기 버튼" : "더보기 버튼";
-        }
-        if (pcMoreBtn) {
-          pcMoreBtn.alt = isExpanded ? "접기 버튼" : "더보기 버튼";
-        }
-
-        updateApiListVisibility();
-      }
-
-      // API 리스트 표시 상태 업데이트
-      function updateApiListVisibility() {
-        const apiInfoBoxes = document.querySelectorAll('.api_info_box');
-        const endIndex = isExpanded ? apiInfoBoxes.length : ITEMS_PER_PAGE;
-
-        console.log('업데이트 - API 목록:', {
-          총개수: apiInfoBoxes.length,
-          표시상태: isExpanded ? '전체표시' : '일부표시',
-          표시할개수: endIndex
-        });
-
-        apiInfoBoxes.forEach((box, index) => {
-          box.style.display = index < endIndex ? 'block' : 'none';
-        });
-      }
-
-      // HTMX 로드 완료 이벤트 리스너
-      document.body.addEventListener('htmx:afterSwap', function(evt) {
-        if (evt.detail.target.id === 'api_spec_list') {
-          console.log('HTMX 컨텐츠 로드됨 - 페이지 초기화');
-          isExpanded = false;
-          initMoreButton();
-        }
-      });
-
-      document.body.addEventListener('htmx:afterSettle', function(evt) {
-        const apiListItems = document.querySelectorAll('.api_list');
-        apiListItems.forEach(function(item) {
-          item.removeEventListener('click',null);
-          item.addEventListener('click', function() {
-            const href = this.getAttribute('data-href');
-            if (href) {
-              window.location.href = href;
-            }
-          });
-        });
-        const apiItems = document.querySelectorAll('.api_info_box');
-        apiItems.forEach(function(item) {
-          item.removeEventListener('click',null);
-          item.addEventListener('click', function() {
-            const href = this.getAttribute('data-href');
-            if (href) {
-              window.location.href = href;
-            }
-          });
-        });
-      });
-
-      // 초기 실행
-      console.log('초기 실행');
-      initMoreButton();
-
-      // All 카테고리를 기본으로 active 설정
-      document.querySelector('.keyword_list li:first-child a').classList.add('active');
-
-      const apiListItems = document.querySelectorAll('.api_list');
-      apiListItems.forEach(function(item) {
-        item.addEventListener('click', function() {
-          const href = this.getAttribute('data-href');
-          if (href) {
-            window.location.href = href;
-          }
-        });
-      });
-
-      const apiItems = document.querySelectorAll('.api_info_box');
-      apiItems.forEach(function(item) {
-        item.removeEventListener('click',null);
-        item.addEventListener('click', function() {
-          const href = this.getAttribute('data-href');
-          if (href) {
-            window.location.href = href;
-          }
-        });
-      });
-G
-      const hashtagItems = document.querySelectorAll('.hashtag ul li a');
-      const searchBox = document.getElementById('search-box');
-
-      hashtagItems.forEach(function(item) {
-        item.addEventListener('click', function(e) {
+      // 해시태그 클릭 이벤트
+      hashtags.forEach(tag => {
+        tag.addEventListener('click', function(e) {
           e.preventDefault();
-          // Remove the # symbol if present and set the text in search box
-          const searchText = this.textContent.replace('#', '').trim();
-          searchBox.value = searchText;
-
-          document.getElementById("searchForm").submit();
-        });
-      });
-
-      const infoItems = document.querySelectorAll('.api_info ul li');
-      infoItems.forEach(function (item) {
-        item.style.cursor = 'pointer';
-        item.addEventListener('click', function() {
-          const link = this.querySelector('a');
-          if (link) {
-            location.href = link.getAttribute('href');
+          const searchTerm = this.getAttribute('data-search');
+          searchInput.value = searchTerm;
+          // 폼 제출
+          if (searchForm) {
+            searchForm.submit();
           }
         });
       });
-
     });
   </script>
 </th:block>

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

@@ -44,34 +44,27 @@
 
             <!-- Logout State (Authenticated) -->
             <div class="auth-group authenticated" sec:authorize="isAuthenticated()">
-              <div class="user-profile-dropdown">
-                <button class="user-profile-btn">
+              <div class="header-user-info">
+                <div class="user-identity">
+                  <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">
                   <span class="user-name">[[${#authentication.principal.userName}]]님</span>
-                  <i class="fas fa-chevron-down"></i>
-                </button>
-                <div class="profile-dropdown-menu">
-                  <div class="profile-header">
-                    <p class="user-greeting">[[${#authentication.principal.userName}]]님</p>
-                    <span class="user-message">즐거운 하루 되세요!</span>
-                  </div>
-                  <ul class="profile-menu-list">
-                    <li sec:authorize="hasRole('ROLE_USER_MANAGER')">
-                      <a th:href="@{/users}"><i class="fas fa-users"></i>이용자 관리</a>
-                    </li>
-                    <li sec:authorize="hasRole('ROLE_APP')">
-                      <a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
-                    </li>
-<!--                    <li sec:authorize="hasRole('ROLE_API_KEY_REQUEST_VIEW')">-->
-<!--                      <a th:href="@{/myapikey/api_key_request/history}"><i class="fas fa-list"></i>인증키 신청 목록</a>-->
-<!--                    </li>-->
-                    <li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
-                    <li><a th:href="@{/change_password}"><i class="fas fa-lock"></i>비밀번호 변경</a></li>
-                  </ul>
-                  <div class="profile-footer">
-                    <a th:href="@{/actionLogout.do}" class="logout-btn">
-                      <i class="fas fa-sign-out-alt"></i>
-                      로그아웃
-                    </a>
+                </div>
+                <span class="divider">•</span>
+                <a th:href="@{/actionLogout.do}" class="header-link">로그아웃</a>
+                <span class="divider">•</span>
+                <div class="mypage-dropdown">
+                  <button class="header-link mypage-toggle" type="button">마이페이지</button>
+                  <div class="mypage-dropdown-menu">
+                    <ul class="mypage-menu-list">
+                      <li sec:authorize="hasRole('ROLE_USER_MANAGER')">
+                        <a th:href="@{/users}"><i class="fas fa-users"></i>이용자 관리</a>
+                      </li>
+                      <li sec:authorize="hasRole('ROLE_APP')">
+                        <a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
+                      </li>
+                      <li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
+                      <li><a th:href="@{/change_password}"><i class="fas fa-lock"></i>비밀번호 변경</a></li>
+                    </ul>
                   </div>
                 </div>
               </div>
@@ -222,25 +215,25 @@
         link.addEventListener('click', closeDrawer);
       });
 
-      // Desktop User Profile Dropdown
-      const profileBtn = document.querySelector('.user-profile-btn');
-      const profileDropdown = document.querySelector('.user-profile-dropdown');
+      // Mypage Dropdown
+      const mypageToggle = document.querySelector('.mypage-toggle');
+      const mypageDropdown = document.querySelector('.mypage-dropdown');
 
-      if (profileBtn && profileDropdown) {
-        profileBtn.addEventListener('click', function(e) {
+      if (mypageToggle && mypageDropdown) {
+        mypageToggle.addEventListener('click', function(e) {
           e.stopPropagation();
-          profileDropdown.classList.toggle('active');
+          mypageDropdown.classList.toggle('active');
         });
 
         // Close dropdown when clicking outside
         document.addEventListener('click', function(e) {
-          if (!profileDropdown.contains(e.target)) {
-            profileDropdown.classList.remove('active');
+          if (!mypageDropdown.contains(e.target)) {
+            mypageDropdown.classList.remove('active');
           }
         });
 
         // Prevent dropdown from closing when clicking inside
-        profileDropdown.addEventListener('click', function(e) {
+        mypageDropdown.addEventListener('click', function(e) {
           e.stopPropagation();
         });
       }