73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { DepartmentStructure } from "./DepartmentStructure";
|
|
import { DepartmentMembers } from "./DepartmentMembers";
|
|
import type { Department } from "@/types/department";
|
|
|
|
interface DepartmentManagementProps {
|
|
companyCode: string;
|
|
}
|
|
|
|
/**
|
|
* 부서 관리 메인 컴포넌트
|
|
* 좌측: 부서 구조, 우측: 부서 인원
|
|
*/
|
|
export function DepartmentManagement({ companyCode }: DepartmentManagementProps) {
|
|
const [selectedDepartment, setSelectedDepartment] = useState<Department | null>(null);
|
|
const [activeTab, setActiveTab] = useState<string>("structure");
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 탭 네비게이션 (모바일용) */}
|
|
<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}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="members" className="mt-4">
|
|
<DepartmentMembers
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
/>
|
|
</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}
|
|
/>
|
|
</div>
|
|
|
|
{/* 우측: 부서 인원 (80%) */}
|
|
<div className="w-[80%] pl-0">
|
|
<DepartmentMembers
|
|
companyCode={companyCode}
|
|
selectedDepartment={selectedDepartment}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|