사용자 상태 세분화

adminfront/src/features/users/UserDetailPage.tsx

@@ -44,6 +44,13 @@ import {
 } from "../../components/ui/dialog";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/ui/select";
 import { Switch } from "../../components/ui/switch";
 import {
   Tabs,
@@ -78,6 +85,11 @@ import {
   parseOrgChartTenantSelection,
 } from "./orgChartPicker";
 import type { UserSchemaField } from "./userSchemaFields";
+import {
+  normalizeUserStatusValue,
+  userStatusLabel,
+  userStatusValues,
+} from "./userStatus";
 import { resolvePersonalTenant } from "./utils/personalTenant";
 
 type UserFormValues = Omit<UserUpdateRequest, "metadata"> & {
@@ -603,7 +615,7 @@ function UserDetailPage() {
         name: user.name,
         phone: user.phone || "",
         role: user.role,
-        status: user.status,
+        status: normalizeUserStatusValue(user.status),
         tenantSlug:
           user.tenantSlug ||
           user.joinedTenants?.find(
@@ -1044,21 +1056,25 @@ function UserDetailPage() {
                     >
                       {t("ui.admin.users.detail.form.status", "상태")}
                     </Label>
-                    <div className="flex h-11 items-center gap-3 rounded-md border border-input bg-background px-3">
-                      <Switch
-                        id="status"
-                        checked={watchedStatus === "active"}
-                        onCheckedChange={(checked) =>
-                          setValue("status", checked ? "active" : "inactive")
-                        }
-                      />
-                      <span className="text-sm text-muted-foreground">
-                        {t(
-                          `ui.common.status.${watchedStatus}`,
-                          watchedStatus || "inactive",
-                        )}
-                      </span>
-                    </div>
+                    <Select
+                      value={normalizeUserStatusValue(watchedStatus || "")}
+                      onValueChange={(value) =>
+                        setValue("status", normalizeUserStatusValue(value), {
+                          shouldDirty: true,
+                        })
+                      }
+                    >
+                      <SelectTrigger id="status" className="h-11 shadow-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {userStatusValues.map((status) => (
+                          <SelectItem key={status} value={status}>
+                            {userStatusLabel(status)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>