zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

관리자 멤버 목록 테이블 정리

Browse Source
This commit is contained in:
zenn
2026-05-13 10:48:11 +09:00
parent 6cb6268b43
commit b4f3fdb77d
7 changed files with 182 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
pages/admin/members/index.vue
View File

@@ -3,24 +3,45 @@ definePageMeta({
layout: 'admin'
})
const memberSearchQuery = ref('')
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: '멤버' }
]
const filteredMembers = computed(() => {
const query = memberSearchQuery.value.trim().toLowerCase()
if (!query) {
return members.value
}
return members.value.filter((member) => [
member.username,
member.email,
member.lastSeenIp,
member.activityStatus
].some((value) => String(value || '').toLowerCase().includes(query)))
})
const memberCountLabel = computed(() => {
const count = filteredMembers.value.length
return `${count}명`
})
/**
* 최근 접속 시각 표시 문자열을 반환한다.
* @param {string | null} value - ISO 시각
* @returns {string} 표시 문자열
* 회원 이니셜을 반환한다.
* @param {Object} member - 회원 정보
* @returns {string} 이니셜
*/
const formatLastSeen = (value) => {
const getMemberInitial = (member) => String(member?.username || member?.email || '?').slice(0, 1).toUpperCase()
/**
* 날짜 표시 형식 변환
* @param {string | null} value - ISO 날짜 문자열
* @returns {string} 화면 표시 날짜
*/
const formatDate = (value) => {
if (!value) {
return '-'
}
@@ -30,154 +51,147 @@ const formatLastSeen = (value) => {
return '-'
}
return date.toLocaleString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}.${month}.${day}`
}
/**
* 권한 저장 진행 여부를 확인한다.
* @param {string} memberId - 회원 ID
* @returns {boolean} 진행 여부
* 최근 활동 시각을 상대 시간으로 표시한다.
* @param {string | null} value - ISO 시각
* @returns {string} 상대 시간
*/
const isSavingRole = (memberId) => roleSavingIds.value.includes(memberId)
/**
* 회원 권한을 변경한다.
* @param {Object} member - 회원 정보
* @returns {Promise<void>}
*/
const updateRole = async (member) => {
if (!member?.id || isSavingRole(member.id)) {
return
const formatRelativeTime = (value) => {
if (!value) {
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)
const date = new Date(value)
if (Number.isNaN(date.getTime())) {
return '최근 활동 없음'
}
const diffMs = Date.now() - date.getTime()
const minute = 1000 * 60
const hour = minute * 60
const day = hour * 24
if (diffMs < minute) {
return '방금 전'
}
if (diffMs < hour) {
return `${Math.floor(diffMs / minute)}분 전`
}
if (diffMs < day) {
return `${Math.floor(diffMs / hour)}시간 전`
}
if (diffMs < day * 30) {
return `${Math.floor(diffMs / day)}일 전`
}
return formatDate(value)
}
</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>
<section class="admin-members bg-paper p-6">
<div class="admin-members__header flex flex-col gap-5 border-b border-line pb-6 xl:flex-row xl:items-center xl:justify-between">
<div>
<h1 class="admin-members__title text-3xl font-semibold tracking-[-0.01em] text-[#15171a]">
멤버
</h1>
</div>
<div class="admin-members__actions flex flex-col gap-3 sm:flex-row sm:items-center">
<label class="admin-members__search relative block w-full sm:w-[290px]">
<span class="sr-only">멤버 검색</span>
<svg class="admin-members__search-icon pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa4b2]" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.245 23.996a.743.743 0 01-.53-.22L16.2 17.26a9.824 9.824 0 01-2.553 1.579 9.766 9.766 0 01-7.51.069 9.745 9.745 0 01-5.359-5.262c-1.025-2.412-1.05-5.08-.069-7.51S3.558 1.802 5.97.777a9.744 9.744 0 017.51-.069 9.745 9.745 0 015.359 5.262 9.748 9.748 0 01.069 7.51 9.807 9.807 0 01-1.649 2.718l6.517 6.518a.75.75 0 01-.531 1.28zM9.807 1.49a8.259 8.259 0 00-3.25.667 8.26 8.26 0 00-4.458 4.54 8.26 8.26 0 00.058 6.362 8.26 8.26 0 004.54 4.458 8.259 8.259 0 006.362-.059 8.285 8.285 0 002.594-1.736.365.365 0 01.077-.076 8.245 8.245 0 001.786-2.728 8.255 8.255 0 00-.059-6.362 8.257 8.257 0 00-4.54-4.458 8.28 8.28 0 00-3.11-.608z" fill="currentColor" />
</svg>
<input
v-model="memberSearchQuery"
class="admin-members__search-input h-11 w-full rounded-md border border-transparent bg-[#eef1f4] pl-10 pr-3 text-sm text-[#15171a] outline-none transition focus:border-[#c5ccd5] focus:bg-white focus:ring-2 focus:ring-[#dce2e8]"
type="search"
placeholder="멤버 검색..."
aria-label="멤버 검색"
>
</label>
<button
class="admin-members__new h-11 rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-[#2b2f35] focus-visible:outline focus-visible:ring-2 focus-visible:ring-[#8e9cac] focus-visible:ring-offset-2"
type="button"
>
멤버 추가
</button>
</div>
</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">최근 활동</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>
<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">
<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'"
<div class="admin-members__table mt-7 overflow-x-auto">
<table class="admin-members__table-inner min-w-[920px] w-full border-collapse text-left text-sm">
<thead class="admin-members__table-head border-b border-line text-xs uppercase tracking-[0.02em] text-[#15171a]">
<tr>
<th class="admin-members__cell w-[32%] py-4 pr-5 font-semibold">{{ memberCountLabel }}</th>
<th class="admin-members__cell w-[15%] px-5 py-4 font-semibold">상태</th>
<th class="admin-members__cell w-[16%] px-5 py-4 font-semibold">댓글 작성</th>
<th class="admin-members__cell w-[17%] px-5 py-4 font-semibold">접속 IP</th>
<th class="admin-members__cell w-[20%] py-4 pl-5 font-semibold">가입일</th>
</tr>
</thead>
<tbody class="admin-members__table-body divide-y divide-line/70 bg-paper">
<tr v-for="member in filteredMembers" :key="member.id" class="admin-members__row align-middle transition-colors hover:bg-[#f7f8fa]">
<td class="admin-members__cell py-5 pr-5">
<div class="admin-members__profile flex min-w-0 items-center gap-3">
<img
v-if="member.avatarUrl"
:src="member.avatarUrl"
:alt="member.username"
class="admin-members__avatar h-11 w-11 shrink-0 rounded-full object-cover"
>
{{ member.role || '멤버' }}
<span v-else class="admin-members__avatar grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[#15171a] text-sm font-semibold text-white">
{{ getMemberInitial(member) }}
</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>
<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>
<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="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>
<span class="admin-members__identity min-w-0">
<span class="admin-members__name block truncate text-base font-semibold text-[#15171a]">
{{ member.username || '이름 없음' }}
</span>
<span class="admin-members__email mt-0.5 block truncate text-sm text-[#657080]">
{{ member.email }}
</span>
</span>
</div>
</td>
<td class="admin-members__cell px-5 py-5 text-[#2f343b]">
<span
class="admin-members__status inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold"
:class="member.activityStatus === '활성'
? 'border-green-200 bg-green-50 text-green-700'
: 'border-line bg-white text-[#657080]'"
>
{{ member.activityStatus }}
</span>
</td>
<td class="admin-members__cell px-5 py-5 text-[#2f343b]">
<span class="admin-members__comments font-semibold text-[#15171a]">{{ member.commentCount }}</span>
<span class="admin-members__comments-label ml-1 text-xs text-[#8c96a3]">개</span>
</td>
<td class="admin-members__cell px-5 py-5 text-sm text-[#657080]">
{{ member.lastSeenIp || '-' }}
</td>
<td class="admin-members__cell py-5 pl-5">
<span class="admin-members__created block text-sm text-[#15171a]">{{ formatDate(member.createdAt) }}</span>
<span class="admin-members__last-seen mt-1 block text-sm text-[#9aa4b2]">{{ formatRelativeTime(member.lastSeenAt) }}</span>
</td>
</tr>
<tr v-if="filteredMembers.length === 0">
<td colspan="5" class="admin-members__empty px-4 py-12 text-center text-sm text-muted">
검색 결과가 없습니다.
</td>
</tr>
</tbody>
</table>
</div>
</section>
</template>