feat(WEB): 입력 컴포넌트 공통화 및 UI 개선

- 숫자/통화/전화번호/사업자번호 등 특수 입력 컴포넌트 추가
- MobileCard 컴포넌트 통합 (ListMobileCard 제거)
- IntegratedListTemplateV2 페이지네이션 버그 수정 (NaN 이슈)
- IntegratedDetailTemplate 타이틀 중복 수정
- 문서 시스템 컴포넌트 추가
- 헤더 벨 아이콘 포커스 스타일 개선

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

src/components/hr/EmployeeManagement/EmployeeDialog.tsx

@@ -12,6 +12,9 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { CurrencyInput } from '@/components/ui/currency-input';
+import { PhoneInput } from '@/components/ui/phone-input';
+import { PersonalNumberInput } from '@/components/ui/personal-number-input';
 import {
   Select,
   SelectContent,
@@ -189,10 +192,10 @@ export function EmployeeDialog({
 
               <div className="space-y-2">
                 <Label htmlFor="residentNumber">주민등록번호</Label>
-                <Input
+                <PersonalNumberInput
                   id="residentNumber"
                   value={formData.residentNumber}
-                  onChange={(e) => handleChange('residentNumber', e.target.value)}
+                  onChange={(value) => handleChange('residentNumber', value)}
                   disabled={isViewMode}
                   placeholder="000000-0000000"
                 />
@@ -200,10 +203,10 @@ export function EmployeeDialog({
 
               <div className="space-y-2">
                 <Label htmlFor="phone">휴대폰</Label>
-                <Input
+                <PhoneInput
                   id="phone"
                   value={formData.phone}
-                  onChange={(e) => handleChange('phone', e.target.value)}
+                  onChange={(value) => handleChange('phone', value)}
                   disabled={isViewMode}
                   placeholder="010-0000-0000"
                 />
@@ -223,13 +226,12 @@ export function EmployeeDialog({
 
               <div className="space-y-2">
                 <Label htmlFor="salary">연봉</Label>
-                <Input
+                <CurrencyInput
                   id="salary"
-                  type="number"
-                  value={formData.salary}
-                  onChange={(e) => handleChange('salary', e.target.value)}
+                  value={formData.salary ? Number(formData.salary) : undefined}
+                  onChange={(value) => handleChange('salary', value?.toString() ?? '')}
                   disabled={isViewMode}
-                  placeholder="연봉 (원)"
+                  placeholder="연봉"
                 />
               </div>
             </div>

src/components/hr/EmployeeManagement/EmployeeForm.tsx

@@ -15,6 +15,9 @@ 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 { CurrencyInput } from '@/components/ui/currency-input';
+import { PhoneInput } from '@/components/ui/phone-input';
+import { PersonalNumberInput } from '@/components/ui/personal-number-input';
 import {
   Select,
   SelectContent,
@@ -403,10 +406,10 @@ export function EmployeeForm({
 
                 <div className="space-y-2">
                   <Label htmlFor="residentNumber">주민등록번호</Label>
-                  <Input
+                  <PersonalNumberInput
                     id="residentNumber"
                     value={formData.residentNumber}
-                    onChange={(e) => handleChange('residentNumber', e.target.value)}
+                    onChange={(value) => handleChange('residentNumber', value)}
                     placeholder="000000-0000000"
                     disabled={isViewMode}
                   />
@@ -414,10 +417,10 @@ export function EmployeeForm({
 
                 <div className="space-y-2">
                   <Label htmlFor="phone">휴대폰</Label>
-                  <Input
+                  <PhoneInput
                     id="phone"
                     value={formData.phone}
-                    onChange={(e) => handleChange('phone', e.target.value)}
+                    onChange={(value) => handleChange('phone', value)}
                     placeholder="010-0000-0000"
                     disabled={isViewMode}
                   />
@@ -439,12 +442,11 @@ export function EmployeeForm({
 
                 <div className="space-y-2">
                   <Label htmlFor="salary">연봉</Label>
-                  <Input
+                  <CurrencyInput
                     id="salary"
-                    type="number"
-                    value={formData.salary}
-                    onChange={(e) => handleChange('salary', e.target.value)}
-                    placeholder="연봉 (원)"
+                    value={formData.salary ? Number(formData.salary) : undefined}
+                    onChange={(value) => handleChange('salary', value?.toString() ?? '')}
+                    placeholder="연봉"
                     disabled={isViewMode}
                   />
                 </div>

src/components/hr/EmployeeManagement/employeeConfig.ts

@@ -8,7 +8,7 @@ import type { DetailConfig } from '@/components/templates/IntegratedDetailTempla
  * IntegratedDetailTemplate 마이그레이션 (2025-01-20)
  */
 export const employeeCreateConfig: DetailConfig = {
-  title: '사원 등록',
+  title: '사원',
   description: '새로운 사원을 등록합니다',
   icon: Users,
   basePath: '/hr/employee-management',
@@ -27,7 +27,7 @@ export const employeeCreateConfig: DetailConfig = {
  */
 export const employeeEditConfig: DetailConfig = {
   ...employeeCreateConfig,
-  title: '사원 수정',
+  title: '사원',
   description: '사원 정보를 수정합니다',
   actions: {
     ...employeeCreateConfig.actions,

src/components/hr/EmployeeManagement/index.tsx

@@ -27,7 +27,7 @@ import {
   type FilterValues,
 } from '@/components/templates/UniversalListPage';
 import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
-import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
 import { FieldSettingsDialog } from './FieldSettingsDialog';
 import { UserInviteDialog } from './UserInviteDialog';
 import type {