디자인 시안 적용 및 애니메이션 개선

.gitignore

@@ -107,4 +107,9 @@ TODO.txt
 diff
 
 *rinjae*
-*gf63*
+*gf63*
+
+# Local publishing and config files
+/publishing/
+/src/main/resources/application-local.yml
+/src/main/resources/logback-local.xml

script/portal/oracle/1_portal.sql

@@ -254,7 +254,8 @@ CREATE TABLE DVPOWN.PT_MESSAGE_RECIPIENT
 )
 ;
 
-create table DVPOWN.PT_TOKEN
+create table PT_TOKEN
+(
 (
     TOKEN      VARCHAR2(255) not null
         primary key,

src/main/java/com/eactive/apim/portal/PortalApplication.java

@@ -22,6 +22,10 @@ public class PortalApplication extends SpringBootServletInitializer {
 
     private static final Logger portal_logger = LoggerFactory.getLogger(PortalApplication.class);
 
+    public PortalApplication() {
+        super();
+    }
+
     public static void main(String[] args) {
 
         portal_logger.info("##### PortalApplication Start #####");

src/main/java/com/eactive/apim/portal/config/BaseDatasourceConfiguration.java

@@ -85,9 +85,9 @@ public class BaseDatasourceConfiguration {
             persistenceUnit = "gateway";
         }
 
-        // 개발 환경용
+        // 개발 환경용 - local 프로파일에서는 스키마 검증(ddl-auto) 해제
         if (env.matchesProfiles("local")) {
-            properties.put("hibernate.hbm2ddl.auto", "validate");
+            properties.put("hibernate.hbm2ddl.auto", "none");
         }
 
 

src/main/resources/application.yml

@@ -24,6 +24,8 @@ spring:
         default-page-size: '10'
   jpa:
     open-in-view: false
+    hibernate:
+      ddl-auto: none
 
   web:
     resources:

src/main/resources/logback-spring.xml

@@ -5,9 +5,6 @@
 
     <property name="LOG_PATH" value="${profileLogPath}/${inst.Name:-devSvr00}"/>
 
-    <!--    <springProfile name="gf63">-->
-    <!--        <property name="LOG_PATH" value="d:/kjb-logs/${inst.Name:-devSvr00}"/>-->
-    <!--    </springProfile>-->
 
     <!--    <property name="CONSOLE_PATTERN" value="%d{yyyy-MM-dd HH:mm:ss.SSS} %magenta([%thread]) %highlight([%-3level]) %logger{5} - %msg %n" />-->
     <property name="CONSOLE_PATTERN" value="%d{yyyy-MM-dd HH:mm:ss.SSS} %magenta([%thread]) %highlight([%-3level]) %logger - %msg %n" />

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

@@ -1,3 +1,4 @@
-<svg width="1920" height="314" viewBox="0 0 1920 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1920" height="318" viewBox="0 0 1920 318" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1920 314H0V0.447266C158.076 115.873 527.685 196.879 958.538 196.999H960.462C1391.87 196.878 1761.87 115.662 1919.61 0H1920V314Z" fill="#CFF2FF"/>
+<path d="M1920 318H0V64.4473C158.076 179.873 527.685 260.879 958.538 260.999H960.462C1391.87 260.878 1761.87 179.662 1919.61 64H1920V318Z" fill="#D3EFFB"/>
+<path d="M1920 281H0V13.71C158.194 148.461 528.235 243 959.499 243C1391.68 243 1762.37 148.059 1920 12.8525V0H1920V281ZM0 0V13.71H-0.000976562V0H0Z" fill="#CFF2FF" fill-opacity="0.5"/>
 </svg>

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

@@ -5,6 +5,7 @@
 
 // Color Palette - Vibrant and Modern
 // Primary colors
+$primary-color: #0049B4;
 $primary-blue: #0049b4;          // Vibrant blue
 $secondary-blue: #c3dfea;        // Deep blue
 $accent-cyan: #00D4FF;           // Sky blue accent

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

@@ -8,9 +8,12 @@
 
 // Float animation
 @keyframes float {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0) rotate(0deg);
   }
+
   50% {
     transform: translateY(-30px) rotate(10deg);
   }
@@ -18,9 +21,12 @@
 
 // Bounce animation
 @keyframes bounce {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-10px);
   }
@@ -32,6 +38,7 @@
     opacity: 0;
     transform: translateY(-30px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -44,6 +51,7 @@
     opacity: 0;
     transform: translateY(30px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -56,6 +64,7 @@
     opacity: 0;
     transform: translateX(-30px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -68,6 +77,7 @@
     opacity: 0;
     transform: translateX(30px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -79,6 +89,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -90,6 +101,7 @@
     opacity: 0;
     transform: scale(0.9);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -101,6 +113,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -111,9 +124,11 @@
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.05);
   }
+
   100% {
     transform: scale(1);
   }
@@ -124,6 +139,7 @@
   0% {
     transform: translateX(-100%) rotate(45deg);
   }
+
   100% {
     transform: translateX(100%) rotate(45deg);
   }
@@ -134,24 +150,31 @@
   0% {
     transform: rotate(0deg);
   }
+
   10% {
     transform: rotate(14deg);
   }
+
   20% {
     transform: rotate(-8deg);
   }
+
   30% {
     transform: rotate(14deg);
   }
+
   40% {
     transform: rotate(-4deg);
   }
+
   50% {
     transform: rotate(10deg);
   }
+
   60% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(0deg);
   }
@@ -163,9 +186,11 @@
     opacity: 0;
     transform: scale(0.5);
   }
+
   80% {
     transform: scale(1.1);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -178,6 +203,7 @@
     opacity: 0;
     transform: scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -190,6 +216,7 @@
     transform: scale(0);
     opacity: 1;
   }
+
   100% {
     transform: scale(4);
     opacity: 0;
@@ -201,9 +228,11 @@
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -214,6 +243,27 @@
   animation: float 20s ease-in-out infinite;
 }
 
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+.floating-slow {
+  animation: float 6s ease-in-out infinite;
+}
+
+.floating-fast {
+  animation: float 4s ease-in-out infinite;
+}
+
 .animate-bounce {
   animation: bounce 2s infinite;
 }
@@ -222,6 +272,37 @@
   animation: spin 1s linear infinite;
 }
 
+@keyframes drawLine {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.draw-line {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: drawLine 3s ease-out forwards;
+}
+
+.pulsing {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+
+  50% {
+    transform: scale(1.1);
+    opacity: 0.5;
+  }
+}
+
+
 .animate-pulse {
   animation: pulse 2s ease-in-out infinite;
 }
@@ -325,4 +406,4 @@
   &:hover::before {
     transform: translateX(200%) rotate(45deg);
   }
-}
+}

