fix: TypeScript 타입 오류 수정 및 설정 페이지 추가

- BOMItem Omit 타입 시그니처 통일 (useTemplateManagement, SectionsTab, ItemMasterContext)
- HeadersInit → Record<string, string> 타입 변경
- Zustand useShallow 마이그레이션 (zustand/react/shallow)
- DataTable, ListPageTemplate 제네릭 타입 제약 추가
- 설정 관리 페이지 추가 (직급, 직책, 휴가정책, 근무일정, 권한)
- HR 관리 페이지 추가 (급여, 휴가)
- 단가관리 페이지 리팩토링

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/clients/ClientDetail.tsx

@@ -10,7 +10,6 @@
 
 "use client";
 
-import { useRouter } from "next/navigation";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
@@ -26,6 +25,8 @@ import {
   Mail,
 } from "lucide-react";
 import { Client } from "../../hooks/useClientList";
+import { PageLayout } from "../organisms/PageLayout";
+import { PageHeader } from "../organisms/PageHeader";
 
 interface ClientDetailProps {
   client: Client;
@@ -63,8 +64,6 @@ export function ClientDetail({
   onEdit,
   onDelete,
 }: ClientDetailProps) {
-  const router = useRouter();
-
   // 금액 포맷
   const formatCurrency = (amount: string) => {
     if (!amount) return "-";
@@ -73,30 +72,32 @@ export function ClientDetail({
   };
 
   return (
-    <div className="space-y-6">
-      {/* 헤더 */}
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <Building2 className="h-6 w-6 text-primary" />
-          <h1 className="text-2xl font-bold">{client.name}</h1>
-        </div>
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={onBack}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            목록
-          </Button>
-          <Button variant="outline" onClick={onEdit}>
-            <Pencil className="h-4 w-4 mr-2" />
-            수정
-          </Button>
-          <Button variant="destructive" onClick={onDelete}>
-            <Trash2 className="h-4 w-4 mr-2" />
-            삭제
-          </Button>
-        </div>
-      </div>
+    <PageLayout maxWidth="2xl">
+      {/* 헤더 - PageHeader 사용으로 등록/수정과 동일한 레이아웃 */}
+      <PageHeader
+        title={client.name}
+        description="거래처 상세 정보"
+        icon={Building2}
+        actions={
+          <>
+            <Button variant="outline" onClick={onBack}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              목록
+            </Button>
+            <Button variant="outline" onClick={onEdit}>
+              <Pencil className="h-4 w-4 mr-2" />
+              수정
+            </Button>
+            <Button variant="destructive" onClick={onDelete}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              삭제
+            </Button>
+          </>
+        }
+      />
 
-      {/* 1. 기본 정보 */}
+      <div className="space-y-6">
+        {/* 1. 기본 정보 */}
       <Card>
         <CardHeader>
           <div className="flex items-center gap-2">
@@ -242,6 +243,7 @@ export function ClientDetail({
           </CardContent>
         </Card>
       )}
-    </div>
+      </div>
+    </PageLayout>
   );
 }