feat(WEB): Pretendard 폰트 적용 및 HR/회계 모바일 필터 마이그레이션

- Pretendard Variable 폰트 추가 및 전역 적용
- HR 모듈 모바일 필터 적용:
  - AttendanceManagement: MobileFilter 컴포넌트 적용
  - EmployeeManagement: MobileFilter 컴포넌트 적용
  - SalaryManagement: MobileFilter 컴포넌트 적용
  - VacationManagement: MobileFilter 컴포넌트 적용
- 회계 모듈:
  - VendorManagement: MobileFilter 컴포넌트 적용
- 전자결재:
  - ReferenceBox: 모바일 UI 개선
- AuthenticatedLayout: 레이아웃 개선
- middleware: 설정 업데이트

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

src/components/hr/EmployeeManagement/index.tsx

@@ -8,13 +8,6 @@ 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,
@@ -30,6 +23,8 @@ import {
   type TabOption,
   type TableColumn,
   type StatCard,
+  type FilterFieldConfig,
+  type FilterValues,
 } from '@/components/templates/IntegratedListTemplateV2';
 import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
@@ -552,38 +547,51 @@ export function EmployeeManagement() {
     </>
   );
 
-  // 테이블 헤더 액션 (필터/정렬 셀렉트박스)
-  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>
+  // ===== filterConfig 기반 통합 필터 시스템 =====
+  const filterConfig: FilterFieldConfig[] = useMemo(() => [
+    {
+      key: 'filter',
+      label: '필터',
+      type: 'single',
+      options: FILTER_OPTIONS.filter(o => o.value !== 'all').map(o => ({
+        value: o.value,
+        label: o.label,
+      })),
+      allOptionLabel: '전체',
+    },
+    {
+      key: 'sort',
+      label: '정렬',
+      type: 'single',
+      options: SORT_OPTIONS.map(o => ({
+        value: o.value,
+        label: o.label,
+      })),
+    },
+  ], []);
 
-      {/* 정렬 셀렉트박스 */}
-      <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>
-  );
+  const filterValues: FilterValues = useMemo(() => ({
+    filter: filterOption,
+    sort: sortOption,
+  }), [filterOption, sortOption]);
+
+  const handleFilterChange = useCallback((key: string, value: string | string[]) => {
+    switch (key) {
+      case 'filter':
+        setFilterOption(value as FilterOption);
+        break;
+      case 'sort':
+        setSortOption(value as SortOption);
+        break;
+    }
+    setCurrentPage(1);
+  }, []);
+
+  const handleFilterReset = useCallback(() => {
+    setFilterOption('all');
+    setSortOption('rank');
+    setCurrentPage(1);
+  }, []);
 
   // 페이지네이션 설정
   const totalPages = Math.ceil(filteredEmployees.length / itemsPerPage);
@@ -602,7 +610,11 @@ export function EmployeeManagement() {
         tabs={tabs}
         activeTab={activeTab}
         onTabChange={setActiveTab}
-        tableHeaderActions={tableHeaderActions}
+        filterConfig={filterConfig}
+        filterValues={filterValues}
+        onFilterChange={handleFilterChange}
+        onFilterReset={handleFilterReset}
+        filterTitle="사원 필터"
         tableColumns={tableColumns}
         data={paginatedData}
         totalCount={filteredEmployees.length}