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/hr/SalaryManagement/SalaryDetailDialog.tsx

@@ -0,0 +1,287 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Plus, Save } from 'lucide-react';
+import type { SalaryDetail, PaymentStatus } from './types';
+import {
+  PAYMENT_STATUS_LABELS,
+  PAYMENT_STATUS_COLORS,
+  formatCurrency,
+} from './types';
+
+interface SalaryDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  salaryDetail: SalaryDetail | null;
+  onSave?: (updatedDetail: SalaryDetail) => void;
+  onAddPaymentItem?: () => void;
+}
+
+export function SalaryDetailDialog({
+  open,
+  onOpenChange,
+  salaryDetail,
+  onSave,
+  onAddPaymentItem,
+}: SalaryDetailDialogProps) {
+  const [editedStatus, setEditedStatus] = useState<PaymentStatus>('scheduled');
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // 다이얼로그가 열릴 때 상태 초기화
+  useEffect(() => {
+    if (salaryDetail) {
+      setEditedStatus(salaryDetail.status);
+      setHasChanges(false);
+    }
+  }, [salaryDetail]);
+
+  if (!salaryDetail) return null;
+
+  const handleStatusChange = (newStatus: PaymentStatus) => {
+    setEditedStatus(newStatus);
+    setHasChanges(newStatus !== salaryDetail.status);
+  };
+
+  const handleSave = () => {
+    if (onSave && salaryDetail) {
+      onSave({
+        ...salaryDetail,
+        status: editedStatus,
+      });
+    }
+    setHasChanges(false);
+  };
+
+  const handleAddPaymentItem = () => {
+    if (onAddPaymentItem) {
+      onAddPaymentItem();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              급여 수정 - {salaryDetail.employeeName}
+            </div>
+            {/* 상태 변경 셀렉트 박스 */}
+            <Select
+              value={editedStatus}
+              onValueChange={(value) => handleStatusChange(value as PaymentStatus)}
+            >
+              <SelectTrigger className="w-[140px]">
+                <SelectValue>
+                  <Badge className={PAYMENT_STATUS_COLORS[editedStatus]}>
+                    {PAYMENT_STATUS_LABELS[editedStatus]}
+                  </Badge>
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="scheduled">
+                  <Badge className={PAYMENT_STATUS_COLORS.scheduled}>
+                    {PAYMENT_STATUS_LABELS.scheduled}
+                  </Badge>
+                </SelectItem>
+                <SelectItem value="completed">
+                  <Badge className={PAYMENT_STATUS_COLORS.completed}>
+                    {PAYMENT_STATUS_LABELS.completed}
+                  </Badge>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 기본 정보 */}
+          <div className="bg-muted/50 rounded-lg p-4">
+            <h3 className="font-semibold mb-3">기본 정보</h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+              <div>
+                <span className="text-muted-foreground">사번</span>
+                <p className="font-medium">{salaryDetail.employeeId}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">이름</span>
+                <p className="font-medium">{salaryDetail.employeeName}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">부서</span>
+                <p className="font-medium">{salaryDetail.department}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">직급</span>
+                <p className="font-medium">{salaryDetail.rank}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">직책</span>
+                <p className="font-medium">{salaryDetail.position}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">지급월</span>
+                <p className="font-medium">{salaryDetail.year}년 {salaryDetail.month}월</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">지급일</span>
+                <p className="font-medium">{salaryDetail.paymentDate}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 급여 항목 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* 수당 내역 */}
+            <div className="border rounded-lg p-4">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-semibold text-blue-600">수당 내역</h3>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleAddPaymentItem}
+                  className="h-7 text-xs"
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  지급항목 추가
+                </Button>
+              </div>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">본봉</span>
+                  <span className="font-medium">{formatCurrency(salaryDetail.baseSalary)}원</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">직책수당</span>
+                  <span>{formatCurrency(salaryDetail.allowances.positionAllowance)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">초과근무수당</span>
+                  <span>{formatCurrency(salaryDetail.allowances.overtimeAllowance)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">식대</span>
+                  <span>{formatCurrency(salaryDetail.allowances.mealAllowance)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">교통비</span>
+                  <span>{formatCurrency(salaryDetail.allowances.transportAllowance)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">기타수당</span>
+                  <span>{formatCurrency(salaryDetail.allowances.otherAllowance)}원</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between font-semibold text-blue-600">
+                  <span>수당 합계</span>
+                  <span>{formatCurrency(salaryDetail.totalAllowance)}원</span>
+                </div>
+              </div>
+            </div>
+
+            {/* 공제 내역 */}
+            <div className="border rounded-lg p-4">
+              <h3 className="font-semibold mb-3 text-red-600">공제 내역</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">국민연금</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.nationalPension)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">건강보험</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.healthInsurance)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">장기요양보험</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.longTermCare)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">고용보험</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.employmentInsurance)}원</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">소득세</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.incomeTax)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">지방소득세</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.localIncomeTax)}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">기타공제</span>
+                  <span className="text-red-600">-{formatCurrency(salaryDetail.deductions.otherDeduction)}원</span>
+                </div>
+                <Separator />
+                <div className="flex justify-between font-semibold text-red-600">
+                  <span>공제 합계</span>
+                  <span>-{formatCurrency(salaryDetail.totalDeduction)}원</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 지급 합계 */}
+          <div className="bg-primary/5 border-2 border-primary/20 rounded-lg p-4">
+            <div className="grid grid-cols-3 gap-4 text-center">
+              <div>
+                <span className="text-sm text-muted-foreground block">급여 총액</span>
+                <span className="text-lg font-semibold text-blue-600">
+                  {formatCurrency(salaryDetail.baseSalary + salaryDetail.totalAllowance)}원
+                </span>
+              </div>
+              <div>
+                <span className="text-sm text-muted-foreground block">공제 총액</span>
+                <span className="text-lg font-semibold text-red-600">
+                  -{formatCurrency(salaryDetail.totalDeduction)}원
+                </span>
+              </div>
+              <div>
+                <span className="text-sm text-muted-foreground block">실지급액</span>
+                <span className="text-xl font-bold text-primary">
+                  {formatCurrency(salaryDetail.netPayment)}원
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 저장 버튼 */}
+        <DialogFooter className="mt-6">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!hasChanges}
+            className="gap-2"
+          >
+            <Save className="h-4 w-4" />
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/SalaryManagement/index.tsx

