From 8d232734b10dd599e419fe1b7344615fb5694f4d Mon Sep 17 00:00:00 2001 From: Rinjae Date: Tue, 30 Jun 2026 10:54:22 +0900 Subject: [PATCH] =?UTF-8?q?IP=20=EB=93=B1=EB=A1=9D=20UI=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20-=20`.ip-input-row`/`.btn-add-ip`=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=88=98=EC=A0=95=20-=20Callback=20URL=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=9E=85=EB=A0=A5=20=EB=B0=8F=20=EA=B2=80=EC=A6=9D?= =?UTF-8?q?=20=EB=A1=9C=EC=A7=81=20=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=20-=20=ED=99=94=EC=9D=B4=ED=8A=B8=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=ED=95=84=EC=88=98=20=EC=9E=85=EB=A0=A5=20=ED=95=AD=EB=AA=A9?= =?UTF-8?q?=20=EA=B2=80=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/sass/pages/_apikey-register.scss | 26 ++++++++----- .../apps/mypage/apiKeyRegisterStep1.html | 37 ++++++++++++------- 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/main/resources/static/sass/pages/_apikey-register.scss b/src/main/resources/static/sass/pages/_apikey-register.scss index c8a0f07..8c62fee 100644 --- a/src/main/resources/static/sass/pages/_apikey-register.scss +++ b/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 diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html index 849669c..725aa13 100644 --- a/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html +++ b/src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html @@ -166,7 +166,7 @@ - +
화이트리스트 + 필수
@@ -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(',')); }); });