feat: 신규 페이지 구현 및 HR/설정 기능 개선

신규 페이지:
- 회계관리: 거래처, 예상비용, 청구서, 발주서
- 게시판: 공지사항, 자료실, 커뮤니티
- 고객센터: 문의/FAQ
- 설정: 계정, 알림, 출퇴근, 팝업, 구독, 결제내역
- 리포트 (차트 시각화)
- 개발자 테스트 URL 페이지

기능 개선:
- HR 직원관리/휴가관리/카드관리 강화
- IntegratedListTemplateV2 확장
- AuthenticatedLayout 패딩 표준화
- 로그인 페이지 UI 개선

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

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

src/components/hr/AttendanceManagement/index.tsx

@@ -23,22 +23,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { Calendar as CalendarComponent } from '@/components/ui/calendar';
-import { CalendarIcon } from 'lucide-react';
-import { format, addDays } from 'date-fns';
+import { format } from 'date-fns';
 import { ko } from 'date-fns/locale';
-import { cn } from '@/lib/utils';
 import {
   IntegratedListTemplateV2,
   type TableColumn,
   type StatCard,
   type TabOption,
 } from '@/components/templates/IntegratedListTemplateV2';
+import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { AttendanceInfoDialog } from './AttendanceInfoDialog';
 import { ReasonInfoDialog } from './ReasonInfoDialog';
@@ -46,6 +39,7 @@ import type {
   AttendanceRecord,
   AttendanceStatus,
   SortOption,
+  FilterOption,
   AttendanceFormData,
   ReasonFormData,
 } from './types';
@@ -53,6 +47,7 @@ import {
   ATTENDANCE_STATUS_LABELS,
   ATTENDANCE_STATUS_COLORS,
   SORT_OPTIONS,
+  FILTER_OPTIONS,
   REASON_TYPE_LABELS,
 } from './types';
 
@@ -115,15 +110,14 @@ export function AttendanceManagement() {
   // 검색 및 필터 상태
   const [searchValue, setSearchValue] = useState('');
   const [activeTab, setActiveTab] = useState<string>('all');
+  const [filterOption, setFilterOption] = useState<FilterOption>('all');
   const [sortOption, setSortOption] = useState<SortOption>('rank');
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 20;
 
-  // 날짜 범위 상태
-  const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
-    from: new Date('2025-09-01'),
-    to: new Date('2025-09-03'),
-  });
+  // 날짜 범위 상태 (Input type="date" 용)
+  const [startDate, setStartDate] = useState('2025-09-01');
+  const [endDate, setEndDate] = useState('2025-09-03');
 
   // 다이얼로그 상태
   const [attendanceDialogOpen, setAttendanceDialogOpen] = useState(false);
@@ -141,6 +135,11 @@ export function AttendanceManagement() {
       filtered = filtered.filter(r => r.status === activeTab);
     }
 
+    // 상단 필터 드롭다운 (탭과 별개)
+    if (filterOption !== 'all') {
+      filtered = filtered.filter(r => r.status === filterOption);
+    }
+
     // 검색 필터
     if (searchValue) {
       const search = searchValue.toLowerCase();
@@ -169,7 +168,7 @@ export function AttendanceManagement() {
     });
 
     return filtered;
-  }, [attendanceRecords, activeTab, searchValue, sortOption]);
+  }, [attendanceRecords, activeTab, filterOption, searchValue, sortOption]);
 
   // 페이지네이션된 데이터
   const paginatedData = useMemo(() => {
@@ -229,6 +228,7 @@ export function AttendanceManagement() {
 
   // 테이블 컬럼 정의
   const tableColumns: TableColumn[] = useMemo(() => [
+    { key: 'no', label: '번호', className: 'w-[60px] text-center' },
     { key: 'department', label: '부서', className: 'min-w-[80px]' },
     { key: 'position', label: '직책', className: 'min-w-[100px]' },
     { key: 'name', label: '이름', className: 'min-w-[60px]' },
@@ -320,6 +320,7 @@ export function AttendanceManagement() {
             onCheckedChange={() => toggleSelection(item.id)}
           />
         </TableCell>
+        <TableCell className="text-center">{globalIndex}</TableCell>
         <TableCell>{item.department}</TableCell>
         <TableCell>{item.position}</TableCell>
         <TableCell>{item.employeeName}</TableCell>
@@ -344,14 +345,16 @@ export function AttendanceManagement() {
           ) : '-'}
         </TableCell>
         <TableCell className="text-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => handleEditAttendance(item)}
-            title="수정"
-          >
-            <Edit className="w-4 h-4" />
-          </Button>
+          {isSelected && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleEditAttendance(item)}
+              title="수정"
+            >
+              <Edit className="w-4 h-4" />
+            </Button>
+          )}
         </TableCell>
       </TableRow>
     );
@@ -403,76 +406,86 @@ export function AttendanceManagement() {
           </div>
         }
         actions={
-          <div className="flex gap-2 flex-wrap">
-            <Button
-              variant="default"
-              size="default"
-              className="flex-1 min-w-[100px] h-11"
-              onClick={(e) => { e.stopPropagation(); handleEditAttendance(item); }}
-            >
-              <Edit className="h-4 w-4 mr-2" />
-              수정
-            </Button>
-          </div>
+          isSelected ? (
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                variant="default"
+                size="default"
+                className="flex-1 min-w-[100px] h-11"
+                onClick={(e) => { e.stopPropagation(); handleEditAttendance(item); }}
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                수정
+              </Button>
+            </div>
+          ) : undefined
         }
       />
     );
   }, [handleEditAttendance]);
 
-  // 헤더 액션 (날짜 범위 + 버튼들)
+  // 헤더 액션 (DateRangeSelector + 버튼들)
   const headerActions = (
-    <div className="flex items-center gap-2 flex-wrap">
-      {/* 날짜 범위 선택 */}
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline" className="gap-2">
-            <CalendarIcon className="h-4 w-4" />
-            {format(dateRange.from, 'yyyy-MM-dd')} ~ {format(dateRange.to, 'yyyy-MM-dd')}
+    <DateRangeSelector
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      extraActions={
+        <>
+          <Button variant="outline" onClick={handleExcelDownload}>
+            <Download className="w-4 h-4 mr-2" />
+            엑셀 다운로드
           </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="end">
-          <CalendarComponent
-            mode="range"
-            selected={{ from: dateRange.from, to: dateRange.to }}
-            onSelect={(range) => {
-              if (range?.from && range?.to) {
-                setDateRange({ from: range.from, to: range.to });
-              }
-            }}
-            locale={ko}
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
+          <Button onClick={handleAddAttendance}>
+            <Plus className="w-4 h-4 mr-2" />
+            근태 등록
+          </Button>
+        </>
+      }
+    />
+  );
 
