비밀번호 변경 기능 구현

frontend/components/admin/UserPasswordResetModal.tsx

@@ -6,8 +6,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Eye, EyeOff } from "lucide-react";
-// import { toast } from "react-hot-toast"; // 라이브러리 미설치로 alert 사용
 import { userAPI } from "@/lib/api/user";
+import { AlertModal, AlertType } from "@/components/common/AlertModal";
 
 interface UserPasswordResetModalProps {
   isOpen: boolean;
@@ -24,6 +24,40 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  // 알림 모달 상태
+  const [alertState, setAlertState] = useState<{
+    isOpen: boolean;
+    type: AlertType;
+    title: string;
+    message: string;
+  }>({
+    isOpen: false,
+    type: "info",
+    title: "",
+    message: "",
+  });
+
+  // 알림 모달 표시 헬퍼 함수
+  const showAlert = (type: AlertType, title: string, message: string) => {
+    setAlertState({
+      isOpen: true,
+      type,
+      title,
+      message,
+    });
+  };
+
+  // 알림 모달 닫기
+  const closeAlert = () => {
+    setAlertState((prev) => ({ ...prev, isOpen: false }));
+
+    // 성공 알림이 닫힐 때 메인 모달도 닫기
+    if (alertState.type === "success") {
+      handleClose();
+      onSuccess?.();
+    }
+  };
+
   // 비밀번호 유효성 검사 (영문, 숫자, 특수문자만 허용)
   const validatePassword = (password: string) => {
     const regex = /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]*$/;
@@ -37,17 +71,17 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
   // 초기화 핸들러
   const handleReset = useCallback(async () => {
     if (!userId || !newPassword.trim()) {
-      alert("새 비밀번호를 입력해주세요.");
+      showAlert("warning", "입력 필요", "새 비밀번호를 입력해주세요.");
       return;
     }
 
     if (!validatePassword(newPassword)) {
-      alert("비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.");
+      showAlert("warning", "형식 오류", "비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.");
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      alert("비밀번호가 일치하지 않습니다.");
+      showAlert("warning", "비밀번호 불일치", "비밀번호가 일치하지 않습니다.");
       return;
     }
 
@@ -60,15 +94,14 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
       });
 
       if (response.success) {
-        alert("비밀번호가 성공적으로 초기화되었습니다.");
-        handleClose();
-        onSuccess?.();
+        showAlert("success", "초기화 완료", "비밀번호가 성공적으로 초기화되었습니다.");
+        // 성공 알림은 사용자가 확인 버튼을 눌러서 닫도록 함
       } else {
-        alert(response.message || "비밀번호 초기화에 실패했습니다.");
+        showAlert("error", "초기화 실패", response.message || "비밀번호 초기화에 실패했습니다.");
       }
     } catch (error) {
       console.error("비밀번호 초기화 오류:", error);
-      alert("비밀번호 초기화 중 오류가 발생했습니다.");
+      showAlert("error", "시스템 오류", "비밀번호 초기화 중 오류가 발생했습니다.");
     } finally {
       setIsLoading(false);
     }
@@ -183,6 +216,15 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
           </Button>
         </div>
       </DialogContent>
+
+      {/* 알림 모달 */}
+      <AlertModal
+        isOpen={alertState.isOpen}
+        onClose={closeAlert}
+        type={alertState.type}
+        title={alertState.title}
+        message={alertState.message}
+      />
     </Dialog>
   );
 }