@@ -0,0 +1,509 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { format } from 'date-fns';
+import {
+  Download,
+  DollarSign,
+  Check,
+  Clock,
+  Pencil,
+  Banknote,
+  Briefcase,
+  Timer,
+  Gift,
+  MinusCircle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  IntegratedListTemplateV2,
+  type TableColumn,
+  type StatCard,
+  type TabOption,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import { SalaryDetailDialog } from './SalaryDetailDialog';
+import type {
+  SalaryRecord,
+  SalaryDetail,
+  PaymentStatus,
+  SortOption,
+} from './types';
+import {
+  PAYMENT_STATUS_LABELS,
+  PAYMENT_STATUS_COLORS,
+  SORT_OPTIONS,
+  formatCurrency,
+} from './types';
+
+// ===== Mock 데이터 생성 =====
+const generateSalaryData = (): SalaryRecord[] => {
+  const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
+  const positions = ['팀장', '파트장', '선임', '주임', '사원'];
+  const ranks = ['부장', '차장', '과장', '대리', '사원'];
+  const statuses: PaymentStatus[] = ['scheduled', 'completed'];
+  const names = ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현', '한승우', '송예진'];
+
+  return Array.from({ length: 10 }, (_, i) => {
+    const baseSalary = 3000000 + Math.floor(Math.random() * 2000000);
+    const allowance = 300000 + Math.floor(Math.random() * 500000);
+    const overtime = Math.floor(Math.random() * 500000);
+    const bonus = Math.floor(Math.random() * 1000000);
+    const deduction = 200000 + Math.floor(Math.random() * 300000);
+    const netPayment = baseSalary + allowance + overtime + bonus - deduction;
+
+    return {
+      id: `salary-${i + 1}`,
+      employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
+      employeeName: names[i],
+      department: departments[i % departments.length],
+      position: positions[i % positions.length],
+      rank: ranks[i % ranks.length],
+      baseSalary,
+      allowance,
+      overtime,
+      bonus,
+      deduction,
+      netPayment,
+      paymentDate: format(new Date(2025, 11, 25), 'yyyy-MM-dd'),
+      status: statuses[i % statuses.length],
+      year: 2025,
+      month: 12,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+  });
+};
+
+// Mock 상세 데이터 생성
+const generateSalaryDetail = (record: SalaryRecord): SalaryDetail => {
+  const positionAllowance = 100000 + Math.floor(Math.random() * 200000);
+  const overtimeAllowance = Math.floor(Math.random() * 300000);
+  const mealAllowance = 100000;
+  const transportAllowance = 100000;
+  const otherAllowance = Math.floor(Math.random() * 100000);
+
+  const totalAllowance = positionAllowance + overtimeAllowance + mealAllowance + transportAllowance + otherAllowance;
+
+  const nationalPension = Math.floor(record.baseSalary * 0.045);
+  const healthInsurance = Math.floor(record.baseSalary * 0.0343);
+  const longTermCare = Math.floor(healthInsurance * 0.1227);
+  const employmentInsurance = Math.floor(record.baseSalary * 0.009);
+  const incomeTax = Math.floor((record.baseSalary + totalAllowance) * 0.08);
+  const localIncomeTax = Math.floor(incomeTax * 0.1);
+  const otherDeduction = Math.floor(Math.random() * 50000);
+
+  const totalDeduction = nationalPension + healthInsurance + longTermCare + employmentInsurance + incomeTax + localIncomeTax + otherDeduction;
+
+  return {
+    employeeId: record.employeeId,
+    employeeName: record.employeeName,
+    department: record.department,
+    position: record.position,
+    rank: record.rank,
+    baseSalary: record.baseSalary,
+    allowances: {
+      positionAllowance,
+      overtimeAllowance,
+      mealAllowance,
+      transportAllowance,
+      otherAllowance,
+    },
+    deductions: {
+      nationalPension,
+      healthInsurance,
+      longTermCare,
+      employmentInsurance,
+      incomeTax,
+      localIncomeTax,
+      otherDeduction,
+    },
+    totalAllowance,
+    totalDeduction,
+    netPayment: record.baseSalary + totalAllowance - totalDeduction,
+    paymentDate: record.paymentDate,
+    status: record.status,
+    year: record.year,
+    month: record.month,
+  };
+};
+
+export function SalaryManagement() {
+  // ===== 상태 관리 =====
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortOption, setSortOption] = useState<SortOption>('rank');
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
+
+  // 날짜 범위 상태
+  const [startDate, setStartDate] = useState('2025-12-01');
+  const [endDate, setEndDate] = useState('2025-12-31');
+
+  // 다이얼로그 상태
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [selectedSalaryDetail, setSelectedSalaryDetail] = useState<SalaryDetail | null>(null);
+
+  // Mock 데이터
+  const [salaryData, setSalaryData] = useState<SalaryRecord[]>(generateSalaryData);
+
+  // ===== 체크박스 핸들러 =====
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) newSet.delete(id);
+      else newSet.add(id);
+      return newSet;
+    });
+  }, []);
+
+  const toggleSelectAll = useCallback(() => {
+    if (selectedItems.size === filteredData.length && filteredData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      setSelectedItems(new Set(filteredData.map(item => item.id)));
+    }
+  }, [selectedItems.size]);
+
+  // ===== 필터링된 데이터 =====
+  const filteredData = useMemo(() => {
+    return salaryData.filter(item =>
+      item.employeeName.includes(searchQuery) ||
+      item.department.includes(searchQuery)
+    );
+  }, [salaryData, searchQuery]);
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredData.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredData, currentPage, itemsPerPage]);
+
+  const totalPages = Math.ceil(filteredData.length / itemsPerPage);
+
+  // ===== 지급완료 핸들러 =====
+  const handleMarkCompleted = useCallback(() => {
+    if (selectedItems.size === 0) return;
+
+    setSalaryData(prev => prev.map(item => {
+      if (selectedItems.has(item.id)) {
+        return { ...item, status: 'completed' as PaymentStatus };
+      }
+      return item;
+    }));
+
+    setSelectedItems(new Set());
+    console.log('지급완료 처리:', Array.from(selectedItems));
+  }, [selectedItems]);
+
+  // ===== 지급예정 핸들러 =====
+  const handleMarkScheduled = useCallback(() => {
+    if (selectedItems.size === 0) return;
+
+    setSalaryData(prev => prev.map(item => {
+      if (selectedItems.has(item.id)) {
+        return { ...item, status: 'scheduled' as PaymentStatus };
+      }
+      return item;
+    }));
+
+    setSelectedItems(new Set());
+    console.log('지급예정 처리:', Array.from(selectedItems));
+  }, [selectedItems]);
+
+  // ===== 상세보기 핸들러 =====
+  const handleViewDetail = useCallback((record: SalaryRecord) => {
+    const detail = generateSalaryDetail(record);
+    setSelectedSalaryDetail(detail);
+    setDetailDialogOpen(true);
+  }, []);
+
+  // ===== 급여 상세 저장 핸들러 =====
+  const handleSaveDetail = useCallback((updatedDetail: SalaryDetail) => {
+    setSalaryData(prev => prev.map(item => {
+      if (item.employeeId === updatedDetail.employeeId) {
+        return {
+          ...item,
+          status: updatedDetail.status,
+        };
+      }
+      return item;
+    }));
+    setDetailDialogOpen(false);
+    console.log('급여 상세 저장:', updatedDetail);
+  }, []);
+
+  // ===== 지급항목 추가 핸들러 =====
+  const handleAddPaymentItem = useCallback(() => {
+    // TODO: 지급항목 추가 다이얼로그 또는 로직 구현
+    console.log('지급항목 추가 클릭');
+  }, []);
+
+  // ===== 탭 (단일 탭) =====
+  const [activeTab, setActiveTab] = useState('all');
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'all', label: '전체', count: salaryData.length, color: 'blue' },
+  ], [salaryData.length]);
+
+  // ===== 통계 카드 (총 실지급액, 총 기본급, 총 수당, 초과근무, 상여, 총공제) =====
+  const statCards: StatCard[] = useMemo(() => {
+    const totalNetPayment = salaryData.reduce((sum, s) => sum + s.netPayment, 0);
+    const totalBaseSalary = salaryData.reduce((sum, s) => sum + s.baseSalary, 0);
+    const totalAllowance = salaryData.reduce((sum, s) => sum + s.allowance, 0);
+    const totalOvertime = salaryData.reduce((sum, s) => sum + s.overtime, 0);
+    const totalBonus = salaryData.reduce((sum, s) => sum + s.bonus, 0);
+    const totalDeduction = salaryData.reduce((sum, s) => sum + s.deduction, 0);
+
+    return [
+      {
+        label: '총 실지급액',
+        value: `${formatCurrency(totalNetPayment)}원`,
+        icon: DollarSign,
+        iconColor: 'text-green-500',
+      },
+      {
+        label: '총 기본급',
+        value: `${formatCurrency(totalBaseSalary)}원`,
+        icon: Banknote,
+        iconColor: 'text-blue-500',
+      },
+      {
+        label: '총 수당',
+        value: `${formatCurrency(totalAllowance)}원`,
+        icon: Briefcase,
+        iconColor: 'text-purple-500',
+      },
+      {
+        label: '초과근무',
+        value: `${formatCurrency(totalOvertime)}원`,
+        icon: Timer,
+        iconColor: 'text-orange-500',
+      },
+      {
+        label: '상여',
+        value: `${formatCurrency(totalBonus)}원`,
+        icon: Gift,
+        iconColor: 'text-pink-500',
+      },
+      {
+        label: '총 공제',
+        value: `${formatCurrency(totalDeduction)}원`,
+        icon: MinusCircle,
+        iconColor: 'text-red-500',
+      },
+    ];
+  }, [salaryData]);
+
+  // ===== 테이블 컬럼 (부서, 직책, 이름, 직급, 기본급, 수당, 초과근무, 상여, 공제, 실지급액, 일자, 상태, 작업) =====
+  const tableColumns: TableColumn[] = useMemo(() => [
+    { key: 'department', label: '부서' },
+    { key: 'position', label: '직책' },
+    { key: 'name', label: '이름' },
+    { key: 'rank', label: '직급' },
+    { key: 'baseSalary', label: '기본급', className: 'text-right' },
+    { key: 'allowance', label: '수당', className: 'text-right' },
+    { key: 'overtime', label: '초과근무', className: 'text-right' },
+    { key: 'bonus', label: '상여', className: 'text-right' },
+    { key: 'deduction', label: '공제', className: 'text-right' },
+    { key: 'netPayment', label: '실지급액', className: 'text-right' },
+    { key: 'paymentDate', label: '일자', className: 'text-center' },
+    { key: 'status', label: '상태', className: 'text-center' },
+    { key: 'action', label: '작업', className: 'text-center w-[80px]' },
+  ], []);
+
+  // ===== 테이블 행 렌더링 =====
+  const renderTableRow = useCallback((item: SalaryRecord, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    return (
+      <TableRow key={item.id} className="hover:bg-muted/50">
+        <TableCell className="text-center">
+          <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(item.id)} />
+        </TableCell>
+        <TableCell>{item.department}</TableCell>
+        <TableCell>{item.position}</TableCell>
+        <TableCell className="font-medium">{item.employeeName}</TableCell>
+        <TableCell>{item.rank}</TableCell>
+        <TableCell className="text-right">{formatCurrency(item.baseSalary)}원</TableCell>
+        <TableCell className="text-right">{formatCurrency(item.allowance)}원</TableCell>
+        <TableCell className="text-right">{formatCurrency(item.overtime)}원</TableCell>
+        <TableCell className="text-right">{formatCurrency(item.bonus)}원</TableCell>
+        <TableCell className="text-right text-red-600">-{formatCurrency(item.deduction)}원</TableCell>
+        <TableCell className="text-right font-medium text-green-600">{formatCurrency(item.netPayment)}원</TableCell>
+        <TableCell className="text-center">{item.paymentDate}</TableCell>
+        <TableCell className="text-center">
+          <Badge className={PAYMENT_STATUS_COLORS[item.status]}>
+            {PAYMENT_STATUS_LABELS[item.status]}
+          </Badge>
+        </TableCell>
+        <TableCell className="text-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleViewDetail(item)}
+            title="수정"
+          >
+            <Pencil className="h-4 w-4" />
+          </Button>
+        </TableCell>
+      </TableRow>
+    );
+  }, [selectedItems, toggleSelection, handleViewDetail]);
+
+  // ===== 모바일 카드 렌더링 =====
+  const renderMobileCard = useCallback((
+    item: SalaryRecord,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    return (
+      <ListMobileCard
+        id={item.id}
+        title={item.employeeName}
+        headerBadges={
+          <Badge className={PAYMENT_STATUS_COLORS[item.status]}>
+            {PAYMENT_STATUS_LABELS[item.status]}
+          </Badge>
+        }
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        infoGrid={
+          <div className="grid grid-cols-2 gap-3">
+            <InfoField label="부서" value={item.department} />
+            <InfoField label="직급" value={item.rank} />
+            <InfoField label="기본급" value={`${formatCurrency(item.baseSalary)}원`} />
+            <InfoField label="수당" value={`${formatCurrency(item.allowance)}원`} />
+            <InfoField label="초과근무" value={`${formatCurrency(item.overtime)}원`} />
+            <InfoField label="상여" value={`${formatCurrency(item.bonus)}원`} />
+            <InfoField label="공제" value={`-${formatCurrency(item.deduction)}원`} />
+            <InfoField label="실지급액" value={`${formatCurrency(item.netPayment)}원`} />
+            <InfoField label="지급일" value={item.paymentDate} />
+          </div>
+        }
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={() => handleViewDetail(item)}
+          >
+            <Pencil className="h-4 w-4 mr-2" />
+            수정
+          </Button>
+        }
+      />
+    );
+  }, [handleViewDetail]);
+
+  // ===== 헤더 액션 =====
+  const headerActions = (
+    <div className="flex items-center gap-2 flex-wrap">
+      {/* 날짜 범위 선택 */}
+      <div className="flex items-center gap-1">
+        <Input
+          type="date"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+          className="w-[140px]"
+        />
+        <span className="text-muted-foreground">~</span>
+        <Input
+          type="date"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+          className="w-[140px]"
+        />
+      </div>
+
+      {/* 지급완료/지급예정 버튼 - 선택된 항목이 있을 때만 표시 */}
+      {selectedItems.size > 0 && (
+        <>
+          <Button variant="default" onClick={handleMarkCompleted}>
+            <Check className="h-4 w-4 mr-2" />
+            지급완료
+          </Button>
+          <Button variant="outline" onClick={handleMarkScheduled}>
+            <Clock className="h-4 w-4 mr-2" />
+            지급예정
+          </Button>
+        </>
+      )}
+
+      <Button variant="outline" onClick={() => console.log('엑셀 다운로드')}>
+        <Download className="h-4 w-4 mr-2" />
+        엑셀 다운로드
+      </Button>
+    </div>
+  );
+
+  // ===== 정렬 필터 =====
+  const extraFilters = (
+    <Select value={sortOption} onValueChange={(v) => setSortOption(v as SortOption)}>
+      <SelectTrigger className="w-[120px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.entries(SORT_OPTIONS).map(([key, label]) => (
+          <SelectItem key={key} value={key}>{label}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <>
+      <IntegratedListTemplateV2
+        title="급여관리"
+        description="직원들의 급여 현황을 관리합니다"
+        icon={DollarSign}
+        headerActions={headerActions}
+        stats={statCards}
+        searchValue={searchQuery}
+        onSearchChange={setSearchQuery}
+        searchPlaceholder="이름, 부서 검색..."
+        extraFilters={extraFilters}
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        tableColumns={tableColumns}
+        data={paginatedData}
+        totalCount={filteredData.length}
+        allData={filteredData}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        getItemId={(item: SalaryRecord) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: filteredData.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 급여 상세 다이얼로그 */}
+      <SalaryDetailDialog
+        open={detailDialogOpen}
+        onOpenChange={setDetailDialogOpen}
+        salaryDetail={selectedSalaryDetail}
+        onSave={handleSaveDetail}
+        onAddPaymentItem={handleAddPaymentItem}
+      />
+    </>
+  );
+}