-      <Button variant="outline" onClick={handleExcelDownload}>
-        <Download className="w-4 h-4 mr-2" />
-        엑셀 다운로드
-      </Button>
-      <Button onClick={handleAddAttendance}>
-        <Plus className="w-4 h-4 mr-2" />
-        근태 등록
-      </Button>
+  // 테이블 헤더 액션 (필터 + 정렬 셀렉트) - 사원관리와 동일한 위치
+  const tableHeaderActions = (
+    <div className="flex items-center gap-2">
+      {/* 필터 셀렉트박스 */}
+      <Select value={filterOption} onValueChange={(value) => setFilterOption(value as FilterOption)}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue placeholder="필터 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {FILTER_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* 정렬 셀렉트박스 */}
+      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue placeholder="정렬 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {SORT_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 
-  // 검색 옆 추가 필터 (사유 등록 버튼 + 정렬 셀렉트)
+  // 검색 옆 추가 필터 (사유 등록 버튼)
   const extraFilters = (
     <div className="flex items-center gap-2 flex-wrap">
       <Button variant="outline" onClick={handleAddReason}>
         <FileText className="w-4 h-4 mr-2" />
         사유 등록
       </Button>
-      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
-        <SelectTrigger className="w-[140px]">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {Object.entries(SORT_OPTIONS).map(([value, label]) => (
-            <SelectItem key={value} value={value}>{label}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
     </div>
   );
 
@@ -491,6 +504,7 @@ export function AttendanceManagement() {
         onSearchChange={setSearchValue}
         searchPlaceholder="이름, 부서 검색..."
         extraFilters={extraFilters}
+        tableHeaderActions={tableHeaderActions}
         tabs={tabs}
         activeTab={activeTab}
         onTabChange={setActiveTab}

src/components/hr/AttendanceManagement/types.ts

@@ -27,16 +27,30 @@ export const ATTENDANCE_STATUS_COLORS: Record<AttendanceStatus, string> = {
   overtime: 'bg-indigo-100 text-indigo-700',
 };
 
+// 필터 옵션
+export type FilterOption = 'all' | AttendanceStatus;
+
+export const FILTER_OPTIONS: { value: FilterOption; label: string }[] = [
+  { value: 'all', label: '전체' },
+  { value: 'onTime', label: '정시 출근' },
+  { value: 'late', label: '지각' },
+  { value: 'absent', label: '결근' },
+  { value: 'vacation', label: '휴가' },
+  { value: 'businessTrip', label: '출장' },
+  { value: 'fieldWork', label: '외근' },
+  { value: 'overtime', label: '연장근무' },
+];
+
 // 정렬 옵션
 export type SortOption = 'rank' | 'deptAsc' | 'deptDesc' | 'nameAsc' | 'nameDesc';
 
-export const SORT_OPTIONS: Record<SortOption, string> = {
-  rank: '직급순',
-  deptAsc: '부서 오름차순',
-  deptDesc: '부서 내림차순',
-  nameAsc: '이름 오름차순',
-  nameDesc: '이름 내림차순',
-};
+export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+  { value: 'rank', label: '직급순' },
+  { value: 'deptAsc', label: '부서 오름차순' },
+  { value: 'deptDesc', label: '부서 내림차순' },
+  { value: 'nameAsc', label: '이름 오름차순' },
+  { value: 'nameDesc', label: '이름 내림차순' },
+];
 
 // 사유 유형 (문서 유형)
 export type ReasonType = 'businessTripRequest' | 'vacationRequest' | 'fieldWorkRequest' | 'overtimeRequest';

src/components/hr/CardManagement/CardDetail.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { CreditCard, ArrowLeft, Edit, Trash2 } from 'lucide-react';
+import type { Card as CardType } from './types';
+import {
+  CARD_STATUS_LABELS,
+  CARD_STATUS_COLORS,
+  getCardCompanyLabel,
+} from './types';
+
+interface CardDetailProps {
+  card: CardType;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function CardDetail({ card, onEdit, onDelete }: CardDetailProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.push('/ko/hr/card-management');
+  };
+
+  // 유효기간 포맷 (MMYY -> MM/YY)
+  const formatExpiryDate = (date: string) => {
+    if (date.length === 4) {
+      return `${date.slice(0, 2)}/${date.slice(2)}`;
+    }
+    return date;
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title="카드 상세"
+        description="카드 정보를 관리합니다"
+        icon={CreditCard}
+      />
+
+      <div className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+            <Badge className={CARD_STATUS_COLORS[card.status]}>
+              {CARD_STATUS_LABELS[card.status]}
+            </Badge>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">카드사</dt>
+                <dd className="text-sm mt-1">{getCardCompanyLabel(card.cardCompany)}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">카드번호</dt>
+                <dd className="text-sm mt-1 font-mono">{card.cardNumber}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">유효기간</dt>
+                <dd className="text-sm mt-1">{formatExpiryDate(card.expiryDate)}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">카드 비밀번호 앞 2자리</dt>
+                <dd className="text-sm mt-1">**</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">카드명</dt>
+                <dd className="text-sm mt-1">{card.cardName}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">상태</dt>
+                <dd className="text-sm mt-1">
+                  <Badge className={CARD_STATUS_COLORS[card.status]}>
+                    {CARD_STATUS_LABELS[card.status]}
+                  </Badge>
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">사용자 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="md:col-span-2">
+                <dt className="text-sm font-medium text-muted-foreground">부서 / 이름 / 직책</dt>
+                <dd className="text-sm mt-1">
+                  {card.user ? (
+                    <span>
+                      {card.user.departmentName} / {card.user.employeeName} / {card.user.positionName}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">미지정</span>
+                  )}
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button variant="outline" onClick={handleBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            목록으로
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
+              <Trash2 className="w-4 h-4 mr-2" />
+              삭제
+            </Button>
+            <Button onClick={onEdit}>
+              <Edit className="w-4 h-4 mr-2" />
+              수정
+            </Button>
+          </div>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

src/components/hr/CardManagement/CardForm.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { CreditCard, ArrowLeft, Save } from 'lucide-react';
+import type { Card as CardType, CardFormData, CardCompany, CardStatus } from './types';
+import { CARD_COMPANIES, CARD_STATUS_LABELS } from './types';
+
+// Mock 사용자 데이터
+const mockUsers = [
+  { id: 'u1', label: '부서명 / 홍길동 / 팀장' },
+  { id: 'u2', label: '부서명 / 김철수 / 부서장' },
+  { id: 'u3', label: '부서명 / 이영희 / 파트장' },
+];
+
+interface CardFormProps {
+  mode: 'create' | 'edit';
+  card?: CardType;
+  onSubmit: (data: CardFormData) => void;
+}
+
+export function CardForm({ mode, card, onSubmit }: CardFormProps) {
+  const router = useRouter();
+  const [formData, setFormData] = useState<CardFormData>({
+    cardCompany: '',
+    cardNumber: '',
+    cardName: '',
+    expiryDate: '',
+    pinPrefix: '',
+    status: 'active',
+    userId: '',
+  });
+
+  // 수정 모드일 때 기존 데이터 로드
+  useEffect(() => {
+    if (mode === 'edit' && card) {
+      setFormData({
+        cardCompany: card.cardCompany,
+        cardNumber: card.cardNumber,
+        cardName: card.cardName,
+        expiryDate: card.expiryDate,
+        pinPrefix: card.pinPrefix,
+        status: card.status,
+        userId: card.user?.id || '',
+      });
+    }
+  }, [mode, card]);
+
+  const handleBack = () => {
+    if (mode === 'edit' && card) {
+      router.push(`/ko/hr/card-management/${card.id}`);
+    } else {
+      router.push('/ko/hr/card-management');
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  // 카드번호 포맷팅 (1234-1234-1234-1234)
+  const handleCardNumberChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 16);
+    const parts = digits.match(/.{1,4}/g) || [];
+    const formatted = parts.join('-');
+    setFormData(prev => ({ ...prev, cardNumber: formatted }));
+  };
+
+  // 유효기간 포맷팅 (MMYY)
+  const handleExpiryDateChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 4);
+    setFormData(prev => ({ ...prev, expiryDate: digits }));
+  };
+
+  // 비밀번호 앞 2자리
+  const handlePinPrefixChange = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 2);
+    setFormData(prev => ({ ...prev, pinPrefix: digits }));
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title={mode === 'create' ? '카드 등록' : '카드 수정'}
+        description={mode === 'create' ? '새로운 카드를 등록합니다' : '카드 정보를 수정합니다'}
+        icon={CreditCard}
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="cardCompany">카드사</Label>
+                <Select
+                  value={formData.cardCompany}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, cardCompany: value as CardCompany }))}
+                >
+                  <SelectTrigger id="cardCompany">
+                    <SelectValue placeholder="카드사를 선택하세요" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CARD_COMPANIES.map((company) => (
+                      <SelectItem key={company.value} value={company.value}>
+                        {company.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardNumber">카드번호</Label>
+                <Input
+                  id="cardNumber"
+                  value={formData.cardNumber}
+                  onChange={(e) => handleCardNumberChange(e.target.value)}
+                  placeholder="1234-1234-1234-1234"
+                  maxLength={19}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiryDate">유효기간</Label>
+                <Input
+                  id="expiryDate"
+                  value={formData.expiryDate}
+                  onChange={(e) => handleExpiryDateChange(e.target.value)}
+                  placeholder="MMYY"
+                  maxLength={4}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="pinPrefix">카드 비밀번호 앞 2자리</Label>
+                <Input
+                  id="pinPrefix"
+                  type="password"
+                  value={formData.pinPrefix}
+                  onChange={(e) => handlePinPrefixChange(e.target.value)}
+                  placeholder="**"
+                  maxLength={2}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cardName">카드명</Label>
+                <Input
+                  id="cardName"
+                  value={formData.cardName}
+                  onChange={(e) => setFormData(prev => ({ ...prev, cardName: e.target.value }))}
+                  placeholder="카드명을 입력해주세요"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="status">상태</Label>
+                <Select
+                  value={formData.status}
+                  onValueChange={(value) => setFormData(prev => ({ ...prev, status: value as CardStatus }))}
+                >
+                  <SelectTrigger id="status">
+                    <SelectValue placeholder="상태 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="active">{CARD_STATUS_LABELS.active}</SelectItem>
+                    <SelectItem value="suspended">{CARD_STATUS_LABELS.suspended}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">사용자 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <Label htmlFor="userId">부서 / 이름 / 직책</Label>
+              <Select
+                value={formData.userId}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, userId: value }))}
+              >
+                <SelectTrigger id="userId">
+                  <SelectValue placeholder="선택해서 해당 카드의 사용자로 설정" />
+                </SelectTrigger>
+                <SelectContent>
+                  {mockUsers.map((user) => (
+                    <SelectItem key={user.id} value={user.id}>
+                      {user.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button type="button" variant="outline" onClick={handleBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            취소
+          </Button>
+          <Button type="submit">
+            <Save className="w-4 h-4 mr-2" />
+            {mode === 'create' ? '등록' : '저장'}
+          </Button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}

src/components/hr/CardManagement/index.tsx

@@ -0,0 +1,461 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { CreditCard, Edit, Trash2, Plus } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  IntegratedListTemplateV2,
+  type TabOption,
+  type TableColumn,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import type { Card, CardStatus } from './types';
+import {
+  CARD_STATUS_LABELS,
+  CARD_STATUS_COLORS,
+  getCardCompanyLabel,
+} from './types';
+
+// 카드번호 마스킹 (가운데 숨김)
+const maskCardNumber = (cardNumber: string): string => {
+  const parts = cardNumber.split('-');
+  if (parts.length === 4) {
+    return `${parts[0]}-****-****-${parts[3]}`;
+  }
+  return cardNumber;
+};
+
+// Mock 데이터
+const mockCards: Card[] = [
+  {
+    id: '1',
+    cardCompany: 'shinhan',
+    cardNumber: '1234-5678-9012-3456',
+    cardName: '법인카드1',
+    expiryDate: '0327',
+    pinPrefix: '12',
+    status: 'active',
+    user: {
+      id: 'u1',
+      departmentId: 'd1',
+      departmentName: '부서명',
+      employeeId: 'e1',
+      employeeName: '부여직원',
+      positionId: 'p1',
+      positionName: '부서장',
+    },
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: '2',
+    cardCompany: 'kb',
+    cardNumber: '1234-5678-9012-3456',
+    cardName: '국민카드',
+    expiryDate: '0528',
+    pinPrefix: '34',
+    status: 'active',
+    user: {
+      id: 'u2',
+      departmentId: 'd2',
+      departmentName: '부서명',
+      employeeId: 'e2',
+      employeeName: '부여직원',
+      positionId: 'p2',
+      positionName: '팀장',
+    },
+    createdAt: '2024-02-01T00:00:00Z',
+    updatedAt: '2024-02-01T00:00:00Z',
+  },
+  {
+    id: '3',
+    cardCompany: 'shinhan',
+    cardNumber: '1234-5678-9012-3456',
+    cardName: '신한카드',
+    expiryDate: '0426',
+    pinPrefix: '56',
+    status: 'suspended',
+    user: {
+      id: 'u3',
+      departmentId: 'd1',
+      departmentName: '부서명',
+      employeeId: 'e3',
+      employeeName: '부여직원',
+      positionId: 'p3',
+      positionName: '부서장',
+    },
+    createdAt: '2024-03-01T00:00:00Z',
+    updatedAt: '2024-03-01T00:00:00Z',
+  },
+];
+
+// 추가 Mock 데이터 생성
+const generateMockCards = (): Card[] => {
+  const cards: Card[] = [...mockCards];
+  const companies: Array<'shinhan' | 'kb' | 'samsung' | 'hyundai' | 'lotte'> = ['shinhan', 'kb', 'samsung', 'hyundai', 'lotte'];
+  const departments = ['부서명'];
+  const positions = ['팀장', '부서장', '파트장'];
+
+  for (let i = 4; i <= 15; i++) {
+    const status: CardStatus = i % 5 === 0 ? 'suspended' : 'active';
+    cards.push({
+      id: String(i),
+      cardCompany: companies[i % companies.length],
+      cardNumber: `1234-5678-9012-${String(i).padStart(4, '0')}`,
+      cardName: `법인카드${i}`,
+      expiryDate: `0${(i % 12) + 1}27`,
+      pinPrefix: String(i).padStart(2, '0'),
+      status,
+      user: {
+        id: `u${i}`,
+        departmentId: `d${(i % 3) + 1}`,
+        departmentName: departments[0],
+        employeeId: `e${i}`,
+        employeeName: '부여직원',
+        positionId: `p${(i % 3) + 1}`,
+        positionName: positions[i % positions.length],
+      },
+      createdAt: '2024-01-01T00:00:00Z',
+      updatedAt: '2024-01-01T00:00:00Z',
+    });
+  }
+  return cards;
+};
+
+export function CardManagement() {
+  const router = useRouter();
+
+  // 카드 데이터 상태
+  const [cards, setCards] = useState<Card[]>(generateMockCards);
+
+  // 검색 및 필터 상태
+  const [searchValue, setSearchValue] = useState('');
+  const [activeTab, setActiveTab] = useState<string>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
+
+  // 다이얼로그 상태
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [cardToDelete, setCardToDelete] = useState<Card | null>(null);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+  // 필터링된 데이터
+  const filteredCards = useMemo(() => {
+    let filtered = cards;
+
+    // 탭 필터 (상태)
+    if (activeTab !== 'all') {
+      filtered = filtered.filter(c => c.status === activeTab);
+    }
+
+    // 검색 필터
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      filtered = filtered.filter(c =>
+        c.cardName.toLowerCase().includes(search) ||
+        c.cardNumber.includes(search) ||
+        getCardCompanyLabel(c.cardCompany).toLowerCase().includes(search) ||
+        c.user?.employeeName.toLowerCase().includes(search)
+      );
+    }
+
+    return filtered;
+  }, [cards, activeTab, searchValue]);
+
+  // 페이지네이션된 데이터
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredCards.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredCards, currentPage, itemsPerPage]);
+
+  // 통계 계산
+  const stats = useMemo(() => {
+    const activeCount = cards.filter(c => c.status === 'active').length;
+    const suspendedCount = cards.filter(c => c.status === 'suspended').length;
+    return { activeCount, suspendedCount };
+  }, [cards]);
+
+  // 탭 옵션
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'all', label: '전체', count: cards.length, color: 'gray' },
+    { value: 'active', label: '사용', count: stats.activeCount, color: 'green' },
+    { value: 'suspended', label: '정지', count: stats.suspendedCount, color: 'red' },
+  ], [cards.length, stats]);
+
+  // 테이블 컬럼 정의
+  const tableColumns: TableColumn[] = useMemo(() => [
+    { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
+    { key: 'cardCompany', label: '카드사', className: 'min-w-[100px]' },
+    { key: 'cardNumber', label: '카드번호', className: 'min-w-[160px]' },
+    { key: 'cardName', label: '카드명', className: 'min-w-[120px]' },
+    { key: 'status', label: '상태', className: 'min-w-[80px]' },
+    { key: 'department', label: '부서', className: 'min-w-[100px]' },
+    { key: 'userName', label: '사용자', className: 'min-w-[100px]' },
+    { key: 'position', label: '직책', className: 'min-w-[100px]' },
+    { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
+  ], []);
+
+  // 체크박스 토글
+  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 === paginatedData.length && paginatedData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      const allIds = new Set(paginatedData.map((item) => item.id));
+      setSelectedItems(allIds);
+    }
+  }, [selectedItems.size, paginatedData]);
+
+  // 일괄 삭제 핸들러
+  const handleBulkDelete = useCallback(() => {
+    const ids = Array.from(selectedItems);
+    setCards(prev => prev.filter(card => !ids.includes(card.id)));
+    setSelectedItems(new Set());
+  }, [selectedItems]);
+
+  // 핸들러
+  const handleAddCard = useCallback(() => {
+    router.push('/ko/hr/card-management/new');
+  }, [router]);
+
+  const handleDeleteCard = useCallback(() => {
+    if (cardToDelete) {
+      setCards(prev => prev.filter(card => card.id !== cardToDelete.id));
+      setDeleteDialogOpen(false);
+      setCardToDelete(null);
+    }
+  }, [cardToDelete]);
+
+  const handleRowClick = useCallback((row: Card) => {
+    router.push(`/ko/hr/card-management/${row.id}`);
+  }, [router]);
+
+  const handleEdit = useCallback((id: string) => {
+    router.push(`/ko/hr/card-management/${id}/edit`);
+  }, [router]);
+
+  const openDeleteDialog = useCallback((card: Card) => {
+    setCardToDelete(card);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  // 테이블 행 렌더링
+  const renderTableRow = useCallback((item: Card, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    return (
+      <TableRow
+        key={item.id}
+        className="hover:bg-muted/50 cursor-pointer"
+        onClick={() => handleRowClick(item)}
+      >
+        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => toggleSelection(item.id)}
+          />
+        </TableCell>
+        <TableCell className="text-muted-foreground text-center">
+          {globalIndex}
+        </TableCell>
+        <TableCell>{getCardCompanyLabel(item.cardCompany)}</TableCell>
+        <TableCell className="font-mono">{maskCardNumber(item.cardNumber)}</TableCell>
+        <TableCell>{item.cardName}</TableCell>
+        <TableCell>
+          <Badge className={CARD_STATUS_COLORS[item.status]}>
+            {CARD_STATUS_LABELS[item.status]}
+          </Badge>
+        </TableCell>
+        <TableCell>{item.user?.departmentName || '-'}</TableCell>
+        <TableCell>{item.user?.employeeName || '-'}</TableCell>
+        <TableCell>{item.user?.positionName || '-'}</TableCell>
+        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+          {isSelected && (
+            <div className="flex items-center justify-end gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleEdit(item.id)}
+                title="수정"
+              >
+                <Edit className="w-4 h-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => openDeleteDialog(item)}
+                title="삭제"
+              >
+                <Trash2 className="w-4 h-4 text-red-500" />
+              </Button>
+            </div>
+          )}
+        </TableCell>
+      </TableRow>
+    );
+  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);
+
+  // 모바일 카드 렌더링
+  const renderMobileCard = useCallback((
+    item: Card,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    return (
+      <ListMobileCard
+        id={item.id}
+        title={item.cardName}
+        headerBadges={
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="outline" className="text-xs">
+              #{globalIndex}
+            </Badge>
+            <span className="text-xs text-muted-foreground">
+              {getCardCompanyLabel(item.cardCompany)}
+            </span>
+          </div>
+        }
+        statusBadge={
+          <Badge className={CARD_STATUS_COLORS[item.status]}>
+            {CARD_STATUS_LABELS[item.status]}
+          </Badge>
+        }
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        onCardClick={() => handleRowClick(item)}
+        infoGrid={
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <InfoField label="카드번호" value={maskCardNumber(item.cardNumber)} />
+            <InfoField label="유효기간" value={`${item.expiryDate.slice(0, 2)}/${item.expiryDate.slice(2)}`} />
+            <InfoField label="부서" value={item.user?.departmentName || '-'} />
+            <InfoField label="사용자" value={item.user?.employeeName || '-'} />
+            <InfoField label="직책" value={item.user?.positionName || '-'} />
+          </div>
+        }
+        actions={
+          isSelected ? (
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                variant="default"
+                size="default"
+                className="flex-1 min-w-[100px] h-11"
+                onClick={(e) => { e.stopPropagation(); handleEdit(item.id); }}
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                수정
+              </Button>
+              <Button
+                variant="outline"
+                size="default"
+                className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
+                onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                삭제
+              </Button>
+            </div>
+          ) : undefined
+        }
+      />
+    );
+  }, [handleRowClick, handleEdit, openDeleteDialog]);
+
+  // 헤더 액션
+  const headerActions = (
+    <Button onClick={handleAddCard}>
+      <Plus className="w-4 h-4 mr-2" />
+      카드 등록
+    </Button>
+  );
+
+  // 페이지네이션 설정
+  const totalPages = Math.ceil(filteredCards.length / itemsPerPage);
+
+  return (
+    <>
+      <IntegratedListTemplateV2<Card>
+        title="카드관리"
+        description="카드 목록을 관리합니다"
+        icon={CreditCard}
+        headerActions={headerActions}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        searchPlaceholder="카드명, 카드번호, 카드사, 사용자 검색..."
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        tableColumns={tableColumns}
+        data={paginatedData}
+        totalCount={filteredCards.length}
+        allData={filteredCards}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        onBulkDelete={handleBulkDelete}
+        getItemId={(item) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: filteredCards.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 삭제 확인 다이얼로그 */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>카드 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{cardToDelete?.cardName}&quot; 카드를 삭제하시겠습니까?
+              <br />
+              <span className="text-destructive">
+                삭제된 카드 정보는 복구할 수 없습니다.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteCard}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

src/components/hr/CardManagement/types.ts

@@ -0,0 +1,72 @@
+// 카드 상태
+export type CardStatus = 'active' | 'suspended';
+
+// 카드 상태 레이블
+export const CARD_STATUS_LABELS: Record<CardStatus, string> = {
+  active: '사용',
+  suspended: '정지',
+};
+
+// 카드 상태 색상
+export const CARD_STATUS_COLORS: Record<CardStatus, string> = {
+  active: 'bg-green-100 text-green-800',
+  suspended: 'bg-red-100 text-red-800',
+};
+
+// 카드사 목록
+export const CARD_COMPANIES = [
+  { value: 'shinhan', label: '신한카드' },
+  { value: 'kb', label: 'KB국민카드' },
+  { value: 'samsung', label: '삼성카드' },
+  { value: 'hyundai', label: '현대카드' },
+  { value: 'lotte', label: '롯데카드' },
+  { value: 'bc', label: 'BC카드' },
+  { value: 'woori', label: '우리카드' },
+  { value: 'hana', label: '하나카드' },
+  { value: 'nh', label: 'NH농협카드' },
+  { value: 'ibk', label: 'IBK기업은행' },
+] as const;
+
+export type CardCompany = typeof CARD_COMPANIES[number]['value'];
+
+// 카드 사용자 정보
+export interface CardUser {
+  id: string;
+  departmentId: string;
+  departmentName: string;
+  employeeId: string;
+  employeeName: string;
+  positionId: string;
+  positionName: string;
+}
+
+// 카드 정보
+export interface Card {
+  id: string;
+  cardCompany: CardCompany;
+  cardNumber: string;          // 1234-1234-1234-1234
+  cardName: string;            // 카드명
+  expiryDate: string;          // MMYY
+  pinPrefix: string;           // 비밀번호 앞 2자리
+  status: CardStatus;
+  user?: CardUser;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 카드 폼 데이터
+export interface CardFormData {
+  cardCompany: CardCompany | '';
+  cardNumber: string;
+  cardName: string;
+  expiryDate: string;
+  pinPrefix: string;
+  status: CardStatus;
+  userId?: string;
+}
+
+// 카드사 레이블 가져오기
+export const getCardCompanyLabel = (value: CardCompany): string => {
+  const company = CARD_COMPANIES.find(c => c.value === value);
+  return company?.label || value;
+};

src/components/hr/EmployeeManagement/EmployeeDetail.tsx

@@ -151,6 +151,30 @@ export function EmployeeDetail({ employee, onEdit, onDelete }: EmployeeDetailPro
                   </dd>
                 </div>
               )}
+              {employee.clockInLocation && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">출근 위치</dt>
+                  <dd className="text-sm mt-1">{employee.clockInLocation}</dd>
+                </div>
+              )}
+              {employee.clockOutLocation && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">퇴근 위치</dt>
+                  <dd className="text-sm mt-1">{employee.clockOutLocation}</dd>
+                </div>
+              )}
+              {employee.concurrentPosition && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">겸서</dt>
+                  <dd className="text-sm mt-1">{employee.concurrentPosition}</dd>
+                </div>
+              )}
+              {employee.concurrentReason && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">겸직사유</dt>
+                  <dd className="text-sm mt-1">{employee.concurrentReason}</dd>
+                </div>
+              )}
             </dl>
           </CardContent>
         </Card>

