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

댓글/회원/관리자 인증·프로필 흐름 보완과 관련 마이그레이션 및 문서를 함께 반영해 운영 동선을 안정화.

Co-authored-by: Cursor <cursoragent@cursor.com>

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>