v0.1.43 - 인증 강제와 회원 탈퇴 흐름 정리

src/components/SettingsDashboard.vue

@@ -14,6 +14,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  accountDeleteForm: {
+    type: Object,
+    required: true,
+  },
   profileBusy: {
     type: Boolean,
     default: false,
@@ -30,6 +34,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  accountDeleteBusy: {
+    type: Boolean,
+    default: false,
+  },
+  accountDeleteMessage: {
+    type: String,
+    default: '',
+  },
   guideTooltipResetMessage: {
     type: String,
     default: '',
@@ -45,6 +57,8 @@ const emit = defineEmits([
   'update:password-field',
   'submit:profile',
   'submit:password',
+  'update:account-delete-field',
+  'submit:delete-account',
   'reset-guide-tooltips',
   'update:carryover-check-policy',
 ])
@@ -66,6 +80,13 @@ function updatePasswordField(field, event) {
     value: event.target.value,
   })
 }
+
+function updateAccountDeleteField(field, event) {
+  emit('update:account-delete-field', {
+    field,
+    value: event.target.value,
+  })
+}
 </script>
 
 <template>
@@ -219,6 +240,42 @@ function updatePasswordField(field, event) {
           {{ passwordBusy ? '변경 중...' : '비밀번호 변경' }}
         </button>
       </form>
+
+      <form
+        v-if="user.role !== 'admin'"
+        class="rounded-[28px] border border-rose-200 bg-white/75 p-6"
+        @submit.prevent="emit('submit:delete-account')"
+      >
+        <p class="text-[11px] font-bold uppercase tracking-[0.24em] text-rose-500">Delete Account</p>
+        <p class="mt-4 text-sm font-semibold leading-6 text-stone-700">
+          회원 탈퇴를 진행하면 플래너 기록, 목표, 계정 정보가 함께 삭제됩니다.
+        </p>
+
+        <div class="mt-5 space-y-2">
+          <label class="text-[11px] font-bold tracking-[0.16em] text-stone-600">현재 비밀번호 확인</label>
+          <input
+            :value="accountDeleteForm.currentPassword"
+            type="password"
+            class="w-full rounded-2xl border border-rose-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-rose-400"
+            @input="updateAccountDeleteField('currentPassword', $event)"
+          />
+        </div>
+
+        <p
+          v-if="accountDeleteMessage"
+          class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold leading-6 text-rose-700"
+        >
+          {{ accountDeleteMessage }}
+        </p>
+
+        <button
+          type="submit"
+          class="mt-5 rounded-full border border-rose-500 px-5 py-3 text-xs font-bold tracking-[0.18em] text-rose-600 transition hover:bg-rose-500 hover:text-white disabled:cursor-not-allowed disabled:border-rose-200 disabled:text-rose-300"
+          :disabled="accountDeleteBusy"
+        >
+          {{ accountDeleteBusy ? '처리 중...' : '회원 탈퇴' }}
+        </button>
+      </form>
     </div>
   </section>
 </template>