최초커밋

frontend/components/admin/UserManagement.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState } from "react";
+import { useUserManagement } from "@/hooks/useUserManagement";
+import { UserToolbar } from "./UserToolbar";
+import { UserTable } from "./UserTable";
+import { Pagination } from "@/components/common/Pagination";
+import { UserPasswordResetModal } from "./UserPasswordResetModal";
+import { UserFormModal } from "./UserFormModal";
+
+/**
+ * 사용자 관리 메인 컴포넌트
+ * - 원본 Spring + JSP 코드 패턴 기반 REST API 연동
+ * - 실제 데이터베이스와 연동되어 작동
+ */
+export function UserManagement() {
+  const {
+    // 데이터
+    users,
+    searchFilter,
+    isLoading,
+    isSearching,
+    error,
+    paginationInfo,
+
+    // 검색 기능
+    updateSearchFilter,
+
+    // 페이지네이션
+    handlePageChange,
+    handlePageSizeChange,
+
+    // 액션 핸들러
+    handleStatusToggle,
+
+    // 유틸리티
+    clearError,
+    refreshData,
+  } = useUserManagement();
+
+  // 비밀번호 초기화 모달 상태
+  const [passwordResetModal, setPasswordResetModal] = useState({
+    isOpen: false,
+    userId: null as string | null,
+    userName: null as string | null,
+  });
+
+  // 사용자 등록 모달 상태
+  const [isUserFormModalOpen, setIsUserFormModalOpen] = useState(false);
+
+  // 사용자 등록 핸들러
+  const handleCreateUser = () => {
+    setIsUserFormModalOpen(true);
+  };
+
+  // 사용자 등록 모달 닫기
+  const handleUserFormClose = () => {
+    setIsUserFormModalOpen(false);
+  };
+
+  // 사용자 등록 성공 핸들러
+  const handleUserFormSuccess = () => {
+    refreshData(); // 목록 새로고침
+    handleUserFormClose();
+  };
+
+  // 비밀번호 초기화 핸들러
+  const handlePasswordReset = (userId: string, userName: string) => {
+    setPasswordResetModal({
+      isOpen: true,
+      userId,
+      userName,
+    });
+  };
+
+  // 비밀번호 초기화 모달 닫기
+  const handlePasswordResetClose = () => {
+    setPasswordResetModal({
+      isOpen: false,
+      userId: null,
+      userName: null,
+    });
+  };
+
+  // 비밀번호 초기화 성공 핸들러
+  const handlePasswordResetSuccess = () => {
+    refreshData(); // 목록 새로고침
+    handlePasswordResetClose();
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 툴바 - 검색, 필터, 등록 버튼 */}
+      <UserToolbar
+        searchFilter={searchFilter}
+        totalCount={paginationInfo.totalItems} // 전체 총 개수
+        isSearching={isSearching}
+        onSearchChange={updateSearchFilter}
+        onCreateClick={handleCreateUser}
+      />
+
+      {/* 에러 메시지 */}
+      {error && (
+        <div className="bg-destructive/10 border-destructive/20 rounded-lg border p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-destructive font-medium">오류가 발생했습니다</p>
+            <button onClick={clearError} className="text-destructive hover:text-destructive/80">
+              ✕
+            </button>
+          </div>
+          <p className="text-destructive/80 mt-1">{error}</p>
+        </div>
+      )}
+
+      {/* 사용자 목록 테이블 */}
+      <UserTable
+        users={users}
+        isLoading={isLoading}
+        paginationInfo={paginationInfo}
+        onStatusToggle={handleStatusToggle}
+        onPasswordReset={handlePasswordReset}
+      />
+
+      {/* 페이지네이션 */}
+      {!isLoading && users.length > 0 && (
+        <Pagination
+          paginationInfo={paginationInfo}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          showPageSizeSelector={true}
+          pageSizeOptions={[10, 20, 50, 100]}
+          className="mt-6"
+        />
+      )}
+
+      {/* 사용자 등록 모달 */}
+      <UserFormModal isOpen={isUserFormModalOpen} onClose={handleUserFormClose} onSuccess={handleUserFormSuccess} />
+
+      {/* 비밀번호 초기화 모달 */}
+      <UserPasswordResetModal
+        isOpen={passwordResetModal.isOpen}
+        onClose={handlePasswordResetClose}
+        userId={passwordResetModal.userId}
+        userName={passwordResetModal.userName}
+        onSuccess={handlePasswordResetSuccess}
+      />
+    </div>
+  );
+}