관리자 유저 관리 페이지 생성

service/app/src/app/admin/reports/page.tsx

@@ -29,7 +29,9 @@ export default function AdminReportsPage() {
     <div className="flex h-full flex-col items-center bg-background-interactive-primary-disabled p-40">
       <div className="flex size-full flex-col justify-between gap-52 rounded-20 bg-background-interactive-primary-sub px-[62px] pb-[34px] pt-60">
         <div className="flex w-full flex-col items-start gap-52 overflow-y-auto">
-          <h1 className="typography-heading-2xl-extrabold">신고접수</h1>
+          <h1 className="typography-heading-2xl-extrabold shrink-0 text-text-secondary">
+            신고접수
+          </h1>
           <ReportedGamesTable items={games} onRowClick={handleRowClick} />
         </div>
         <div className="flex w-full justify-center">

service/app/src/app/admin/users/page.tsx

@@ -1,3 +1,106 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+
+import { useAdminUsers } from "@/entities/report/hooks/useAdminUsers"
+import { AdminPageLayout } from "@/shared/ui/admin-layout"
+import {
+  useEmailSelection,
+  UsersPageHeader,
+  UsersTable,
+  useUserBlockMutations,
+} from "@/widgets/admin/users-table"
+
+import { openBlockConfirmModal } from "./_components/dialog/blockConfirmModal"
+import { openUnblockConfirmModal } from "./_components/dialog/unblockConfirmModal"
+
 export default function AdminUsersPage() {
-  return <div>AdminPage-Users</div>
+  const [currentPage, setCurrentPage] = useState(1)
+  const [searchQuery, setSearchQuery] = useState("")
+  const pageIndex = currentPage - 1
+
+  const { users = [], totalPages } = useAdminUsers({
+    page: pageIndex,
+  })
+
+  const {
+    selectedEmails,
+    handleSelectChange,
+    handleSelectAll,
+    clearSelection,
+  } = useEmailSelection()
+
+  const { blockMutation, unblockMutation } = useUserBlockMutations()
+
+  const filteredUsers = useMemo(() => {
+    if (!searchQuery) return users
+    const query = searchQuery.toLowerCase()
+    return users.filter(
+      (user) =>
+        user.nickname.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query),
+    )
+  }, [users, searchQuery])
+
+  const userEmails = useMemo(
+    () => filteredUsers.map((u) => u.email),
+    [filteredUsers],
+  )
+
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setCurrentPage(page)
+      clearSelection()
+    },
+    [clearSelection],
+  )
+
+  const handleSelectAllUsers = useCallback(
+    (checked: boolean) => {
+      handleSelectAll(userEmails, checked)
+    },
+    [handleSelectAll, userEmails],
+  )
+
+  const handleBlock = useCallback(() => {
+    openBlockConfirmModal({
+      onConfirm: () => {
+        blockMutation.mutate(Array.from(selectedEmails), {
+          onSuccess: clearSelection,
+        })
+      },
+    })
+  }, [blockMutation, selectedEmails, clearSelection])
+
+  const handleUnblock = useCallback(() => {
+    openUnblockConfirmModal({
+      onConfirm: () => {
+        unblockMutation.mutate(Array.from(selectedEmails), {
+          onSuccess: clearSelection,
+        })
+      },
+    })
+  }, [unblockMutation, selectedEmails, clearSelection])
+
+  return (
+    <AdminPageLayout
+      header={
+        <UsersPageHeader
+          onSearch={setSearchQuery}
+          onBlock={handleBlock}
+          onUnblock={handleUnblock}
+        />
+      }
+      currentPage={currentPage}
+      totalPages={totalPages}
+      onPageChange={handlePageChange}
+    >
+      <UsersTable
+        items={filteredUsers}
+        selectedEmails={selectedEmails}
+        onSelectChange={handleSelectChange}
+        onSelectAll={handleSelectAllUsers}
+      />
+    </AdminPageLayout>
+  )
 }

service/app/src/entities/report/api/getAdminUsers.ts

@@ -0,0 +1,18 @@
+import { fetchClient } from "@/shared/api/fetchClient"
+
+import type { AdminUsersResponse } from "../model/types"
+
+export interface GetAdminUsersParams {
+  page?: number
+}
+
+export const getAdminUsers = async (
+  params: GetAdminUsersParams = {},
+): Promise<AdminUsersResponse> => {
+  const { page = 0 } = params
+  const queryString = page > 0 ? `?page=${page}` : ""
+  const response = await fetchClient.get<AdminUsersResponse>(
+    `admin/users${queryString}`,
+  )
+  return response.json().then((res) => res.data)
+}

