내정보 페이지 사용성개선, adminFront user 정보 연동.

adminfront/src/features/users/UserCreatePage.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { ArrowLeft, Loader2, Save } from "lucide-react";
+import { ArrowLeft, ClipboardCopy, Loader2, Save } from "lucide-react";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
@@ -14,12 +14,19 @@ import {
 } from "../../components/ui/card";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
-import { createUser, type UserCreateRequest } from "../../lib/adminApi";
+import {
+  createUser,
+  type UserCreateRequest,
+  type UserCreateResponse,
+} from "../../lib/adminApi";
 
 function UserCreatePage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [error, setError] = React.useState<string | null>(null);
+  const [generatedPassword, setGeneratedPassword] = React.useState<string | null>(null);
+  const [createdEmail, setCreatedEmail] = React.useState<string | null>(null);
+  const [autoPassword, setAutoPassword] = React.useState(true);
 
   const {
     register,
@@ -39,8 +46,13 @@ function UserCreatePage() {
 
   const mutation = useMutation({
     mutationFn: createUser,
-    onSuccess: () => {
+    onSuccess: (data: UserCreateResponse) => {
       queryClient.invalidateQueries({ queryKey: ["users"] });
+      if (data.initialPassword) {
+        setGeneratedPassword(data.initialPassword);
+        setCreatedEmail(data.email);
+        return;
+      }
       navigate("/users");
     },
     onError: (err: AxiosError<{ error?: string }>) => {
@@ -50,9 +62,31 @@ function UserCreatePage() {
 
   const onSubmit = (data: UserCreateRequest) => {
     setError(null);
+    setGeneratedPassword(null);
+    setCreatedEmail(null);
+
+    if (autoPassword) {
+      mutation.mutate({ ...data, password: "" });
+      return;
+    }
+
+    if (!data.password) {
+      setError("비밀번호를 입력하거나 자동 생성을 사용해 주세요.");
+      return;
+    }
+
     mutation.mutate(data);
   };
 
+  const onCopyPassword = async () => {
+    if (!generatedPassword) return;
+    try {
+      await navigator.clipboard.writeText(generatedPassword);
+    } catch (_) {
+      // ignore
+    }
+  };
+
   return (
     <div className="max-w-3xl space-y-8">
       <header className="flex flex-wrap items-center justify-between gap-4">
@@ -74,12 +108,33 @@ function UserCreatePage() {
         </Button>
       </header>
 
+      {generatedPassword && (
+        <Card>
+          <CardHeader>
+            <CardTitle>초기 비밀번호 생성 완료</CardTitle>
+            <CardDescription>
+              {createdEmail ? `${createdEmail} 계정의 초기 비밀번호입니다.` : "초기 비밀번호가 생성되었습니다."}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3 rounded-md border border-dashed px-4 py-3">
+              <span className="font-mono text-sm">{generatedPassword}</span>
+              <Button size="sm" variant="outline" onClick={onCopyPassword}>
+                <ClipboardCopy className="mr-2 h-4 w-4" />
+                복사
+              </Button>
+            </div>
+            <div className="flex justify-end">
+              <Button onClick={() => navigate("/users")}>목록으로 이동</Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       <Card>
         <CardHeader>
           <CardTitle>계정 정보</CardTitle>
-          <CardDescription>
-            새로운 사용자를 시스템에 등록합니다.
-          </CardDescription>
+          <CardDescription>새로운 사용자를 시스템에 등록합니다.</CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -102,22 +157,29 @@ function UserCreatePage() {
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password">비밀번호</Label>
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">비밀번호</Label>
+                <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    checked={autoPassword}
+                    onChange={(event) => setAutoPassword(event.target.checked)}
+                  />
+                  자동 생성
+                </label>
+              </div>
               <Input
                 id="password"
                 type="password"
                 placeholder="********"
-                {...register("password", {
-                  required: "비밀번호는 필수입니다.",
-                  minLength: { value: 6, message: "6자 이상 입력해주세요." },
-                })}
+                disabled={autoPassword}
+                {...register("password")}
               />
               <p className="text-xs text-muted-foreground">
-                초기 비밀번호를 설정합니다.
+                {autoPassword
+                  ? "비워두면 시스템이 초기 비밀번호를 자동 생성합니다."
+                  : "초기 비밀번호를 직접 설정합니다."}
               </p>
-              {errors.password && (
-                <p className="text-xs text-destructive">{errors.password.message}</p>
-              )}
             </div>
 
             <div className="grid gap-4 md:grid-cols-2">
@@ -203,4 +265,4 @@ function UserCreatePage() {
   );
 }
 
-export default UserCreatePage;
+export default UserCreatePage;