src/main/resources/static/sass/components/_header-auth.scss

@@ -18,46 +18,76 @@
   &.authenticated {
     gap: 0;
   }
+
+
+  .login-btn{
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--primary-color);
+    padding: 10px 20px;
+    border-radius: 8px;
+    transition: var(--transition-smooth);
+
+    &:hover{
+        background-color: var(--accent-light);
+    }
+  }
+
+    .btn-login:hover {
+        background-color: var(--accent-light);
+    }
+
 }
 
 // ===========================
 // Login Button
 // ===========================
 .login-btn {
-  display: inline-flex;
+    font-size: 15px;
-  align-items: center;
+    font-weight: 500;
-  padding: 10px 20px;
+    color: var(--primary-color);
-  color: $text-dark;
+    padding: 10px 20px;
-  text-decoration: none;
+    border-radius: 8px;
-  border: 2px solid $primary-blue;
+    transition: var(--transition-smooth);
-  border-radius: $border-radius-full;
-  font-weight: $font-weight-semibold;
-  font-size: $font-size-sm;
-  transition: $transition-base;
 
-  // Box style for Figma design (node-id: 721-1489)
+  &:hover {
-  &-box {
+    background-color: var(--accent-light);
-    height: 32px;
+  }
-    display: inline-flex;
+}
-    align-items: center;
-    justify-content: center;
-    gap: 6px; // 아이콘-텍스트 간격
-    padding: 6px 16px;
-    color: #212529; // 강조 텍스트 색상
-    text-decoration: none;
-    border: none;
-    border-radius: 6px;
-    font-family: $font-family-primary;
-    font-weight: $font-weight-semibold; // 600
-    font-size: 16px;
-    background: transparent;
-    transition: $transition-base;
 
-    .user-icon {
+
-      width: 18px;
+.btn-signup {
-      height: 18px;
+  font-size: 15px;
-      flex-shrink: 0;
+  font-weight: 700;
-    }
+  color: #FFFFFF;
+  background-color: var(--primary-color);
+  padding: 10px 24px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 73, 180, 0.15);
+  transition: var(--transition-smooth);
+
+  &:hover {
+       background-color: var(--secondary-color);
+       transform: translateY(-2px);
+       box-shadow: 0 6px 20px rgba(0, 73, 180, 0.25);
+       color:white;
+  }
+}
+
+
+// Box style for Figma design (node-id: 721-1489)
+.login-btn-box {
+    font-size: 15px;
+     font-weight: 500;
+     color: var(--primary-color);
+     padding: 10px 20px;
+     border-radius: 8px;
+     transition: var(--transition-smooth);
+
+  .user-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
   }
 }
 

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

