태그를 관리용/일반용으로 분리하고 관리자 드래그 정렬을 추가.

댓글/회원/관리자 인증·프로필 흐름 보완과 관련 마이그레이션 및 문서를 함께 반영해 운영 동선을 안정화. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-11 18:34:23 +09:00
parent b18aca4dcc
commit cdc16c72b2
35 changed files with 1721 additions and 138 deletions
--- a/pages/admin/login.vue
+++ b/pages/admin/login.vue
@@ -10,6 +10,12 @@ const form = reactive({

 const pending = ref(false)
 const errorMessage = ref('')
+const { data: bootstrapStatus } = await useFetch('/api/auth/bootstrap-status', {
+  default: () => ({
+    hasUsers: true,
+    needsAdminSetup: false
+  })
+})

 /**
 * 관리자 로그인 제출
@@ -42,6 +48,16 @@ const submitLogin = async () => {
      <h1 class="admin-login__title mt-2 text-3xl font-semibold">
        로그인
      </h1>
+      <p
+        v-if="bootstrapStatus?.needsAdminSetup"
+        class="mt-3 rounded border border-[#ff4f2e]/30 bg-[#ff4f2e]/10 px-3 py-2 text-xs text-[#b63a23]"
+      >
+        등록된 관리자가 없습니다.
+        <NuxtLink class="font-semibold underline-offset-2 hover:underline" to="/signup">
+          관리자 등록으로 이동
+        </NuxtLink>
+      </p>
+
      <form class="admin-login__form mt-8 grid gap-4" @submit.prevent="submitLogin">
        <label class="admin-login__field grid gap-2 text-sm">
          <span class="admin-login__label font-medium">이메일</span>
--- a/pages/admin/members/index.vue
+++ b/pages/admin/members/index.vue
@@ -6,6 +6,14 @@ definePageMeta({
 const { data: members } = await useFetch('/admin/api/members', {
  default: () => []
 })
+const roleSavingIds = ref([])
+const roleMessage = ref('')
+
+const roleOptions = [
+  { value: 'owner', label: '소유자' },
+  { value: 'admin', label: '관리자' },
+  { value: 'member', label: '멤버' }
+]

 /**
 * 최근 접속 시각 표시 문자열을 반환한다.
@@ -30,6 +38,55 @@ const formatLastSeen = (value) => {
    minute: '2-digit'
  })
 }
+
+/**
+ * 권한 저장 진행 여부를 확인한다.
+ * @param {string} memberId - 회원 ID
+ * @returns {boolean} 진행 여부
+ */
+const isSavingRole = (memberId) => roleSavingIds.value.includes(memberId)
+
+/**
+ * 회원 권한을 변경한다.
+ * @param {Object} member - 회원 정보
+ * @returns {Promise<void>}
+ */
+const updateRole = async (member) => {
+  if (!member?.id || isSavingRole(member.id)) {
+    return
+  }
+
+  roleSavingIds.value = [...roleSavingIds.value, member.id]
+  roleMessage.value = ''
+
+  try {
+    const result = await $fetch(`/admin/api/members/${member.id}/role`, {
+      method: 'PUT',
+      body: {
+        role: member.roleCode
+      }
+    })
+
+    members.value = members.value.map((item) => {
+      if (item.id !== member.id) {
+        return item
+      }
+
+      return {
+        ...item,
+        role: result.role,
+        roleCode: result.roleCode,
+        isAdmin: Boolean(result.isAdmin)
+      }
+    })
+
+    roleMessage.value = '권한이 변경되었습니다.'
+  } catch (error) {
+    roleMessage.value = error?.data?.message || '권한 변경에 실패했습니다.'
+  } finally {
+    roleSavingIds.value = roleSavingIds.value.filter((id) => id !== member.id)
+  }
+}
 </script>

 <template>
@@ -45,11 +102,13 @@ const formatLastSeen = (value) => {
          <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">최근 활동</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>
+              <th class="px-3 py-2.5 text-right">권한 변경</th>
            </tr>
          </thead>
          <tbody>
@@ -68,6 +127,18 @@ const formatLastSeen = (value) => {
                  <span>{{ member.username }}</span>
                </div>
              </td>
+              <td class="px-3 py-3">
+                <span
+                  class="rounded-full border px-2 py-0.5 text-xs"
+                  :class="member.roleCode === 'owner'
+                    ? 'border-[#8a56ff]/35 text-[#8a56ff]'
+                    : member.roleCode === 'admin'
+                      ? 'border-[#ff4f2e]/30 text-[#ff4f2e]'
+                      : 'border-line text-muted'"
+                >
+                  {{ member.role || '멤버' }}
+                </span>
+              </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>
@@ -75,13 +146,37 @@ const formatLastSeen = (value) => {
                <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>
+              <td class="px-3 py-3">
+                <div class="flex justify-end gap-2">
+                  <select
+                    v-model="member.roleCode"
+                    class="rounded border border-line bg-white px-2 py-1 text-xs"
+                    :disabled="isSavingRole(member.id)"
+                  >
+                    <option v-for="option in roleOptions" :key="option.value" :value="option.value">
+                      {{ option.label }}
+                    </option>
+                  </select>
+                  <button
+                    type="button"
+                    class="rounded border border-line px-2 py-1 text-xs font-semibold hover:bg-paper disabled:opacity-50"
+                    :disabled="isSavingRole(member.id)"
+                    @click="updateRole(member)"
+                  >
+                    {{ isSavingRole(member.id) ? '저장 중' : '저장' }}
+                  </button>
+                </div>
+              </td>
            </tr>
            <tr v-if="members.length === 0">
-              <td colspan="6" class="px-3 py-6 text-center text-sm text-muted">등록된 회원이 없습니다.</td>
+              <td colspan="8" class="px-3 py-6 text-center text-sm text-muted">등록된 회원이 없습니다.</td>
            </tr>
          </tbody>
        </table>
      </div>
+      <p v-if="roleMessage" class="mt-3 text-xs text-muted">
+        {{ roleMessage }}
+      </p>
    </div>
  </section>
 </template>
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -4,9 +4,17 @@ definePageMeta({
 })

 const saving = ref(false)
+const loadingProfile = ref(true)
+const savingProfile = ref(false)
+const savingPassword = ref(false)
+const uploadingAvatar = ref(false)
+const removingAvatar = ref(false)
 const errorMessage = ref('')
+const profileMessage = ref('')
+const passwordMessage = ref('')
 const toast = ref(null)
 let toastTimer = null
+const avatarInputRef = ref(null)

 const { data: settings } = await useFetch('/admin/api/settings')

@@ -18,6 +26,204 @@ const form = reactive({
  copyrightText: settings.value?.copyrightText || '©2026 sori.studio'
 })

+const profileForm = reactive({
+  email: '',
+  username: '',
+  avatarUrl: ''
+})
+
+const passwordForm = reactive({
+  currentPassword: '',
+  nextPassword: '',
+  nextPasswordConfirm: ''
+})
+
+/**
+ * 관리자 프로필을 조회한다.
+ * @returns {Promise<void>}
+ */
+const loadAdminProfile = async () => {
+  loadingProfile.value = true
+  profileMessage.value = ''
+
+  try {
+    const profile = await $fetch('/api/auth/profile')
+    profileForm.email = profile.email || ''
+    profileForm.username = profile.username || ''
+    profileForm.avatarUrl = profile.avatarUrl || ''
+  } catch {
+    profileMessage.value = '관리자 프로필을 불러오지 못했습니다. 다시 로그인해 주세요.'
+  } finally {
+    loadingProfile.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 saveAdminProfile = async () => {
+  const available = await checkUsernameAvailable()
+  if (!available) {
+    return
+  }
+
+  savingProfile.value = true
+  profileMessage.value = ''
+
+  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()
+}
+
+/**
+ * 관리자 썸네일을 업로드한다.
+ * @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 {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
+  }
+}
+
+/**
+ * 관리자 비밀번호를 변경한다.
+ * @returns {Promise<void>}
+ */
+const saveAdminPassword = 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
+  }
+}
+
 /**
 * 저장 상태 토스트 표시
 * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -66,6 +272,8 @@ const saveSettings = async () => {
 onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
 })
+
+onMounted(loadAdminProfile)
 </script>

 <template>
@@ -83,6 +291,139 @@ onBeforeUnmount(() => {
      {{ errorMessage }}
    </p>

+    <section class="admin-settings__profile mb-6 max-w-3xl rounded border border-line bg-white p-5">
+      <h2 class="text-base font-semibold text-ink">관리자 프로필</h2>
+      <p class="mt-1 text-xs text-muted">
+        썸네일과 이름을 수정할 수 있습니다.
+      </p>
+
+      <div v-if="loadingProfile" class="mt-4 text-sm text-muted">
+        관리자 프로필을 불러오는 중입니다.
+      </div>
+
+      <div v-else class="mt-4 flex flex-col gap-4">
+        <div class="flex flex-col gap-3 rounded border border-line bg-paper p-3 md:flex-row md:items-center">
+          <div class="relative w-fit shrink-0">
+            <button
+              type="button"
+              class="group relative h-24 w-24 overflow-hidden rounded-full border border-line bg-white"
+              :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 text-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-line bg-paper text-xs text-muted transition-opacity hover:opacity-80 disabled:opacity-50"
+              :disabled="removingAvatar"
+              @click.stop="removeAvatar"
+            >
+              {{ removingAvatar ? '...' : 'X' }}
+            </button>
+          </div>
+          <div class="grid min-w-0 flex-1 gap-3">
+            <label class="grid gap-1 text-sm">
+              <span class="text-xs text-muted">관리자 이름</span>
+              <input
+                v-model="profileForm.username"
+                type="text"
+                class="rounded border border-line bg-white px-3 py-2"
+              >
+            </label>
+            <label class="grid gap-1 text-sm">
+              <span class="text-xs text-muted">관리자 이메일</span>
+              <input
+                :value="profileForm.email"
+                type="text"
+                class="rounded border border-line bg-[#f7f7f5] px-3 py-2 text-muted"
+                readonly
+              >
+            </label>
+          </div>
+        </div>
+
+        <input
+          ref="avatarInputRef"
+          type="file"
+          accept="image/jpeg,image/png,image/webp,image/gif"
+          class="hidden"
+          :disabled="uploadingAvatar"
+          @change="uploadAvatar"
+        >
+
+        <div class="flex items-center gap-2">
+          <button
+            class="rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+            type="button"
+            :disabled="savingProfile"
+            @click="saveAdminProfile"
+          >
+            {{ savingProfile ? '저장 중' : '관리자 프로필 저장' }}
+          </button>
+          <p v-if="profileMessage" class="text-xs text-muted">
+            {{ profileMessage }}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="admin-settings__password mb-6 max-w-3xl rounded border border-line bg-white p-5">
+      <h2 class="text-base font-semibold text-ink">관리자 비밀번호 변경</h2>
+      <p class="mt-1 text-xs text-muted">
+        현재 비밀번호 확인 후 새 비밀번호로 변경할 수 있습니다.
+      </p>
+
+      <div class="mt-4 grid gap-3">
+        <input
+          v-model="passwordForm.currentPassword"
+          type="password"
+          class="rounded border border-line bg-white px-3 py-2 text-sm"
+          placeholder="현재 비밀번호"
+        >
+        <input
+          v-model="passwordForm.nextPassword"
+          type="password"
+          class="rounded border border-line bg-white px-3 py-2 text-sm"
+          placeholder="새 비밀번호"
+        >
+        <input
+          v-model="passwordForm.nextPasswordConfirm"
+          type="password"
+          class="rounded border border-line bg-white px-3 py-2 text-sm"
+          placeholder="새 비밀번호 확인"
+        >
+      </div>
+
+      <div class="mt-4 flex items-center gap-2">
+        <button
+          class="rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+          type="button"
+          :disabled="savingPassword"
+          @click="saveAdminPassword"
+        >
+          {{ savingPassword ? '변경 중' : '관리자 비밀번호 변경' }}
+        </button>
+        <p v-if="passwordMessage" class="text-xs text-muted">
+          {{ passwordMessage }}
+        </p>
+      </div>
+    </section>
+
    <form class="admin-settings__form grid max-w-3xl gap-6" @submit.prevent="saveSettings">
      <label class="admin-settings__field grid gap-2 text-sm">
        <span class="admin-settings__label font-medium">사이트 이름</span>
--- a/pages/admin/tags/index.vue
+++ b/pages/admin/tags/index.vue
@@ -4,12 +4,128 @@ definePageMeta({
 })

 const deletingId = ref('')
+const draggingTagId = ref('')
+const dragOverTagId = ref('')
+const savingOrder = ref(false)
 const errorMessage = ref('')
+const infoMessage = ref('')

 const { data: tags, refresh } = await useFetch('/admin/api/tags', {
  default: () => []
 })

+const managedTags = computed(() => tags.value.filter((tag) => tag.tagType === 'managed'))
+const generalTags = computed(() => tags.value.filter((tag) => tag.tagType === 'general'))
+
+/**
+ * 관리용 태그 드래그 시작
+ * @param {DragEvent} event - 드래그 이벤트
+ * @param {string} tagId - 태그 ID
+ * @returns {void}
+ */
+const handleDragStart = (event, tagId) => {
+  if (!event.dataTransfer) {
+    return
+  }
+  draggingTagId.value = tagId
+  event.dataTransfer.effectAllowed = 'move'
+}
+
+/**
+ * 관리용 태그 드래그 오버
+ * @param {DragEvent} event - 드래그 이벤트
+ * @param {string} tagId - 태그 ID
+ * @returns {void}
+ */
+const handleDragOver = (event, tagId) => {
+  event.preventDefault()
+  dragOverTagId.value = tagId
+}
+
+/**
+ * 관리용 태그 드래그 종료
+ * @returns {void}
+ */
+const handleDragEnd = () => {
+  draggingTagId.value = ''
+  dragOverTagId.value = ''
+}
+
+/**
+ * 관리용 태그 순서를 교환한다.
+ * @param {string} sourceId - 원본 태그 ID
+ * @param {string} targetId - 대상 태그 ID
+ * @returns {void}
+ */
+const moveManagedTag = (sourceId, targetId) => {
+  const sourceIndex = tags.value.findIndex((tag) => tag.id === sourceId)
+  const targetIndex = tags.value.findIndex((tag) => tag.id === targetId)
+  if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
+    return
+  }
+
+  const sourceTag = tags.value[sourceIndex]
+  const targetTag = tags.value[targetIndex]
+  if (sourceTag.tagType !== 'managed' || targetTag.tagType !== 'managed') {
+    return
+  }
+
+  const nextTags = [...tags.value]
+  const [moved] = nextTags.splice(sourceIndex, 1)
+  nextTags.splice(targetIndex, 0, moved)
+  tags.value = nextTags
+}
+
+/**
+ * 관리용 태그 드롭 처리
+ * @param {DragEvent} event - 드래그 이벤트
+ * @param {string} targetId - 대상 태그 ID
+ * @returns {void}
+ */
+const handleDrop = (event, targetId) => {
+  event.preventDefault()
+  if (!draggingTagId.value) {
+    return
+  }
+  moveManagedTag(draggingTagId.value, targetId)
+  handleDragEnd()
+}
+
+/**
+ * 관리용 태그 순서를 저장한다.
+ * @returns {Promise<void>}
+ */
+const saveManagedOrder = async () => {
+  if (savingOrder.value || managedTags.value.length === 0) {
+    return
+  }
+
+  savingOrder.value = true
+  errorMessage.value = ''
+  infoMessage.value = ''
+
+  try {
+    const reordered = await $fetch('/admin/api/tags/reorder', {
+      method: 'PUT',
+      body: {
+        tagIds: managedTags.value.map((tag) => tag.id)
+      }
+    })
+
+    const managedTagMap = new Map(reordered.map((tag) => [tag.id, tag]))
+    tags.value = [
+      ...reordered,
+      ...generalTags.value.map((tag) => managedTagMap.get(tag.id) || tag)
+    ]
+    await refresh()
+    infoMessage.value = '관리용 태그 순서가 저장되었습니다.'
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '정렬 순서를 저장하지 못했습니다.'
+  } finally {
+    savingOrder.value = false
+  }
+}
+
 /**
 * 태그 삭제
 * @param {Object} tag - 삭제할 태그
@@ -22,6 +138,7 @@ const deleteTag = async (tag) => {

  deletingId.value = tag.id
  errorMessage.value = ''
+  infoMessage.value = ''

  try {
    await $fetch(`/admin/api/tags/${tag.id}`, {
@@ -51,16 +168,33 @@ const deleteTag = async (tag) => {
        태그 추가
      </NuxtLink>
    </div>
+    <p class="mt-3 text-xs text-muted">
+      관리용 태그는 홈페이지 카테고리 영역에서 사용되며 드래그 정렬이 가능합니다. 일반 태그는 추후 배지형 노출 용도로 사용됩니다.
+    </p>

    <p v-if="errorMessage" class="admin-tags__error mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ errorMessage }}
    </p>
+    <p v-if="infoMessage" class="mt-3 rounded border border-line bg-white px-4 py-3 text-sm text-muted">
+      {{ infoMessage }}
+    </p>

-    <div class="admin-tags__table mt-8 overflow-hidden border border-line">
+    <div class="admin-tags__table mt-6 overflow-hidden border border-line">
+      <div class="flex items-center justify-between border-b border-line bg-[#f7f7f5] px-4 py-2.5">
+        <p class="text-xs font-semibold uppercase text-muted">관리용 태그</p>
+        <button
+          class="rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold disabled:opacity-50"
+          type="button"
+          :disabled="savingOrder || managedTags.length === 0"
+          @click="saveManagedOrder"
+        >
+          {{ savingOrder ? '저장 중' : '정렬 저장' }}
+        </button>
+      </div>
      <table class="admin-tags__table-inner w-full border-collapse text-left text-sm">
        <thead class="admin-tags__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
          <tr>
-            <th class="admin-tags__cell px-4 py-3">순서</th>
+            <th class="admin-tags__cell px-4 py-3">번호</th>
            <th class="admin-tags__cell px-4 py-3">색상</th>
            <th class="admin-tags__cell px-4 py-3">이름</th>
            <th class="admin-tags__cell px-4 py-3">슬러그</th>
@@ -69,9 +203,19 @@ const deleteTag = async (tag) => {
          </tr>
        </thead>
        <tbody class="admin-tags__table-body divide-y divide-line bg-white">
-          <tr v-for="tag in tags" :key="tag.id" class="admin-tags__row">
+          <tr
+            v-for="(tag, index) in managedTags"
+            :key="tag.id"
+            class="admin-tags__row cursor-move"
+            :class="dragOverTagId === tag.id ? 'bg-[#f9f9f7]' : ''"
+            draggable="true"
+            @dragstart="handleDragStart($event, tag.id)"
+            @dragover="handleDragOver($event, tag.id)"
+            @drop="handleDrop($event, tag.id)"
+            @dragend="handleDragEnd"
+          >
            <td class="admin-tags__cell px-4 py-4 text-muted">
-              {{ tag.sortOrder }}
+              {{ index + 1 }}
            </td>
            <td class="admin-tags__cell px-4 py-4">
              <span class="admin-tags__color flex items-center gap-2">
@@ -108,6 +252,57 @@ const deleteTag = async (tag) => {
      </table>
    </div>

+    <div class="admin-tags__table mt-8 overflow-hidden border border-line">
+      <div class="border-b border-line bg-[#f7f7f5] px-4 py-2.5">
+        <p class="text-xs font-semibold uppercase text-muted">일반 태그</p>
+      </div>
+      <table class="admin-tags__table-inner w-full border-collapse text-left text-sm">
+        <thead class="admin-tags__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
+          <tr>
+            <th class="admin-tags__cell px-4 py-3">색상</th>
+            <th class="admin-tags__cell px-4 py-3">이름</th>
+            <th class="admin-tags__cell px-4 py-3">슬러그</th>
+            <th class="admin-tags__cell px-4 py-3">설명</th>
+            <th class="admin-tags__cell px-4 py-3">관리</th>
+          </tr>
+        </thead>
+        <tbody class="admin-tags__table-body divide-y divide-line bg-white">
+          <tr v-for="tag in generalTags" :key="tag.id" class="admin-tags__row">
+            <td class="admin-tags__cell px-4 py-4">
+              <span class="admin-tags__color flex items-center gap-2">
+                <span class="admin-tags__color-swatch h-5 w-2 rounded-full" :style="{ backgroundColor: tag.color }" />
+                <span class="admin-tags__color-code text-xs text-muted">{{ tag.color }}</span>
+              </span>
+            </td>
+            <td class="admin-tags__cell px-4 py-4 font-semibold">
+              {{ tag.name }}
+            </td>
+            <td class="admin-tags__cell px-4 py-4 text-muted">
+              {{ tag.slug }}
+            </td>
+            <td class="admin-tags__cell px-4 py-4 text-muted">
+              {{ tag.description || '-' }}
+            </td>
+            <td class="admin-tags__cell px-4 py-4">
+              <div class="admin-tags__actions flex gap-2">
+                <NuxtLink class="admin-tags__edit rounded border border-line px-3 py-1.5 text-xs font-semibold" :to="`/admin/tags/${tag.id}`">
+                  수정
+                </NuxtLink>
+                <button
+                  class="admin-tags__delete rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 disabled:opacity-50"
+                  type="button"
+                  :disabled="deletingId === tag.id"
+                  @click="deleteTag(tag)"
+                >
+                  {{ deletingId === tag.id ? '삭제 중' : '삭제' }}
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
    <p v-if="tags.length === 0" class="admin-tags__empty mt-6 text-sm text-muted">
      아직 등록된 태그가 없습니다.
    </p>