관리자와 회원 설정 계정 작업 정리

pages/settings/index.vue

@@ -8,11 +8,20 @@ const removingAvatar = ref(false)
 const profileMessage = ref('')
 const passwordMessage = ref('')
 const deleteMessage = ref('')
+const actionMenuOpen = ref(false)
+const passwordModalOpen = ref(false)
+const deleteModalOpen = ref(false)
 
 const profileForm = reactive({
   email: '',
   username: '',
-  avatarUrl: ''
+  avatarUrl: '',
+  createdAt: '',
+  updatedAt: '',
+  lastSeenAt: '',
+  previousLastSeenAt: '',
+  previousLastSeenIp: '',
+  commentCount: 0
 })
 
 const avatarInputRef = ref(null)
@@ -27,6 +36,72 @@ const deleteForm = reactive({
   password: ''
 })
 
+const displayName = computed(() => profileForm.username || profileForm.email || '멤버')
+const avatarInitial = computed(() => String(displayName.value || '?').slice(0, 1).toUpperCase())
+const previousLoginText = computed(() => formatRelativeTime(profileForm.previousLastSeenAt, '이전 로그인 기록 없음'))
+
+/**
+ * 날짜 표시 형식을 변환한다.
+ * @param {string | null} value - ISO 날짜 문자열
+ * @returns {string} 표시 날짜
+ */
+const formatDate = (value) => {
+  if (!value) {
+    return '-'
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '-'
+  }
+
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  return `${year}.${month}.${day}`
+}
+
+/**
+ * 상대 시간 문구를 만든다.
+ * @param {string | null} value - ISO 날짜 문자열
+ * @param {string} emptyText - 값이 없을 때 문구
+ * @returns {string} 상대 시간
+ */
+const formatRelativeTime = (value, emptyText = '기록 없음') => {
+  if (!value) {
+    return emptyText
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return emptyText
+  }
+
+  const diffMs = Date.now() - date.getTime()
+  const minute = 1000 * 60
+  const hour = minute * 60
+  const day = hour * 24
+
+  if (diffMs < minute) {
+    return '방금 전'
+  }
+
+  if (diffMs < hour) {
+    return `${Math.floor(diffMs / minute)}분 전`
+  }
+
+  if (diffMs < day) {
+    return `${Math.floor(diffMs / hour)}시간 전`
+  }
+
+  if (diffMs < day * 30) {
+    return `${Math.floor(diffMs / day)}일 전`
+  }
+
+  return formatDate(value)
+}
+
 /**
  * 설정 화면 초기 데이터를 조회한다.
  * @returns {Promise<void>}
@@ -37,6 +112,12 @@ const loadProfile = async () => {
     profileForm.email = profile.email || ''
     profileForm.username = profile.username || ''
     profileForm.avatarUrl = profile.avatarUrl || ''
+    profileForm.createdAt = profile.createdAt || ''
+    profileForm.updatedAt = profile.updatedAt || ''
+    profileForm.lastSeenAt = profile.lastSeenAt || ''
+    profileForm.previousLastSeenAt = profile.previousLastSeenAt || ''
+    profileForm.previousLastSeenIp = profile.previousLastSeenIp || ''
+    profileForm.commentCount = Number(profile.commentCount || 0)
   } catch {
     await navigateTo('/signin')
   } finally {
@@ -102,6 +183,14 @@ const saveProfile = async () => {
   }
 }
 
+/**
+ * 썸네일 파일 선택창을 연다.
+ * @returns {void}
+ */
+const openAvatarFilePicker = () => {
+  avatarInputRef.value?.click()
+}
+
 /**
  * 썸네일을 제거한다.
  * @returns {Promise<void>}
@@ -163,11 +252,67 @@ const uploadAvatar = async (event) => {
 }
 
 /**
- * 썸네일 파일 선택창을 연다.
+ * 작업 메뉴를 토글한다.
  * @returns {void}
  */
