v0.1.53 - 관리자 목록 UX와 이월 배지 보정

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.52` 준비 중
+- 현재 기준 버전: `v0.1.53` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -121,7 +121,6 @@
 
 ## 다음 권장 작업
 
-- 관리자 페이지에 사용자 검색, 상태 필터, 최근 접속/문서 수 기준 정렬 UX를 추가한다.
 - 목표 화면에 완료 처리와 보관 상태를 분리해서, 진행 중 목표와 지난 목표를 더 명확하게 나눈다.
 - `READ NEXT`의 자동 제안 규칙을 더 자연스럽게 다듬고, 빈 상태 문구도 상황별로 정리한다.
 - 공유용 이미지 저장 기능을 인쇄 레이아웃과 같은 기준으로 설계하고 구현한다.

TODO.md

@@ -103,4 +103,4 @@
 - [x] 메일 발송 인프라와 발신 도메인 정책을 Resend 기준으로 확정한다.
 - [x] 관리자 페이지에서 계정 비활성화 / 강제 로그아웃 / 삭제 기능을 추가한다.
 - [x] 관리자 페이지에서 사용자별 문서 상세 조회 기능을 추가한다.
-- [ ] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.
+- [x] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.52",
+      "version": "0.1.53",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.52",
+  "version": "0.1.53",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/AdminDashboard.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { computed, ref } from 'vue'
+
 const props = defineProps({
   summary: {
     type: Object,
@@ -45,6 +47,10 @@ const emit = defineEmits([
   'delete-user',
 ])
 
+const userSearch = ref('')
+const userStatusFilter = ref('all')
+const userSort = ref('lastLoginDesc')
+
 function formatDate(value) {
   if (!value) {
     return '기록 없음'
@@ -86,6 +92,61 @@ function getPlannerSummary(payload) {
     memoCount: memo.filter((item) => item?.text?.trim?.() || item?.label?.trim?.()).length,
   }
 }
+
+const filteredUsers = computed(() => {
+  const search = userSearch.value.trim().toLowerCase()
+  const filtered = props.users.filter((user) => {
+    const matchesSearch = !search
+      || String(user.id).includes(search)
+      || user.nickname?.toLowerCase().includes(search)
+      || user.email?.toLowerCase().includes(search)
+
+    if (!matchesSearch) {
+      return false
+    }
+
+    switch (userStatusFilter.value) {
+      case 'active':
+        return !user.disabledAt && user.isActiveRecently
+      case 'disabled':
+        return Boolean(user.disabledAt)
+      case 'unverified':
+        return !user.emailVerifiedAt
+      case 'admin':
+        return user.role === 'admin'
+      case 'member':
+        return user.role !== 'admin'
+      default:
+        return true
+    }
+  })
+
+  return [...filtered].sort((left, right) => {
+    switch (userSort.value) {
+      case 'plannerDesc':
+        return right.plannerEntryCount - left.plannerEntryCount || right.id - left.id
+      case 'goalDesc':
+        return right.goalCount - left.goalCount || right.id - left.id
+      case 'createdDesc':
+        return new Date(right.createdAt || 0).getTime() - new Date(left.createdAt || 0).getTime() || right.id - left.id
+      case 'nicknameAsc':
+        return String(left.nickname || '').localeCompare(String(right.nickname || ''), 'ko')
+      case 'lastLoginDesc':
+      default:
+        return new Date(right.lastLoginAt || right.createdAt || 0).getTime()
+          - new Date(left.lastLoginAt || left.createdAt || 0).getTime()
+          || right.id - left.id
+    }
+  })
+})
+
+const filteredUsersSummary = computed(() => {
+  const total = filteredUsers.value.length
+  const disabled = filteredUsers.value.filter((user) => user.disabledAt).length
+  const active = filteredUsers.value.filter((user) => !user.disabledAt && user.isActiveRecently).length
+
+  return { total, disabled, active }
+})
 </script>
 
 <template>
@@ -178,6 +239,53 @@ function getPlannerSummary(payload) {
           {{ message }}
         </p>
 
+        <div class="mt-5 grid gap-3 rounded-[24px] border border-stone-200 bg-[#fcfaf6] p-4 md:grid-cols-[minmax(0,1.2fr)_180px_180px]">
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">검색</span>
+            <input
+              v-model="userSearch"
+              type="text"
+              placeholder="닉네임, 이메일, ID 검색"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition placeholder:text-stone-400 focus:border-stone-400"
+            />
+          </label>
+
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">상태 필터</span>
+            <select
+              v-model="userStatusFilter"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
+            >
+              <option value="all">전체 사용자</option>
+              <option value="active">최근 활동</option>
+              <option value="disabled">비활성화</option>
+              <option value="unverified">미인증</option>
+              <option value="member">일반 사용자</option>
+              <option value="admin">관리자</option>
+            </select>
+          </label>
+
+          <label class="grid gap-2">
+            <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500">정렬</span>
+            <select
+              v-model="userSort"
+              class="h-11 rounded-2xl border border-stone-200 bg-white px-4 text-sm font-semibold text-stone-700 outline-none transition focus:border-stone-400"
+            >
+              <option value="lastLoginDesc">최근 접속순</option>
+              <option value="plannerDesc">문서 많은 순</option>
+              <option value="goalDesc">목표 많은 순</option>
+              <option value="createdDesc">최근 가입순</option>
+              <option value="nicknameAsc">이름순</option>
+            </select>
+          </label>
+        </div>
+
+        <div class="mt-4 flex flex-wrap items-center gap-2 text-[11px] font-bold tracking-[0.12em] text-stone-500">
+          <span class="rounded-full bg-white px-3 py-2">표시 {{ filteredUsersSummary.total }}명</span>
+          <span class="rounded-full bg-white px-3 py-2">활동 {{ filteredUsersSummary.active }}명</span>
+          <span class="rounded-full bg-white px-3 py-2">비활성 {{ filteredUsersSummary.disabled }}명</span>
+        </div>
+
         <div class="mt-5 overflow-hidden rounded-[24px] border border-stone-200 bg-white">
           <div class="hidden grid-cols-[84px_minmax(0,1.2fr)_110px_150px_90px_90px_150px_190px] gap-3 border-b border-stone-200 bg-[#f8f4ed] px-5 py-4 text-[10px] font-bold uppercase tracking-[0.18em] text-stone-500 xl:grid">
             <span>ID</span>
@@ -192,7 +300,7 @@ function getPlannerSummary(payload) {
 
           <div class="divide-y divide-stone-200">
             <article
-              v-for="user in users"
+              v-for="user in filteredUsers"
               :key="user.id"
               class="px-5 py-4"
             >
@@ -273,10 +381,10 @@ function getPlannerSummary(payload) {
             </article>
 
             <div
-              v-if="!busy && users.length === 0"
+              v-if="!busy && filteredUsers.length === 0"
               class="px-5 py-10 text-center text-sm font-semibold text-stone-500"
             >
-              표시할 사용자가 없습니다.
+              조건에 맞는 사용자가 없습니다.
             </div>
           </div>
         </div>

src/components/GuideTooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps({
   title: {
@@ -28,10 +28,7 @@ const emit = defineEmits(['dismiss'])
 
 const open = ref(false)
 const rootRef = ref(null)
-
-function isCompactButtonLabel() {
-  return String(props.buttonLabel || '').trim().length <= 1
-}
+const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)
 
 function close() {
   open.value = false
@@ -75,8 +72,8 @@ onBeforeUnmount(() => {
   >
     <button
       type="button"
-      class="inline-flex min-w-[22px] items-center justify-center border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
-      :class="isCompactButtonLabel() ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
+      class="inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
+      :class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
       aria-label="가이드 보기"
       :aria-expanded="open"
       @click.stop="toggle"