refactor: UI 컴포넌트 추상화 및 입금/출금 등록 버튼 추가

- 입금관리, 출금관리 리스트에 등록 버튼 추가
- skeleton, confirm-dialog, empty-state, status-badge UI 컴포넌트 추가
- document-system 컴포넌트 추상화 (ApprovalLine, DocumentHeader 등)
- 여러 페이지 컴포넌트 리팩토링 및 코드 정리

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

src/components/hr/CardManagement/index.tsx

@@ -7,16 +7,7 @@ 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 { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import {
   UniversalListPage,
   type UniversalListConfig,
@@ -379,29 +370,21 @@ export function CardManagement({ initialData }: CardManagementProps) {
     },
 
     renderDialogs: () => (
-      <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>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={handleDeleteCard}
+        title="카드 삭제"
+        description={
+          <>
+            &quot;{cardToDelete?.cardName}&quot; 카드를 삭제하시겠습니까?
+            <br />
+            <span className="text-destructive">
+              삭제된 카드 정보는 복구할 수 없습니다.
+            </span>
+          </>
+        }
+      />
     ),
   }), [
     cards,

src/components/hr/DepartmentManagement/index.tsx

@@ -8,16 +8,7 @@ import { DepartmentStats } from './DepartmentStats';
 import { DepartmentToolbar } from './DepartmentToolbar';
 import { DepartmentTree } from './DepartmentTree';
 import { DepartmentDialog } from './DepartmentDialog';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import type { Department } from './types';
 import { countAllDepartments, getAllDepartmentIds, findDepartmentById } from './types';
 import {
@@ -318,29 +309,23 @@ export function DepartmentManagement() {
       />
 
       {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>부서 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              {isBulkDelete
-                ? `선택한 부서 ${selectedIds.size}개를 삭제하시겠습니까?`
-                : `"${departmentToDelete?.name}" 부서를 삭제하시겠습니까?`
-              }
-              <br />
-              <span className="text-destructive">
-                삭제된 부서의 인원은 회사(기본) 인원으로 변경됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        description={
+          <>
+            {isBulkDelete
+              ? `선택한 부서 ${selectedIds.size}개를 삭제하시겠습니까?`
+              : `"${departmentToDelete?.name}" 부서를 삭제하시겠습니까?`
+            }
+            <br />
+            <span className="text-destructive">
+              삭제된 부서의 인원은 회사(기본) 인원으로 변경됩니다.
+            </span>
+          </>
+        }
+        onConfirm={confirmDelete}
+      />
     </PageLayout>
   );
 }

src/components/hr/EmployeeManagement/index.tsx

@@ -8,16 +8,7 @@ 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 { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import {
   UniversalListPage,
   type UniversalListConfig,
@@ -726,37 +717,22 @@ export function EmployeeManagement() {
         />
 
         {/* 삭제 확인 다이얼로그 */}
-        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>사원 삭제</AlertDialogTitle>
-              <AlertDialogDescription>
-                &quot;{employeeToDelete?.name}&quot; 사원을 삭제하시겠습니까?
-                <br />
-                <span className="text-destructive">
-                  삭제된 사원 정보는 복구할 수 없습니다.
-                </span>
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={handleDeleteEmployee}
-                disabled={isDeleting}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              >
-                {isDeleting ? (
-                  <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    삭제 중...
-                  </>
-                ) : (
-                  '삭제'
-                )}
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
+        <DeleteConfirmDialog
+          open={deleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+          onConfirm={handleDeleteEmployee}
+          title="사원 삭제"
+          description={
+            <>
+              &quot;{employeeToDelete?.name}&quot; 사원을 삭제하시겠습니까?
+              <br />
+              <span className="text-destructive">
+                삭제된 사원 정보는 복구할 수 없습니다.
+              </span>
+            </>
+          }
+          loading={isDeleting}
+        />
       </>
     ),
   }), [

src/components/hr/VacationManagement/index.tsx

@@ -28,16 +28,7 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { TableRow, TableCell } from '@/components/ui/table';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import {
   UniversalListPage,
   type UniversalListConfig,
@@ -793,43 +784,26 @@ export function VacationManagement() {
         />
 
         {/* 승인 확인 다이얼로그 */}
-        <AlertDialog open={approveDialogOpen} onOpenChange={setApproveDialogOpen}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>휴가 승인</AlertDialogTitle>
-              <AlertDialogDescription>
-                정말 {selectedItems.size}건을 승인하시겠습니까?
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>취소</AlertDialogCancel>
-              <AlertDialogAction onClick={handleApproveConfirm}>
-                승인
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
+        <ConfirmDialog
+          open={approveDialogOpen}
+          onOpenChange={setApproveDialogOpen}
+          title="휴가 승인"
+          description={`정말 ${selectedItems.size}건을 승인하시겠습니까?`}
+          confirmText="승인"
+          variant="success"
+          onConfirm={handleApproveConfirm}
+        />
 
         {/* 거절 확인 다이얼로그 */}
-        <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>
+        <ConfirmDialog
+          open={rejectDialogOpen}
+          onOpenChange={setRejectDialogOpen}
+          title="휴가 거절"
+          description={`정말 ${selectedItems.size}건을 거절하시겠습니까?`}
+          confirmText="거절"
+          variant="destructive"
+          onConfirm={handleRejectConfirm}
+        />
       </>
     ),
   }), [