breadcrumb 적용

src/main/resources/application.yml

@@ -228,48 +228,9 @@ page:
           apis:
             name: "API 목록"
             path: "/apis"
-          api_common:
-            name: "API 상세보기"
-            path: "/apis/common"
-          api_KAPAP004U3:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U3"
-          api_KAPAP004U4:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U4"
-          api_KAPAP004U5:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U5"
-          api_KAPAP004U6:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U6"
-          api_KAPAP004U7:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U7"
-          api_KAPAP004U8:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U8"
-          api_KAPAP004U9:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U9"
-          api_KAPAP004U10:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U10"
-          api_token_spec:
-            name: "API 상세보기"
-            path: "/apis/token-spec"
           api_detail:
             name: "API 상세보기"
             path: "/apis/detail"
-          api_key_new:
-            name: "API 키 신청"
-            path: "/apis/apikey/new"
-          api_key_prod:
-            name: "운영 API 키 신청"
-            path: "/apis/apikey/prod"
-      testbed:
-        name: 테스트 베드
-        path: "/apis/testbed"
       community:
         name: 고객지원
         path: "#"
@@ -305,39 +266,42 @@ page:
           mypage:
             name: "내 정보 관리"
             path: "/mypage"
-          dashboard:
-            name: 대시보드
-            path: "/dashboard"
           user_list:
             name: "이용자 관리"
             path: "/users"
           user_detail:
-            name: "이용자 관리"
+            name: "이용자 정보"
             path: "/users/detail"
-          app_request:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/history"
-          app_request_prod:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/prod_history"
-          app_request_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/detail"
-          app_request_prod_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/prod_detail"
           apikey:
             name: "인증키 관리"
             path: "/myapikey"
-          apikey_prod:
+          app_request_detail:
-            name: "인증키 관리"
+            name: "인증키 신청 상세"
-            path: "/myapikey/api_key_prod_page"
+            path: "/myapikey/app_request_detail"
-          apikey_detail:
+          credential_detail:
-            name: "인증키 관리"
+            name: "인증키 정보"
-            path: "/myapikey/api_key_detail"
+            path: "/myapikey/credential_detail"
-          apikey_prod_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_prod_detail"
           change_password:
             name: "비밀번호 변경"
             path: "/change_password"
+          myapikey_register_step1:
+            name: "앱 생성 (기본 정보)"
+            path: "/myapikey/register/step1"
+          myapikey_register_step2:
+            name: "앱 생성 (API 선택)"
+            path: "/myapikey/register/step2"
+          myapikey_register_step3:
+            name: "앱 생성 요청 완료"
+            path: "/myapikey/register/step3"
+          myapikey_modify_step1:
+            name: "앱 수정 (기본 정보)"
+            path: "/myapikey/modify/step1"
+          myapikey_modify_step2:
+            name: "앱 수정 (API 선택)"
+            path: "/myapikey/modify/step2"
+          myapikey_modify_step3:
+            name: "앱 수정 요청 완료"
+            path: "/myapikey/modify/step3"
+          commission:
+            name: "과금 관리"
+            path: "/commission/manage"

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

@@ -6312,6 +6312,194 @@ select.form-control {
   margin-top: 24px;
 }
 
