인증키 관리 - 모바일 디자인 적용

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

@@ -14,9 +14,8 @@
   <section class="apikey-register-container">
 
     <!-- Title Bar -->
-    <div class="register-title-bar">
-      <h2 class="register-title">앱 수정</h2>
-      <span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 수정해주세요.</span>
+    <div class="common-title-bar">
+      <h2 class="common-title">앱 수정</h2>
     </div>
 
     <div class="register-progress">
@@ -25,10 +24,10 @@
         <div class="progress-step-item">
           <div class="step-icon-wrapper">
             <div class="step-icon">
-              <img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" width="36" height="36">
+              <img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" class="step-icon-img">
             </div>
           </div>
-          <div class="step-label">앱 정보입력</div>
+          <div class="step-label">앱정보입력</div>
         </div>
 
         <!-- Dots between Step 1 and 2 -->
@@ -40,7 +39,7 @@
         <div class="progress-step-item">
           <div class="step-icon-wrapper">
             <div class="step-icon">
-              <img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
+              <img th:src="@{/img/apikey_step2.png}" alt="API 선택" class="step-icon-img">
             </div>
           </div>
           <div class="step-label">API 선택</div>
@@ -55,7 +54,7 @@
         <div class="progress-step-item active">
           <div class="step-icon-wrapper">
             <div class="step-icon">
-              <img th:src="@{/img/apikey_step3.png}" alt="앱 수정 완료" width="36" height="36">
+              <img th:src="@{/img/apikey_step3.png}" alt="앱 수정 완료" class="step-icon-img">
             </div>
           </div>
           <div class="step-label">앱 수정 완료</div>
@@ -65,30 +64,32 @@
 
     <!-- Success Result -->
     <div class="register-result success" th:if="${modificationComplete}">
-      <!-- Success Icon Animation -->
-      <div class="result-icon-wrapper">
-        <div class="result-icon success-icon">
-          <img th:src="@{/img/img_app_complete.png}">
+      <!-- Result Box (모바일에서 배경 박스) -->
+      <div class="result-box">
+        <!-- Success Icon -->
+        <div class="result-icon-wrapper">
+          <div class="result-icon success-icon">
+            <img th:src="@{/img/img_app_complete.png}" alt="완료">
+          </div>
+        </div>
+
+        <!-- Success Message -->
+        <div class="result-header">
+          <h1>앱 수정이 완료되었습니다.</h1>
+          <p class="result-description">
+            <span class="text-gray">담당자 승인 후 변경 사항이 적용됩니다.</span>
+            <br>
+            <span class="text-dark">[앱 정보]</span>
+            <span class="text-gray">화면에서 수정 내역을 확인할 수 있습니다.</span>
+          </p>
         </div>
       </div>
 
-      <!-- Success Message -->
-      <div class="result-header">
-        <h1>앱 수정 요청이 완료되었습니다.</h1>
-        <p class="result-description">
-          담당자 승인 후 변경 사항이 적용됩니다. [앱 정보]화면에서 수정 내역을 확인할 수 있습니다.
-        </p>
-      </div>
-
-      <!-- API Key Display -->
-      <div class="result-content">
-
-        <!-- Action Buttons -->
-        <div class="result-actions">
-          <a href="/myapikey" class="btn btn-primary">
-            인증키 관리
-          </a>
-        </div>
+      <!-- Action Buttons -->
+      <div class="result-actions">
+        <a href="/myapikey" class="btn btn-primary">
+          완료
+        </a>
       </div>
     </div>