578 lines
24 KiB
Vue
578 lines
24 KiB
Vue
<script setup>
|
|
const loading = ref(true)
|
|
const savingProfile = ref(false)
|
|
const savingPassword = ref(false)
|
|
const deletingAccount = ref(false)
|
|
const uploadingAvatar = ref(false)
|
|
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: '',
|
|
createdAt: '',
|
|
updatedAt: '',
|
|
lastSeenAt: '',
|
|
previousLastSeenAt: '',
|
|
previousLastSeenIp: '',
|
|
commentCount: 0
|
|
})
|
|
|
|
const avatarInputRef = ref(null)
|
|
|
|
const passwordForm = reactive({
|
|
currentPassword: '',
|
|
nextPassword: '',
|
|
nextPasswordConfirm: ''
|
|
})
|
|
|
|
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>}
|
|
*/
|
|
const loadProfile = async () => {
|
|
try {
|
|
const profile = await $fetch('/api/auth/profile')
|
|
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 {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 닉네임 중복 여부를 확인한다.
|
|
* @returns {Promise<boolean>} 사용 가능 여부
|
|
*/
|
|
const checkUsernameAvailable = async () => {
|
|
const username = profileForm.username.trim()
|
|
if (!username) {
|
|
profileMessage.value = '닉네임을 입력해 주세요.'
|
|
return false
|
|
}
|
|
|
|
try {
|
|
const result = await $fetch('/api/auth/check-username', {
|
|
query: {
|
|
username
|
|
}
|
|
})
|
|
|
|
if (!result.available) {
|
|
profileMessage.value = '이미 사용 중인 닉네임입니다.'
|
|
return false
|
|
}
|
|
} catch (error) {
|
|
profileMessage.value = error?.data?.message || '닉네임 중복 확인에 실패했습니다.'
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* 프로필을 저장한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveProfile = async () => {
|
|
profileMessage.value = ''
|
|
const available = await checkUsernameAvailable()
|
|
if (!available) {
|
|
return
|
|
}
|
|
|
|
savingProfile.value = true
|
|
try {
|
|
await $fetch('/api/auth/profile', {
|
|
method: 'PUT',
|
|
body: {
|
|
username: profileForm.username.trim(),
|
|
avatarUrl: profileForm.avatarUrl.trim()
|
|
}
|
|
})
|
|
profileMessage.value = '프로필이 저장되었습니다.'
|
|
} catch (error) {
|
|
profileMessage.value = error?.data?.message || '프로필 저장에 실패했습니다.'
|
|
} finally {
|
|
savingProfile.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 썸네일 파일 선택창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openAvatarFilePicker = () => {
|
|
avatarInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 썸네일을 제거한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const removeAvatar = async () => {
|
|
if (removingAvatar.value) {
|
|
return
|
|
}
|
|
|
|
removingAvatar.value = true
|
|
profileMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/auth/avatar', {
|
|
method: 'DELETE'
|
|
})
|
|
profileForm.avatarUrl = ''
|
|
profileMessage.value = '썸네일이 제거되었습니다.'
|
|
} catch (error) {
|
|
profileMessage.value = error?.data?.message || '썸네일 제거에 실패했습니다.'
|
|
} finally {
|
|
removingAvatar.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 썸네일 파일을 업로드한다.
|
|
* @param {Event} event - 파일 선택 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadAvatar = async (event) => {
|
|
const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
|
|
const file = target?.files?.[0]
|
|
|
|
if (!file || uploadingAvatar.value) {
|
|
return
|
|
}
|
|
|
|
uploadingAvatar.value = true
|
|
profileMessage.value = ''
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const result = await $fetch('/api/auth/avatar', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
profileForm.avatarUrl = result.avatarUrl || ''
|
|
profileMessage.value = '썸네일이 업로드되었습니다.'
|
|
} catch (error) {
|
|
profileMessage.value = error?.data?.message || '썸네일 업로드에 실패했습니다.'
|
|
} finally {
|
|
uploadingAvatar.value = false
|
|
if (target) {
|
|
target.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 작업 메뉴를 토글한다.
|
|
* @returns {void}
|
|
*/
|
|
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
|
|
}
|
|
|
|
/**
|
|
* 비밀번호를 변경한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const savePassword = async () => {
|
|
passwordMessage.value = ''
|
|
if (!passwordForm.currentPassword || !passwordForm.nextPassword || !passwordForm.nextPasswordConfirm) {
|
|
passwordMessage.value = '모든 비밀번호 입력값을 작성해 주세요.'
|
|
return
|
|
}
|
|
if (passwordForm.nextPassword !== passwordForm.nextPasswordConfirm) {
|
|
passwordMessage.value = '새 비밀번호와 확인 값이 일치하지 않습니다.'
|
|
return
|
|
}
|
|
|
|
savingPassword.value = true
|
|
try {
|
|
await $fetch('/api/auth/password', {
|
|
method: 'PUT',
|
|
body: {
|
|
currentPassword: passwordForm.currentPassword,
|
|
nextPassword: passwordForm.nextPassword
|
|
}
|
|
})
|
|
passwordForm.currentPassword = ''
|
|
passwordForm.nextPassword = ''
|
|
passwordForm.nextPasswordConfirm = ''
|
|
passwordModalOpen.value = false
|
|
profileMessage.value = '비밀번호가 변경되었습니다.'
|
|
} catch (error) {
|
|
passwordMessage.value = error?.data?.message || '비밀번호 변경에 실패했습니다.'
|
|
} finally {
|
|
savingPassword.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 회원 탈퇴를 처리한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const removeAccount = async () => {
|
|
deleteMessage.value = ''
|
|
if (!deleteForm.password) {
|
|
deleteMessage.value = '탈퇴 확인용 비밀번호를 입력해 주세요.'
|
|
return
|
|
}
|
|
|
|
deletingAccount.value = true
|
|
try {
|
|
await $fetch('/api/auth/account', {
|
|
method: 'DELETE',
|
|
body: {
|
|
password: deleteForm.password
|
|
}
|
|
})
|
|
await navigateTo('/')
|
|
} catch (error) {
|
|
deleteMessage.value = error?.data?.message || '회원 탈퇴에 실패했습니다.'
|
|
} finally {
|
|
deletingAccount.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(loadProfile)
|
|
</script>
|
|
|
|
<template>
|
|
<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="settings-page__loading mt-8 text-sm site-muted">
|
|
설정 정보를 불러오는 중입니다.
|
|
</div>
|
|
|
|
<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="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>
|
|
</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>
|