사이트 설정 로고와 사용자 설정 레이아웃 정리
This commit is contained in:
@@ -412,8 +412,8 @@ onMounted(loadProfile)
|
||||
설정 정보를 불러오는 중입니다.
|
||||
</div>
|
||||
|
||||
<div v-else class="settings-page__body mt-10 grid gap-8 lg:grid-cols-3">
|
||||
<aside class="settings-page__summary">
|
||||
<div v-else class="settings-page__body mt-10 grid gap-8">
|
||||
<aside class="settings-page__summary rounded-[12px] border border-[var(--site-line)] bg-[var(--site-bg)] p-5 sm:p-6">
|
||||
<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">
|
||||
@@ -438,31 +438,33 @@ onMounted(loadProfile)
|
||||
</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>
|
||||
<div class="settings-page__summary-grid mt-6 grid gap-4 border-t border-[var(--site-line)] pt-5 sm:grid-cols-2">
|
||||
<section class="settings-page__side-section">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-[0.04em]">가입 정보</h3>
|
||||
<p class="mt-3 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>
|
||||
<section class="settings-page__side-section">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-[0.04em]">참여도</h3>
|
||||
<p class="mt-3 text-sm site-muted">
|
||||
댓글 작성 {{ profileForm.commentCount }}개
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="settings-page__content space-y-8 lg:col-span-2">
|
||||
<div class="settings-page__content space-y-8">
|
||||
<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">
|
||||
<input v-model="profileForm.username" class="settings-page__input h-12 rounded-[8px] border border-[var(--site-line)] bg-[var(--site-panel)] px-4 text-sm outline-none 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>
|
||||
<input class="settings-page__input h-12 rounded-[8px] border border-[var(--site-line)] 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">
|
||||
@@ -520,15 +522,15 @@ onMounted(loadProfile)
|
||||
<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">
|
||||
<input v-model="passwordForm.currentPassword" class="h-11 rounded-[8px] border border-[var(--site-line)] bg-[var(--site-panel)] px-4 text-sm outline-none 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">
|
||||
<input v-model="passwordForm.nextPassword" class="h-11 rounded-[8px] border border-[var(--site-line)] bg-[var(--site-panel)] px-4 text-sm outline-none 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">
|
||||
<input v-model="passwordForm.nextPasswordConfirm" class="h-11 rounded-[8px] border border-[var(--site-line)] bg-[var(--site-panel)] px-4 text-sm outline-none 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>
|
||||
@@ -559,7 +561,7 @@ onMounted(loadProfile)
|
||||
<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="비밀번호 확인">
|
||||
<input v-model="deleteForm.password" class="h-11 rounded-[8px] border border-[var(--site-line)] 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">
|
||||
|
||||
Reference in New Issue
Block a user