src/components/hr/SalaryManagement/types.ts

@@ -0,0 +1,100 @@
+/**
+ * 급여관리 타입 정의
+ */
+
+// 급여 상태 타입
+export type PaymentStatus = 'scheduled' | 'completed';
+
+// 정렬 옵션 타입
+export type SortOption = 'rank' | 'name' | 'department' | 'paymentDate';
+
+// 급여 레코드 인터페이스
+export interface SalaryRecord {
+  id: string;
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;
+  rank: string;
+  baseSalary: number;          // 기본급
+  allowance: number;           // 수당
+  overtime: number;            // 초과근무
+  bonus: number;               // 상여
+  deduction: number;           // 공제
+  netPayment: number;          // 실지급액
+  paymentDate: string;         // 지급일
+  status: PaymentStatus;       // 상태
+  year: number;                // 년도
+  month: number;               // 월
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 급여 상세 정보 인터페이스
+export interface SalaryDetail {
+  // 기본 정보
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;
+  rank: string;
+
+  // 급여 정보
+  baseSalary: number;          // 본봉
+
+  // 수당 내역
+  allowances: {
+    positionAllowance: number;    // 직책수당
+    overtimeAllowance: number;    // 초과근무수당
+    mealAllowance: number;        // 식대
+    transportAllowance: number;   // 교통비
+    otherAllowance: number;       // 기타수당
+  };
+
+  // 공제 내역
+  deductions: {
+    nationalPension: number;      // 국민연금
+    healthInsurance: number;      // 건강보험
+    longTermCare: number;         // 장기요양보험
+    employmentInsurance: number;  // 고용보험
+    incomeTax: number;            // 소득세
+    localIncomeTax: number;       // 지방소득세
+    otherDeduction: number;       // 기타공제
+  };
+
+  // 합계
+  totalAllowance: number;      // 수당 합계
+  totalDeduction: number;      // 공제 합계
+  netPayment: number;          // 실지급액
+
+  // 추가 정보
+  paymentDate: string;
+  status: PaymentStatus;
+  year: number;
+  month: number;
+}
+
+// 상태 라벨
+export const PAYMENT_STATUS_LABELS: Record<PaymentStatus, string> = {
+  scheduled: '지급예정',
+  completed: '지급완료',
+};
+
+// 상태 색상
+export const PAYMENT_STATUS_COLORS: Record<PaymentStatus, string> = {
+  scheduled: 'bg-blue-100 text-blue-800',
+  completed: 'bg-green-100 text-green-800',
+};
+
+// 정렬 옵션 라벨
+export const SORT_OPTIONS: Record<SortOption, string> = {
+  rank: '직급순',
+  name: '이름순',
+  department: '부서순',
+  paymentDate: '지급일순',
+};
+
+// 금액 포맷 유틸리티
+export const formatCurrency = (amount: number): string => {
+  return new Intl.NumberFormat('ko-KR').format(amount);
+};

src/components/hr/VacationManagement/VacationAdjustDialog.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, Minus } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { VacationUsageRecord, VacationAdjustment, VacationType } from './types';
+import { VACATION_TYPE_LABELS } from './types';
+
+interface VacationAdjustDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  record: VacationUsageRecord | null;
+  onSave: (adjustments: VacationAdjustment[]) => void;
+}
+
+interface AdjustmentState {
+  annual: number;
+  monthly: number;
+  reward: number;
+  other: number;
+}
+
+export function VacationAdjustDialog({
+  open,
+  onOpenChange,
+  record,
+  onSave,
+}: VacationAdjustDialogProps) {
+  const [adjustments, setAdjustments] = useState<AdjustmentState>({
+    annual: 0,
+    monthly: 0,
+    reward: 0,
+    other: 0,
+  });
+
+  // 다이얼로그가 열릴 때 조정값 초기화
+  useEffect(() => {
+    if (open) {
+      setAdjustments({
+        annual: 0,
+        monthly: 0,
+        reward: 0,
+        other: 0,
+      });
+    }
+  }, [open]);
+
+  // 조정값 증가
+  const handleIncrease = (type: VacationType) => {
+    setAdjustments(prev => ({
+      ...prev,
+      [type]: prev[type] + 1,
+    }));
+  };
+
+  // 조정값 감소
+  const handleDecrease = (type: VacationType) => {
+    setAdjustments(prev => ({
+      ...prev,
+      [type]: prev[type] - 1,
+    }));
+  };
+
+  // 조정값 직접 입력
+  const handleInputChange = (type: VacationType, value: string) => {
+    const numValue = parseInt(value, 10);
+    if (!isNaN(numValue)) {
+      setAdjustments(prev => ({
+        ...prev,
+        [type]: numValue,
+      }));
+    } else if (value === '' || value === '-') {
+      setAdjustments(prev => ({
+        ...prev,
+        [type]: 0,
+      }));
+    }
+  };
+
+  // 저장 핸들러
+  const handleSave = () => {
+    const adjustmentList: VacationAdjustment[] = [];
+
+    (Object.keys(adjustments) as VacationType[]).forEach((type) => {
+      if (adjustments[type] !== 0) {
+        adjustmentList.push({
+          vacationType: type,
+          adjustment: adjustments[type],
+        });
+      }
+    });
+
+    onSave(adjustmentList);
+  };
+
+  // 취소 핸들러
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  if (!record) return null;
+
+  const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'other'];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>휴가 조정</DialogTitle>
+        </DialogHeader>
+
+        {/* 사원 정보 */}
+        <div className="bg-muted/50 rounded-lg p-4 mb-4">
+          <p className="text-sm text-muted-foreground">
+            {record.department} / {record.employeeName} / {record.rank}
+          </p>
+        </div>
+
+        {/* 조정 테이블 */}
+        <div className="py-2">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">휴가종류</TableHead>
+                <TableHead className="text-center">총일수</TableHead>
+                <TableHead className="text-center">사용일수</TableHead>
+                <TableHead className="text-center">잔여일수</TableHead>
+                <TableHead className="text-center w-[150px]">조정</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {vacationTypes.map((type) => {
+                const info = record[type];
+                const adjustment = adjustments[type];
+                const newTotal = info.total + adjustment;
+                const newRemaining = info.remaining + adjustment;
+
+                return (
+                  <TableRow key={type}>
+                    <TableCell className="font-medium">
+                      {VACATION_TYPE_LABELS[type]}
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <span className={adjustment !== 0 ? 'line-through text-muted-foreground mr-2' : ''}>
+                        {info.total}
+                      </span>
+                      {adjustment !== 0 && (
+                        <span className={adjustment > 0 ? 'text-green-600' : 'text-red-600'}>
+                          {newTotal}
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-center">{info.used}</TableCell>
+                    <TableCell className="text-center">
+                      <span className={adjustment !== 0 ? 'line-through text-muted-foreground mr-2' : ''}>
+                        {info.remaining}
+                      </span>
+                      {adjustment !== 0 && (
+                        <span className={adjustment > 0 ? 'text-green-600' : 'text-red-600'}>
+                          {newRemaining}
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-center gap-1">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => handleDecrease(type)}
+                        >
+                          <Minus className="h-4 w-4" />
+                        </Button>
+                        <Input
+                          type="text"
+                          value={adjustment}
+                          onChange={(e) => handleInputChange(type, e.target.value)}
+                          className="w-16 h-8 text-center"
+                        />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => handleIncrease(type)}
+                        >
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/VacationManagement/VacationGrantDialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { VacationGrantFormData, VacationType } from './types';
+import { VACATION_TYPE_LABELS } from './types';
+
+interface VacationGrantDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (data: VacationGrantFormData) => void;
+}
+
+const mockEmployees = [
+  { id: '1', name: '김철수', department: '개발팀' },
+  { id: '2', name: '이영희', department: '디자인팀' },
+  { id: '3', name: '박민수', department: '기획팀' },
+  { id: '4', name: '정수진', department: '영업팀' },
+  { id: '5', name: '최동현', department: '인사팀' },
+];
+
+export function VacationGrantDialog({
+  open,
+  onOpenChange,
+  onSave,
+}: VacationGrantDialogProps) {
+  const [formData, setFormData] = useState<VacationGrantFormData>({
+    employeeId: '',
+    vacationType: 'annual',
+    grantDays: 1,
+    reason: '',
+  });
+
+  useEffect(() => {
+    if (open) {
+      setFormData({
+        employeeId: '',
+        vacationType: 'annual',
+        grantDays: 1,
+        reason: '',
+      });
+    }
+  }, [open]);
+
+  const handleSave = () => {
+    if (!formData.employeeId) {
+      alert('사원을 선택해주세요.');
+      return;
+    }
+    if (formData.grantDays < 1) {
+      alert('부여 일수는 1 이상이어야 합니다.');
+      return;
+    }
+    onSave(formData);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>휴가 부여 등록</DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* 사원 선택 */}
+          <div className="grid gap-2">
+            <Label htmlFor="employee">사원 선택</Label>
+            <Select
+              value={formData.employeeId}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, employeeId: value }))}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="사원을 선택하세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {mockEmployees.map((emp) => (
+                  <SelectItem key={emp.id} value={emp.id}>
+                    {emp.name} ({emp.department})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 휴가 유형 */}
+          <div className="grid gap-2">
+            <Label htmlFor="vacationType">휴가 유형</Label>
+            <Select
+              value={formData.vacationType}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, vacationType: value as VacationType }))}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(VACATION_TYPE_LABELS).map(([key, label]) => (
+                  <SelectItem key={key} value={key}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 부여 일수 */}
+          <div className="grid gap-2">
+            <Label htmlFor="grantDays">부여 일수</Label>
+            <Input
+              id="grantDays"
+              type="number"
+              min={1}
+              value={formData.grantDays}
+              onChange={(e) => setFormData(prev => ({ ...prev, grantDays: parseInt(e.target.value) || 1 }))}
+            />
+          </div>
+
+          {/* 사유 */}
+          <div className="grid gap-2">
+            <Label htmlFor="reason">사유</Label>
+            <Textarea
+              id="reason"
+              placeholder="부여 사유를 입력하세요 (선택)"
+              value={formData.reason || ''}
+              onChange={(e) => setFormData(prev => ({ ...prev, reason: e.target.value }))}
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>
+            등록
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/VacationManagement/VacationRegisterDialog.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type {
+  VacationFormData,
+  VacationTypeConfig,
+  EmployeeOption,
+  VacationType,
+} from './types';
+
+interface VacationRegisterDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  employees: EmployeeOption[];
+  vacationTypes: VacationTypeConfig[];
+  onSave: (data: VacationFormData) => void;
+}
+
+export function VacationRegisterDialog({
+  open,
+  onOpenChange,
+  employees,
+  vacationTypes,
+  onSave,
+}: VacationRegisterDialogProps) {
+  const [formData, setFormData] = useState<VacationFormData>({
+    employeeId: '',
+    vacationType: 'annual',
+    days: 0,
+    memo: '',
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  // 다이얼로그가 열릴 때 폼 초기화
+  useEffect(() => {
+    if (open) {
+      setFormData({
+        employeeId: '',
+        vacationType: 'annual',
+        days: 0,
+        memo: '',
+      });
+      setErrors({});
+    }
+  }, [open]);
+
+  // 폼 유효성 검사
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.employeeId) {
+      newErrors.employeeId = '사원을 선택해주세요';
+    }
+
+    if (!formData.vacationType) {
+      newErrors.vacationType = '휴가 종류를 선택해주세요';
+    }
+
+    if (formData.days <= 0) {
+      newErrors.days = '지급 일수를 입력해주세요';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  // 저장 핸들러
+  const handleSave = () => {
+    if (validateForm()) {
+      onSave(formData);
+    }
+  };
+
+  // 취소 핸들러
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>휴가 등록</DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* 사원 선택 */}
+          <div className="grid gap-2">
+            <Label htmlFor="employee">
+              사원 선택 <span className="text-red-500">*</span>
+            </Label>
+            <Select
+              value={formData.employeeId}
+              onValueChange={(value) => setFormData((prev: VacationFormData) => ({ ...prev, employeeId: value }))}
+            >
+              <SelectTrigger id="employee" className={errors.employeeId ? 'border-red-500' : ''}>
+                <SelectValue placeholder="사원을 선택하세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {employees.map((employee) => (
+                  <SelectItem key={employee.id} value={employee.id}>
+                    {employee.department} / {employee.name} / {employee.rank}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {errors.employeeId && (
+              <p className="text-sm text-red-500">{errors.employeeId}</p>
+            )}
+          </div>
+
+          {/* 휴가 종류 */}
+          <div className="grid gap-2">
+            <Label htmlFor="vacationType">
+              휴가 종류 <span className="text-red-500">*</span>
+            </Label>
+            <Select
+              value={formData.vacationType}
+              onValueChange={(value) => setFormData((prev: VacationFormData) => ({ ...prev, vacationType: value as VacationType }))}
+            >
+              <SelectTrigger id="vacationType" className={errors.vacationType ? 'border-red-500' : ''}>
+                <SelectValue placeholder="휴가 종류를 선택하세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {vacationTypes.map((type) => (
+                  <SelectItem key={type.id} value={type.type}>
+                    {type.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {errors.vacationType && (
+              <p className="text-sm text-red-500">{errors.vacationType}</p>
+            )}
+          </div>
+
+          {/* 지급 일수 */}
+          <div className="grid gap-2">
+            <Label htmlFor="days">
+              지급 일수 <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="days"
+              type="number"
+              min="0"
+              step="0.5"
+              value={formData.days || ''}
+              onChange={(e) => setFormData((prev: VacationFormData) => ({ ...prev, days: parseFloat(e.target.value) || 0 }))}
+              className={errors.days ? 'border-red-500' : ''}
+              placeholder="일수를 입력하세요"
+            />
+            {errors.days && (
+              <p className="text-sm text-red-500">{errors.days}</p>
+            )}
+          </div>
+
+          {/* 비고 */}
+          <div className="grid gap-2">
+            <Label htmlFor="memo">비고</Label>
+            <Textarea
+              id="memo"
+              value={formData.memo || ''}
+              onChange={(e) => setFormData((prev: VacationFormData) => ({ ...prev, memo: e.target.value }))}
+              placeholder="비고를 입력하세요 (선택)"
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>
+            등록
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/VacationManagement/VacationRequestDialog.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { format, differenceInDays } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import type { VacationRequestFormData, VacationType } from './types';
+import { VACATION_TYPE_LABELS } from './types';
+
+interface VacationRequestDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (data: VacationRequestFormData) => void;
+}
+
+const mockEmployees = [
+  { id: '1', name: '김철수', department: '개발팀' },
+  { id: '2', name: '이영희', department: '디자인팀' },
+  { id: '3', name: '박민수', department: '기획팀' },
+  { id: '4', name: '정수진', department: '영업팀' },
+  { id: '5', name: '최동현', department: '인사팀' },
+];
+
+export function VacationRequestDialog({
+  open,
+  onOpenChange,
+  onSave,
+}: VacationRequestDialogProps) {
+  const [formData, setFormData] = useState<VacationRequestFormData>({
+    employeeId: '',
+    vacationType: 'annual',
+    startDate: '',
+    endDate: '',
+    vacationDays: 1,
+  });
+  const [startDate, setStartDate] = useState<Date | undefined>();
+  const [endDate, setEndDate] = useState<Date | undefined>();
+
+  useEffect(() => {
+    if (open) {
+      setFormData({
+        employeeId: '',
+        vacationType: 'annual',
+        startDate: '',
+        endDate: '',
+        vacationDays: 1,
+      });
+      setStartDate(undefined);
+      setEndDate(undefined);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (startDate && endDate) {
+      const days = differenceInDays(endDate, startDate) + 1;
+      setFormData(prev => ({
+        ...prev,
+        startDate: format(startDate, 'yyyy-MM-dd'),
+        endDate: format(endDate, 'yyyy-MM-dd'),
+        vacationDays: days > 0 ? days : 1,
+      }));
+    }
+  }, [startDate, endDate]);
+
+  const handleSave = () => {
+    if (!formData.employeeId) {
+      alert('사원을 선택해주세요.');
+      return;
+    }
+    if (!startDate || !endDate) {
+      alert('휴가 기간을 선택해주세요.');
+      return;
+    }
+    if (endDate < startDate) {
+      alert('종료일은 시작일 이후여야 합니다.');
+      return;
+    }
+    onSave(formData);
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>휴가 신청</DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* 사원 선택 */}
+          <div className="grid gap-2">
+            <Label htmlFor="employee">사원 선택</Label>
+            <Select
+              value={formData.employeeId}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, employeeId: value }))}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="사원을 선택하세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {mockEmployees.map((emp) => (
+                  <SelectItem key={emp.id} value={emp.id}>
+                    {emp.name} ({emp.department})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 휴가 유형 */}
+          <div className="grid gap-2">
+            <Label htmlFor="vacationType">휴가 유형</Label>
+            <Select
+              value={formData.vacationType}
+              onValueChange={(value) => setFormData(prev => ({ ...prev, vacationType: value as VacationType }))}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(VACATION_TYPE_LABELS).map(([key, label]) => (
+                  <SelectItem key={key} value={key}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 시작일 */}
+          <div className="grid gap-2">
+            <Label>시작일</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'w-full justify-start text-left font-normal',
+                    !startDate && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {startDate ? format(startDate, 'yyyy-MM-dd') : '시작일 선택'}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={startDate}
+                  onSelect={setStartDate}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 종료일 */}
+          <div className="grid gap-2">
+            <Label>종료일</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'w-full justify-start text-left font-normal',
+                    !endDate && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {endDate ? format(endDate, 'yyyy-MM-dd') : '종료일 선택'}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={endDate}
+                  onSelect={setEndDate}
+                  disabled={(date) => startDate ? date < startDate : false}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 휴가 일수 (자동 계산) */}
+          {startDate && endDate && (
+            <div className="grid gap-2">
+              <Label>휴가 일수</Label>
+              <div className="p-3 bg-muted rounded-md text-center font-medium">
+                {formData.vacationDays}일
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>
+            신청
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/VacationManagement/VacationTypeSettingsDialog.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { VacationTypeConfig, VacationType } from './types';
+
+interface VacationTypeSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  vacationTypes: VacationTypeConfig[];
+  onSave: (types: VacationTypeConfig[]) => void;
+}
+
+export function VacationTypeSettingsDialog({
+  open,
+  onOpenChange,
+  vacationTypes,
+  onSave,
+}: VacationTypeSettingsDialogProps) {
+  const [localTypes, setLocalTypes] = useState<VacationTypeConfig[]>([]);
+
+  // 다이얼로그가 열릴 때 로컬 상태 초기화
+  useEffect(() => {
+    if (open) {
+      setLocalTypes([...vacationTypes]);
+    }
+  }, [open, vacationTypes]);
+
+  // 사용여부 토글
+  const handleToggleActive = (id: string) => {
+    setLocalTypes(prev =>
+      prev.map(type =>
+        type.id === id ? { ...type, isActive: !type.isActive } : type
+      )
+    );
+  };
+
+  // 이름 변경
+  const handleNameChange = (id: string, name: string) => {
+    setLocalTypes(prev =>
+      prev.map(type =>
+        type.id === id ? { ...type, name } : type
+      )
+    );
+  };
+
+  // 설명 변경
+  const handleDescriptionChange = (id: string, description: string) => {
+    setLocalTypes(prev =>
+      prev.map(type =>
+        type.id === id ? { ...type, description } : type
+      )
+    );
+  };
+
+  // 휴가종류 추가
+  const handleAddType = () => {
+    const newId = String(Date.now());
+    const newType: VacationTypeConfig = {
+      id: newId,
+      name: '새 휴가종류',
+      type: 'other' as VacationType,
+      isActive: true,
+      description: '',
+    };
+    setLocalTypes(prev => [...prev, newType]);
+  };
+
+  // 휴가종류 삭제
+  const handleDeleteType = (id: string) => {
+    // 기본 4개 타입은 삭제 불가
+    const defaultTypeIds = ['1', '2', '3', '4'];
+    if (defaultTypeIds.includes(id)) {
+      return;
+    }
+    setLocalTypes(prev => prev.filter(type => type.id !== id));
+  };
+
+  // 저장 핸들러
+  const handleSave = () => {
+    onSave(localTypes);
+  };
+
+  // 취소 핸들러
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  // 기본 타입인지 확인 (삭제 불가)
+  const isDefaultType = (id: string) => {
+    return ['1', '2', '3', '4'].includes(id);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle>휴가 종류 설정</DialogTitle>
+        </DialogHeader>
+
+        <div className="py-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[150px]">휴가종류명</TableHead>
+                <TableHead className="w-[100px] text-center">사용여부</TableHead>
+                <TableHead>설명</TableHead>
+                <TableHead className="w-[60px] text-center">삭제</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {localTypes.map((type) => (
+                <TableRow key={type.id}>
+                  <TableCell>
+                    <Input
+                      value={type.name}
+                      onChange={(e) => handleNameChange(type.id, e.target.value)}
+                      className="h-8"
+                    />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <div className="flex justify-center">
+                      <Switch
+                        checked={type.isActive}
+                        onCheckedChange={() => handleToggleActive(type.id)}
+                      />
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Input
+                      value={type.description || ''}
+                      onChange={(e) => handleDescriptionChange(type.id, e.target.value)}
+                      placeholder="설명을 입력하세요"
+                      className="h-8"
+                    />
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDeleteType(type.id)}
+                      disabled={isDefaultType(type.id)}
+                      className={isDefaultType(type.id) ? 'opacity-30 cursor-not-allowed' : 'text-red-500 hover:text-red-700'}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          {/* 휴가종류 추가 버튼 */}
+          <div className="mt-4">
+            <Button variant="outline" onClick={handleAddType} className="w-full">
+              <Plus className="w-4 h-4 mr-2" />
+              휴가종류 추가
+            </Button>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button onClick={handleSave}>
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/hr/VacationManagement/index.tsx

@@ -0,0 +1,571 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { format } from 'date-fns';
+import {
+  Download,
+  Plus,
+  Calendar,
+  Check,
+  X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  IntegratedListTemplateV2,
+  type TableColumn,
+  type StatCard,
+  type TabOption,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import { VacationGrantDialog } from './VacationGrantDialog';
+import { VacationRequestDialog } from './VacationRequestDialog';
+import type {
+  MainTabType,
+  VacationUsageRecord,
+  VacationGrantRecord,
+  VacationRequestRecord,
+  SortOption,
+  VacationType,
+  RequestStatus,
+} from './types';
+import {
+  MAIN_TAB_LABELS,
+  SORT_OPTIONS,
+  VACATION_TYPE_LABELS,
+  REQUEST_STATUS_LABELS,
+  REQUEST_STATUS_COLORS,
+} from './types';
+
+// ===== Mock 데이터 생성 =====
+const generateUsageData = (): VacationUsageRecord[] => {
+  const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
+  const positions = ['팀장', '파트장', '선임', '주임', '사원'];
+  const ranks = ['부장', '차장', '과장', '대리', '사원'];
+
+  // 휴가 일수 포맷: "15일", "12일3시간" 등
+  const usedVacations = ['12일3시간', '8일', '5일4시간', '10일', '3일2시간', '7일5시간', '9일', '6일1시간', '4일', '11일6시간'];
+  const remainingVacations = ['2일5시간', '7일', '9일4시간', '5일', '11일6시간', '7일3시간', '6일', '8일7시간', '11일', '3일2시간'];
+  const grantedVacations = ['0일', '3일', '2일', '1일', '4일', '0일', '2일', '3일', '1일', '0일'];
+
+  return Array.from({ length: 10 }, (_, i) => ({
+    id: `usage-${i + 1}`,
+    employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
+    employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현', '한승우', '송예진'][i],
+    department: departments[i % departments.length],
+    position: positions[i % positions.length],
+    rank: ranks[i % ranks.length],
+    hireDate: format(new Date(2020 + (i % 5), i % 12, (i % 28) + 1), 'yyyy-MM-dd'),
+    baseVacation: '15일',
+    grantedVacation: grantedVacations[i],
+    usedVacation: usedVacations[i],
+    remainingVacation: remainingVacations[i],
+    // 휴가 유형별 상세 (조정 다이얼로그용)
+    annual: { total: 15, used: 10 + (i % 5), remaining: 5 - (i % 5) },
+    monthly: { total: 3, used: i % 3, remaining: 3 - (i % 3) },
+    reward: { total: i % 4, used: 0, remaining: i % 4 },
+    other: { total: 0, used: 0, remaining: 0 },
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  }));
+};
+
+const generateGrantData = (): VacationGrantRecord[] => {
+  const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
+  const positions = ['팀장', '파트장', '선임', '주임', '사원'];
+  const ranks = ['부장', '차장', '과장', '대리', '사원'];
+  const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'other'];
+  const reasons = ['연차 부여', '포상 휴가', '특별 휴가', '경조사 휴가', ''];
+
+  return Array.from({ length: 8 }, (_, i) => ({
+    id: `grant-${i + 1}`,
+    employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
+    employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현'][i],
+    department: departments[i % departments.length],
+    position: positions[i % positions.length],
+    rank: ranks[i % ranks.length],
+    vacationType: vacationTypes[i % vacationTypes.length],
+    grantDate: format(new Date(2025, 11, (i % 28) + 1), 'yyyy-MM-dd'),
+    grantDays: Math.floor(Math.random() * 5) + 1,
+    reason: reasons[i % reasons.length],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  }));
+};
+
+const generateRequestData = (): VacationRequestRecord[] => {
+  const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
+  const positions = ['팀장', '파트장', '선임', '주임', '사원'];
+  const ranks = ['부장', '차장', '과장', '대리', '사원'];
+  const statuses: RequestStatus[] = ['pending', 'approved', 'rejected'];
+
+  return Array.from({ length: 7 }, (_, i) => {
+    const startDate = new Date(2025, 11, (i % 28) + 1);
+    const endDate = new Date(startDate);
+    endDate.setDate(endDate.getDate() + Math.floor(Math.random() * 5) + 1);
+
+    return {
+      id: `request-${i + 1}`,
+      employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
+      employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호'][i],
+      department: departments[i % departments.length],
+      position: positions[i % positions.length],
+      rank: ranks[i % ranks.length],
+      startDate: format(startDate, 'yyyy-MM-dd'),
+      endDate: format(endDate, 'yyyy-MM-dd'),
+      vacationDays: Math.floor(Math.random() * 5) + 1,
+      status: statuses[i % statuses.length],
+      requestDate: format(new Date(2025, 11, i + 1), 'yyyy-MM-dd'),
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+  });
+};
+
+export function VacationManagement() {
+  // ===== 상태 관리 =====
+  const [mainTab, setMainTab] = useState<MainTabType>('usage');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortOption, setSortOption] = useState<SortOption>('rank');
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
+
+  // 날짜 범위 상태 (input type="date" 용)
+  const [startDate, setStartDate] = useState('2025-12-01');
+  const [endDate, setEndDate] = useState('2025-12-31');
+
+  // 다이얼로그 상태
+  const [grantDialogOpen, setGrantDialogOpen] = useState(false);
+  const [requestDialogOpen, setRequestDialogOpen] = useState(false);
+
+  // Mock 데이터
+  const [usageData] = useState<VacationUsageRecord[]>(generateUsageData);
+  const [grantData] = useState<VacationGrantRecord[]>(generateGrantData);
+  const [requestData] = useState<VacationRequestRecord[]>(generateRequestData);
+
+  // ===== 탭 변경 핸들러 =====
+  const handleMainTabChange = useCallback((value: string) => {
+    setMainTab(value as MainTabType);
+    setSelectedItems(new Set());
+    setSearchQuery('');
+    setCurrentPage(1);
+  }, []);
+
+  // ===== 체크박스 핸들러 =====
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) newSet.delete(id);
+      else newSet.add(id);
+      return newSet;
+    });
+  }, []);
+
+  const toggleSelectAll = useCallback(() => {
+    const currentData = mainTab === 'usage' ? filteredUsageData : mainTab === 'grant' ? filteredGrantData : filteredRequestData;
+    if (selectedItems.size === currentData.length && currentData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      setSelectedItems(new Set(currentData.map(item => item.id)));
+    }
+  }, [mainTab, selectedItems.size]);
+
+  // ===== 필터링된 데이터 =====
+  const filteredUsageData = useMemo(() => {
+    return usageData.filter(item =>
+      item.employeeName.includes(searchQuery) ||
+      item.department.includes(searchQuery)
+    );
+  }, [usageData, searchQuery]);
+
+  const filteredGrantData = useMemo(() => {
+    return grantData.filter(item =>
+      item.employeeName.includes(searchQuery) ||
+      item.department.includes(searchQuery)
+    );
+  }, [grantData, searchQuery]);
+
+  const filteredRequestData = useMemo(() => {
+    return requestData.filter(item =>
+      item.employeeName.includes(searchQuery) ||
+      item.department.includes(searchQuery)
+    );
+  }, [requestData, searchQuery]);
+
+  // ===== 현재 탭 데이터 =====
+  const currentData = useMemo(() => {
+    switch (mainTab) {
+      case 'usage': return filteredUsageData;
+      case 'grant': return filteredGrantData;
+      case 'request': return filteredRequestData;
+      default: return [];
+    }
+  }, [mainTab, filteredUsageData, filteredGrantData, filteredRequestData]);
+
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return currentData.slice(startIndex, startIndex + itemsPerPage);
+  }, [currentData, currentPage, itemsPerPage]);
+
+  const totalPages = Math.ceil(currentData.length / itemsPerPage);
+
+  // ===== 승인/거절 핸들러 =====
+  const handleApprove = useCallback(() => {
+    console.log('승인:', Array.from(selectedItems));
+    setSelectedItems(new Set());
+  }, [selectedItems]);
+
+  const handleReject = useCallback(() => {
+    console.log('거절:', Array.from(selectedItems));
+    setSelectedItems(new Set());
+  }, [selectedItems]);
+
+  // ===== 통계 카드 (스크린샷: 연차 N명, 월차 N명, 포상휴가 N명, 기타휴가 N명) =====
+  const statCards: StatCard[] = useMemo(() => [
+    { label: '연차', value: `${usageData.length}명`, icon: Calendar, iconColor: 'text-blue-500' },
+    { label: '월차', value: `${usageData.filter(u => u.grantedVacation !== '0일').length}명`, icon: Calendar, iconColor: 'text-green-500' },
+    { label: '포상휴가', value: `${grantData.filter(g => g.vacationType === 'reward').length}명`, icon: Calendar, iconColor: 'text-purple-500' },
+    { label: '기타휴가', value: `${grantData.filter(g => g.vacationType === 'other').length}명`, icon: Calendar, iconColor: 'text-orange-500' },
+  ], [usageData, grantData]);
+
+  // ===== 탭 옵션 (카드 아래에 표시됨) =====
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'usage', label: MAIN_TAB_LABELS.usage, count: usageData.length, color: 'blue' },
+    { value: 'grant', label: MAIN_TAB_LABELS.grant, count: grantData.length, color: 'green' },
+    { value: 'request', label: MAIN_TAB_LABELS.request, count: requestData.length, color: 'purple' },
+  ], [usageData.length, grantData.length, requestData.length]);
+
+  // ===== 테이블 컬럼 (탭별) =====
+  const tableColumns: TableColumn[] = useMemo(() => {
+    if (mainTab === 'usage') {
+      // 휴가 사용현황: 부서|직책|이름|직급|입사일|기본|부여|사용|잔액
+      return [
+        { key: 'department', label: '부서' },
+        { key: 'position', label: '직책' },
+        { key: 'name', label: '이름' },
+        { key: 'rank', label: '직급' },
+        { key: 'hireDate', label: '입사일' },
+        { key: 'base', label: '기본', className: 'text-center' },
+        { key: 'granted', label: '부여', className: 'text-center' },
+        { key: 'used', label: '사용', className: 'text-center' },
+        { key: 'remaining', label: '잔여', className: 'text-center' },
+      ];
+    } else if (mainTab === 'grant') {
+      // 휴가 부여현황: 부서|직책|이름|직급|유형|부여일|부여휴가일수|사유
+      return [
+        { key: 'department', label: '부서' },
+        { key: 'position', label: '직책' },
+        { key: 'name', label: '이름' },
+        { key: 'rank', label: '직급' },
+        { key: 'type', label: '유형' },
+        { key: 'grantDate', label: '부여일' },
+        { key: 'grantDays', label: '부여휴가일수', className: 'text-center' },
+        { key: 'reason', label: '사유' },
+      ];
+    } else {
+      // 휴가 신청현황: 부서|직책|이름|직급|휴가기간|휴가일수|상태|신청일
+      return [
+        { key: 'department', label: '부서' },
+        { key: 'position', label: '직책' },
+        { key: 'name', label: '이름' },
+        { key: 'rank', label: '직급' },
+        { key: 'period', label: '휴가기간' },
+        { key: 'days', label: '휴가일수', className: 'text-center' },
+        { key: 'status', label: '상태', className: 'text-center' },
+        { key: 'requestDate', label: '신청일' },
+      ];
+    }
+  }, [mainTab]);
+
+  // ===== 테이블 행 렌더링 =====
+  const renderTableRow = useCallback((item: any, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    if (mainTab === 'usage') {
+      const record = item as VacationUsageRecord;
+      return (
+        <TableRow key={record.id} className="hover:bg-muted/50">
+          <TableCell className="text-center">
+            <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
+          </TableCell>
+          <TableCell>{record.department}</TableCell>
+          <TableCell>{record.position}</TableCell>
+          <TableCell className="font-medium">{record.employeeName}</TableCell>
+          <TableCell>{record.rank}</TableCell>
+          <TableCell>{format(new Date(record.hireDate), 'yyyy-MM-dd')}</TableCell>
+          <TableCell className="text-center">{record.baseVacation}</TableCell>
+          <TableCell className="text-center">{record.grantedVacation}</TableCell>
+          <TableCell className="text-center">{record.usedVacation}</TableCell>
+          <TableCell className="text-center font-medium">{record.remainingVacation}</TableCell>
+        </TableRow>
+      );
+    } else if (mainTab === 'grant') {
+      const record = item as VacationGrantRecord;
+      return (
+        <TableRow key={record.id} className="hover:bg-muted/50">
+          <TableCell className="text-center">
+            <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
+          </TableCell>
+          <TableCell>{record.department}</TableCell>
+          <TableCell>{record.position}</TableCell>
+          <TableCell className="font-medium">{record.employeeName}</TableCell>
+          <TableCell>{record.rank}</TableCell>
+          <TableCell>
+            <Badge variant="outline">{VACATION_TYPE_LABELS[record.vacationType]}</Badge>
+          </TableCell>
+          <TableCell>{format(new Date(record.grantDate), 'yyyy-MM-dd')}</TableCell>
+          <TableCell className="text-center">{record.grantDays}일</TableCell>
+          <TableCell className="text-muted-foreground">{record.reason || '-'}</TableCell>
+        </TableRow>
+      );
+    } else {
+      const record = item as VacationRequestRecord;
+      return (
+        <TableRow key={record.id} className="hover:bg-muted/50">
+          <TableCell className="text-center">
+            <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
+          </TableCell>
+          <TableCell>{record.department}</TableCell>
+          <TableCell>{record.position}</TableCell>
+          <TableCell className="font-medium">{record.employeeName}</TableCell>
+          <TableCell>{record.rank}</TableCell>
+          <TableCell>
+            {format(new Date(record.startDate), 'yyyy-MM-dd')} ~ {format(new Date(record.endDate), 'yyyy-MM-dd')}
+          </TableCell>
+          <TableCell className="text-center">{record.vacationDays}일</TableCell>
+          <TableCell className="text-center">
+            <Badge className={REQUEST_STATUS_COLORS[record.status]}>
+              {REQUEST_STATUS_LABELS[record.status]}
+            </Badge>
+          </TableCell>
+          <TableCell>{format(new Date(record.requestDate), 'yyyy-MM-dd')}</TableCell>
+        </TableRow>
+      );
+    }
+  }, [mainTab, selectedItems, toggleSelection]);
+
+  // ===== 모바일 카드 렌더링 =====
+  const renderMobileCard = useCallback((
+    item: any,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    if (mainTab === 'usage') {
+      const record = item as VacationUsageRecord;
+      return (
+        <ListMobileCard
+          id={record.id}
+          title={record.employeeName}
+          headerBadges={<Badge variant="outline">{record.department}</Badge>}
+          isSelected={isSelected}
+          onToggleSelection={onToggle}
+          infoGrid={
+            <div className="grid grid-cols-2 gap-3">
+              <InfoField label="직급" value={record.rank} />
+              <InfoField label="입사일" value={record.hireDate} />
+              <InfoField label="기본" value={record.baseVacation} />
+              <InfoField label="부여" value={record.grantedVacation} />
+              <InfoField label="사용" value={record.usedVacation} />
+              <InfoField label="잔여" value={record.remainingVacation} />
+            </div>
+          }
+        />
+      );
+    } else if (mainTab === 'grant') {
+      const record = item as VacationGrantRecord;
+      return (
+        <ListMobileCard
+          id={record.id}
+          title={record.employeeName}
+          headerBadges={<Badge variant="outline">{VACATION_TYPE_LABELS[record.vacationType]}</Badge>}
+          isSelected={isSelected}
+          onToggleSelection={onToggle}
+          infoGrid={
+            <div className="grid grid-cols-2 gap-3">
+              <InfoField label="부서" value={record.department} />
+              <InfoField label="직급" value={record.rank} />
+              <InfoField label="부여일" value={record.grantDate} />
+              <InfoField label="일수" value={`${record.grantDays}일`} />
+              {record.reason && <InfoField label="사유" value={record.reason} />}
+            </div>
+          }
+        />
+      );
+    } else {
+      const record = item as VacationRequestRecord;
+      return (
+        <ListMobileCard
+          id={record.id}
+          title={record.employeeName}
+          headerBadges={
+            <Badge className={REQUEST_STATUS_COLORS[record.status]}>
+              {REQUEST_STATUS_LABELS[record.status]}
+            </Badge>
+          }
+          isSelected={isSelected}
+          onToggleSelection={onToggle}
+          infoGrid={
+            <div className="grid grid-cols-2 gap-3">
+              <InfoField label="부서" value={record.department} />
+              <InfoField label="직급" value={record.rank} />
+              <InfoField label="기간" value={`${record.startDate} ~ ${record.endDate}`} />
+              <InfoField label="일수" value={`${record.vacationDays}일`} />
+              <InfoField label="신청일" value={record.requestDate} />
+            </div>
+          }
+          actions={
+            record.status === 'pending' && (
+              <div className="flex gap-2">
+                <Button variant="default" className="flex-1" onClick={handleApprove}>
+                  <Check className="w-4 h-4 mr-2" /> 승인
+                </Button>
+                <Button variant="outline" className="flex-1" onClick={handleReject}>
+                  <X className="w-4 h-4 mr-2" /> 거절
+                </Button>
+              </div>
+            )
+          }
+        />
+      );
+    }
+  }, [mainTab, handleApprove, handleReject]);
+
+  // ===== 헤더 액션 (달력 + 버튼들) =====
+  const headerActions = (
+    <div className="flex items-center gap-2 flex-wrap">
+      {/* 날짜 범위 선택 - 브라우저 기본 달력 사용 */}
+      <div className="flex items-center gap-1">
+        <Input
+          type="date"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+          className="w-[140px]"
+        />
+        <span className="text-muted-foreground">~</span>
+        <Input
+          type="date"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+          className="w-[140px]"
+        />
+      </div>
+
+      {/* 탭별 액션 버튼 */}
+      {mainTab === 'grant' && (
+        <Button onClick={() => setGrantDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          부여등록
+        </Button>
+      )}
+
+      {mainTab === 'request' && (
+        <>
+          <Button onClick={() => setRequestDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            휴가신청
+          </Button>
+          {selectedItems.size > 0 && (
+            <>
+              <Button variant="default" onClick={handleApprove}>
+                <Check className="h-4 w-4 mr-2" />
+                승인
+              </Button>
+              <Button variant="destructive" onClick={handleReject}>
+                <X className="h-4 w-4 mr-2" />
+                거절
+              </Button>
+            </>
+          )}
+        </>
+      )}
+
+      <Button variant="outline" onClick={() => console.log('엑셀 다운로드')}>
+        <Download className="h-4 w-4 mr-2" />
+        엑셀 다운로드
+      </Button>
+    </div>
+  );
+
+  // ===== 정렬 필터 =====
+  const extraFilters = (
+    <Select value={sortOption} onValueChange={(v) => setSortOption(v as SortOption)}>
+      <SelectTrigger className="w-[120px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.entries(SORT_OPTIONS).map(([key, label]) => (
+          <SelectItem key={key} value={key}>{label}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <>
+      {/* IntegratedListTemplateV2 - 카드 아래에 탭 표시됨 */}
+      <IntegratedListTemplateV2
+        title="휴가관리"
+        description="직원들의 휴가 현황을 관리합니다"
+        icon={Calendar}
+        headerActions={headerActions}
+        stats={statCards}
+        searchValue={searchQuery}
+        onSearchChange={setSearchQuery}
+        searchPlaceholder="이름, 부서 검색..."
+        extraFilters={extraFilters}
+        tabs={tabs}
+        activeTab={mainTab}
+        onTabChange={handleMainTabChange}
+        tableColumns={tableColumns}
+        data={paginatedData}
+        totalCount={currentData.length}
+        allData={currentData}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        getItemId={(item: any) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: currentData.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 다이얼로그 */}
+      <VacationGrantDialog
+        open={grantDialogOpen}
+        onOpenChange={setGrantDialogOpen}
+        onSave={(data) => {
+          console.log('부여 등록:', data);
+          setGrantDialogOpen(false);
+        }}
+      />
+
+      <VacationRequestDialog
+        open={requestDialogOpen}
+        onOpenChange={setRequestDialogOpen}
+        onSave={(data) => {
+          console.log('휴가 신청:', data);
+          setRequestDialogOpen(false);
+        }}
+      />
+    </>
+  );
+}

src/components/hr/VacationManagement/types.ts

@@ -0,0 +1,175 @@
+/**
+ * 휴가관리 타입 정의
+ * 3개 메인 탭: 휴가 사용현황, 휴가 부여현황, 휴가 신청현황
+ */
+
+// ===== 메인 탭 타입 =====
+export type MainTabType = 'usage' | 'grant' | 'request';
+
+// 휴가 유형
+export type VacationType = 'annual' | 'monthly' | 'reward' | 'other';
+
+// 정렬 옵션
+export type SortOption = 'rank' | 'deptAsc' | 'deptDesc' | 'nameAsc' | 'nameDesc';
+
+// 휴가 신청 상태
+export type RequestStatus = 'pending' | 'approved' | 'rejected';
+
+// ===== 탭 1: 휴가 사용현황 =====
+// 휴가 유형별 상세 정보
+export interface VacationTypeDetail {
+  total: number;
+  used: number;
+  remaining: number;
+}
+
+// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 입사일 | 기본 | 부여 | 사용 | 잔여
+export interface VacationUsageRecord {
+  id: string;
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;        // 직책
+  rank: string;            // 직급
+  hireDate: string;        // 입사일
+  baseVacation: string;    // 기본 (예: "15일")
+  grantedVacation: string; // 부여 (예: "3일")
+  usedVacation: string;    // 사용 (예: "12일3시간")
+  remainingVacation: string; // 잔여 (예: "2일5시간")
+  // 휴가 유형별 상세 (조정 다이얼로그용)
+  annual: VacationTypeDetail;
+  monthly: VacationTypeDetail;
+  reward: VacationTypeDetail;
+  other: VacationTypeDetail;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ===== 탭 2: 휴가 부여현황 =====
+// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 유형 | 부여일 | 부여휴가일수 | 사유
+export interface VacationGrantRecord {
+  id: string;
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;        // 직책
+  rank: string;            // 직급
+  vacationType: VacationType; // 유형
+  grantDate: string;       // 부여일
+  grantDays: number;       // 부여휴가일수
+  reason?: string;         // 사유
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ===== 탭 3: 휴가 신청현황 =====
+// 테이블 컬럼: 부서 | 직책 | 이름 | 직급 | 휴가기간 | 휴가일수 | 상태 | 신청일
+export interface VacationRequestRecord {
+  id: string;
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;        // 직책
+  rank: string;            // 직급
+  startDate: string;       // 휴가기간 시작
+  endDate: string;         // 휴가기간 종료
+  vacationDays: number;    // 휴가일수
+  status: RequestStatus;   // 상태
+  requestDate: string;     // 신청일
+  vacationType?: VacationType;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ===== 폼 데이터 =====
+export interface VacationFormData {
+  employeeId: string;
+  vacationType: VacationType;
+  days: number;
+  memo?: string;
+}
+
+export interface VacationGrantFormData {
+  employeeId: string;
+  vacationType: VacationType;
+  grantDays: number;
+  reason?: string;
+}
+
+export interface VacationRequestFormData {
+  employeeId: string;
+  vacationType: VacationType;
+  startDate: string;
+  endDate: string;
+  vacationDays: number;
+}
+
+export interface VacationAdjustment {
+  vacationType: VacationType;
+  adjustment: number;
+}
+
+export interface VacationTypeConfig {
+  id: string;
+  name: string;
+  type: VacationType;
+  isActive: boolean;
+  description?: string;
+}
+
+export interface EmployeeOption {
+  id: string;
+  name: string;
+  department: string;
+  position: string;
+  rank: string;
+}
+
+// ===== 상수 정의 =====
+
+export const MAIN_TAB_LABELS: Record<MainTabType, string> = {
+  usage: '휴가 사용현황',
+  grant: '휴가 부여현황',
+  request: '휴가 신청현황',
+};
+
+export const VACATION_TYPE_LABELS: Record<VacationType, string> = {
+  annual: '연차',
+  monthly: '월차',
+  reward: '포상휴가',
+  other: '기타',
+};
+
+export const VACATION_TYPE_COLORS: Record<VacationType, string> = {
+  annual: 'blue',
+  monthly: 'green',
+  reward: 'purple',
+  other: 'orange',
+};
+
+export const REQUEST_STATUS_LABELS: Record<RequestStatus, string> = {
+  pending: '대기',
+  approved: '승인',
+  rejected: '반려',
+};
+
+export const REQUEST_STATUS_COLORS: Record<RequestStatus, string> = {
+  pending: 'bg-yellow-100 text-yellow-800',
+  approved: 'bg-green-100 text-green-800',
+  rejected: 'bg-red-100 text-red-800',
+};
+
+export const SORT_OPTIONS: Record<SortOption, string> = {
+  rank: '직급순',
+  deptAsc: '부서명 오름차순',
+  deptDesc: '부서명 내림차순',
+  nameAsc: '이름 오름차순',
+  nameDesc: '이름 내림차순',
+};
+
+export const DEFAULT_VACATION_TYPES: VacationTypeConfig[] = [
+  { id: '1', name: '연차', type: 'annual', isActive: true, description: '연간 유급 휴가' },
+  { id: '2', name: '월차', type: 'monthly', isActive: true, description: '월간 유급 휴가' },
+  { id: '3', name: '포상휴가', type: 'reward', isActive: true, description: '성과에 따른 포상 휴가' },
+  { id: '4', name: '기타', type: 'other', isActive: true, description: '기타 휴가' },
+];