IP 등록 UI 및 검증 로직 업데이트

- `.ip-input-row`/`.btn-add-ip` 정렬 및 버튼 크기 수정
- Callback URL 관련 입력 및 검증 로직 주석 처리
- 화이트리스트 필수 입력 항목 검증 로직 추가

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

@@ -370,6 +370,7 @@
 // IP Input Row - Step 1 Style
 .ip-input-row {
   display: flex;
+  align-items: center;
   gap: 21px;
 
   .ip-input {
@@ -398,7 +399,7 @@
 }
 
 .btn-add-ip {
-  width: auto;
+  width: 100px;
   height: 40px;
   padding: 0 16px;
   background-color: #3ba4ed;
@@ -410,20 +411,23 @@
   cursor: pointer;
   transition: background-color 0.2s ease;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:hover {
     background-color: #2b94dd;
   }
 
   @include respond-to('md') {
-    width: auto;
+    width: 100%;
     font-size: 14px;
     height: 38px;
   }
 
   // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
   @include respond-to('sm') {
-    width: auto;
+    width: 89px;
     height: 36px;
     font-size: 13px;
     border-radius: 8px;
@@ -446,6 +450,7 @@
 
   .ip-item {
     display: flex;
+    align-items: center;
     gap: 21px;
     padding: 0;
     border-bottom: none;
@@ -488,25 +493,26 @@
     }
 
     .btn-remove-ip {
-      width: 158px !important;
+      width: 100px !important;
-      height: 60px !important;
+      height: 40px !important;
       background-color: #e5e7eb !important;
       color: #5f666c !important;
       border: none !important;
-      border-radius: $border-radius-lg !important;
+      border-radius: $border-radius-md !important;
-      font-size: 20px !important;
+      font-size: 14px !important;
-      font-weight: $font-weight-bold;
+      font-weight: $font-weight-semibold;
       cursor: pointer;
       transition: background-color 0.2s ease;
       flex-shrink: 0;
       display: flex !important;
       align-items: center;
       justify-content: center;
+      align-self: center;
 
       @include respond-to('md') {
         width: 100% !important;
-        font-size: 16px !important;
+        font-size: 14px !important;
-        height: 50px !important;
+        height: 38px !important;
       }
 
       // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold

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

@@ -166,7 +166,7 @@
           </div>
         </div>
 
-        <!-- Callback URL -->
+        <!-- Callback URL : OAuth2 3-legged 전용. 현재 미사용으로 주석 처리 (추후 OAuth2 도입 시 복원)
         <div class="form-row">
           <div class="form-label-wrapper label-offset">
             <span class="form-label-text">Call Back URL</span>
@@ -180,11 +180,13 @@
                    placeholder="URL을 입력해 주세요.">
           </div>
         </div>
+        -->
 
         <!-- IP Whitelist -->
         <div class="form-row">
           <div class="form-label-wrapper label-offset">
             <span class="form-label-text">화이트리스트</span>
+            <span class="required-badge">필수</span>
           </div>
           <div class="form-field-wrapper">
             <div class="ip-input-row">
@@ -458,7 +460,8 @@
       form.addEventListener('submit', function(e) {
         const appName = document.getElementById('appName').value.trim();
         const appDescription = document.getElementById('appDescription').value.trim();
-        const callbackUrl = document.getElementById('callbackUrl').value.trim();
+        // callbackUrl: OAuth2 3-legged 전용. 현재 미사용으로 주석 처리.
+        // const callbackUrl = document.getElementById('callbackUrl').value.trim();
 
         if (!appName) {
           e.preventDefault();
@@ -474,22 +477,30 @@
           return false;
         }
 
-        // Validate URL format only if callbackUrl is provided (optional field)
+        // 화이트리스트 필수
-        if (callbackUrl && callbackUrl.trim() !== '') {
+        if (ipAddresses.length === 0) {
-          try {
+          e.preventDefault();
-            new URL(callbackUrl);
+          customPopups.showAlert('화이트리스트 IP를 1개 이상 등록해주세요.');
-          } catch (error) {
+          document.getElementById('ipWhitelistInput').focus();
-            e.preventDefault();
+          return false;
-            customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback');
-            document.getElementById('callbackUrl').focus();
-            return false;
-          }
         }
 
+        // Validate URL format only if callbackUrl is provided (optional field)
+        // if (callbackUrl && callbackUrl.trim() !== '') {
+        //   try {
+        //     new URL(callbackUrl);
+        //   } catch (error) {
+        //     e.preventDefault();
+        //     customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback');
+        //     document.getElementById('callbackUrl').focus();
+        //     return false;
+        //   }
+        // }
+
         // Store data in sessionStorage for later steps
         sessionStorage.setItem('registration_appName', appName);
         sessionStorage.setItem('registration_appDescription', appDescription);
-        sessionStorage.setItem('registration_callbackUrl', callbackUrl);
+        // sessionStorage.setItem('registration_callbackUrl', callbackUrl);
         sessionStorage.setItem('registration_ipWhitelist', ipAddresses.join(','));
       });
     });