+.breadcrumb-container {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .breadcrumb {
+    gap: 12px;
+    padding: 0 16px;
+  }
+}
+.breadcrumb-home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.breadcrumb-home svg {
+  width: 18px;
+  height: 17px;
+  fill: #8c959f;
+  transition: all 0.15s ease;
+}
+.breadcrumb-home:hover svg {
+  fill: #0049b4;
+}
+.breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.breadcrumb-separator svg {
+  width: 6.5px;
+  height: 12px;
+  fill: #5f666c;
+}
+@media (max-width: 768px) {
+  .breadcrumb-separator {
+    width: 16px;
+    height: 16px;
+  }
+  .breadcrumb-separator svg {
+    width: 5px;
+    height: 10px;
+  }
+}
+.breadcrumb-item {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  color: #5f666c;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+.breadcrumb-item:hover {
+  color: #0049b4;
+}
+.breadcrumb-item--active {
+  font-weight: 700;
+  color: #212529;
+}
+.breadcrumb-item--active:hover {
+  color: #212529;
+  cursor: default;
+}
+@media (max-width: 768px) {
+  .breadcrumb-item {
+    font-size: 14px;
+  }
+}
+
+.breadcrumb-nav {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav {
+    height: 48px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 48px;
+  height: 100%;
+  list-style: none;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list {
+    gap: 12px;
+    padding: 0 16px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item {
+    gap: 12px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
+  content: "";
+  display: block;
+  width: 6.5px;
+  height: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
+    width: 5px;
+    height: 10px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item a {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  color: #5f666c;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+.breadcrumb-nav .breadcrumb-list-item a:hover {
+  color: #0049b4;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item a {
+    font-size: 14px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item:last-child a {
+  font-weight: 700;
+  color: #212529;
+  pointer-events: none;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 0;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a::before {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 17px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  transition: all 0.15s ease;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .hero-carousel-section {
   position: relative;
   width: 100%;

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

@@ -38,6 +38,7 @@
 @import 'components/page-title-banner';
 @import 'components/alerts';
 @import 'components/pagination';
+@import 'components/breadcrumb';
 
 // 5. Page-specific styles
 @import 'pages/index';

src/main/resources/templates/views/apps/mypage/apiKeyList.html

@@ -15,7 +15,7 @@
 
     <!-- App List Title Section -->
     <div class="app-list-title-section">
-      <h2 class="app-list-title">앱 목록</h2>
+      <h2 class="app-list-title">인증키 관리</h2>
     </div>
 
     <!-- App List Container -->

src/main/resources/templates/views/apps/mypage/credentialDetail.html

@@ -18,7 +18,7 @@
 
     <!-- Title Bar -->
     <div class="common-title-bar">
-      <h2 class="common-title">앱 정보</h2>
+      <h2 class="common-title">인증키 정보</h2>
       <span class="common-subtitle">등록된 앱의 상세 정보를 확인할 수 있습니다.</span>
     </div>
 

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

@@ -7,13 +7,31 @@
 </head>
 
 <body>
-<div th:fragment="headerFragment" class="navigation" id="navigation">
+<!-- Breadcrumb Navigation - Figma: node 1339-3649 -->
-  <ul class="navigation-area">
+<nav th:fragment="headerFragment" class="breadcrumb-nav" id="navigation" aria-label="breadcrumb">
-    <li th:each="crumb : ${breadcrumb}">
+  <ol class="breadcrumb-list">
-      <a th:href="${crumb.path}" class="navigation-button" th:text="${crumb.name}">Unknown Page</a>
+    <!-- Home Icon -->
+    <li class="breadcrumb-list-item">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_1339_3588)">
+          <path d="M10.0001 19V14H14.0001V19C14.0001 19.55 14.4501 20 15.0001 20H18.0001C18.5501 20 19.0001 19.55 19.0001 19V12H20.7001C21.1601 12 21.3801 11.43 21.0301 11.13L12.6701 3.59997C12.2901 3.25997 11.7101 3.25997 11.3301 3.59997L2.9701 11.13C2.6301 11.43 2.8401 12 3.3001 12H5.0001V19C5.0001 19.55 5.4501 20 6.0001 20H9.0001C9.5501 20 10.0001 19.55 10.0001 19Z" fill="#8C959F"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_1339_3588">
+            <rect width="24" height="24" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
     </li>
-  </ul>
+    <!-- Breadcrumb Items (skip first item - home icon is hardcoded above) -->
-</div>
+    <li class="breadcrumb-list-item" th:each="crumb, status : ${breadcrumb}" th:if="${status.index > 0}">
+      <a th:href="${crumb.path}"
+         th:text="${crumb.name}"
+         th:classappend="${status.last} ? 'active' : ''"
+         th:attr="aria-current=${status.last} ? 'page' : null">Unknown Page</a>
+    </li>
+  </ol>
+</nav>
 </body>
 
 </html>

src/main/resources/templates/views/layout/kjbank_title_layout.html

@@ -12,8 +12,7 @@
     <div class="loading-overlay" style="display: none;">
       <div class="loading-spinner"></div>
     </div>
-    <th:block layout:fragment="title">
+    <div class="navigation" th:replace="fragment/kjbank/header_nav :: headerFragment"></div>
-    </th:block>
     <div class="container">
       <th:block layout:fragment="contentFragment">
       </th:block>