From 2ce1a662c88de832fa26d4ffdfca2f937f7a78af Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 11 Jun 2025 16:22:58 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20>=20=ED=9A=8C=EC=9B=90=20=ED=86=B5=EA=B3=84=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/users/ui/users-page.tsx | 60 +++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/apps/cs/src/pages/users/ui/users-page.tsx b/apps/cs/src/pages/users/ui/users-page.tsx
index 9bae6dedf..d7ef3fe59 100644
--- a/apps/cs/src/pages/users/ui/users-page.tsx
+++ b/apps/cs/src/pages/users/ui/users-page.tsx
@@ -55,6 +55,12 @@ function UsersPage() {
     },
   });
 
+  const { data: userSttsStats } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.USERS],
+    queryFn: () => UserApi.selectUserSttsStats(),
+  });
+  console.log("userSttsStats: ", userSttsStats);
+
   const { data: users, refetch } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, watch("sort")],
     queryFn: () =>
@@ -120,8 +126,62 @@ function UsersPage() {
     setValue("toDateYmd", dayjs(presetDateRange?.to).format("YYYYMMDD"));
   };
 
+  const getUserSttsStatsCnt = (code: string): number => {
+    return userSttsStats?.find((item) => item.sttsCd === code)?.cnt ?? 0;
+  };
+
   return (
     <div className="card card-border !mt-6">
+      <div className="card card-border flex items-center justify-center gap-10 !bg-accent !py-6">
+        <div className="flex items-center gap-4">
+          <div className="flex size-12 items-center justify-center rounded-full bg-[rgba(153,153,153,1)]">
+            <i className="diveicon di-person text-xl text-white" />
+          </div>
+          <span className="text-2xl font-medium text-label">
+            승인대기{" "}
+            <em className="not-italic text-primary">
+              {getUserSttsStatsCnt("00")}
+            </em>
+            명
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex size-12 items-center justify-center rounded-full bg-primary">
+            <i className="diveicon di-person-fill text-xl text-white" />
+          </div>
+          <span className="text-2xl font-medium text-label">
+            전체{" "}
+            <em className="not-italic text-primary">
+              {getUserSttsStatsCnt("TOTAL")}
+            </em>
+            명
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex size-12 items-center justify-center rounded-full bg-[rgba(255,149,0,1)]">
+            <i className="diveicon di-lock text-xl text-white" />
+          </div>
+          <span className="text-2xl font-medium text-label">
+            잠금{" "}
+            <em className="not-italic text-primary">
+              {getUserSttsStatsCnt("07")}
+            </em>
+            명
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex size-12 items-center justify-center rounded-full bg-destructive">
+            <i className="diveicon di-exclamation-triangle-fill text-xl text-white" />
+          </div>
+          <span className="text-2xl font-medium text-label">
+            탈퇴{" "}
+            <em className="not-italic text-primary">
+              {getUserSttsStatsCnt("08")}
+            </em>
+            명
+          </span>
+        </div>
+      </div>
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex flex-col gap-6 p-2">
           <div className="flex items-center gap-6">