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

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

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

@@ -11441,6 +11441,7 @@ button.djb-comment-submit:disabled {
 
 .ip-input-row {
   display: flex;
+  align-items: center;
   gap: 21px;
 }
 .ip-input-row .ip-input {
@@ -11468,7 +11469,7 @@ button.djb-comment-submit:disabled {
 }
 
 .btn-add-ip {
-  width: auto;
+  width: 100px;
   height: 40px;
   padding: 0 16px;
   background-color: #3ba4ed;
@@ -11480,20 +11481,23 @@ button.djb-comment-submit:disabled {
   cursor: pointer;
   transition: background-color 0.2s ease;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .btn-add-ip:hover {
   background-color: #2b94dd;
 }
 @media (max-width: 1024px) {
   .btn-add-ip {
-    width: auto;
+    width: 100%;
     font-size: 14px;
     height: 38px;
   }
 }
 @media (max-width: 768px) {
   .btn-add-ip {
-    width: auto;
+    width: 89px;
     height: 36px;
     font-size: 13px;
     border-radius: 8px;
@@ -11514,6 +11518,7 @@ button.djb-comment-submit:disabled {
 }
 .register-form-container .ip-list .ip-item {
   display: flex;
+  align-items: center;
   gap: 21px;
   padding: 0;
   border-bottom: none;
@@ -11555,26 +11560,27 @@ button.djb-comment-submit:disabled {
   }
 }
 .register-form-container .ip-list .ip-item .btn-remove-ip {
-  width: 158px !important;
-  height: 60px !important;
+  width: 100px !important;
+  height: 40px !important;
   background-color: #e5e7eb !important;
   color: #5f666c !important;
   border: none !important;
-  border-radius: 12px !important;
-  font-size: 20px !important;
-  font-weight: 700;
+  border-radius: 8px !important;
+  font-size: 14px !important;
+  font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
   flex-shrink: 0;
   display: flex !important;
   align-items: center;
   justify-content: center;
+  align-self: center;
 }
 @media (max-width: 1024px) {
   .register-form-container .ip-list .ip-item .btn-remove-ip {
     width: 100% !important;
-    font-size: 16px !important;
-    height: 50px !important;
+    font-size: 14px !important;
+    height: 38px !important;
   }
 }
 @media (max-width: 768px) {

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;
-      height: 60px !important;
+      width: 100px !important;
+      height: 40px !important;
       background-color: #e5e7eb !important;
       color: #5f666c !important;
       border: none !important;
-      border-radius: $border-radius-lg !important;
-      font-size: 20px !important;
-      font-weight: $font-weight-bold;
+      border-radius: $border-radius-md !important;
+      font-size: 14px !important;
+      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;
-        height: 50px !important;
+        font-size: 14px !important;
+        height: 38px !important;
       }
 
       // Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold

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

@@ -150,7 +150,7 @@
         <!-- Services 데이터를 반복하여 API 카드 표시 (최대 4개) -->
         <div class="api-card" th:each="service, iterStat : ${services}"
              th:if="${iterStat.index < 4}"
-             th:onclick="${service.id != null} ? |location.href='@{/apis(groupId=${service.id})}'| : |location.href='@{/apis}'|">
+             th:onclick="${service.id != null} ? |location.href='@{/apis(groupIds=${service.id})}'| : |location.href='@{/apis}'|">
           <h3 class="card-title" th:text="${service.groupName}">API 서비스</h3>
           <p class="card-description">
             <span th:if="${service.groupDesc != null and !#strings.isEmpty(service.groupDesc)}"

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() !== '') {
-          try {
-            new URL(callbackUrl);
-          } catch (error) {
-            e.preventDefault();
-            customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/api/callback');
-            document.getElementById('callbackUrl').focus();
-            return false;
-          }
+        // 화이트리스트 필수
+        if (ipAddresses.length === 0) {
+          e.preventDefault();
+          customPopups.showAlert('화이트리스트 IP를 1개 이상 등록해주세요.');
+          document.getElementById('ipWhitelistInput').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(','));
       });
     });

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

@@ -129,6 +129,14 @@
         }
       };
 
+      // 제출 대상 org 필드 (검증 필수목록과 별개 - 선택입력 포함 전 필드 전송)
+      // 제외: ipWhitelist(가입 미입력), orgCode(관리자/시스템 부여)
+      const submitOrgFields = [
+        'compRegNo', 'corpRegNo', 'orgName', 'compRegFile', 'files',
+        'ceoName', 'orgAddr', 'serviceName', 'orgPhoneNumber', 'scPhoneNumber',
+        'orgSectors', 'orgIndustryType'
+      ];
+
       // 이메일 유효성 검사 함수
       function isValidEmail(email) {
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -177,7 +185,7 @@
           }
         });
 
-        fields.org.forEach(fieldId => {
+        submitOrgFields.forEach(fieldId => {
           const element = document.getElementById(fieldId);
           if (element) {
             if (element.type === 'file') {