service/app/src/entities/report/api/index.ts

@@ -1,3 +1,4 @@
 export * from "./getAdminReports"
+export * from "./getAdminUsers"
 export * from "./getReportDetail"
 export * from "./updateAdminReportStatus"

service/app/src/entities/report/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useAdminReports"
+export * from "./useAdminUsers"

service/app/src/entities/report/hooks/useAdminUsers.ts

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { getAdminUsers } from "../api/getAdminUsers"
+import type { AdminUser } from "../model/types"
+
+interface UseAdminUsersParams {
+  page?: number
+  enabled?: boolean
+}
+
+interface UseAdminUsersReturn {
+  users: AdminUser[]
+  currentPage: number
+  totalPages: number
+  totalElements: number
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useAdminUsers = ({
+  page = 0,
+  enabled = true,
+}: UseAdminUsersParams = {}): UseAdminUsersReturn => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["adminUsers", { page }] as const,
+    queryFn: async () => {
+      const response = await getAdminUsers({ page })
+      return response
+    },
+    enabled,
+    staleTime: 5 * 60 * 1000,
+    retry: 2,
+  })
+
+  return {
+    users: data?.content ?? [],
+    currentPage: data?.page ?? page,
+    totalPages: data?.totalPages ?? 0,
+    totalElements: data?.totalElements ?? 0,
+    isLoading,
+    error: error as Error | null,
+  }
+}

service/app/src/entities/report/model/types.ts

@@ -1,6 +1,32 @@
 import z from "zod"
 
 import type { ReportReasonCode } from "@/entities/game/model/report"
