내 정보 관리 - 스타일 적용

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

@@ -3800,9 +3800,7 @@ select.form-control {
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
-  margin-top: 64px;
   padding-top: 40px;
-  border-top: 1px solid #E2E8F0;
 }
 @media (max-width: 768px) {
   .form-actions, .form-actions-center {
@@ -3842,6 +3840,60 @@ select.form-control {
   margin-top: 40px;
   padding-top: 24px;
 }
+.form-actions--with-withdrawal {
+  position: relative;
+  justify-content: center;
+}
+.form-actions--with-withdrawal .withdrawal-link {
+  position: absolute;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  width: 150px;
+  padding: 8px;
+  background: #E5F2F8;
+  border-radius: 12px;
+  color: #5F666C;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.form-actions--with-withdrawal .withdrawal-link:hover {
+  background: rgb(208.9090909091, 231.9545454545, 242.5909090909);
+}
+.form-actions--with-withdrawal .withdrawal-link img {
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal .withdrawal-link {
+    position: static;
+    width: 100%;
+    order: 1;
+  }
+}
+.form-actions--with-withdrawal .form-actions-buttons {
+  display: flex;
+  gap: 16px;
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal .form-actions-buttons {
+    flex-direction: column-reverse;
+    width: 100%;
+    gap: 8px;
+  }
+}
+@media (max-width: 768px) {
+  .form-actions--with-withdrawal {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
 
 .modal-backdrop {
   position: fixed;
@@ -8465,31 +8517,6 @@ select.form-control {
   width: 100%;
 }
 
-.withdrawal-section {
-  margin-top: 48px;
-  padding-top: 32px;
-  border-top: 1px solid #E2E8F0;
-  text-align: left;
-}
-.withdrawal-section .withdrawal-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: #64748B;
-  font-size: 14px;
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-.withdrawal-section .withdrawal-link:hover {
-  color: #FF6B6B;
-  text-decoration: underline;
-}
-.withdrawal-section .withdrawal-link::before {
-  content: ">";
-  font-size: 12px;
-}
-
 .register-title-bar {
   padding: 18px 45px;
   display: flex;

src/main/resources/static/sass/components/_forms.scss

@@ -581,9 +581,7 @@ select.form-control {
   justify-content: center;
   gap: $spacing-md;
   flex-wrap: wrap;
-  margin-top: $spacing-4xl;
   padding-top: $spacing-2xl;
-  border-top: 1px solid $border-gray;
 
   @include respond-to('sm') {
     flex-direction: column-reverse;
@@ -622,6 +620,64 @@ select.form-control {
     margin-top: $spacing-2xl;
     padding-top: $spacing-lg;
   }
+
+  // Modifier: with withdrawal link layout
+  // [회원탈퇴(좌측)] <-- 공백 --> [버튼][버튼](가운데)]
+  &--with-withdrawal {
+    position: relative;
+    justify-content: center;
+
+    .withdrawal-link {
+      position: absolute;
+      left: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      width: 150px;
+      padding: $spacing-sm;
+      background: #E5F2F8;
+      border-radius: $border-radius-lg;
+      color: #5F666C;
+      font-size: $font-size-base;
+      font-weight: $font-weight-regular;
+      text-decoration: none;
+      cursor: pointer;
+      transition: $transition-base;
+
+      &:hover {
+        background: darken(#E5F2F8, 5%);
+      }
+
+      img {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+      }
+
+      @include respond-to('sm') {
+        position: static;
+        width: 100%;
+        order: 1;
+      }
+    }
+
+    .form-actions-buttons {
+      display: flex;
+      gap: $spacing-md;
+
+      @include respond-to('sm') {
+        flex-direction: column-reverse;
+        width: 100%;
+        gap: $spacing-sm;
+      }
+    }
+
+    @include respond-to('sm') {
+      flex-direction: column;
+      gap: $spacing-md;
+    }
+  }
 }
 
 // Centered form actions (alias)

src/main/resources/static/sass/pages/_mypage.scss

@@ -16,32 +16,5 @@
 }
 
 // -----------------------------------------------------------------------------
-// Withdrawal Section - Account deactivation/withdrawal area
+// Withdrawal Link styles moved to components/_forms.scss (.form-actions--with-withdrawal)
 // -----------------------------------------------------------------------------
-.withdrawal-section {
-  margin-top: $spacing-3xl;
-  padding-top: $spacing-xl;
-  border-top: 1px solid $border-gray;
-  text-align: left;
-
-  .withdrawal-link {
-    display: inline-flex;
-    align-items: center;
-    gap: $spacing-xs;
-    color: $text-gray;
-    font-size: $font-size-sm;
-    text-decoration: none;
-    cursor: pointer;
-    transition: $transition-base;
-
-    &:hover {
-      color: $accent-orange;
-      text-decoration: underline;
-    }
-
-    &::before {
-      content: '>';
-      font-size: $font-size-xs;
-    }
-  }
-}

src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html

@@ -15,7 +15,7 @@
 
     <div class="form-row">
         <div class="form-label-wrapper label-offset">
-            <span class="form-label-text required">성명</span>
+            <span class="form-label-text">성명</span> <span class="required-badge">필수</span>
         </div>
         <div class="form-field-wrapper">
             <input type="text" th:value="${userName}" id="userName" name="userName" class="form-input"
@@ -24,7 +24,7 @@
     </div>
     <div class="form-row">
         <div class="form-label-wrapper label-offset">
-            <span class="form-label-text required">휴대폰 번호</span>
+            <span class="form-label-text">휴대폰 번호</span> <span class="required-badge">필수</span>
         </div>
         <div class="form-field-wrapper input-with-button" th:with="parts=${#strings.arraySplit(mobileNumber, '-')}">
             <div class="compound-input">
@@ -54,7 +54,7 @@
     </div>
     <div class="form-row" id="newPhoneNumberContainer" style="display: none;">
         <div class="form-label-wrapper label-offset">
-            <span class="form-label-text required">새 휴대폰 번호</span>
+            <span class="form-label-text">새 휴대폰 번호</span> <span class="required-badge">필수</span>
         </div>
         <div class="form-field-wrapper input-with-button">
             <div class="compound-input">
@@ -82,7 +82,7 @@
     </div>
     <div class="form-row" id="authNumberContainer" style="display: none;">
         <div class="form-label-wrapper label-offset">
-            <span class="form-label-text required">인증번호 입력</span>
+            <span class="form-label-text">인증번호 입력</span> <span class="required-badge">필수</span>
         </div>
         <div class="form-field-wrapper input-with-button">
             <div class="auth-input-group">

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

@@ -215,13 +215,12 @@
         <!-- Action Buttons -->
     </form>
     </div>
-    <div class="form-actions">
+    <div class="form-actions form-actions--with-withdrawal">
-      <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
+      <a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
-      <button type="button" class="btn btn-submit btn-primary">수정 적용</button>
+      <div class="form-actions-buttons">
-    </div>
+        <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
-    <!-- Withdrawal Button -->
+        <button type="button" class="btn btn-submit btn-primary">수정 적용</button>
-    <div class="withdrawal-section">
+      </div>
-      <a class="withdrawal-link">회원탈퇴</a>
     </div>
   </div>
 </section>

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

@@ -32,14 +32,12 @@
       </form>
     </div>
     <!-- Action Buttons -->
-    <div class="form-actions">
+    <div class="form-actions form-actions--with-withdrawal">
-      <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
+      <a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
-      <button type="button" class="btn btn-submit btn-primary submit-btn">수정 적용</button>
+      <div class="form-actions-buttons">
-    </div>
+        <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
-
+        <button type="button" class="btn btn-submit btn-primary submit-btn">수정 적용</button>
-    <!-- Withdrawal Button -->
+      </div>
-    <div class="withdrawal-section">
-      <a class="withdrawal-link">회원탈퇴</a>
     </div>
   </div>
 </section>

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

@@ -29,17 +29,15 @@
         </div>
       </form>
     </div>
-    <!-- Action Buttons -->
-    <div class="form-actions">
-      <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
-      <button type="button" class="btn btn-submit btn-primary submit-btn">수정</button>
-    </div>
-
     <input type="hidden" name="finalMobileNumber"/>
 
-    <!-- Withdrawal Button -->
+    <!-- Action Buttons -->
-    <div class="withdrawal-section">
+    <div class="form-actions form-actions--with-withdrawal">
-      <a class="withdrawal-link">회원탈퇴</a>
+      <a class="withdrawal-link"><img th:src="@{/img/btn_withdrawal.png}" alt="회원탈퇴">회원탈퇴</a>
+      <div class="form-actions-buttons">
+        <button type="button" class="btn btn-submit btn-secondary" th:onclick="|location.href='@{/}'|">취소</button>
+        <button type="button" class="btn btn-submit btn-primary submit-btn">수정</button>
+      </div>
     </div>
   </div>
 </section>