@@ -6,6 +6,7 @@
 // Footer Styles - Figma Design Implementation
 // -----------------------------------------------------------------------------
 
+/* 원래 있던 Footer 스타일 (주석 처리)
 .global-footer {
   background: #FFFFFF;
   border-top: 1px solid #E5E7EB;
@@ -142,6 +143,143 @@
     }
   }
 }
+*/
+
+/* 피그마 시안 적용 다크 모드 Footer 스타일 */
+.global-footer {
+  background-color: rgb(15, 23, 42);
+  color: rgb(100, 116, 139);
+  padding: 60px 0px;
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+
+  @include respond-to('md') {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 32px;
+    padding: 32px 0;
+  }
+}
+
+// Left Section
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .footer-logo {
+    width: 114px;
+    height: auto;
+    object-fit: contain;
+  }
+
+  .footer-links {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .footer-link {
+      font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      color: #9CA3AF;
+      text-decoration: none;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: #FFFFFF;
+        text-decoration: underline;
+      }
+    }
+
+    .footer-separator {
+      color: #9CA3AF;
+      font-size: 16px;
+      user-select: none;
+    }
+  }
+
+  .footer-copyright {
+    font-family: $font-family-primary;
+    font-size: 14px;
+    font-weight: 400;
+    color: #9CA3AF;
+    margin: 0;
+    line-height: 1.5;
+  }
+}
+
+// Right Section
+.footer-right {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-end;
+
+  @include respond-to('md') {
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .footer-related-sites {
+    .related-sites-select {
+      width: 240px;
+      height: 44px;
+      padding: 0 16px;
+      font-family: $font-family-primary;
+      font-size: 16px;
+      font-weight: 400;
+      color: #9CA3AF;
+      background: rgb(30, 41, 59);
+      border: 1px solid rgb(71, 85, 105);
+      border-radius: 6px;
+      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='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 16px center;
+      padding-right: 40px;
+
+      &:hover {
+        border-color: #FFFFFF;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: #FFFFFF;
+      }
+
+      @include respond-to('md') {
+        width: 100%;
+      }
+    }
+  }
+
+  .footer-contact {
+    font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    color: #9CA3AF;
+    margin: 0;
+    line-height: 1.2;
+
+    @include respond-to('md') {
+      font-size: 16px;
+    }
+  }
+}
 
 // Mobile responsive adjustments (sm: 768px)
 @include respond-to('sm') {

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

@@ -9,6 +9,8 @@
 // CSS Variables for modern header styling
 :root {
   // Enhanced color palette from design
+  --primary-color: #0049b4;
+  --secondary-color: #008ae2;
   --primary-blue: #4B9BFF;
   --secondary-blue: #2E7FF7;
   --accent-cyan: #00D4FF;
@@ -16,6 +18,8 @@
   --accent-orange: #FF6B6B;
   --accent-green: #6BCF7F;
   --accent-purple: #A78BFA;
+  --accent-color:#efdcb2;
+  --accent-light: #E9F9FF;
 
   // Base colors
   --text-dark: #1A1A2E;
@@ -31,6 +35,13 @@
   --shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
   --shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
   --shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
+  --shadow-hover: 0 30px 60px -10px rgba(0, 73, 180, 0.2);
+
+  // border
+  --border-color : #E2E8F0;
+
+  //transition
+  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 // ===========================
@@ -91,16 +102,28 @@
 
   @media (max-width: 768px) {
     height: 40px;
-    .survey-label { display: none; }
+
-    .survey-btn { padding: 4px 12px; font-size: 12px; }
+    .survey-label {
+      display: none;
+    }
+
+    .survey-btn {
+      padding: 4px 12px;
+      font-size: 12px;
+    }
   }
 }
 
 // Body offset when survey is active
 body.design-survey-active {
-  .global-header { margin-top: 48px; }
+  .global-header {
+    margin-top: 48px;
+  }
+
   @media (max-width: 768px) {
-    .global-header { margin-top: 40px; }
+    .global-header {
+      margin-top: 40px;
+    }
   }
 }
 
@@ -124,35 +147,63 @@ body.design-survey-active {
 // Modern Header Structure
 // ===========================
 .global-header {
-  position: relative;
+  position: fixed;
-  background-color: #ffffff;
+  top: 0;
-  z-index: $z-index-header;
+  left: 0;
-  height: 112px;
+  width: 100%;
-  transition: all 0.3s ease;
+  height: 80px;
-  border-bottom: 1px solid #dddddd;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(15px);
+  border-bottom: 1px solid rgba(0, 73, 180, 0.08);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  transition: var(--transition-smooth);
 
   // Index page header with light blue background
   &.index-header {
-    background-color: #E5F8FF;
+    background-color: white;
   }
+
   .container {
     height: 100%;
     padding: 0;
+    width: 100%;
 
     .header-content {
       height: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    height: clamp(44px, 11.73vw, 60px);
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: none;
+
+    .container {
+      padding: 0;
+      max-width: 100%;
+      background-color: #FEFEFE;
+
+      .header-content {
+        padding: 0 clamp(16px, 4.27vw, 24px) 0 clamp(20px, 5.33vw, 28px);
+        height: clamp(44px, 11.73vw, 60px);
+        margin-top: 0;
+      }
+    }
+  }
 }
 
 .header-content {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 65px;
-  max-width: 1920px;
-  margin: 0 auto;
-  padding: 0 20px;
 }
 
 // ===========================
@@ -166,7 +217,6 @@ body.design-survey-active {
 
   .logo {
     height: 32px;
-    width: 114px;
   }
 }
 
@@ -175,13 +225,27 @@ body.design-survey-active {
   display: flex;
   align-items: center;
   gap: 12px;
+  font-size:24px;
+
+  .logo-text-bold {
+      font-weight: 700;
+      color: var(--primary-color);
+      letter-spacing: -0.5px;
+  }
+
+
+  .logo-text-thin {
+      font-weight: 300;
+      color: var(--secondary-color);
+      margin-left: 4px;
+  }
+
 }
 
 // Logo with modern styling
 .logo {
   display: block;
   height: 32px;
-  width: 114px;
   vertical-align: middle;
   z-index: 10;
 
@@ -381,9 +445,11 @@ body.design-survey-active {
         &:nth-child(1) {
           transform: rotate(45deg) translateY(5px);
         }
+
         &:nth-child(2) {
           opacity: 0;
         }
+
         &:nth-child(3) {
           transform: rotate(-45deg) translateY(-5px);
         }
@@ -801,14 +867,27 @@ body.design-survey-active {
       transition: all $transition-fast;
     }
 
-    &::before { top: -8px; }
+    &::before {
-    &::after { top: 8px; }
+      top: -8px;
+    }
+
+    &::after {
+      top: 8px;
+    }
   }
 
   &.on span {
     background: transparent;
-    &::before { top: 0; transform: rotate(45deg); }
+
-    &::after { top: 0; transform: rotate(-45deg); }
+    &::before {
+      top: 0;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      top: 0;
+      transform: rotate(-45deg);
+    }
   }
 }
 
@@ -848,7 +927,7 @@ body.design-survey-active {
     .nav-item {
       border-bottom: 1px solid $border-gray;
 
-      > a {
+      >a {
         display: flex;
         align-items: center;
         padding: $spacing-lg;
@@ -859,7 +938,7 @@ body.design-survey-active {
         position: relative;
       }
 
-      &.has-submenu > a::after {
+      &.has-submenu>a::after {
         content: '';
         position: absolute;
         right: $spacing-lg;
@@ -872,7 +951,7 @@ body.design-survey-active {
         transition: transform $transition-fast;
       }
 
-      &.expanded > a::after {
+      &.expanded>a::after {
         transform: translateY(-25%) rotate(-135deg);
       }
 
@@ -885,31 +964,33 @@ body.design-survey-active {
 
         a {
           display: block;
-          padding: $spacing-md $spacing-lg $spacing-md ($spacing-lg * 2);
+          padding: $spacing-md $spacing-lg $spacing-md (
-          color: $text-gray;
+            $spacing-lg * 2
-          font-size: $font-size-sm;
+          );
-          text-decoration: none;
+        color: $text-gray;
+        font-size: $font-size-sm;
+        text-decoration: none;
 
-          &:hover {
+        &:hover {
-            background: $white;
+          background: $white;
-            color: $primary-blue;
+          color: $primary-blue;
-          }
         }
       }
+    }
 
-      &.expanded .sub-menu {
+    &.expanded .sub-menu {
-        display: block;
+      display: block;
-      }
     }
   }
+}
 
-  .info_wrap {
+.info_wrap {
-    padding: $spacing-xl $spacing-lg;
+  padding: $spacing-xl $spacing-lg;
-    background: $white;
+  background: $white;
-    border-top: 1px solid $border-gray;
+  border-top: 1px solid $border-gray;
-    margin-top: auto;
+  margin-top: auto;
-    // styles for tit1, tit2...
+  // styles for tit1, tit2...
-  }
+}
 }
 
 // ===========================
@@ -918,16 +999,16 @@ body.design-survey-active {
 .nav-menu {
   display: flex;
   list-style: none;
-  gap: 8px;
+  gap: 36px;
   margin: 0;
   padding: 0;
 
   // Navigation item with submenu
-  > li {
+  >li {
     position: relative;
 
     &.submenu-open {
-      > .nav-link {
+      >.nav-link {
         background: var(--light-bg);
         color: var(--primary-blue);
       }
@@ -980,16 +1061,12 @@ body.design-survey-active {
 }
 
 .nav-link {
-  display: flex;
+  font-size: 16px;
-  align-items: center;
-  gap: 6px;
-  text-decoration: none;
-  color: var(--text-dark);
   font-weight: 500;
-  font-size: 20px;
+  color: var(--text-gray);
-  padding: 8px 16px;
+  padding: 8px 0;
-  border-radius: 8px;
+  position: relative;
-  transition: all 0.3s ease;
+  transition: var(--transition-smooth);
 
   &:hover {
     color: var(--primary-blue);
@@ -1022,10 +1099,17 @@ body.design-survey-active {
 // Desktop Navigation Styles
 // ===========================
 @include respond-to('desktop') {
-  .m-only { display: none !important; }
+  .m-only {
-  .pc-only { display: block !important; }
+    display: none !important;
+  }
 
-  .btn-mobilemenu { display: none; }
+  .pc-only {
+    display: block !important;
+  }
+
+  .btn-mobilemenu {
+    display: none;
+  }
 
   .main-nav.m-nav {
     position: static;
@@ -1038,8 +1122,13 @@ body.design-survey-active {
     height: 100%;
     flex: 1;
 
-    .nav-header { display: none; }
+    .nav-header {
-    .info_wrap { display: none; }
+      display: none;
+    }
+
+    .info_wrap {
+      display: none;
+    }
 
     .nav-list {
       display: flex;
@@ -1051,7 +1140,7 @@ body.design-survey-active {
         position: relative;
         height: 100%;
 
-        > a {
+        >a {
           height: 100%;
           padding: 0 24px;
           color: var(--text-dark);
@@ -1061,6 +1150,7 @@ body.design-survey-active {
 
           &:hover {
             color: var(--primary-blue);
+
             &::after {
               content: '';
               position: absolute;
@@ -1074,7 +1164,9 @@ body.design-survey-active {
           }
         }
 
-        &.has-submenu > a::after { display: none; }
+        &.has-submenu>a::after {
+          display: none;
+        }
       }
     }
   }
@@ -1244,4 +1336,4 @@ body.design-survey-active {
   .header-user-info {
     display: none; // Hide on mobile, use drawer instead
   }
-}
+}

src/main/resources/static/sass/pages/_apikey-detail.scss

@@ -74,7 +74,6 @@
   font-weight: $font-weight-bold;
   color: $text-dark;
   margin-bottom: $spacing-lg;
-  padding-bottom: $spacing-md;
 }
 
 // Detail Grid - extends common

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

@@ -21,11 +21,18 @@
         <!-- Desktop Header Layout -->
         <div class="desktop-header">
           <div class="header-left">
-            <div class="logo-wrapper">
+<!--            <div class="logo-wrapper">-->
-              <a th:href="@{/}" class="logo-link">
+<!--              <a th:href="@{/}" class="logo-link">-->
-                <img src="/img/logo/logo-djb.png" alt="DJBank" class="logo" width="114" height="32">
+<!--                <img src="/img/logo/logo-djb.png" alt="DJBank" class="logo" width="114" height="32">-->
-              </a>
+<!--              </a>-->
-              <a th:href="@{/}" class="logo-text">API Portal</a>
+<!--              <a th:href="@{/}" class="logo-text">API Portal</a>-->
+<!--            </div>-->
+            <div >
+              <div class="logo">
+                <a th:href="@{/}" class="logo-wrapper">
+                  <span class="logo-text-bold">DJBank</span> <span class="logo-text-thin">API Portal</span>
+                </a>
+              </div>
             </div>
           </div>
 
@@ -55,10 +62,15 @@
           <div class="header-right">
 
             <!-- Login State (Anonymous) -->
-            <div class="auth-group" sec:authorize="isAnonymous()">
+<!--            <div class="auth-group" sec:authorize="isAnonymous()">-->
 
-              <a th:href="@{/login}" class="login-btn login-btn-box">
+<!--              <a th:href="@{/login}" class="login-btn login-btn-box">-->
-                <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">로그인</a>
+<!--                <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">로그인</a>-->
+<!--            </div>-->
+
+            <div class="auth-group" sec:authorize="isAnonymous()">
+              <a th:href="@{/login}" class="login-btn login-btn-box">로그인</a>
+              <a href="#" class="btn-signup">회원가입</a>
             </div>
 
             <!-- Logout State (Authenticated) -->