src/components/hr/EmployeeManagement/EmployeeForm.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import Image from 'next/image';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -16,8 +15,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Users, Plus, Trash2, ArrowLeft, Save, Camera, User } from 'lucide-react';
+import { Users, Plus, Trash2, ArrowLeft, Save, Settings, Camera } from 'lucide-react';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { FieldSettingsDialog } from './FieldSettingsDialog';
 import type {
   Employee,
   EmployeeFormData,
@@ -56,6 +56,10 @@ const initialFormData: EmployeeFormData = {
   rank: '',
   status: 'active',
   departmentPositions: [],
+  clockInLocation: '',
+  clockOutLocation: '',
+  resignationDate: '',
+  resignationReason: '',
   hasUserAccount: false,
   userId: '',
   password: '',
@@ -68,15 +72,35 @@ export function EmployeeForm({
   mode,
   employee,
   onSave,
-  fieldSettings = DEFAULT_FIELD_SETTINGS,
+  fieldSettings: initialFieldSettings = DEFAULT_FIELD_SETTINGS,
 }: EmployeeFormProps) {
   const router = useRouter();
   const [formData, setFormData] = useState<EmployeeFormData>(initialFormData);
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 항목 설정 상태
+  const [showFieldSettings, setShowFieldSettings] = useState(false);
+  const [fieldSettings, setFieldSettings] = useState<FieldSettings>(initialFieldSettings);
 
   const title = mode === 'create' ? '사원 등록' : '사원 수정';
 
+  // localStorage에서 항목 설정 로드
+  useEffect(() => {
+    const saved = localStorage.getItem('employeeFieldSettings');
+    if (saved) {
+      try {
+        setFieldSettings(JSON.parse(saved));
+      } catch {
+        // ignore parse error
+      }
+    }
+  }, []);
+
+  // 항목 설정 저장
+  const handleSaveFieldSettings = (newSettings: FieldSettings) => {
+    setFieldSettings(newSettings);
+    localStorage.setItem('employeeFieldSettings', JSON.stringify(newSettings));
+  };
+
   // 데이터 초기화
   useEffect(() => {
     if (employee && mode === 'edit') {
@@ -96,6 +120,10 @@ export function EmployeeForm({
         rank: employee.rank || '',
         status: employee.status,
         departmentPositions: employee.departmentPositions || [],
+        clockInLocation: employee.clockInLocation || '',
+        clockOutLocation: employee.clockOutLocation || '',
+        resignationDate: employee.resignationDate || '',
+        resignationReason: employee.resignationReason || '',
         hasUserAccount: !!employee.userInfo,
         userId: employee.userInfo?.userId || '',
         password: '',
@@ -155,35 +183,24 @@ export function EmployeeForm({
     router.back();
   };
 
-  // 프로필 이미지 업로드 핸들러
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreviewImage(reader.result as string);
-        handleChange('profileImage', reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  // 프로필 이미지 삭제 핸들러
-  const handleRemoveImage = () => {
-    setPreviewImage(null);
-    handleChange('profileImage', '');
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
   return (
     <PageLayout>
-      <PageHeader
-        title={title}
-        description={mode === 'create' ? '새로운 사원 정보를 입력합니다' : '사원 정보를 수정합니다'}
-        icon={Users}
-      />
+      {/* 헤더 + 버튼 영역 */}
+      <div className="flex items-start justify-between mb-6">
+        <PageHeader
+          title={title}
+          description={mode === 'create' ? '새로운 사원 정보를 입력합니다' : '사원 정보를 수정합니다'}
+          icon={Users}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setShowFieldSettings(true)}
+        >
+          <Settings className="w-4 h-4 mr-2" />
+          항목 설정
+        </Button>
+      </div>
 
       <form onSubmit={handleSubmit} className="space-y-6">
         {/* 사원 정보 - 프로필 사진 + 기본 정보 */}
@@ -192,56 +209,8 @@ export function EmployeeForm({
             <CardTitle className="text-base font-medium">사원 정보</CardTitle>
           </CardHeader>
           <CardContent className="pt-6">
-            <div className="flex flex-col md:flex-row gap-6">
-              {/* 프로필 사진 영역 */}
-              {fieldSettings.showProfileImage && (
-                <div className="flex flex-col items-center gap-3">
-                  <div className="relative w-32 h-32 rounded-full border-2 border-dashed border-gray-300 bg-gray-50 flex items-center justify-center overflow-hidden">
-                    {previewImage || formData.profileImage ? (
-                      <Image
-                        src={previewImage || formData.profileImage}
-                        alt="프로필 사진"
-                        fill
-                        className="object-cover"
-                      />
-                    ) : (
-                      <User className="w-12 h-12 text-gray-400" />
-                    )}
-                  </div>
-                  <div className="flex gap-2">
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/*"
-                      onChange={handleImageUpload}
-                      className="hidden"
-                      id="profile-image-input"
-                    />
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <Camera className="w-4 h-4 mr-1" />
-                      사진 등록
-                    </Button>
-                    {(previewImage || formData.profileImage) && (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={handleRemoveImage}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {/* 기본 정보 필드들 */}
-              <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* 기본 정보 필드들 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="name">이름 *</Label>
                   <Input
@@ -294,7 +263,6 @@ export function EmployeeForm({
                     placeholder="연봉 (원)"
                   />
                 </div>
-              </div>
             </div>
 
             {/* 급여 계좌 */}
@@ -321,77 +289,111 @@ export function EmployeeForm({
           </CardContent>
         </Card>
 
-        {/* 선택 정보 (사원 상세) */}
-        {(fieldSettings.showEmployeeCode || fieldSettings.showGender || fieldSettings.showAddress) && (
+        {/* 사원 상세 */}
+        {(fieldSettings.showProfileImage || fieldSettings.showEmployeeCode || fieldSettings.showGender || fieldSettings.showAddress) && (
           <Card>
             <CardHeader className="bg-black text-white rounded-t-lg">
-              <CardTitle className="text-base font-medium">선택 정보</CardTitle>
+              <CardTitle className="text-base font-medium">사원 상세</CardTitle>
             </CardHeader>
             <CardContent className="pt-6 space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {fieldSettings.showEmployeeCode && (
-                  <div className="space-y-2">
-                    <Label htmlFor="employeeCode">사원코드</Label>
-                    <Input
-                      id="employeeCode"
-                      value={formData.employeeCode}
-                      onChange={(e) => handleChange('employeeCode', e.target.value)}
-                      placeholder="자동생성 또는 직접입력"
-                    />
+              {/* 프로필 사진 + 사원코드/성별 */}
+              <div className="flex gap-6">
+                {/* 프로필 사진 영역 */}
+                {fieldSettings.showProfileImage && (
+                  <div className="space-y-2 flex-shrink-0">
+                    <Label>프로필 사진</Label>
+                    <div className="w-32 h-32 border border-dashed border-gray-300 rounded-md flex flex-col items-center justify-center bg-gray-50 relative cursor-pointer hover:bg-gray-100">
+                      <span className="text-sm text-gray-400 mb-1">IMG</span>
+                      <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+                        <Camera className="w-4 h-4 text-gray-500" />
+                      </div>
+                      <input
+                        type="file"
+                        accept="image/png,image/jpeg,image/gif"
+                        className="absolute inset-0 opacity-0 cursor-pointer"
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            // TODO: 파일 업로드 처리
+                            handleChange('profileImage', URL.createObjectURL(file));
+                          }
+                        }}
+                      />
+                    </div>
+                    <p className="text-xs text-gray-500">
+                      1 250 X 250px, 10MB 이하의<br />PNG, JPEG, GIF
+                    </p>
                   </div>
                 )}
 
-                {fieldSettings.showGender && (
-                  <div className="space-y-2">
-                    <Label htmlFor="gender">성별</Label>
-                    <Select
-                      value={formData.gender}
-                      onValueChange={(value) => handleChange('gender', value)}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="성별 선택" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {Object.entries(GENDER_LABELS).map(([value, label]) => (
-                          <SelectItem key={value} value={value}>{label}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                )}
-              </div>
+                {/* 사원코드, 성별 */}
+                <div className="flex-1 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {fieldSettings.showEmployeeCode && (
+                      <div className="space-y-2">
+                        <Label htmlFor="employeeCode">사원코드</Label>
+                        <Input
+                          id="employeeCode"
+                          value={formData.employeeCode}
+                          onChange={(e) => handleChange('employeeCode', e.target.value)}
+                          placeholder="사원코드를 입력해주세요"
+                        />
+                      </div>
+                    )}
 
-              {fieldSettings.showAddress && (
-                <div className="space-y-2">
-                  <Label>주소</Label>
-                  <div className="flex gap-2">
-                    <Input
-                      value={formData.address.zipCode}
-                      onChange={(e) => handleChange('address', { ...formData.address, zipCode: e.target.value })}
-                      placeholder="우편번호"
-                      className="w-32"
-                    />
-                    <Button type="button" variant="outline" size="sm">
-                      우편번호 찾기
-                    </Button>
+                    {fieldSettings.showGender && (
+                      <div className="space-y-2">
+                        <Label>성별</Label>
+                        <RadioGroup
+                          value={formData.gender}
+                          onValueChange={(value) => handleChange('gender', value)}
+                          className="flex items-center gap-4 h-10"
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="male" id="gender-male" />
+                            <Label htmlFor="gender-male" className="font-normal cursor-pointer">남성</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="female" id="gender-female" />
+                            <Label htmlFor="gender-female" className="font-normal cursor-pointer">여성</Label>
+                          </div>
+                        </RadioGroup>
+                      </div>
+                    )}
                   </div>
-                  <Input
-                    value={formData.address.address1}
-                    onChange={(e) => handleChange('address', { ...formData.address, address1: e.target.value })}
-                    placeholder="기본주소"
-                  />
-                  <Input
-                    value={formData.address.address2}
-                    onChange={(e) => handleChange('address', { ...formData.address, address2: e.target.value })}
-                    placeholder="상세주소"
-                  />
+
+                  {/* 주소 (사원코드/성별 아래) */}
+                  {fieldSettings.showAddress && (
+                    <div className="space-y-2">
+                      <Label>주소</Label>
+                      <div className="flex gap-2">
+                        <Button type="button" variant="default" size="sm" className="bg-blue-500 hover:bg-blue-600">
+                          우편번호 찾기
+                        </Button>
+                        <Input
+                          value={formData.address.zipCode}
+                          onChange={(e) => handleChange('address', { ...formData.address, zipCode: e.target.value })}
+                          placeholder=""
+                          className="w-24"
+                          readOnly
+                        />
+                        <Input
+                          value={formData.address.address2}
+                          onChange={(e) => handleChange('address', { ...formData.address, address2: e.target.value })}
+                          placeholder="상세주소를 입력해주세요"
+                          className="flex-1"
+                        />
+                      </div>
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
             </CardContent>
           </Card>
         )}
 
         {/* 인사 정보 */}
+        {(fieldSettings.showHireDate || fieldSettings.showEmploymentType || fieldSettings.showRank || fieldSettings.showStatus || fieldSettings.showDepartment || fieldSettings.showPosition || fieldSettings.showClockInLocation || fieldSettings.showClockOutLocation || fieldSettings.showResignationDate || fieldSettings.showResignationReason) && (
         <Card>
           <CardHeader className="bg-black text-white rounded-t-lg">
             <CardTitle className="text-base font-medium">인사 정보</CardTitle>
@@ -511,104 +513,161 @@ export function EmployeeForm({
                 )}
               </div>
             )}
+
+            {/* 출근/퇴근 위치 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {fieldSettings.showClockInLocation && (
+                <div className="space-y-2">
+                  <Label htmlFor="clockInLocation">출근 위치</Label>
+                  <Select
+                    value={formData.clockInLocation}
+                    onValueChange={(value) => handleChange('clockInLocation', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="출근 위치 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="headquarters">본사</SelectItem>
+                      <SelectItem value="branch1">지사1</SelectItem>
+                      <SelectItem value="branch2">지사2</SelectItem>
+                      <SelectItem value="remote">재택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {fieldSettings.showClockOutLocation && (
+                <div className="space-y-2">
+                  <Label htmlFor="clockOutLocation">퇴근 위치</Label>
+                  <Select
+                    value={formData.clockOutLocation}
+                    onValueChange={(value) => handleChange('clockOutLocation', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="퇴근 위치 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="headquarters">본사</SelectItem>
+                      <SelectItem value="branch1">지사1</SelectItem>
+                      <SelectItem value="branch2">지사2</SelectItem>
+                      <SelectItem value="remote">재택</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            {/* 퇴사일/퇴직사유 */}
+            {(fieldSettings.showResignationDate || fieldSettings.showResignationReason) && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {fieldSettings.showResignationDate && (
+                  <div className="space-y-2">
+                    <Label htmlFor="resignationDate">퇴사일</Label>
+                    <Input
+                      id="resignationDate"
+                      type="date"
+                      value={formData.resignationDate}
+                      onChange={(e) => handleChange('resignationDate', e.target.value)}
+                    />
+                  </div>
+                )}
+
+                {fieldSettings.showResignationReason && (
+                  <div className="space-y-2">
+                    <Label htmlFor="resignationReason">퇴직사유</Label>
+                    <Input
+                      id="resignationReason"
+                      value={formData.resignationReason}
+                      onChange={(e) => handleChange('resignationReason', e.target.value)}
+                      placeholder="퇴직 사유를 입력하세요"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
           </CardContent>
         </Card>
+        )}
 
         {/* 사용자 정보 */}
         <Card>
           <CardHeader className="bg-black text-white rounded-t-lg">
-            <div className="flex items-center justify-between">
-              <CardTitle className="text-base font-medium">사용자 정보</CardTitle>
-              <div className="flex items-center gap-2">
-                <Switch
-                  id="hasUserAccount"
-                  checked={formData.hasUserAccount}
-                  onCheckedChange={(checked) => handleChange('hasUserAccount', checked)}
-                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
+            <CardTitle className="text-base font-medium">사용자 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="userId">아이디 *</Label>
+                <Input
+                  id="userId"
+                  value={formData.userId}
+                  onChange={(e) => handleChange('userId', e.target.value)}
+                  placeholder="사용자 아이디"
                 />
-                <Label htmlFor="hasUserAccount" className="text-sm font-normal text-white">
-                  사용자 계정 생성
-                </Label>
+              </div>
+
+              {mode === 'create' && (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="password">비밀번호 *</Label>
+                    <Input
+                      id="password"
+                      type="password"
+                      value={formData.password}
+                      onChange={(e) => handleChange('password', e.target.value)}
+                      placeholder="비밀번호"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="confirmPassword">비밀번호 확인</Label>
+                    <Input
+                      id="confirmPassword"
+                      type="password"
+                      value={formData.confirmPassword}
+                      onChange={(e) => handleChange('confirmPassword', e.target.value)}
+                      placeholder="비밀번호 확인"
+                    />
+                  </div>
+                </>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="role">권한</Label>
+                <Select
+                  value={formData.role}
+                  onValueChange={(value) => handleChange('role', value)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="권한 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(USER_ROLE_LABELS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>{label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="accountStatus">계정상태</Label>
+                <Select
+                  value={formData.accountStatus}
+                  onValueChange={(value) => handleChange('accountStatus', value)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="상태 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(USER_ACCOUNT_STATUS_LABELS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>{label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
             </div>
-          </CardHeader>
-          {formData.hasUserAccount && (
-            <CardContent className="pt-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="userId">아이디 *</Label>
-                  <Input
-                    id="userId"
-                    value={formData.userId}
-                    onChange={(e) => handleChange('userId', e.target.value)}
-                    placeholder="사용자 아이디"
-                    required={formData.hasUserAccount}
-                  />
-                </div>
-
-                {mode === 'create' && (
-                  <>
-                    <div className="space-y-2">
-                      <Label htmlFor="password">비밀번호 *</Label>
-                      <Input
-                        id="password"
-                        type="password"
-                        value={formData.password}
-                        onChange={(e) => handleChange('password', e.target.value)}
-                        placeholder="비밀번호"
-                        required={formData.hasUserAccount}
-                      />
-                    </div>
-
-                    <div className="space-y-2">
-                      <Label htmlFor="confirmPassword">비밀번호 확인</Label>
-                      <Input
-                        id="confirmPassword"
-                        type="password"
-                        value={formData.confirmPassword}
-                        onChange={(e) => handleChange('confirmPassword', e.target.value)}
-                        placeholder="비밀번호 확인"
-                      />
-                    </div>
-                  </>
-                )}
-
-                <div className="space-y-2">
-                  <Label htmlFor="role">권한</Label>
-                  <Select
-                    value={formData.role}
-                    onValueChange={(value) => handleChange('role', value)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="권한 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Object.entries(USER_ROLE_LABELS).map(([value, label]) => (
-                        <SelectItem key={value} value={value}>{label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="accountStatus">계정상태</Label>
-                  <Select
-                    value={formData.accountStatus}
-                    onValueChange={(value) => handleChange('accountStatus', value)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="상태 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Object.entries(USER_ACCOUNT_STATUS_LABELS).map(([value, label]) => (
-                        <SelectItem key={value} value={value}>{label}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            </CardContent>
-          )}
+          </CardContent>
         </Card>
 
         {/* 버튼 영역 */}
@@ -623,6 +682,14 @@ export function EmployeeForm({
           </Button>
         </div>
       </form>
+
+      {/* 항목 설정 모달 */}
+      <FieldSettingsDialog
+        open={showFieldSettings}
+        onOpenChange={setShowFieldSettings}
+        settings={fieldSettings}
+        onSave={handleSaveFieldSettings}
+      />
     </PageLayout>
   );
 }

src/components/hr/EmployeeManagement/FieldSettingsDialog.tsx

@@ -58,7 +58,7 @@ export function FieldSettingsDialog({
 
   // 인사 정보 전체 토글
   const hrInfoFields: (keyof FieldSettings)[] = [
-    'showHireDate', 'showEmploymentType', 'showRank', 'showStatus', 'showDepartment', 'showPosition'
+    'showHireDate', 'showEmploymentType', 'showRank', 'showStatus', 'showDepartment', 'showPosition', 'showClockInLocation', 'showClockOutLocation', 'showResignationDate', 'showResignationReason'
   ];
   const isAllHrInfoOn = useMemo(() =>
     hrInfoFields.every(key => localSettings[key]),
@@ -204,6 +204,42 @@ export function FieldSettingsDialog({
                   onCheckedChange={() => handleToggle('showPosition')}
                 />
               </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showClockInLocation">출근 위치</Label>
+                <Switch
+                  id="showClockInLocation"
+                  checked={localSettings.showClockInLocation}
+                  onCheckedChange={() => handleToggle('showClockInLocation')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showClockOutLocation">퇴근 위치</Label>
+                <Switch
+                  id="showClockOutLocation"
+                  checked={localSettings.showClockOutLocation}
+                  onCheckedChange={() => handleToggle('showClockOutLocation')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showResignationDate">퇴사일</Label>
+                <Switch
+                  id="showResignationDate"
+                  checked={localSettings.showResignationDate}
+                  onCheckedChange={() => handleToggle('showResignationDate')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showResignationReason">퇴직사유</Label>
+                <Switch
+                  id="showResignationReason"
+                  checked={localSettings.showResignationReason}
+                  onCheckedChange={() => handleToggle('showResignationReason')}
+                />
+              </div>
             </div>
           </Card>
         </div>

src/components/hr/EmployeeManagement/index.tsx

@@ -7,6 +7,13 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -23,6 +30,7 @@ import {
   type TableColumn,
   type StatCard,
 } from '@/components/templates/IntegratedListTemplateV2';
+import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { FieldSettingsDialog } from './FieldSettingsDialog';
 import { UserInviteDialog } from './UserInviteDialog';
@@ -38,6 +46,33 @@ import {
   USER_ROLE_LABELS,
 } from './types';
 
+// 필터 옵션 타입
+type FilterOption = 'all' | 'hasUserId' | 'noUserId' | 'active' | 'leave' | 'resigned';
+
+// 정렬 옵션 타입
+type SortOption = 'rank' | 'hireDateDesc' | 'hireDateAsc' | 'departmentAsc' | 'departmentDesc' | 'nameAsc' | 'nameDesc';
+
+// 필터 옵션 레이블
+const FILTER_OPTIONS: { value: FilterOption; label: string }[] = [
+  { value: 'all', label: '전체' },
+  { value: 'hasUserId', label: '사용자 아이디 보유' },
+  { value: 'noUserId', label: '사용자 아이디 미보유' },
+  { value: 'active', label: '재직' },
+  { value: 'leave', label: '휴직' },
+  { value: 'resigned', label: '퇴직' },
+];
+
+// 정렬 옵션 레이블
+const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+  { value: 'rank', label: '직급순' },
+  { value: 'hireDateDesc', label: '입사일 최신순' },
+  { value: 'hireDateAsc', label: '입사일 등록순' },
+  { value: 'departmentAsc', label: '부서 오름차순' },
+  { value: 'departmentDesc', label: '부서 내림차순' },
+  { value: 'nameAsc', label: '이름 오름차순' },
+  { value: 'nameDesc', label: '이름 내림차순' },
+];
+
 /**
  * Mock 데이터 - 실제 API 연동 전 테스트용
  */
@@ -107,6 +142,7 @@ const mockEmployees: Employee[] = [
 ];
 
 // 추가 mock 데이터 생성 (55명 재직, 5명 휴직, 1명 퇴직)
+// SSR Hydration 오류 방지: Math.random(), new Date() 대신 고정값 사용
 const generateMockEmployees = (): Employee[] => {
   const employees: Employee[] = [...mockEmployees];
   const departments = ['부서명'];
@@ -126,20 +162,20 @@ const generateMockEmployees = (): Employee[] => {
       departmentPositions: [
         {
           id: String(i),
-          departmentId: `d${Math.floor(1 + Math.random() * 5)}`,
+          departmentId: `d${(i % 5) + 1}`,
           departmentName: departments[0],
-          positionId: `p${Math.floor(1 + Math.random() * 3)}`,
-          positionName: positions[Math.floor(Math.random() * positions.length)],
+          positionId: `p${(i % 3) + 1}`,
+          positionName: positions[i % positions.length],
         }
       ],
       rank: ranks[0],
-      userInfo: Math.random() > 0.3 ? {
+      userInfo: i % 3 !== 0 ? {
         userId: `abc`,
         role: 'user',
         accountStatus: 'active',
       } : undefined,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
+      createdAt: '2025-01-01T00:00:00Z',
+      updatedAt: '2025-01-01T00:00:00Z',
     });
   }
   return employees;
@@ -157,6 +193,14 @@ export function EmployeeManagement() {
   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 [filterOption, setFilterOption] = useState<FilterOption>('all');
+  const [sortOption, setSortOption] = useState<SortOption>('rank');
+
   // 다이얼로그 상태
   const [fieldSettingsOpen, setFieldSettingsOpen] = useState(false);
   const [fieldSettings, setFieldSettings] = useState<FieldSettings>(DEFAULT_FIELD_SETTINGS);
@@ -174,6 +218,27 @@ export function EmployeeManagement() {
       filtered = filtered.filter(e => e.status === activeTab);
     }
 
+    // 셀렉트박스 필터
+    if (filterOption !== 'all') {
+      switch (filterOption) {
+        case 'hasUserId':
+          filtered = filtered.filter(e => e.userInfo?.userId);
+          break;
+        case 'noUserId':
+          filtered = filtered.filter(e => !e.userInfo?.userId);
+          break;
+        case 'active':
+          filtered = filtered.filter(e => e.status === 'active');
+          break;
+        case 'leave':
+          filtered = filtered.filter(e => e.status === 'leave');
+          break;
+        case 'resigned':
+          filtered = filtered.filter(e => e.status === 'resigned');
+          break;
+      }
+    }
+
     // 검색 필터
     if (searchValue) {
       const search = searchValue.toLowerCase();
@@ -184,8 +249,36 @@ export function EmployeeManagement() {
       );
     }
 
+    // 정렬
+    filtered = [...filtered].sort((a, b) => {
+      switch (sortOption) {
+        case 'rank':
+          // 직급 순서 정의 (높은 직급이 먼저)
+          const rankOrder: Record<string, number> = { '회장': 1, '사장': 2, '부사장': 3, '전무': 4, '상무': 5, '이사': 6, '부장': 7, '차장': 8, '과장': 9, '대리': 10, '주임': 11, '사원': 12 };
+          return (rankOrder[a.rank || ''] || 99) - (rankOrder[b.rank || ''] || 99);
+        case 'hireDateDesc':
+          return new Date(b.hireDate || 0).getTime() - new Date(a.hireDate || 0).getTime();
+        case 'hireDateAsc':
+          return new Date(a.hireDate || 0).getTime() - new Date(b.hireDate || 0).getTime();
+        case 'departmentAsc':
+          const deptA = a.departmentPositions?.[0]?.departmentName || '';
+          const deptB = b.departmentPositions?.[0]?.departmentName || '';
+          return deptA.localeCompare(deptB, 'ko');
+        case 'departmentDesc':
+          const deptA2 = a.departmentPositions?.[0]?.departmentName || '';
+          const deptB2 = b.departmentPositions?.[0]?.departmentName || '';
+          return deptB2.localeCompare(deptA2, 'ko');
+        case 'nameAsc':
+          return a.name.localeCompare(b.name, 'ko');
+        case 'nameDesc':
+          return b.name.localeCompare(a.name, 'ko');
+        default:
+          return 0;
+      }
+    });
+
     return filtered;
-  }, [employees, activeTab, searchValue]);
+  }, [employees, activeTab, filterOption, sortOption, searchValue]);
 
   // 페이지네이션된 데이터
   const paginatedData = useMemo(() => {
@@ -194,16 +287,18 @@ export function EmployeeManagement() {
   }, [filteredEmployees, currentPage, itemsPerPage]);
 
   // 통계 계산
+  // SSR Hydration 오류 방지: new Date() 대신 고정 날짜 사용
   const stats = useMemo(() => {
     const activeCount = employees.filter(e => e.status === 'active').length;
     const leaveCount = employees.filter(e => e.status === 'leave').length;
     const resignedCount = employees.filter(e => e.status === 'resigned').length;
 
     const activeEmployees = employees.filter(e => e.status === 'active' && e.hireDate);
+    // 고정 기준일 사용 (SSR/CSR 일치)
+    const referenceDate = new Date('2025-12-16T00:00:00Z');
     const totalTenure = activeEmployees.reduce((sum, e) => {
       const hireDate = new Date(e.hireDate!);
-      const today = new Date();
-      const years = (today.getTime() - hireDate.getTime()) / (1000 * 60 * 60 * 24 * 365);
+      const years = (referenceDate.getTime() - hireDate.getTime()) / (1000 * 60 * 60 * 24 * 365);
       return sum + years;
     }, 0);
     const averageTenure = activeEmployees.length > 0 ? totalTenure / activeEmployees.length : 0;
@@ -483,24 +578,65 @@ export function EmployeeManagement() {
     );
   }, [handleRowClick, handleEdit, openDeleteDialog]);
 
-  // 헤더 액션
+  // 헤더 액션 (DateRangeSelector + 버튼들)
   const headerActions = (
-    <div className="flex items-center gap-2 flex-wrap">
-      <Button
-        variant="outline"
-        onClick={() => setUserInviteOpen(true)}
-      >
-        <Mail className="w-4 h-4 mr-2" />
-        사용자 초대
-      </Button>
-      <Button variant="outline" onClick={handleCSVUpload}>
-        <Upload className="w-4 h-4 mr-2" />
-        CSV 일괄 등록
-      </Button>
-      <Button onClick={handleAddEmployee}>
-        <Plus className="w-4 h-4 mr-2" />
-        사원 등록
-      </Button>
+    <DateRangeSelector
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      extraActions={
+        <>
+          <Button
+            variant="outline"
+            onClick={() => setUserInviteOpen(true)}
+          >
+            <Mail className="w-4 h-4 mr-2" />
+            사용자 초대
+          </Button>
+          <Button variant="outline" onClick={handleCSVUpload}>
+            <Upload className="w-4 h-4 mr-2" />
+            CSV 일괄 등록
+          </Button>
+          <Button onClick={handleAddEmployee}>
+            <Plus className="w-4 h-4 mr-2" />
+            사원 등록
+          </Button>
+        </>
+      }
+    />
+  );
+
+  // 테이블 헤더 액션 (필터/정렬 셀렉트박스)
+  const tableHeaderActions = (
+    <div className="flex items-center gap-2">
+      {/* 필터 셀렉트박스 */}
+      <Select value={filterOption} onValueChange={(value) => setFilterOption(value as FilterOption)}>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="필터 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {FILTER_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* 정렬 셀렉트박스 */}
+      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="정렬 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {SORT_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 
@@ -521,6 +657,7 @@ export function EmployeeManagement() {
         tabs={tabs}
         activeTab={activeTab}
         onTabChange={setActiveTab}
+        tableHeaderActions={tableHeaderActions}
         tableColumns={tableColumns}
         data={paginatedData}
         totalCount={filteredEmployees.length}

src/components/hr/EmployeeManagement/types.ts

@@ -121,6 +121,10 @@ export interface Employee {
   rank?: string; // 직급 (예: 사원, 대리, 과장 등)
   status: EmployeeStatus;
   departmentPositions: DepartmentPosition[]; // 부서/직책 (복수 가능)
+  clockInLocation?: string; // 출근 위치
+  clockOutLocation?: string; // 퇴근 위치
+  resignationDate?: string; // 퇴사일
+  resignationReason?: string; // 퇴직사유
 
   // 사용자 정보 (시스템 계정)
   userInfo?: UserInfo;
@@ -153,6 +157,10 @@ export interface EmployeeFormData {
   rank: string;
   status: EmployeeStatus;
   departmentPositions: DepartmentPosition[];
+  clockInLocation: string; // 출근 위치
+  clockOutLocation: string; // 퇴근 위치
+  resignationDate: string; // 퇴사일
+  resignationReason: string; // 퇴직사유
 
   // 사용자 정보
   hasUserAccount: boolean;
@@ -179,6 +187,10 @@ export interface FieldSettings {
   showStatus: boolean;
   showDepartment: boolean;
   showPosition: boolean;
+  showClockInLocation: boolean; // 출근 위치
+  showClockOutLocation: boolean; // 퇴근 위치
+  showResignationDate: boolean; // 퇴사일
+  showResignationReason: boolean; // 퇴직사유
 }
 
 export const DEFAULT_FIELD_SETTINGS: FieldSettings = {
@@ -192,6 +204,10 @@ export const DEFAULT_FIELD_SETTINGS: FieldSettings = {
   showStatus: true,
   showDepartment: true,
   showPosition: true,
+  showClockInLocation: true,
+  showClockOutLocation: true,
+  showResignationDate: true,
+  showResignationReason: true,
 };
 
 // ===== 필터/검색 타입 =====

src/components/hr/VacationManagement/index.tsx

@@ -8,11 +8,13 @@ import {
   Calendar,
   Check,
   X,
+  Clock,
+  Heart,
+  TrendingUp,
 } 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,
@@ -21,12 +23,23 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import {
   IntegratedListTemplateV2,
   type TableColumn,
   type StatCard,
   type TabOption,
 } from '@/components/templates/IntegratedListTemplateV2';
+import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { VacationGrantDialog } from './VacationGrantDialog';
 import { VacationRequestDialog } from './VacationRequestDialog';
@@ -36,12 +49,14 @@ import type {
   VacationGrantRecord,
   VacationRequestRecord,
   SortOption,
+  FilterOption,
   VacationType,
   RequestStatus,
 } from './types';
 import {
   MAIN_TAB_LABELS,
   SORT_OPTIONS,
+  FILTER_OPTIONS,
   VACATION_TYPE_LABELS,
   REQUEST_STATUS_LABELS,
   REQUEST_STATUS_COLORS,
@@ -84,13 +99,13 @@ const generateGrantData = (): VacationGrantRecord[] => {
   const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
   const positions = ['팀장', '파트장', '선임', '주임', '사원'];
   const ranks = ['부장', '차장', '과장', '대리', '사원'];
-  const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'other'];
-  const reasons = ['연차 부여', '포상 휴가', '특별 휴가', '경조사 휴가', ''];
+  const vacationTypes: VacationType[] = ['annual', 'monthly', 'reward', 'condolence', 'other'];
+  const reasons = ['연차 부여', '월차 부여', '포상 휴가', '경조사 휴가', '기타 휴가'];
 
-  return Array.from({ length: 8 }, (_, i) => ({
+  return Array.from({ length: 10 }, (_, i) => ({
     id: `grant-${i + 1}`,
     employeeId: `EMP${String(i + 1).padStart(3, '0')}`,
-    employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현'][i],
+    employeeName: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호', '임지현', '한승우', '송예진'][i],
     department: departments[i % departments.length],
     position: positions[i % positions.length],
     rank: ranks[i % ranks.length],
@@ -136,6 +151,7 @@ export function VacationManagement() {
   // ===== 상태 관리 =====
   const [mainTab, setMainTab] = useState<MainTabType>('usage');
   const [searchQuery, setSearchQuery] = useState('');
+  const [filterOption, setFilterOption] = useState<FilterOption>('all');
   const [sortOption, setSortOption] = useState<SortOption>('rank');
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
   const [currentPage, setCurrentPage] = useState(1);
@@ -148,6 +164,8 @@ export function VacationManagement() {
   // 다이얼로그 상태
   const [grantDialogOpen, setGrantDialogOpen] = useState(false);
   const [requestDialogOpen, setRequestDialogOpen] = useState(false);
+  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
+  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
 
   // Mock 데이터
   const [usageData] = useState<VacationUsageRecord[]>(generateUsageData);
@@ -221,23 +239,55 @@ export function VacationManagement() {
   const totalPages = Math.ceil(currentData.length / itemsPerPage);
 
   // ===== 승인/거절 핸들러 =====
-  const handleApprove = useCallback(() => {
+  const handleApproveClick = useCallback(() => {
+    if (selectedItems.size === 0) return;
+    setApproveDialogOpen(true);
+  }, [selectedItems.size]);
+
+  const handleApproveConfirm = useCallback(() => {
     console.log('승인:', Array.from(selectedItems));
+    // TODO: API 호출
     setSelectedItems(new Set());
+    setApproveDialogOpen(false);
+    // 완료 알림은 toast로 대체하거나 간단히 처리
   }, [selectedItems]);
 
-  const handleReject = useCallback(() => {
+  const handleRejectClick = useCallback(() => {
+    if (selectedItems.size === 0) return;
+    setRejectDialogOpen(true);
+  }, [selectedItems.size]);
+
+  const handleRejectConfirm = useCallback(() => {
     console.log('거절:', Array.from(selectedItems));
+    // TODO: API 호출
     setSelectedItems(new Set());
+    setRejectDialogOpen(false);
+    // 완료 알림은 toast로 대체하거나 간단히 처리
   }, [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 statCards: StatCard[] = useMemo(() => {
+    // 휴가 승인 대기 (pending 상태인 request 수)
+    const pendingCount = requestData.filter(r => r.status === 'pending').length;
+
+    // 연차 사용자 수
+    const annualCount = usageData.length;
+
+    // 경조사 휴가 수
+    const condolenceCount = grantData.filter(g => g.vacationType === 'condolence').length;
+
+    // 연간 연차 사용률 계산 (총 사용일 / 총 부여일 * 100)
+    const totalUsed = usageData.reduce((sum, u) => sum + u.annual.used, 0);
+    const totalAvailable = usageData.reduce((sum, u) => sum + u.annual.total, 0);
+    const usageRate = totalAvailable > 0 ? ((totalUsed / totalAvailable) * 100).toFixed(1) : '0.0';
+
+    return [
+      { label: '휴가 승인 대기', value: `${pendingCount}명`, icon: Clock, iconColor: 'text-yellow-500' },
+      { label: '연차', value: `${annualCount}명`, icon: Calendar, iconColor: 'text-blue-500' },
+      { label: '경조사', value: `${condolenceCount}명`, icon: Heart, iconColor: 'text-pink-500' },
+      { label: '연간 연차 사용률', value: `${usageRate}%`, icon: TrendingUp, iconColor: 'text-green-500' },
+    ];
+  }, [usageData, grantData, requestData]);
 
   // ===== 탭 옵션 (카드 아래에 표시됨) =====
   const tabs: TabOption[] = useMemo(() => [
@@ -249,8 +299,9 @@ export function VacationManagement() {
   // ===== 테이블 컬럼 (탭별) =====
   const tableColumns: TableColumn[] = useMemo(() => {
     if (mainTab === 'usage') {
-      // 휴가 사용현황: 부서|직책|이름|직급|입사일|기본|부여|사용|잔액
+      // 휴가 사용현황: 번호|부서|직책|이름|직급|입사일|기본|부여|사용|잔액
       return [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
         { key: 'department', label: '부서' },
         { key: 'position', label: '직책' },
         { key: 'name', label: '이름' },
@@ -262,8 +313,9 @@ export function VacationManagement() {
         { key: 'remaining', label: '잔여', className: 'text-center' },
       ];
     } else if (mainTab === 'grant') {
-      // 휴가 부여현황: 부서|직책|이름|직급|유형|부여일|부여휴가일수|사유
+      // 휴가 부여현황: 번호|부서|직책|이름|직급|유형|부여일|부여휴가일수|사유
       return [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
         { key: 'department', label: '부서' },
         { key: 'position', label: '직책' },
         { key: 'name', label: '이름' },
@@ -274,8 +326,9 @@ export function VacationManagement() {
         { key: 'reason', label: '사유' },
       ];
     } else {
-      // 휴가 신청현황: 부서|직책|이름|직급|휴가기간|휴가일수|상태|신청일
+      // 휴가 신청현황: 번호|부서|직책|이름|직급|휴가기간|휴가일수|상태|신청일
       return [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
         { key: 'department', label: '부서' },
         { key: 'position', label: '직책' },
         { key: 'name', label: '이름' },
@@ -299,6 +352,7 @@ export function VacationManagement() {
           <TableCell className="text-center">
             <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
           </TableCell>
+          <TableCell className="text-center">{globalIndex}</TableCell>
           <TableCell>{record.department}</TableCell>
           <TableCell>{record.position}</TableCell>
           <TableCell className="font-medium">{record.employeeName}</TableCell>
@@ -317,6 +371,7 @@ export function VacationManagement() {
           <TableCell className="text-center">
             <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
           </TableCell>
+          <TableCell className="text-center">{globalIndex}</TableCell>
           <TableCell>{record.department}</TableCell>
           <TableCell>{record.position}</TableCell>
           <TableCell className="font-medium">{record.employeeName}</TableCell>
@@ -336,6 +391,7 @@ export function VacationManagement() {
           <TableCell className="text-center">
             <Checkbox checked={isSelected} onCheckedChange={() => toggleSelection(record.id)} />
           </TableCell>
+          <TableCell className="text-center">{globalIndex}</TableCell>
           <TableCell>{record.department}</TableCell>
           <TableCell>{record.position}</TableCell>
           <TableCell className="font-medium">{record.employeeName}</TableCell>
@@ -429,10 +485,10 @@ export function VacationManagement() {
           actions={
             record.status === 'pending' && (
               <div className="flex gap-2">
-                <Button variant="default" className="flex-1" onClick={handleApprove}>
+                <Button variant="default" className="flex-1" onClick={handleApproveClick}>
                   <Check className="w-4 h-4 mr-2" /> 승인
                 </Button>
-                <Button variant="outline" className="flex-1" onClick={handleReject}>
+                <Button variant="outline" className="flex-1" onClick={handleRejectClick}>
                   <X className="w-4 h-4 mr-2" /> 거절
                 </Button>
               </div>
@@ -441,76 +497,88 @@ export function VacationManagement() {
         />
       );
     }
-  }, [mainTab, handleApprove, handleReject]);
+  }, [mainTab, handleApproveClick, handleRejectClick]);
 
-  // ===== 헤더 액션 (달력 + 버튼들) =====
+  // ===== 헤더 액션 (DateRangeSelector + 버튼들) =====
   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' && (
+    <DateRangeSelector
+      startDate={startDate}
+      endDate={endDate}
+      onStartDateChange={setStartDate}
+      onEndDateChange={setEndDate}
+      extraActions={
         <>
-          <Button onClick={() => setRequestDialogOpen(true)}>
-            <Plus className="h-4 w-4 mr-2" />
-            휴가신청
-          </Button>
-          {selectedItems.size > 0 && (
+          {/* 탭별 액션 버튼 */}
+          {mainTab === 'grant' && (
+            <Button onClick={() => setGrantDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              부여등록
+            </Button>
+          )}
+
+          {mainTab === 'request' && (
             <>
-              <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" />
-                거절
+              {/* 버튼 순서: 승인 → 거절 → 휴가신청 (휴가신청 버튼 위치 고정) */}
+              {selectedItems.size > 0 && (
+                <>
+                  <Button variant="default" onClick={handleApproveClick}>
+                    <Check className="h-4 w-4 mr-2" />
+                    승인
+                  </Button>
+                  <Button variant="destructive" onClick={handleRejectClick}>
+                    <X className="h-4 w-4 mr-2" />
+                    거절
+                  </Button>
+                </>
+              )}
+              <Button onClick={() => setRequestDialogOpen(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                휴가신청
               </Button>
             </>
           )}
-        </>
-      )}
 
-      <Button variant="outline" onClick={() => console.log('엑셀 다운로드')}>
-        <Download className="h-4 w-4 mr-2" />
-        엑셀 다운로드
-      </Button>
-    </div>
+          {/* 엑셀 다운로드 버튼 - 주석처리 */}
+          {/* <Button variant="outline" onClick={() => console.log('엑셀 다운로드')}>
+            <Download className="h-4 w-4 mr-2" />
+            엑셀 다운로드
+          </Button> */}
+        </>
+      }
+    />
   );
 
-  // ===== 정렬 필터 =====
-  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>
+  // ===== 테이블 헤더 액션 (필터 + 정렬 셀렉트) - 사원관리와 동일한 위치 =====
+  const tableHeaderActions = (
+    <div className="flex items-center gap-2">
+      {/* 필터 셀렉트박스 */}
+      <Select value={filterOption} onValueChange={(value) => setFilterOption(value as FilterOption)}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue placeholder="필터 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {FILTER_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* 정렬 셀렉트박스 */}
+      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue placeholder="정렬 선택" />
+        </SelectTrigger>
+        <SelectContent>
+          {SORT_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   );
 
   return (
@@ -525,7 +593,7 @@ export function VacationManagement() {
         searchValue={searchQuery}
         onSearchChange={setSearchQuery}
         searchPlaceholder="이름, 부서 검색..."
-        extraFilters={extraFilters}
+        tableHeaderActions={tableHeaderActions}
         tabs={tabs}
         activeTab={mainTab}
         onTabChange={handleMainTabChange}
@@ -566,6 +634,45 @@ export function VacationManagement() {
           setRequestDialogOpen(false);
         }}
       />
+
+      {/* 승인 확인 다이얼로그 */}
+      <AlertDialog open={approveDialogOpen} onOpenChange={setApproveDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>휴가 승인</AlertDialogTitle>
+            <AlertDialogDescription>
+              정말 {selectedItems.size}건을 승인하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleApproveConfirm}>
+              승인
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 거절 확인 다이얼로그 */}
+      <AlertDialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>휴가 거절</AlertDialogTitle>
+            <AlertDialogDescription>
+              정말 {selectedItems.size}건을 거절하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleRejectConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              거절
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   );
 }

src/components/hr/VacationManagement/types.ts

@@ -7,7 +7,16 @@
 export type MainTabType = 'usage' | 'grant' | 'request';
 
 // 휴가 유형
-export type VacationType = 'annual' | 'monthly' | 'reward' | 'other';
+export type VacationType = 'annual' | 'monthly' | 'reward' | 'condolence' | 'other';
+
+// 필터 옵션
+export type FilterOption = 'all' | 'hasVacation' | 'noVacation';
+
+export const FILTER_OPTIONS: { value: FilterOption; label: string }[] = [
+  { value: 'all', label: '전체' },
+  { value: 'hasVacation', label: '잔여휴가 있음' },
+  { value: 'noVacation', label: '잔여휴가 없음' },
+];
 
 // 정렬 옵션
 export type SortOption = 'rank' | 'deptAsc' | 'deptDesc' | 'nameAsc' | 'nameDesc';
@@ -137,6 +146,7 @@ export const VACATION_TYPE_LABELS: Record<VacationType, string> = {
   annual: '연차',
   monthly: '월차',
   reward: '포상휴가',
+  condolence: '경조사',
   other: '기타',
 };
 
@@ -144,6 +154,7 @@ export const VACATION_TYPE_COLORS: Record<VacationType, string> = {
   annual: 'blue',
   monthly: 'green',
   reward: 'purple',
+  condolence: 'pink',
   other: 'orange',
 };
 
@@ -159,17 +170,18 @@ export const REQUEST_STATUS_COLORS: Record<RequestStatus, string> = {
   rejected: 'bg-red-100 text-red-800',
 };
 
-export const SORT_OPTIONS: Record<SortOption, string> = {
-  rank: '직급순',
-  deptAsc: '부서명 오름차순',
-  deptDesc: '부서명 내림차순',
-  nameAsc: '이름 오름차순',
-  nameDesc: '이름 내림차순',
-};
+export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+  { value: 'rank', label: '직급순' },
+  { value: 'deptAsc', label: '부서명 오름차순' },
+  { value: 'deptDesc', label: '부서명 내림차순' },
+  { value: 'nameAsc', label: '이름 오름차순' },
+  { value: 'nameDesc', label: '이름 내림차순' },
+];
 
 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: '기타 휴가' },
+  { id: '4', name: '경조사', type: 'condolence', isActive: true, description: '경조사 휴가' },
+  { id: '5', name: '기타', type: 'other', isActive: true, description: '기타 휴가' },
 ];