feat(member): 회원 설정/헤더 상태 UI와 관리자 멤버 관리 추가

로그인 상태를 헤더에서 즉시 인지하고 계정 관리를 이어갈 수 있도록 사용자 설정과 관리자 멤버 관측 기능을 연결했다. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-11 17:10:48 +09:00
parent 91573a31d6
commit f5cd73b223
34 changed files with 2093 additions and 107 deletions
--- a/pages/admin/members/index.vue
+++ b/pages/admin/members/index.vue
@@ -0,0 +1,88 @@
+<script setup>
+definePageMeta({
+  layout: 'admin'
+})
+
+const { data: members } = await useFetch('/admin/api/members', {
+  default: () => []
+})
+
+/**
+ * 최근 접속 시각 표시 문자열을 반환한다.
+ * @param {string | null} value - ISO 시각
+ * @returns {string} 표시 문자열
+ */
+const formatLastSeen = (value) => {
+  if (!value) {
+    return '-'
+  }
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '-'
+  }
+
+  return date.toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+</script>
+
+<template>
+  <section class="admin-members min-h-screen bg-paper">
+    <div class="border-b border-line bg-paper px-6 py-5">
+      <p class="text-xs font-semibold uppercase text-muted">Admin</p>
+      <h1 class="mt-2 text-2xl font-semibold text-ink">멤버</h1>
+    </div>
+
+    <div class="px-6 py-5">
+      <div class="overflow-x-auto rounded-[10px] border border-line bg-white">
+        <table class="min-w-full text-left text-sm">
+          <thead class="bg-[#f7f7f5] text-xs uppercase text-muted">
+            <tr>
+              <th class="px-3 py-2.5">닉네임</th>
+              <th class="px-3 py-2.5">이메일</th>
+              <th class="px-3 py-2.5">최근 활동</th>
+              <th class="px-3 py-2.5">접속 IP</th>
+              <th class="px-3 py-2.5">활동 현황</th>
+              <th class="px-3 py-2.5 text-right">댓글 개수</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="member in members" :key="member.id" class="border-t border-line/70">
+              <td class="px-3 py-3">
+                <div class="flex items-center gap-2">
+                  <img
+                    v-if="member.avatarUrl"
+                    :src="member.avatarUrl"
+                    :alt="member.username"
+                    class="h-7 w-7 rounded-full object-cover"
+                  >
+                  <span v-else class="grid h-7 w-7 place-items-center rounded-full bg-[#efefec] text-xs font-semibold text-ink">
+                    {{ (member.username || '?').slice(0, 1).toUpperCase() }}
+                  </span>
+                  <span>{{ member.username }}</span>
+                </div>
+              </td>
+              <td class="px-3 py-3 text-muted">{{ member.email }}</td>
+              <td class="px-3 py-3 text-muted">{{ formatLastSeen(member.lastSeenAt) }}</td>
+              <td class="px-3 py-3 text-muted">{{ member.lastSeenIp || '-' }}</td>
+              <td class="px-3 py-3">
+                <span class="rounded-full border border-line px-2 py-0.5 text-xs">{{ member.activityStatus }}</span>
+              </td>
+              <td class="px-3 py-3 text-right font-semibold text-ink">{{ member.commentCount }}</td>
+            </tr>
+            <tr v-if="members.length === 0">
+              <td colspan="6" class="px-3 py-6 text-center text-sm text-muted">등록된 회원이 없습니다.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</template>
+
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -204,7 +204,7 @@ const scrollFeatured = (direction) => {

 <template>
  <MainColumn>
-    <section class="py-6 md:py-8">
+    <section class="py-6 px-6 md:py-8">
      <div class="mx-auto flex max-w-[720px] flex-col-reverse gap-6">
        <div class="z-[2] flex flex-col items-center justify-center gap-2 text-center">
          <h1 class="text-xl font-semibold leading-[1.125] md:text-2xl">
@@ -226,7 +226,7 @@ const scrollFeatured = (direction) => {
      </div>
    </section>

-    <section class="py-4">
+    <section class="py-4 px-6">
      <div class="mx-auto max-w-[720px]">
        <div class="flex items-end justify-between gap-2 border-b border-[var(--site-line)] pb-2">
          <h2 class="text-sm font-medium uppercase site-muted">Featured</h2>
@@ -281,7 +281,7 @@ const scrollFeatured = (direction) => {
      </div>
    </section>

-    <section class="py-4">
+    <section class="py-4 px-6">
      <div class="mx-auto max-w-[720px]">
        <div class="flex items-end justify-between gap-2 border-b border-[var(--site-line)] pb-2">
          <h2 class="text-sm font-medium uppercase site-muted">Latest</h2>
--- a/pages/post/[slug].vue
+++ b/pages/post/[slug].vue
@@ -276,10 +276,7 @@ useHead(() => ({

    <section id="comments" class="mb-6 border-y border-[var(--site-line)] bg-[var(--site-panel-strong)] py-5 scroll-mt-14">
      <div class="mx-auto max-w-[720px] px-4 text-sm sm:px-5">
-        <p class="font-medium">Comments</p>
-        <p class="mt-2 site-muted">
-          댓글 UI는 추후 연결 예정입니다.
-        </p>
+        <PostComments :slug="post.slug" />
      </div>
    </section>

--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -0,0 +1,273 @@
+<script setup>
+const loading = ref(true)
+const savingProfile = ref(false)
+const savingPassword = ref(false)
+const deletingAccount = ref(false)
+const profileMessage = ref('')
+const passwordMessage = ref('')
+const deleteMessage = ref('')
+
+const profileForm = reactive({
+  email: '',
+  username: '',
+  avatarUrl: ''
+})
+
+const passwordForm = reactive({
+  currentPassword: '',
+  nextPassword: '',
+  nextPasswordConfirm: ''
+})
+
+const deleteForm = reactive({
+  password: ''
+})
+
+/**
+ * 설정 화면 초기 데이터를 조회한다.
+ * @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 || ''
+  } 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 {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 = ''
+    passwordMessage.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-[720px] px-4 py-8 sm:px-5">
+    <h1 class="text-xl font-semibold">사용자 설정</h1>
+
+    <div v-if="loading" class="mt-4 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-3">
+          <label class="text-xs site-muted">이메일</label>
+          <input
+            v-model="profileForm.email"
+            type="text"
+            disabled
+            class="h-10 rounded-[8px] border border-[var(--site-line)] bg-[var(--site-panel)] px-3 text-sm"
+          >
+          <label class="text-xs site-muted">닉네임</label>
+          <input
+            v-model="profileForm.username"
+            type="text"
+            class="h-10 rounded-[8px] border border-[var(--site-line)] bg-transparent px-3 text-sm outline-none focus-visible:border-[var(--site-accent)]"
+          >
+          <label class="text-xs site-muted">썸네일 URL</label>
+          <input
+            v-model="profileForm.avatarUrl"
+            type="text"
+            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="https://..."
+          >
+          <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="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>
+    </div>
+  </section>
+</template>
+
--- a/pages/signin.vue
+++ b/pages/signin.vue
@@ -35,7 +35,7 @@ const validateSignIn = () => {
 }

 /**
- * 로그인 요청을 시뮬레이션한다.
+ * 로그인 요청을 처리한다.
 * @returns {Promise<void>}
 */
 const submitSignIn = async () => {
@@ -44,9 +44,22 @@ const submitSignIn = async () => {
  }

  isSubmitting.value = true
-  await new Promise((resolve) => setTimeout(resolve, 500))
-  isSubmitting.value = false
-  statusMessage.value = '현재 로그인 API 연결 전입니다. 관리자 로그인은 /admin 을 사용해 주세요.'
+
+  try {
+    await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: {
+        email: form.email.trim(),
+        password: form.password
+      }
+    })
+    statusMessage.value = '로그인되었습니다. 잠시 후 이동합니다.'
+    await navigateTo('/')
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '로그인에 실패했습니다.'
+  } finally {
+    isSubmitting.value = false
+  }
 }
 </script>

--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -4,10 +4,10 @@ definePageMeta({
 })

 const currentStep = ref(1)
-const resendCooldown = ref(0)
 const isSubmitting = ref(false)
 const signupCompleted = ref(false)
 const statusMessage = ref('')
+const submitErrorMessage = ref('')
 const { data: siteSettings } = await useFetch('/api/site-settings', {
  default: () => ({
    title: 'AFFiNE',
@@ -32,7 +32,6 @@ const errors = reactive({
 const showSignupPassword = ref(false)
 const showSignupPasswordConfirm = ref(false)

-const canResend = computed(() => resendCooldown.value <= 0)
 const welcomeTitle = computed(() => `Welcome to ${siteSettings.value?.title || 'AFFiNE'}`)
 const welcomeDescription = computed(() => siteSettings.value?.description || 'Configure your Self Host AFFiNE with a few simple settings.')

@@ -89,10 +88,11 @@ const validateStepTwo = () => {

 /**
 * 다음 단계로 이동한다.
- * @returns {void}
+ * @returns {Promise<void>}
 */
-const goNextStep = () => {
+const goNextStep = async () => {
  statusMessage.value = ''
+  submitErrorMessage.value = ''

  if (currentStep.value === 1) {
    currentStep.value = 2
@@ -104,8 +104,27 @@ const goNextStep = () => {
      return
    }

-    currentStep.value = 3
-    resendCooldown.value = 30
+    isSubmitting.value = true
+
+    try {
+      await $fetch('/api/auth/signup', {
+        method: 'POST',
+        body: {
+          username: form.username.trim(),
+          email: form.email.trim(),
+          password: form.password
+        }
+      })
+
+      signupCompleted.value = true
+      currentStep.value = 3
+      statusMessage.value = '회원가입이 완료되었습니다. 잠시 후 홈으로 이동합니다.'
+      await navigateTo('/')
+    } catch (error) {
+      submitErrorMessage.value = error?.data?.message || '회원가입에 실패했습니다.'
+    } finally {
+      isSubmitting.value = false
+    }
  }
 }

@@ -120,49 +139,6 @@ const goPreviousStep = () => {
  }
 }

-/**
- * 인증 메일 재전송을 시뮬레이션한다.
- * @returns {Promise<void>}
- */
-const resendVerificationEmail = async () => {
-  if (!canResend.value || isSubmitting.value) {
-    return
-  }
-
-  isSubmitting.value = true
-  await new Promise((resolve) => setTimeout(resolve, 500))
-  isSubmitting.value = false
-  resendCooldown.value = 30
-  statusMessage.value = '인증 메일을 다시 보냈습니다. 메일함을 확인해 주세요.'
-}
-
-/**
- * 이메일 인증 완료를 시뮬레이션한다.
- * @returns {Promise<void>}
- */
-const completeSignup = async () => {
-  isSubmitting.value = true
-  await new Promise((resolve) => setTimeout(resolve, 600))
-  isSubmitting.value = false
-  signupCompleted.value = true
-  statusMessage.value = '이메일 인증이 완료되었습니다. 로그인 페이지로 이동할 수 있습니다.'
-}
-
-const countdownTimer = ref(/** @type {ReturnType<typeof setInterval> | null} */ (null))
-
-onMounted(() => {
-  countdownTimer.value = setInterval(() => {
-    if (resendCooldown.value > 0) {
-      resendCooldown.value -= 1
-    }
-  }, 1000)
-})
-
-onBeforeUnmount(() => {
-  if (countdownTimer.value) {
-    clearInterval(countdownTimer.value)
-  }
-})
 </script>

 <template>
@@ -271,25 +247,17 @@ onBeforeUnmount(() => {

        <template v-else>
          <p class="text-2xl font-semibold leading-tight">
-            이메일 확인
+            회원가입 완료
          </p>
          <p class="mt-2 text-sm text-[#9ba3af]">
-            {{ form.email }} 주소로 인증 메일을 보냈습니다.<br>
-            이메일 링크를 확인해야 회원가입이 확정됩니다.
+            {{ form.email }} 계정으로 가입되었습니다.<br>
+            이제 로그인 후 댓글을 작성할 수 있습니다.
          </p>

          <div class="mt-8 rounded-[10px] border border-[#1a212a] bg-[#0d1116] p-4">
            <p class="text-sm text-[#d8dee6]">
-              메일이 오지 않았다면 인증 메일을 재전송해 주세요.
+              가입이 완료되면 자동으로 홈으로 이동합니다.
            </p>
-            <button
-              class="mt-3 h-9 rounded-[8px] border border-[#2f6feb] px-4 text-xs font-medium text-[#7eb8ff] transition-opacity disabled:cursor-not-allowed disabled:opacity-40"
-              type="button"
-              :disabled="!canResend || isSubmitting"
-              @click="resendVerificationEmail"
-            >
-              {{ canResend ? '인증 메일 재전송' : `${resendCooldown}초 후 재전송` }}
-            </button>
          </div>

          <p v-if="statusMessage" class="mt-4 text-sm text-[#7ccf90]" aria-live="polite">
@@ -324,9 +292,9 @@ onBeforeUnmount(() => {
            class="h-9 rounded-[8px] bg-[#2f6feb] px-8 text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
            type="button"
            :disabled="isSubmitting"
-            @click="completeSignup"
+            @click="goNextStep"
          >
-            인증 완료
+            가입 처리 중
          </button>

          <NuxtLink
@@ -338,6 +306,10 @@ onBeforeUnmount(() => {
          </NuxtLink>
          </div>

+          <p v-if="submitErrorMessage" class="mt-3 text-xs text-[#e5acb1]" aria-live="polite">
+            {{ submitErrorMessage }}
+          </p>
+
          <div class="mt-8 flex items-center gap-1.5">
            <span class="h-[2px] w-9 rounded-full" :class="currentStep >= 1 ? 'bg-[#2f6feb]' : 'bg-[#222a34]'" />
            <span class="h-[2px] w-9 rounded-full" :class="currentStep >= 2 ? 'bg-[#2f6feb]' : 'bg-[#222a34]'" />