254 lines
8.4 KiB
TypeScript
254 lines
8.4 KiB
TypeScript
import { Key, FileText, History } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { User } from "@/types/user";
|
|
import { USER_TABLE_COLUMNS } from "@/constants/user";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { PaginationInfo } from "@/components/common/Pagination";
|
|
import { UserStatusConfirmDialog } from "./UserStatusConfirmDialog";
|
|
import { UserHistoryModal } from "./UserHistoryModal";
|
|
|
|
interface UserTableProps {
|
|
users: User[];
|
|
isLoading: boolean;
|
|
paginationInfo: PaginationInfo;
|
|
onStatusToggle: (user: User, newStatus: string) => void;
|
|
onPasswordReset: (userId: string, userName: string) => void;
|
|
}
|
|
|
|
/**
|
|
* 사용자 목록 테이블 컴포넌트
|
|
*/
|
|
export function UserTable({ users, isLoading, paginationInfo, onStatusToggle, onPasswordReset }: UserTableProps) {
|
|
// 확인 모달 상태 관리
|
|
const [confirmDialog, setConfirmDialog] = useState<{
|
|
isOpen: boolean;
|
|
user: User | null;
|
|
newStatus: string;
|
|
}>({
|
|
isOpen: false,
|
|
user: null,
|
|
newStatus: "",
|
|
});
|
|
|
|
// 히스토리 모달 상태 관리
|
|
const [historyModal, setHistoryModal] = useState<{
|
|
isOpen: boolean;
|
|
userId: string;
|
|
userName: string;
|
|
}>({
|
|
isOpen: false,
|
|
userId: "",
|
|
userName: "",
|
|
});
|
|
|
|
// NO 컬럼 계산 함수 (페이지네이션 고려)
|
|
const getRowNumber = (index: number) => {
|
|
return paginationInfo.startItem + index;
|
|
};
|
|
|
|
// 날짜 포맷팅 함수
|
|
const formatDate = (dateString: string) => {
|
|
if (!dateString) return "-";
|
|
return dateString.split(" ")[0]; // "2024-01-15 14:30:00" -> "2024-01-15"
|
|
};
|
|
|
|
// 상태 토글 핸들러 (확인 모달 표시)
|
|
const handleStatusToggle = (user: User, checked: boolean) => {
|
|
const newStatus = checked ? "active" : "inactive";
|
|
setConfirmDialog({
|
|
isOpen: true,
|
|
user,
|
|
newStatus,
|
|
});
|
|
};
|
|
|
|
// 상태 변경 확인
|
|
const handleConfirmStatusChange = () => {
|
|
if (confirmDialog.user) {
|
|
onStatusToggle(confirmDialog.user, confirmDialog.newStatus);
|
|
}
|
|
setConfirmDialog({ isOpen: false, user: null, newStatus: "" });
|
|
};
|
|
|
|
// 상태 변경 취소
|
|
const handleCancelStatusChange = () => {
|
|
setConfirmDialog({ isOpen: false, user: null, newStatus: "" });
|
|
};
|
|
|
|
// 변경이력 모달 열기
|
|
const handleOpenHistoryModal = (user: User) => {
|
|
setHistoryModal({
|
|
isOpen: true,
|
|
userId: user.user_id,
|
|
userName: user.user_name || user.user_id,
|
|
});
|
|
};
|
|
|
|
// 변경이력 모달 닫기
|
|
const handleCloseHistoryModal = () => {
|
|
setHistoryModal({
|
|
isOpen: false,
|
|
userId: "",
|
|
userName: "",
|
|
});
|
|
};
|
|
|
|
// 로딩 상태 렌더링
|
|
if (isLoading) {
|
|
return (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{USER_TABLE_COLUMNS.map((column) => (
|
|
<TableHead key={column.key} style={{ width: column.width }}>
|
|
{column.label}
|
|
</TableHead>
|
|
))}
|
|
<TableHead className="w-[200px]">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{Array.from({ length: 10 }).map((_, index) => (
|
|
<TableRow key={index}>
|
|
{USER_TABLE_COLUMNS.map((column) => (
|
|
<TableCell key={column.key}>
|
|
<div className="bg-muted h-4 animate-pulse rounded"></div>
|
|
</TableCell>
|
|
))}
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 데이터가 없을 때
|
|
if (users.length === 0) {
|
|
return (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{USER_TABLE_COLUMNS.map((column) => (
|
|
<TableHead key={column.key} style={{ width: column.width }}>
|
|
{column.label}
|
|
</TableHead>
|
|
))}
|
|
<TableHead className="w-[200px]">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell colSpan={USER_TABLE_COLUMNS.length + 1} className="h-24 text-center">
|
|
<div className="text-muted-foreground flex flex-col items-center justify-center">
|
|
<p>등록된 사용자가 없습니다.</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 실제 데이터 렌더링
|
|
return (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader className="bg-muted">
|
|
<TableRow>
|
|
{USER_TABLE_COLUMNS.map((column) => (
|
|
<TableHead key={column.key} style={{ width: column.width }}>
|
|
{column.label}
|
|
</TableHead>
|
|
))}
|
|
<TableHead className="w-[200px]">작업</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{users.map((user, index) => (
|
|
<TableRow key={`${user.user_id}-${index}`} className="hover:bg-muted/50">
|
|
<TableCell className="font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
|
|
<TableCell className="font-mono text-sm">{user.sabun || "-"}</TableCell>
|
|
<TableCell className="font-medium">{user.companyCode || "-"}</TableCell>
|
|
<TableCell className="font-medium">{user.deptName || "-"}</TableCell>
|
|
<TableCell className="font-medium">{user.positionName || "-"}</TableCell>
|
|
<TableCell className="font-mono">{user.userId}</TableCell>
|
|
<TableCell className="font-medium">{user.userName}</TableCell>
|
|
<TableCell>{user.tel || user.cellPhone || "-"}</TableCell>
|
|
<TableCell className="max-w-[200px] truncate" title={user.email}>
|
|
{user.email || "-"}
|
|
</TableCell>
|
|
<TableCell>{formatDate(user.regDate)}</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
checked={user.status === "active"}
|
|
onCheckedChange={(checked) => handleStatusToggle(user, checked)}
|
|
aria-label={`${user.userName} 상태 토글`}
|
|
/>
|
|
<span
|
|
className={`text-sm font-medium ${user.status === "active" ? "text-blue-600" : "text-gray-500"}`}
|
|
>
|
|
{user.status === "active" ? "활성" : "비활성"}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
|
|
className="h-8 w-8 p-0"
|
|
title="비밀번호 초기화"
|
|
>
|
|
<Key className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleOpenHistoryModal(user)}
|
|
className="h-8 w-8 p-0"
|
|
title="변경이력 조회"
|
|
>
|
|
<History className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{/* 상태 변경 확인 모달 */}
|
|
<UserStatusConfirmDialog
|
|
user={confirmDialog.user}
|
|
newStatus={confirmDialog.newStatus}
|
|
isOpen={confirmDialog.isOpen}
|
|
onConfirm={handleConfirmStatusChange}
|
|
onCancel={handleCancelStatusChange}
|
|
/>
|
|
|
|
{/* 사용자 변경이력 모달 */}
|
|
<UserHistoryModal
|
|
isOpen={historyModal.isOpen}
|
|
onClose={handleCloseHistoryModal}
|
|
userId={historyModal.userId}
|
|
userName={historyModal.userName}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|