118 lines
4.0 KiB
TypeScript
118 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { DepartmentStructure } from "./DepartmentStructure";
|
|
import { DepartmentMembers } from "./DepartmentMembers";
|
|
import type { Department } from "@/types/department";
|
|
import { getCompanyList } from "@/lib/api/company";
|
|
|
|
interface DepartmentManagementProps {
|
|
companyCode: string;
|
|
}
|
|
|
|
/**
|
|
* 부서 관리 메인 컴포넌트
|
|
* 좌측: 부서 구조, 우측: 부서 인원
|
|
*/
|
|
export function DepartmentManagement({ companyCode }: DepartmentManagementProps) {
|
|
const router = useRouter();
|
|
const [selectedDepartment, setSelectedDepartment] = useState<Department | null>(null);
|
|
const [activeTab, setActiveTab] = useState<string>("structure");
|
|
const [companyName, setCompanyName] = useState<string>("");
|
|
const [refreshTrigger, setRefreshTrigger] = useState(0);
|
|
|
|
// 부서원 변경 시 부서 구조 새로고침
|
|
const handleMemberChange = () => {
|
|
setRefreshTrigger((prev) => prev + 1);
|
|
};
|
|
|
|
// 회사 정보 로드
|
|
useEffect(() => {
|
|
const loadCompanyInfo = async () => {
|
|
const response = await getCompanyList();
|
|
if (response.success && response.data) {
|
|
const company = response.data.find((c) => c.company_code === companyCode);
|
|
if (company) {
|
|
setCompanyName(company.company_name);
|
|
}
|
|
}
|
|
};
|
|
loadCompanyInfo();
|
|
}, [companyCode]);
|
|
|
|
const handleBackToList = () => {
|
|
router.push("/admin/company");
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 상단 헤더: 회사 정보 + 뒤로가기 */}
|
|
<div className="flex items-center justify-between border-b pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<Button variant="outline" size="sm" onClick={handleBackToList} className="h-9 gap-2">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
회사 목록
|
|
</Button>
|
|
<div className="bg-border h-6 w-px" />
|
|
<div>
|
|
<h2 className="text-xl font-semibold">{companyName || companyCode}</h2>
|
|
<p className="text-muted-foreground text-sm">부서 관리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 탭 네비게이션 (모바일용) */}
|
|
<div className="lg:hidden">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="structure">부서 구조</TabsTrigger>
|
|
<TabsTrigger value="members">부서 인원</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="structure" className="mt-4">
|
|
<DepartmentStructure
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
onSelectDepartment={setSelectedDepartment}
|
|
refreshTrigger={refreshTrigger}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="members" className="mt-4">
|
|
<DepartmentMembers
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
onMemberChange={handleMemberChange}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* 좌우 레이아웃 (데스크톱) */}
|
|
<div className="hidden h-full gap-6 lg:flex">
|
|
{/* 좌측: 부서 구조 (20%) */}
|
|
<div className="w-[20%] border-r pr-6">
|
|
<DepartmentStructure
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
onSelectDepartment={setSelectedDepartment}
|
|
refreshTrigger={refreshTrigger}
|
|
/>
|
|
</div>
|
|
|
|
{/* 우측: 부서 인원 (80%) */}
|
|
<div className="w-[80%] pl-0">
|
|
<DepartmentMembers
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
onMemberChange={handleMemberChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|