회사 정보 표시 및 뒤로가기 버튼

frontend/components/admin/department/DepartmentManagement.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { useState } from "react";
+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;
@@ -16,11 +19,45 @@ interface DepartmentManagementProps {
  * 좌측: 부서 구조, 우측: 부서 인원
  */
 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>("");
+
+  // 회사 정보 로드
+  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}>
@@ -38,10 +75,7 @@ export function DepartmentManagement({ companyCode }: DepartmentManagementProps)
           </TabsContent>
 
           <TabsContent value="members" className="mt-4">
-            <DepartmentMembers
-              companyCode={companyCode}
-              selectedDepartment={selectedDepartment}
-            />
+            <DepartmentMembers companyCode={companyCode} selectedDepartment={selectedDepartment} />
           </TabsContent>
         </Tabs>
       </div>
@@ -59,14 +93,9 @@ export function DepartmentManagement({ companyCode }: DepartmentManagementProps)
 
         {/* 우측: 부서 인원 (80%) */}
         <div className="w-[80%] pl-0">
-          <DepartmentMembers
-            companyCode={companyCode}
-            selectedDepartment={selectedDepartment}
-          />
+          <DepartmentMembers companyCode={companyCode} selectedDepartment={selectedDepartment} />
         </div>
       </div>
     </div>
   );
 }
-
-