권한 UI와 글 목록 검색 보정 v1.5.10

components/admin/AdminMemberForm.vue

@@ -12,6 +12,13 @@ const props = defineProps({
 
 const emit = defineEmits(['saved', 'deleted'])
 
+const { data: adminSession } = await useFetch('/admin/api/auth/me', {
+  default: () => ({
+    userId: '',
+    roleCode: ''
+  })
+})
+
 const isNewMember = computed(() => props.mode === 'new')
 const saveMessage = ref('')
 const saveError = ref('')
@@ -87,6 +94,57 @@ const normalizedLabels = computed(() => [...new Set(
 )])
 
 const currentRoleLabel = computed(() => roleOptions.find((option) => option.value === form.roleCode)?.label || '멤버')
+const currentAdminRoleCode = computed(() => adminSession.value?.roleCode || '')
+const isCurrentAdminPrivileged = computed(() => ['owner', 'admin'].includes(currentAdminRoleCode.value))
+const isEditingSelf = computed(() => Boolean(props.member?.id && adminSession.value?.userId)
+  && String(props.member.id) === String(adminSession.value.userId))
+const isTargetPrivilegedRole = computed(() => ['owner', 'admin'].includes(props.member?.roleCode || form.roleCode))
+const shouldRenderRoleAsText = computed(() => isNewMember.value || !isCurrentAdminPrivileged.value)
+const canEditRoleSelect = computed(() => {
+  if (shouldRenderRoleAsText.value || isSaving.value) {
+    return false
+  }
+
+  if (currentAdminRoleCode.value === 'owner') {
+    return !isEditingSelf.value
+  }
+
+  if (currentAdminRoleCode.value === 'admin') {
+    return !isTargetPrivilegedRole.value
+  }
+
+  return false
+})
+const availableRoleOptions = computed(() => {
+  if (!canEditRoleSelect.value) {
+    return roleOptions
+  }
+
+  if (currentAdminRoleCode.value === 'admin') {
+    return roleOptions.filter((option) => ['vip', 'member'].includes(option.value))
+  }
+
+  return roleOptions
+})
+const roleHelpText = computed(() => {
+  if (shouldRenderRoleAsText.value) {
+    return '멤버와 VIP는 관리자 권한이 없어 등급을 변경할 수 없습니다.'
+  }
+
+  if (isEditingSelf.value && currentAdminRoleCode.value === 'owner') {
+    return '소유자는 본인 권한을 직접 낮출 수 없습니다.'
+  }
+
+  if (currentAdminRoleCode.value === 'admin' && isTargetPrivilegedRole.value) {
+    return '관리자는 소유자 또는 다른 관리자의 등급을 변경할 수 없습니다.'
+  }
+
+  if (currentAdminRoleCode.value === 'admin') {
+    return '관리자는 멤버와 VIP 등급만 변경할 수 있습니다.'
+  }
+
+  return 'VIP 이상 등급은 멤버십 게시물을 볼 수 있습니다.'
+})
 
 /**
  * 회원 저장 요청 본문을 문자열로 직렬화한다.
@@ -383,7 +441,7 @@ const saveMember = async () => {
 
   try {
     const payload = getMemberPayload()
-    if (!isNewMember.value && form.roleCode !== props.member?.roleCode) {
+    if (!isNewMember.value && canEditRoleSelect.value && form.roleCode !== props.member?.roleCode) {
       await $fetch(`/admin/api/members/${props.member.id}/role`, {
         method: 'PUT',
         body: {
@@ -558,17 +616,28 @@ watch(() => props.member, () => {
 
           <label class="admin-member-form__field mt-5 block">
             <span class="admin-member-form__label mb-2 block text-sm font-semibold text-[#15171a]">멤버 등급</span>
-            <select
-              v-model="form.roleCode"
-              class="admin-member-form__select h-12 w-full rounded-md border border-transparent bg-[#eef1f4] px-4 text-sm text-[#15171a] outline-none focus:border-[#c5ccd5] focus:bg-white focus:ring-2 focus:ring-[#dce2e8] disabled:opacity-60"
-              :disabled="isNewMember || isSaving"
+            <span
+              v-if="shouldRenderRoleAsText"
+              class="admin-member-form__role-text flex h-12 w-full items-center rounded-md bg-[#eef1f4] px-4 text-sm font-semibold text-[#15171a]"
             >
-              <option v-for="option in roleOptions" :key="option.value" :value="option.value">
-                {{ option.label }}
-              </option>
-            </select>
+              {{ currentRoleLabel }}
+            </span>
+            <span v-else class="admin-member-form__select-wrap relative block">
+              <select
+                v-model="form.roleCode"
+                class="admin-member-form__select h-12 w-full appearance-none rounded-md border border-transparent bg-[#eef1f4] px-4 pr-10 text-sm text-[#15171a] outline-none focus:border-[#c5ccd5] focus:bg-white focus:ring-2 focus:ring-[#dce2e8] disabled:opacity-60"
+                :disabled="!canEditRoleSelect"
+              >
+                <option v-for="option in availableRoleOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </option>
+              </select>
+              <svg class="pointer-events-none absolute right-4 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </span>
             <span class="admin-member-form__hint mt-2 block text-sm text-[#8a95a5]">
-              VIP 이상 등급은 멤버십 게시물을 볼 수 있습니다.
+              {{ roleHelpText }}
             </span>
           </label>