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>
   );
 }

src/components/clients/ClientRegistration.tsx

@@ -12,24 +12,13 @@
 import { useState, useEffect } from "react";
 import { Input } from "../ui/input";
 import { Textarea } from "../ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
-import { Checkbox } from "../ui/checkbox";
 import { Label } from "../ui/label";
 import {
   Building2,
   UserCircle,
   Phone,
-  CreditCard,
   FileText,
-  AlertTriangle,
-  Calculator,
 } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -42,7 +31,6 @@ import {
   ClientFormData,
   INITIAL_CLIENT_FORM,
   ClientType,
-  BadDebtProgress,
 } from "../../hooks/useClientList";
 
 interface ClientRegistrationProps {
@@ -52,15 +40,33 @@ interface ClientRegistrationProps {
   isLoading?: boolean;
 }
 
+// 4자리 영문+숫자 조합 코드 생성 (중복 방지를 위해 타임스탬프 기반)
+const generateClientCode = (): string => {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  const timestamp = Date.now().toString(36).toUpperCase().slice(-2); // 타임스탬프 2자리
+  let random = "";
+  for (let i = 0; i < 2; i++) {
+    random += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return timestamp + random;
+};
+
 export function ClientRegistration({
   onBack,
   onSave,
   editingClient,
   isLoading = false,
 }: ClientRegistrationProps) {
-  const [formData, setFormData] = useState<ClientFormData>(
-    editingClient || INITIAL_CLIENT_FORM
-  );
+  const [formData, setFormData] = useState<ClientFormData>(() => {
+    if (editingClient) {
+      return editingClient;
+    }
+    // 신규 등록 시 클라이언트 코드 자동 생성
+    return {
+      ...INITIAL_CLIENT_FORM,
+      clientCode: generateClientCode(),
+    };
+  });
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSaving, setIsSaving] = useState(false);
 
@@ -79,7 +85,15 @@ export function ClientRegistration({
       newErrors.name = "거래처명은 2자 이상 입력해주세요";
     }
 
-    if (!formData.businessNo || !/^\d{10}$/.test(formData.businessNo)) {
+    // 하이픈 제거 후 10자리 숫자 검증 (123-45-67890 또는 1234567890 허용)
+    const businessNoDigits = formData.businessNo.replace(/-/g, "").trim();
+    console.log("[ClientRegistration] businessNo 검증:", {
+      원본: formData.businessNo,
+      하이픈제거: businessNoDigits,
+      길이: businessNoDigits.length,
+      숫자만: /^\d{10}$/.test(businessNoDigits),
+    });
+    if (!formData.businessNo || !/^\d{10}$/.test(businessNoDigits)) {
       newErrors.businessNo = "사업자등록번호는 10자리 숫자여야 합니다";
     }
 
@@ -125,6 +139,7 @@ export function ClientRegistration({
     field: keyof ClientFormData,
     value: string | boolean
   ) => {
+    console.log("[ClientRegistration] handleFieldChange:", field, value);
     setFormData({ ...formData, [field]: value });
     if (errors[field]) {
       setErrors((prev) => {
@@ -160,10 +175,11 @@ export function ClientRegistration({
             required
             error={errors.businessNo}
             htmlFor="businessNo"
+            type="custom"
           >
             <Input
               id="businessNo"
-              placeholder="10자리 숫자"
+              placeholder="10자리 숫자 (예: 123-45-67890)"
               value={formData.businessNo}
               onChange={(e) => handleFieldChange("businessNo", e.target.value)}
             />
@@ -173,6 +189,7 @@ export function ClientRegistration({
             label="거래처 코드"
             htmlFor="clientCode"
             helpText="자동 생성됩니다"
+            type="custom"
           >
             <Input
               id="clientCode"
@@ -189,6 +206,7 @@ export function ClientRegistration({
             required
             error={errors.name}
             htmlFor="name"
+            type="custom"
           >
             <Input
               id="name"
@@ -203,6 +221,7 @@ export function ClientRegistration({
             required
             error={errors.representative}
             htmlFor="representative"
+            type="custom"
           >
             <Input
               id="representative"
@@ -239,7 +258,7 @@ export function ClientRegistration({
         </FormField>
 
         <FormFieldGrid columns={2}>
-          <FormField label="업태" htmlFor="businessType">
+          <FormField label="업태" htmlFor="businessType" type="custom">
             <Input
               id="businessType"
               placeholder="제조업, 도소매업 등"
@@ -250,7 +269,7 @@ export function ClientRegistration({
             />
           </FormField>
 
-          <FormField label="종목" htmlFor="businessItem">
+          <FormField label="종목" htmlFor="businessItem" type="custom">
             <Input
               id="businessItem"
               placeholder="철강, 건설 등"
@@ -269,7 +288,7 @@ export function ClientRegistration({
         description="거래처의 연락처 정보를 입력하세요"
         icon={Phone}
       >
-        <FormField label="주소" htmlFor="address">
+        <FormField label="주소" htmlFor="address" type="custom">
           <Input
             id="address"
             placeholder="주소 입력"
@@ -279,7 +298,7 @@ export function ClientRegistration({
         </FormField>
 
         <FormFieldGrid columns={3}>
-          <FormField label="전화번호" error={errors.phone} htmlFor="phone">
+          <FormField label="전화번호" error={errors.phone} htmlFor="phone" type="custom">
             <Input
               id="phone"
               placeholder="02-1234-5678"
@@ -288,7 +307,7 @@ export function ClientRegistration({
             />
           </FormField>
 
-          <FormField label="모바일" htmlFor="mobile">
+          <FormField label="모바일" htmlFor="mobile" type="custom">
             <Input
               id="mobile"
               placeholder="010-1234-5678"
@@ -297,7 +316,7 @@ export function ClientRegistration({
             />
           </FormField>
 
-          <FormField label="팩스" htmlFor="fax">
+          <FormField label="팩스" htmlFor="fax" type="custom">
             <Input
               id="fax"
               placeholder="02-1234-5678"
@@ -307,7 +326,7 @@ export function ClientRegistration({
           </FormField>
         </FormFieldGrid>
 
-        <FormField label="이메일" error={errors.email} htmlFor="email">
+        <FormField label="이메일" error={errors.email} htmlFor="email" type="custom">
           <Input
             id="email"
             type="email"
@@ -325,7 +344,7 @@ export function ClientRegistration({
         icon={UserCircle}
       >
         <FormFieldGrid columns={2}>
-          <FormField label="담당자명" htmlFor="managerName">
+          <FormField label="담당자명" htmlFor="managerName" type="custom">
             <Input
               id="managerName"
               placeholder="담당자명 입력"
@@ -334,7 +353,7 @@ export function ClientRegistration({
             />
           </FormField>
 
-          <FormField label="담당자 전화" htmlFor="managerTel">
+          <FormField label="담당자 전화" htmlFor="managerTel" type="custom">
             <Input
               id="managerTel"
               placeholder="010-1234-5678"
@@ -344,7 +363,7 @@ export function ClientRegistration({
           </FormField>
         </FormFieldGrid>
 
-        <FormField label="시스템 관리자" htmlFor="systemManager">
+        <FormField label="시스템 관리자" htmlFor="systemManager" type="custom">
           <Input
             id="systemManager"
             placeholder="시스템 관리자명"
@@ -356,224 +375,22 @@ export function ClientRegistration({
         </FormField>
       </FormSection>
 
-      {/* 4. 발주처 설정 */}
-      <FormSection
-        title="발주처 설정"
-        description="발주처로 사용할 경우 계정 정보를 입력하세요"
-        icon={CreditCard}
-      >
-        <FormFieldGrid columns={2}>
-          <FormField label="계정 ID" htmlFor="accountId">
-            <Input
-              id="accountId"
-              placeholder="계정 ID"
-              value={formData.accountId}
-              onChange={(e) => handleFieldChange("accountId", e.target.value)}
-            />
-          </FormField>
+      {/*
+        TODO: 기획 확정 후 활성화 (2025-12-09)
+        - 발주처 설정: 계정ID, 비밀번호, 매입/매출 결제일
+        - 약정 세금: 약정 여부, 금액, 시작/종료일
+        - 악성채권 정보: 악성채권 여부, 금액, 발생/만료일, 진행상태
 
-          <FormField label="비밀번호" htmlFor="accountPassword">
-            <Input
-              id="accountPassword"
-              type="password"
-              placeholder="비밀번호"
-              value={formData.accountPassword}
-              onChange={(e) =>
-                handleFieldChange("accountPassword", e.target.value)
-              }
-            />
-          </FormField>
-        </FormFieldGrid>
+        백엔드 API에서는 이미 지원됨 (nullable 필드)
+      */}
 
-        <FormFieldGrid columns={2}>
-          <FormField label="매입 결제일" htmlFor="purchasePaymentDay">
-            <Select
-              value={formData.purchasePaymentDay}
-              onValueChange={(value) =>
-                handleFieldChange("purchasePaymentDay", value)
-              }
-            >
-              <SelectTrigger id="purchasePaymentDay">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="말일">말일</SelectItem>
-                <SelectItem value="익월 10일">익월 10일</SelectItem>
-                <SelectItem value="익월 15일">익월 15일</SelectItem>
-                <SelectItem value="익월 20일">익월 20일</SelectItem>
-                <SelectItem value="익월 25일">익월 25일</SelectItem>
-                <SelectItem value="익월 말일">익월 말일</SelectItem>
-              </SelectContent>
-            </Select>
-          </FormField>
-
-          <FormField label="매출 결제일" htmlFor="salesPaymentDay">
-            <Select
-              value={formData.salesPaymentDay}
-              onValueChange={(value) =>
-                handleFieldChange("salesPaymentDay", value)
-              }
-            >
-              <SelectTrigger id="salesPaymentDay">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="말일">말일</SelectItem>
-                <SelectItem value="익월 10일">익월 10일</SelectItem>
-                <SelectItem value="익월 15일">익월 15일</SelectItem>
-                <SelectItem value="익월 20일">익월 20일</SelectItem>
-                <SelectItem value="익월 25일">익월 25일</SelectItem>
-                <SelectItem value="익월 말일">익월 말일</SelectItem>
-              </SelectContent>
-            </Select>
-          </FormField>
-        </FormFieldGrid>
-      </FormSection>
-
-      {/* 5. 약정 세금 */}
-      <FormSection
-        title="약정 세금"
-        description="세금 약정이 있는 경우 입력하세요"
-        icon={Calculator}
-      >
-        <FormField label="약정 여부" type="custom">
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="taxAgreement"
-              checked={formData.taxAgreement}
-              onCheckedChange={(checked) =>
-                handleFieldChange("taxAgreement", checked as boolean)
-              }
-            />
-            <Label htmlFor="taxAgreement">세금 약정 있음</Label>
-          </div>
-        </FormField>
-
-        {formData.taxAgreement && (
-          <>
-            <FormField label="약정 금액" htmlFor="taxAmount">
-              <Input
-                id="taxAmount"
-                type="number"
-                placeholder="약정 금액"
-                value={formData.taxAmount}
-                onChange={(e) => handleFieldChange("taxAmount", e.target.value)}
-              />
-            </FormField>
-
-            <FormFieldGrid columns={2}>
-              <FormField label="약정 시작일" htmlFor="taxStartDate">
-                <Input
-                  id="taxStartDate"
-                  type="date"
-                  value={formData.taxStartDate}
-                  onChange={(e) =>
-                    handleFieldChange("taxStartDate", e.target.value)
-                  }
-                />
-              </FormField>
-
-              <FormField label="약정 종료일" htmlFor="taxEndDate">
-                <Input
-                  id="taxEndDate"
-                  type="date"
-                  value={formData.taxEndDate}
-                  onChange={(e) =>
-                    handleFieldChange("taxEndDate", e.target.value)
-                  }
-                />
-              </FormField>
-            </FormFieldGrid>
-          </>
-        )}
-      </FormSection>
-
-      {/* 6. 악성채권 */}
-      <FormSection
-        title="악성채권 정보"
-        description="악성채권이 있는 경우 입력하세요"
-        icon={AlertTriangle}
-      >
-        <FormField label="악성채권 여부" type="custom">
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="badDebt"
-              checked={formData.badDebt}
-              onCheckedChange={(checked) =>
-                handleFieldChange("badDebt", checked as boolean)
-              }
-            />
-            <Label htmlFor="badDebt">악성채권 있음</Label>
-          </div>
-        </FormField>
-
-        {formData.badDebt && (
-          <>
-            <FormField label="악성채권 금액" htmlFor="badDebtAmount">
-              <Input
-                id="badDebtAmount"
-                type="number"
-                placeholder="채권 금액"
-                value={formData.badDebtAmount}
-                onChange={(e) =>
-                  handleFieldChange("badDebtAmount", e.target.value)
-                }
-              />
-            </FormField>
-
-            <FormFieldGrid columns={2}>
-              <FormField label="채권 발생일" htmlFor="badDebtReceiveDate">
-                <Input
-                  id="badDebtReceiveDate"
-                  type="date"
-                  value={formData.badDebtReceiveDate}
-                  onChange={(e) =>
-                    handleFieldChange("badDebtReceiveDate", e.target.value)
-                  }
-                />
-              </FormField>
-
-              <FormField label="채권 만료일" htmlFor="badDebtEndDate">
-                <Input
-                  id="badDebtEndDate"
-                  type="date"
-                  value={formData.badDebtEndDate}
-                  onChange={(e) =>
-                    handleFieldChange("badDebtEndDate", e.target.value)
-                  }
-                />
-              </FormField>
-            </FormFieldGrid>
-
-            <FormField label="진행 상태" htmlFor="badDebtProgress">
-              <Select
-                value={formData.badDebtProgress}
-                onValueChange={(value) =>
-                  handleFieldChange("badDebtProgress", value as BadDebtProgress)
-                }
-              >
-                <SelectTrigger id="badDebtProgress">
-                  <SelectValue placeholder="진행 상태 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="협의중">협의중</SelectItem>
-                  <SelectItem value="소송중">소송중</SelectItem>
-                  <SelectItem value="회수완료">회수완료</SelectItem>
-                  <SelectItem value="대손처리">대손처리</SelectItem>
-                </SelectContent>
-              </Select>
-            </FormField>
-          </>
-        )}
-      </FormSection>
-
-      {/* 7. 기타 */}
+      {/* 4. 기타 */}
       <FormSection
         title="기타 정보"
         description="추가 정보를 입력하세요"
         icon={FileText}
       >
-        <FormField label="메모" htmlFor="memo">
+        <FormField label="메모" htmlFor="memo" type="custom">
           <Textarea
             id="memo"
             placeholder="메모 입력"