+import { reportReasonCodeSchema } from "@/entities/game/model/report"
+
+export interface AdminUser {
+  nickname: string
+  email: string
+  blockReason: ReportReasonCode | null
+  blockedAt: string | null
+  blocked: boolean
+}
+
+export const adminUserSchema = z.object({
+  nickname: z.string(),
+  email: z.string(),
+  blockReason: reportReasonCodeSchema.nullable(),
+  blockedAt: z.string().nullable(),
+  blocked: z.boolean(),
+})
+
+export interface AdminUsersResponse {
+  content: AdminUser[]
+  page: number
+  size: number
+  totalElements: number
+  totalPages: number
+  hasNext: boolean
+}
 
 export interface ReportedGame {
   id: number

service/app/src/entities/suspension/api/index.ts

@@ -1 +1,2 @@
 export * from "./blockUsers"
+export * from "./unblockUsers"

service/app/src/entities/suspension/api/unblockUsers.ts

@@ -0,0 +1,11 @@
+import { fetchClient } from "@/shared/api/fetchClient"
+
+import type { UnblockUsersRequest } from "../model/types"
+
+export const unblockUsers = async (payload: UnblockUsersRequest) => {
+  const response = await fetchClient.post<null>("admin/users/unblock", {
+    json: payload,
+  })
+
+  return response.json()
+}

service/app/src/entities/suspension/model/types.ts

@@ -18,5 +18,10 @@ export const blockUsersRequestSchema = z.object({
   banList: z.array(banListItemSchema).min(1),
 })
 
+export const unblockUsersRequestSchema = z.object({
+  emails: z.array(z.string().min(1)).min(1),
+})
+
 export type BanListItem = z.infer<typeof banListItemSchema>
 export type BlockUsersRequest = z.infer<typeof blockUsersRequestSchema>
+export type UnblockUsersRequest = z.infer<typeof unblockUsersRequestSchema>

service/app/src/mocks/handlers/admin.ts

@@ -3,12 +3,17 @@ import { http, HttpResponse } from "msw"
 import type {
   AdminReport,
   AdminReportsResponse,
+  AdminUser,
+  AdminUsersResponse,
 } from "@/entities/report/model/types"
 import {
   adminReportUpdateRequestSchema,
   reportIdParamsSchema,
 } from "@/entities/report/model/types"
-import { blockUsersRequestSchema } from "@/entities/suspension/model/types"
+import {
+  blockUsersRequestSchema,
+  unblockUsersRequestSchema,
+} from "@/entities/suspension/model/types"
 
 import { internalServerError, loginRequiredError } from "../data/common"
 import {
@@ -24,8 +29,35 @@ const MSW_BASE_URL = process.env.MSW_BASE_URL || "http://localhost:3000"
 
 const PAGE_SIZE = 7
 
+const BLOCK_REASONS = [
+  "VIOLENT_OR_DISTURBING_CONTENT",
+  "SEXUAL_CONTENT",
+  "CYBERBULLYING_OR_HARASSMENT",
+  "SUICIDE_OR_SELF_HARM",
+  "FRAUD_OR_MISINFORMATION",
+  "SPAM_OR_PROMOTION",
+  "PRIVACY_VIOLATION",
+  "INTELLECTUAL_PROPERTY_INFRINGEMENT",
+] as const
+
+const generateMockUsers = (count: number): AdminUser[] => {
+  return Array.from({ length: count }, (_, i) => {
+    const blocked = i % 3 === 0
+    return {
+      nickname: `user_${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      blockReason: blocked ? BLOCK_REASONS[i % BLOCK_REASONS.length] : null,
+      blockedAt: blocked
+        ? `2026-01-${String((i % 28) + 1).padStart(2, "0")}`
+        : null,
+      blocked,
+    }
+  })
+}
+
 export const createAdminHandlers = (initialReports: AdminReport[]) => {
   const store: AdminReport[] = structuredClone(initialReports)
+  const usersStore: AdminUser[] = generateMockUsers(32)
   const blockedEmails = new Set<string>()
 
   return [
@@ -170,14 +202,93 @@ export const createAdminHandlers = (initialReports: AdminReport[]) => {
           return HttpResponse.json(gameMissingFieldsError(), { status: 400 })
         }
 
-        parsed.data.banList.forEach(({ email }) => {
+        parsed.data.banList.forEach(({ email, reason }) => {
           blockedEmails.add(email)
+          const userIndex = usersStore.findIndex((u) => u.email === email)
+          if (userIndex !== -1) {
+            usersStore[userIndex] = {
+              ...usersStore[userIndex],
+              blocked: true,
+              blockReason:
+                (reason as (typeof BLOCK_REASONS)[number]) ||
+                "VIOLENT_OR_DISTURBING_CONTENT",
+              blockedAt: new Date().toISOString().split("T")[0],
+            }
+          }
         })
 
         return HttpResponse.json(gameSuccessResponse())
       } catch {
         return HttpResponse.json(internalServerError, { status: 500 })
       }
     }),
+
+    http.post(`${MSW_BASE_URL}/admin/users/unblock`, async ({ request }) => {
+      try {
+        const cookieHeader = request.headers.get("Cookie")
+        if (!validateSessionCookie(cookieHeader)) {
+          return HttpResponse.json(loginRequiredError, { status: 401 })
+        }
+
+        const json = await request.json()
+        const parsed = unblockUsersRequestSchema.safeParse(json)
+
+        if (!parsed.success) {
+          return HttpResponse.json(gameMissingFieldsError(), { status: 400 })
+        }
+
+        parsed.data.emails.forEach((email) => {
+          blockedEmails.delete(email)
+          const userIndex = usersStore.findIndex((u) => u.email === email)
+          if (userIndex !== -1) {
+            usersStore[userIndex] = {
+              ...usersStore[userIndex],
+              blocked: false,
+              blockReason: null,
+              blockedAt: null,
+            }
+          }
+        })
+
+        return HttpResponse.json(gameSuccessResponse())
+      } catch {
+        return HttpResponse.json(internalServerError, { status: 500 })
+      }
+    }),
+
+    http.get(`${MSW_BASE_URL}/admin/users`, ({ request }) => {
+      try {
+        const cookieHeader = request.headers.get("Cookie")
+        if (!validateSessionCookie(cookieHeader)) {
+          return HttpResponse.json(loginRequiredError, { status: 401 })
+        }
+
+        const url = new URL(request.url)
+        const pageParam = url.searchParams.get("page")
+        const page = pageParam ? Math.max(0, parseInt(pageParam, 10)) : 0
+
+        const totalElements = usersStore.length
+        const totalPages = Math.ceil(totalElements / PAGE_SIZE)
+
+        const startIndex = page * PAGE_SIZE
+        const endIndex = startIndex + PAGE_SIZE
+
+        const paginatedUsers = usersStore.slice(startIndex, endIndex)
+        const hasNext = page < totalPages - 1
+
+        const response: AdminUsersResponse = {
+          content: paginatedUsers,
+          page,
+          size: PAGE_SIZE,
+          totalElements,
+          totalPages,
+          hasNext,
+        }
+
+        return HttpResponse.json(generateSuccessResponse(response))
+      } catch {
+        return HttpResponse.json(internalServerError, { status: 500 })
+      }
+    }),
   ]
 }