384 lines
13 KiB
TypeScript
384 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Plus, ChevronDown, ChevronRight, Users, Trash2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import type { Department } from "@/types/department";
|
|
import * as departmentAPI from "@/lib/api/department";
|
|
|
|
interface DepartmentStructureProps {
|
|
companyCode: string;
|
|
selectedDepartment: Department | null;
|
|
onSelectDepartment: (department: Department | null) => void;
|
|
refreshTrigger?: number;
|
|
}
|
|
|
|
/**
|
|
* 부서 구조 컴포넌트 (트리 형태)
|
|
*/
|
|
export function DepartmentStructure({
|
|
companyCode,
|
|
selectedDepartment,
|
|
onSelectDepartment,
|
|
refreshTrigger,
|
|
}: DepartmentStructureProps) {
|
|
const { toast } = useToast();
|
|
const [departments, setDepartments] = useState<Department[]>([]);
|
|
const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 부서 추가 모달
|
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
|
const [parentDeptForAdd, setParentDeptForAdd] = useState<string | null>(null);
|
|
const [newDeptName, setNewDeptName] = useState("");
|
|
const [duplicateMessage, setDuplicateMessage] = useState<string | null>(null);
|
|
|
|
// 부서 삭제 확인 모달
|
|
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
|
const [deptToDelete, setDeptToDelete] = useState<{ code: string; name: string } | null>(null);
|
|
const [deleteErrorMessage, setDeleteErrorMessage] = useState<string | null>(null);
|
|
|
|
// 부서 목록 로드
|
|
useEffect(() => {
|
|
loadDepartments();
|
|
}, [companyCode, refreshTrigger]);
|
|
|
|
const loadDepartments = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await departmentAPI.getDepartments(companyCode);
|
|
if (response.success && response.data) {
|
|
setDepartments(response.data);
|
|
} else {
|
|
console.error("부서 목록 로드 실패:", response.error);
|
|
setDepartments([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("부서 목록 로드 실패:", error);
|
|
setDepartments([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// 부서 트리 구조 생성
|
|
const buildTree = (parentCode: string | null): Department[] => {
|
|
return departments
|
|
.filter((dept) => dept.parent_dept_code === parentCode)
|
|
.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
|
|
};
|
|
|
|
// 부서 추가 핸들러
|
|
const handleAddDepartment = (parentDeptCode: string | null = null) => {
|
|
setParentDeptForAdd(parentDeptCode);
|
|
setNewDeptName("");
|
|
setIsAddModalOpen(true);
|
|
};
|
|
|
|
// 부서 저장
|
|
const handleSaveDepartment = async () => {
|
|
if (!newDeptName.trim()) return;
|
|
|
|
try {
|
|
const response = await departmentAPI.createDepartment(companyCode, {
|
|
dept_name: newDeptName,
|
|
parent_dept_code: parentDeptForAdd,
|
|
});
|
|
|
|
if (response.success) {
|
|
setIsAddModalOpen(false);
|
|
setNewDeptName("");
|
|
setParentDeptForAdd(null);
|
|
loadDepartments();
|
|
|
|
// 성공 Toast 표시
|
|
toast({
|
|
title: "부서 생성 완료",
|
|
description: `"${newDeptName}" 부서가 생성되었습니다.`,
|
|
variant: "default",
|
|
});
|
|
} else {
|
|
if ((response as any).isDuplicate) {
|
|
setDuplicateMessage(response.error || "이미 존재하는 부서명입니다.");
|
|
} else {
|
|
toast({
|
|
title: "부서 생성 실패",
|
|
description: response.error || "부서 추가에 실패했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("부서 추가 실패:", error);
|
|
toast({
|
|
title: "부서 생성 실패",
|
|
description: "부서 추가 중 오류가 발생했습니다.",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
// 부서 삭제 확인 요청
|
|
const handleDeleteDepartmentRequest = (deptCode: string, deptName: string) => {
|
|
setDeptToDelete({ code: deptCode, name: deptName });
|
|
setDeleteConfirmOpen(true);
|
|
};
|
|
|
|
// 부서 삭제 실행
|
|
const handleDeleteDepartmentConfirm = async () => {
|
|
if (!deptToDelete) return;
|
|
|
|
try {
|
|
const response = await departmentAPI.deleteDepartment(deptToDelete.code);
|
|
|
|
if (response.success) {
|
|
// 삭제된 부서가 선택되어 있었다면 선택 해제
|
|
if (selectedDepartment?.dept_code === deptToDelete.code) {
|
|
onSelectDepartment(null);
|
|
}
|
|
|
|
setDeleteConfirmOpen(false);
|
|
setDeptToDelete(null);
|
|
loadDepartments();
|
|
|
|
// 성공 메시지 Toast로 표시 (부서원 수 포함)
|
|
toast({
|
|
title: "부서 삭제 완료",
|
|
description: response.message || "부서가 삭제되었습니다.",
|
|
variant: "default",
|
|
});
|
|
} else {
|
|
// 삭제 확인 모달을 닫고 에러 모달을 표시
|
|
setDeleteConfirmOpen(false);
|
|
setDeptToDelete(null);
|
|
setDeleteErrorMessage(response.error || "부서 삭제에 실패했습니다.");
|
|
}
|
|
} catch (error) {
|
|
console.error("부서 삭제 실패:", error);
|
|
setDeleteConfirmOpen(false);
|
|
setDeptToDelete(null);
|
|
setDeleteErrorMessage("부서 삭제 중 오류가 발생했습니다.");
|
|
}
|
|
};
|
|
|
|
// 확장/축소 토글
|
|
const toggleExpand = (deptCode: string) => {
|
|
const newExpanded = new Set(expandedDepts);
|
|
if (newExpanded.has(deptCode)) {
|
|
newExpanded.delete(deptCode);
|
|
} else {
|
|
newExpanded.add(deptCode);
|
|
}
|
|
setExpandedDepts(newExpanded);
|
|
};
|
|
|
|
// 부서 트리 렌더링 (재귀)
|
|
const renderDepartmentTree = (parentCode: string | null, level: number = 0) => {
|
|
const children = buildTree(parentCode);
|
|
|
|
return children.map((dept) => {
|
|
const hasChildren = departments.some((d) => d.parent_dept_code === dept.dept_code);
|
|
const isExpanded = expandedDepts.has(dept.dept_code);
|
|
const isSelected = selectedDepartment?.dept_code === dept.dept_code;
|
|
|
|
return (
|
|
<div key={dept.dept_code}>
|
|
{/* 부서 항목 */}
|
|
<div
|
|
className={`hover:bg-muted flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm transition-colors ${
|
|
isSelected ? "bg-primary/10 text-primary" : ""
|
|
}`}
|
|
style={{ marginLeft: `${level * 16}px` }}
|
|
>
|
|
<div className="flex flex-1 items-center gap-2" onClick={() => onSelectDepartment(dept)}>
|
|
{/* 확장/축소 아이콘 */}
|
|
{hasChildren ? (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleExpand(dept.dept_code);
|
|
}}
|
|
className="h-4 w-4"
|
|
>
|
|
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
|
</button>
|
|
) : (
|
|
<div className="h-4 w-4" />
|
|
)}
|
|
|
|
{/* 부서명 */}
|
|
<span className="font-medium">{dept.dept_name}</span>
|
|
|
|
{/* 인원수 */}
|
|
<div className="text-muted-foreground flex items-center gap-1 text-xs">
|
|
<Users className="h-3 w-3" />
|
|
<span>{dept.memberCount || 0}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 액션 버튼 */}
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleAddDepartment(dept.dept_code);
|
|
}}
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive h-6 w-6"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteDepartmentRequest(dept.dept_code, dept.dept_name);
|
|
}}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 하위 부서 (재귀) */}
|
|
{hasChildren && isExpanded && renderDepartmentTree(dept.dept_code, level + 1)}
|
|
</div>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold">부서 구조</h3>
|
|
<Button size="sm" className="h-9 gap-2 text-sm" onClick={() => handleAddDepartment(null)}>
|
|
<Plus className="h-4 w-4" />
|
|
최상위 부서 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 부서 트리 */}
|
|
<div className="bg-card space-y-1 rounded-lg border p-4 shadow-sm">
|
|
{isLoading ? (
|
|
<div className="text-muted-foreground py-8 text-center text-sm">로딩 중...</div>
|
|
) : departments.length === 0 ? (
|
|
<div className="text-muted-foreground py-8 text-center text-sm">
|
|
부서가 없습니다. 최상위 부서를 추가해주세요.
|
|
</div>
|
|
) : (
|
|
renderDepartmentTree(null)
|
|
)}
|
|
</div>
|
|
|
|
{/* 부서 추가 모달 */}
|
|
<Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{parentDeptForAdd ? "하위 부서 추가" : "최상위 부서 추가"}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="dept_name">
|
|
부서명 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="dept_name"
|
|
value={newDeptName}
|
|
onChange={(e) => setNewDeptName(e.target.value)}
|
|
placeholder="부서명을 입력하세요"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsAddModalOpen(false)}>
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSaveDepartment} disabled={!newDeptName.trim()}>
|
|
추가
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 중복 알림 모달 */}
|
|
<Dialog open={!!duplicateMessage} onOpenChange={() => setDuplicateMessage(null)}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">중복 알림</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-sm">{duplicateMessage}</p>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button onClick={() => setDuplicateMessage(null)} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
확인
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 부서 삭제 확인 모달 */}
|
|
<Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">부서 삭제 확인</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-sm">
|
|
<span className="font-semibold">{deptToDelete?.name}</span> 부서를 삭제하시겠습니까?
|
|
</p>
|
|
<p className="text-muted-foreground mt-2 text-xs">이 작업은 되돌릴 수 없습니다.</p>
|
|
</div>
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setDeleteConfirmOpen(false);
|
|
setDeptToDelete(null);
|
|
}}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteDepartmentConfirm}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
삭제
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 부서 삭제 에러 모달 */}
|
|
<Dialog open={!!deleteErrorMessage} onOpenChange={() => setDeleteErrorMessage(null)}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">삭제 불가</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p className="text-sm">{deleteErrorMessage}</p>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button onClick={() => setDeleteErrorMessage(null)} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
확인
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|