-const openAvatarFilePicker = () => {
-  avatarInputRef.value?.click()
+const toggleActionMenu = () => {
+  actionMenuOpen.value = !actionMenuOpen.value
+}
+
+/**
+ * 작업 메뉴를 닫는다.
+ * @returns {void}
+ */
+const closeActionMenu = () => {
+  actionMenuOpen.value = false
+}
+
+/**
+ * 비밀번호 변경 모달을 연다.
+ * @returns {void}
+ */
+const openPasswordModal = () => {
+  passwordForm.currentPassword = ''
+  passwordForm.nextPassword = ''
+  passwordForm.nextPasswordConfirm = ''
+  passwordMessage.value = ''
+  passwordModalOpen.value = true
+  closeActionMenu()
+}
+
+/**
+ * 회원 탈퇴 모달을 연다.
+ * @returns {void}
+ */
+const openDeleteModal = () => {
+  deleteForm.password = ''
+  deleteMessage.value = ''
+  deleteModalOpen.value = true
+  closeActionMenu()
+}
+
+/**
+ * 비밀번호 변경 모달을 닫는다.
+ * @returns {void}
+ */
+const closePasswordModal = () => {
+  if (savingPassword.value) {
+    return
+  }
+
+  passwordModalOpen.value = false
+}
+
+/**
+ * 회원 탈퇴 모달을 닫는다.
+ * @returns {void}
+ */
+const closeDeleteModal = () => {
+  if (deletingAccount.value) {
+    return
+  }
+
+  deleteModalOpen.value = false
 }
 
 /**
@@ -197,7 +342,8 @@ const savePassword = async () => {
     passwordForm.currentPassword = ''
     passwordForm.nextPassword = ''
     passwordForm.nextPasswordConfirm = ''
-    passwordMessage.value = '비밀번호가 변경되었습니다.'
+    passwordModalOpen.value = false
+    profileMessage.value = '비밀번호가 변경되었습니다.'
   } catch (error) {
     passwordMessage.value = error?.data?.message || '비밀번호 변경에 실패했습니다.'
   } finally {
@@ -236,149 +382,196 @@ onMounted(loadProfile)
 </script>
 
 <template>
-  <section class="settings-page mx-auto w-full max-w-[720px] px-4 py-8 sm:px-5">
-    <h1 class="text-xl font-semibold">사용자 설정</h1>
+  <section class="settings-page mx-auto w-full max-w-[1180px] px-4 py-8 sm:px-6 lg:px-8">
+    <div class="settings-page__header flex items-start justify-between gap-4">
+      <div>
+        <p class="settings-page__breadcrumb text-sm text-[var(--site-muted)]">내 계정</p>
+        <h1 class="settings-page__title mt-3 text-3xl font-semibold tracking-[-0.01em]">
+          {{ displayName }}
+        </h1>
+      </div>
+      <div class="settings-page__actions relative">
+        <button class="settings-page__settings-button grid h-11 w-11 place-items-center rounded-[8px] border border-[var(--site-line)] bg-[var(--site-bg)] transition hover:bg-[var(--site-panel)]" type="button" aria-label="계정 작업" :aria-expanded="actionMenuOpen" @click="toggleActionMenu">
+          <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M10.546 2.438a1.957 1.957 0 002.908 0L14.4 1.4a1.959 1.959 0 013.41 1.413l-.071 1.4a1.958 1.958 0 002.051 2.054l1.4-.071a1.959 1.959 0 011.41 3.41l-1.042.94a1.96 1.96 0 000 2.909l1.042.94a1.959 1.959 0 01-1.413 3.41l-1.4-.071a1.958 1.958 0 00-2.056 2.056l.071 1.4A1.959 1.959 0 0114.4 22.6l-.941-1.041a1.959 1.959 0 00-2.908 0L9.606 22.6A1.959 1.959 0 016.2 21.192l.072-1.4a1.958 1.958 0 00-2.056-2.056l-1.4.071A1.958 1.958 0 011.4 14.4l1.041-.94a1.96 1.96 0 000-2.909L1.4 9.606A1.958 1.958 0 012.809 6.2l1.4.071a1.958 1.958 0 002.058-2.06L6.2 2.81A1.959 1.959 0 019.606 1.4z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+            <circle cx="12" cy="12.001" r="4.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+          </svg>
+        </button>
+        <div v-if="actionMenuOpen" class="settings-page__action-menu absolute right-0 top-12 z-20 grid w-52 overflow-hidden rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] py-2 text-sm shadow-[0_18px_50px_rgba(15,23,42,0.16)]">
+          <button class="settings-page__action-item px-4 py-2.5 text-left transition hover:bg-[var(--site-panel)]" type="button" @click="openPasswordModal">
+            비밀번호 변경
+          </button>
+          <button class="settings-page__action-item px-4 py-2.5 text-left text-red-500 transition hover:bg-red-500/10" type="button" @click="openDeleteModal">
+            회원 탈퇴
+          </button>
+        </div>
+      </div>
+    </div>
 
-    <div v-if="loading" class="mt-4 text-sm site-muted">
+    <div v-if="loading" class="settings-page__loading mt-8 text-sm site-muted">
       설정 정보를 불러오는 중입니다.
     </div>
 
-    <div v-else class="mt-5 flex flex-col gap-5">
-      <section class="rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-4">
-        <h2 class="text-sm font-semibold">프로필</h2>
-        <div class="mt-3 flex flex-col gap-4">
-          <div class="settings-profile-account flex flex-col gap-3 rounded-[12px] border border-[var(--site-line)] bg-[var(--site-panel)] p-3 md:flex-row md:items-center md:gap-4">
-            <div class="relative w-fit shrink-0">
-              <button
-                type="button"
-                class="group relative h-24 w-24 overflow-hidden rounded-full border border-[var(--site-line)] bg-[var(--site-bg)]"
-                :disabled="uploadingAvatar || removingAvatar"
-                @click="openAvatarFilePicker"
-              >
-                <img
-                  v-if="profileForm.avatarUrl"
-                  :src="profileForm.avatarUrl"
-                  alt="프로필 썸네일"
-                  class="h-full w-full object-cover"
-                >
-                <span
-                  v-else
-                  class="grid h-full w-full place-items-center text-2xl font-semibold site-muted"
-                >
-                  {{ (profileForm.username || profileForm.email || '@').slice(0, 1).toUpperCase() }}
-                </span>
-                <span class="pointer-events-none absolute inset-0 grid place-items-center bg-black/45 text-[11px] font-medium text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                  {{ profileForm.avatarUrl ? '이미지 변경' : '썸네일 등록' }}
-                </span>
-              </button>
-              <button
-                v-if="profileForm.avatarUrl"
-                type="button"
-                class="absolute right-0 top-0 grid h-6 w-6 -translate-y-1/3 translate-x-1/3 place-items-center rounded-full border border-[var(--site-line)] bg-[var(--site-panel-strong)] text-xs site-muted transition-opacity hover:opacity-80 disabled:opacity-50"
-                :disabled="removingAvatar"
-                @click.stop="removeAvatar"
-              >
-                {{ removingAvatar ? '...' : 'X' }}
-              </button>
+    <div v-else class="settings-page__body mt-10 grid gap-8 lg:grid-cols-3">
+      <aside class="settings-page__summary">
+        <div class="settings-page__identity flex items-center gap-4">
+          <div class="settings-page__avatar-control group relative h-24 w-24 shrink-0">
+            <button class="settings-page__avatar-button relative h-24 w-24 overflow-hidden rounded-full border border-[var(--site-line)] bg-[var(--site-panel)]" type="button" :disabled="uploadingAvatar || removingAvatar" :aria-label="profileForm.avatarUrl ? '썸네일 변경' : '썸네일 등록'" @click="openAvatarFilePicker">
+              <img v-if="profileForm.avatarUrl" class="settings-page__avatar h-full w-full object-cover" :src="profileForm.avatarUrl" alt="프로필 썸네일">
+              <span v-else class="settings-page__avatar-initial grid h-full w-full place-items-center text-2xl font-semibold site-muted">
+                {{ avatarInitial }}
+              </span>
+              <span class="settings-page__avatar-caption pointer-events-none absolute inset-x-0 bottom-0 flex min-h-9 items-end justify-center bg-gradient-to-t from-black/80 via-black/35 to-transparent px-2 pb-2 text-center text-[11px] font-semibold text-white opacity-0 transition-opacity group-hover:opacity-100">
+                {{ uploadingAvatar ? '업로드 중' : profileForm.avatarUrl ? '썸네일 변경' : '썸네일 등록' }}
+              </span>
+            </button>
+            <button v-if="profileForm.avatarUrl" class="settings-page__avatar-remove absolute right-0 top-0 grid h-7 w-7 -translate-y-1 translate-x-1 place-items-center rounded-full bg-black/85 text-white opacity-0 transition hover:bg-red-500 group-hover:opacity-100" type="button" aria-label="썸네일 제거" :disabled="removingAvatar" @click.stop="removeAvatar">
+              <svg class="h-3 w-3" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
+              </svg>
+            </button>
+            <input ref="avatarInputRef" class="hidden" type="file" accept="image/jpeg,image/png,image/webp,image/gif" :disabled="uploadingAvatar" @change="uploadAvatar">
+          </div>
+          <div class="min-w-0">
+            <h2 class="truncate text-lg font-semibold">{{ displayName }}</h2>
+            <p class="mt-1 truncate text-sm site-muted">{{ profileForm.email }}</p>
+          </div>
+        </div>
+
+        <section class="settings-page__side-section mt-12 border-t border-[var(--site-line)] pt-6">
+          <h3 class="text-xs font-semibold uppercase tracking-[0.04em]">가입 정보</h3>
+          <p class="mt-5 text-sm site-muted">
+            생성됨 — <strong class="text-[var(--site-text)]">{{ formatDate(profileForm.createdAt) }}</strong>
+          </p>
+        </section>
+
+        <section class="settings-page__side-section mt-12 border-t border-[var(--site-line)] pt-6">
+          <h3 class="text-xs font-semibold uppercase tracking-[0.04em]">참여도</h3>
+          <p class="mt-5 text-sm site-muted">
+            댓글 작성 {{ profileForm.commentCount }}개
+          </p>
+        </section>
+      </aside>
+
+      <div class="settings-page__content space-y-8 lg:col-span-2">
+        <form class="settings-page__profile rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] p-5 sm:p-6" @submit.prevent="saveProfile">
+          <div class="grid gap-5 md:grid-cols-2">
+            <label class="settings-page__field grid gap-2 text-sm font-semibold">
+              닉네임
+              <input v-model="profileForm.username" class="settings-page__input h-12 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none focus:border-[var(--site-line)] focus:bg-[var(--site-bg)]" type="text" maxlength="60">
+            </label>
+            <label class="settings-page__field grid gap-2 text-sm font-semibold">
+              이메일
+              <input class="settings-page__input h-12 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none" type="email" :value="profileForm.email" readonly>
+            </label>
+          </div>
+          <div class="mt-5 flex items-center justify-between gap-3 border-t border-[var(--site-line)] pt-5">
+            <p v-if="profileMessage" class="settings-page__message text-sm site-muted">{{ profileMessage }}</p>
+            <span v-else />
+            <button class="site-accent-button h-10 rounded-[8px] px-4 text-sm font-semibold disabled:opacity-60" type="submit" :disabled="savingProfile">
+              {{ savingProfile ? '저장 중' : '프로필 저장' }}
+            </button>
+          </div>
+        </form>
+
+        <section class="settings-page__activity">
+          <h2 class="settings-page__section-title mb-4 text-xs font-semibold uppercase tracking-[0.04em]">활동 정보</h2>
+          <div class="settings-page__activity-card rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] px-5 sm:px-6">
+            <div class="settings-page__activity-row flex items-center justify-between gap-4 border-b border-[var(--site-line)] py-5 text-sm">
+              <span class="flex items-center gap-3">
+                <svg class="h-5 w-5 site-muted" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M4 12h10.31m-3.076-3.076L14.31 12l-3.076 3.077" stroke="currentColor" stroke-width="1.714" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M4.998 16.308a7.69 7.69 0 003.733 3.182 7.238 7.238 0 004.8.189 7.608 7.608 0 003.949-2.88A8.283 8.283 0 0018.998 12c0-1.73-.533-3.414-1.518-4.798a7.607 7.607 0 00-3.949-2.88 7.237 7.237 0 00-4.8.188 7.69 7.69 0 00-3.733 3.182" stroke="currentColor" stroke-width="1.714" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                마지막 로그인
+              </span>
+              <span class="text-right site-muted">
+                {{ previousLoginText }}
+              </span>
             </div>
-            <div class="flex min-w-0 flex-1 flex-col gap-2">
-              <div class="rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] px-3 py-2.5">
-                <p class="text-[11px] site-muted">닉네임</p>
-                <input
-                  v-model="profileForm.username"
-                  type="text"
-                  class="mt-1 h-7 w-full border-none bg-transparent p-0 text-sm font-semibold outline-none focus-visible:ring-0"
-                >
-              </div>
-              <div class="rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] px-3 py-2.5">
-                <p class="text-[11px] site-muted">ID (이메일)</p>
-                <p class="mt-1 truncate text-sm font-semibold">
-                  {{ profileForm.email }}
-                </p>
-              </div>
+            <div class="settings-page__activity-row flex items-center justify-between gap-4 py-5 text-sm">
+              <span class="flex items-center gap-3">
+                <svg class="h-5 w-5 site-muted" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M11.246 12.144a4.242 4.242 0 100-8.484 4.242 4.242 0 000 8.484zM4 18.761a8.484 8.484 0 0110.5-3.42" stroke="currentColor" stroke-width="1.714" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M17.54 16.077V23m-3.463-3.46H21" stroke="#30CF43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                가입
+              </span>
+              <span class="text-right site-muted">
+                {{ formatRelativeTime(profileForm.createdAt) }}
+              </span>
             </div>
           </div>
-          <input
-            ref="avatarInputRef"
-            type="file"
-            accept="image/jpeg,image/png,image/webp,image/gif"
-            class="hidden"
-            :disabled="uploadingAvatar"
-            @change="uploadAvatar"
-          >
-          <button
-            type="button"
-            class="site-accent-button w-fit rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:opacity-60"
-            :disabled="savingProfile"
-            @click="saveProfile"
-          >
-            {{ savingProfile ? '저장 중...' : '프로필 저장' }}
-          </button>
-          <p v-if="profileMessage" class="text-xs site-muted">
-            {{ profileMessage }}
-          </p>
-        </div>
-      </section>
- 
-      <section class="rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-4">
-        <h2 class="text-sm font-semibold">비밀번호 변경</h2>
-        <div class="mt-3 flex flex-col gap-3">
-          <input
-            v-model="passwordForm.currentPassword"
-            type="password"
-            class="h-10 rounded-[8px] border border-[var(--site-line)] bg-transparent px-3 text-sm outline-none focus-visible:border-[var(--site-accent)]"
-            placeholder="현재 비밀번호"
-          >
-          <input
-            v-model="passwordForm.nextPassword"
-            type="password"
-            class="h-10 rounded-[8px] border border-[var(--site-line)] bg-transparent px-3 text-sm outline-none focus-visible:border-[var(--site-accent)]"
-            placeholder="새 비밀번호"
-          >
-          <input
-            v-model="passwordForm.nextPasswordConfirm"
-            type="password"
-            class="h-10 rounded-[8px] border border-[var(--site-line)] bg-transparent px-3 text-sm outline-none focus-visible:border-[var(--site-accent)]"
-            placeholder="새 비밀번호 확인"
-          >
-          <button
-            type="button"
-            class="site-accent-button mt-1 w-fit rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:opacity-60"
-            :disabled="savingPassword"
-            @click="savePassword"
-          >
-            {{ savingPassword ? '변경 중...' : '비밀번호 변경' }}
-          </button>
-          <p v-if="passwordMessage" class="text-xs site-muted">
-            {{ passwordMessage }}
-          </p>
-        </div>
-      </section>
-
-      <section class="rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-4">
-        <h2 class="text-sm font-semibold text-red-500/70">회원 탈퇴</h2>
-        <p class="mt-2 text-xs site-muted">
-          탈퇴 시 작성한 댓글과 계정 정보가 삭제됩니다.
-        </p>
-        <input
-          v-model="deleteForm.password"
-          type="password"
-          class="mt-3 h-10 w-full rounded-[8px] border border-[var(--site-line)] bg-transparent px-3 text-sm outline-none focus-visible:border-red-400"
-          placeholder="비밀번호 확인"
-        >
-        <button
-          type="button"
-          class="mt-3 rounded-[10px] border border-red-400/40 px-3 py-1.5 text-xs text-red-500/70 transition-opacity hover:opacity-80 disabled:opacity-50"
-          :disabled="deletingAccount"
-          @click="removeAccount"
-        >
-          {{ deletingAccount ? '처리 중...' : '회원 탈퇴' }}
-        </button>
-        <p v-if="deleteMessage" class="mt-2 text-xs site-muted">
-          {{ deleteMessage }}
-        </p>
-      </section>
+        </section>
+      </div>
     </div>
+
+    <Teleport to="body">
+      <div v-if="passwordModalOpen" class="settings-page__modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 pt-10">
+        <section class="settings-page__modal-panel w-full max-w-[520px] rounded-[12px] bg-[var(--site-bg)] text-[var(--site-text)] shadow-[0_22px_70px_rgba(15,23,42,0.25)]">
+          <header class="flex items-center justify-between border-b border-[var(--site-line)] px-6 py-5">
+            <h2 class="text-xl font-semibold">비밀번호 변경</h2>
+            <button class="grid h-8 w-8 place-items-center rounded-[8px] site-muted hover:bg-[var(--site-panel)]" type="button" aria-label="닫기" @click="closePasswordModal">
+              <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
+              </svg>
+            </button>
+          </header>
+          <div class="grid gap-4 px-6 py-5">
+            <label class="grid gap-2 text-sm font-semibold">
+              현재 비밀번호
+              <input v-model="passwordForm.currentPassword" class="h-11 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none focus:border-[var(--site-line)] focus:bg-[var(--site-bg)]" type="password" autocomplete="current-password">
+            </label>
+            <label class="grid gap-2 text-sm font-semibold">
+              새 비밀번호
+              <input v-model="passwordForm.nextPassword" class="h-11 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none focus:border-[var(--site-line)] focus:bg-[var(--site-bg)]" type="password" autocomplete="new-password">
+            </label>
+            <label class="grid gap-2 text-sm font-semibold">
+              새 비밀번호 확인
+              <input v-model="passwordForm.nextPasswordConfirm" class="h-11 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none focus:border-[var(--site-line)] focus:bg-[var(--site-bg)]" type="password" autocomplete="new-password">
+            </label>
+            <p v-if="passwordMessage" class="rounded-[8px] border border-red-400/30 bg-red-500/10 px-4 py-3 text-sm text-red-500">{{ passwordMessage }}</p>
+          </div>
+          <footer class="flex justify-end gap-2 border-t border-[var(--site-line)] px-6 py-4">
+            <button class="h-10 rounded-[8px] border border-[var(--site-line)] px-4 text-sm font-semibold" type="button" @click="closePasswordModal">
+              취소
+            </button>
+            <button class="site-accent-button h-10 rounded-[8px] px-4 text-sm font-semibold disabled:opacity-60" type="button" :disabled="savingPassword" @click="savePassword">
+              {{ savingPassword ? '변경 중' : '변경' }}
+            </button>
+          </footer>
+        </section>
+      </div>
+    </Teleport>
+
+    <Teleport to="body">
+      <div v-if="deleteModalOpen" class="settings-page__modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 pt-10">
+        <section class="settings-page__modal-panel w-full max-w-[520px] rounded-[12px] bg-[var(--site-bg)] text-[var(--site-text)] shadow-[0_22px_70px_rgba(15,23,42,0.25)]">
+          <header class="flex items-center justify-between border-b border-[var(--site-line)] px-6 py-5">
+            <h2 class="text-xl font-semibold">회원 탈퇴</h2>
+            <button class="grid h-8 w-8 place-items-center rounded-[8px] site-muted hover:bg-[var(--site-panel)]" type="button" aria-label="닫기" @click="closeDeleteModal">
+              <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
+              </svg>
+            </button>
+          </header>
+          <div class="grid gap-4 px-6 py-5">
+            <p class="text-sm leading-6 site-muted">
+              탈퇴하면 계정과 작성한 댓글이 삭제됩니다. 계속하려면 비밀번호를 입력해 주세요.
+            </p>
+            <input v-model="deleteForm.password" class="h-11 rounded-[8px] border border-transparent bg-[var(--site-panel)] px-4 text-sm outline-none focus:border-red-400 focus:bg-[var(--site-bg)]" type="password" autocomplete="current-password" placeholder="비밀번호 확인">
+            <p v-if="deleteMessage" class="rounded-[8px] border border-red-400/30 bg-red-500/10 px-4 py-3 text-sm text-red-500">{{ deleteMessage }}</p>
+          </div>
+          <footer class="flex justify-end gap-2 border-t border-[var(--site-line)] px-6 py-4">
+            <button class="h-10 rounded-[8px] border border-[var(--site-line)] px-4 text-sm font-semibold" type="button" @click="closeDeleteModal">
+              취소
+            </button>
+            <button class="h-10 rounded-[8px] bg-red-500 px-4 text-sm font-semibold text-white disabled:opacity-60" type="button" :disabled="deletingAccount" @click="removeAccount">
+              {{ deletingAccount ? '처리 중' : '탈퇴' }}
+            </button>
+          </footer>
+        </section>
+      </div>
+    </Teleport>
   </section>
 </template>
-