feat: 회원 관리 > 회원 통계 작업

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">