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/items/DynamicItemForm/components/DuplicateCodeDialog.tsx

@@ -1,15 +1,6 @@
 'use client';
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 
 export interface DuplicateCodeDialogProps {
   open: boolean;
@@ -27,27 +18,32 @@ export function DuplicateCodeDialog({
   onCancel,
   onGoToEdit,
 }: DuplicateCodeDialogProps) {
+  const handleConfirm = () => {
+    onGoToEdit();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    onOpenChange(isOpen);
+    if (!isOpen) {
+      onCancel();
+    }
+  };
+
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>품목코드 중복</AlertDialogTitle>
-          <AlertDialogDescription>
-            입력하신 조건의 품목코드가 이미 존재합니다.
-            <span className="block mt-2 font-medium text-foreground">
-              기존 품목을 수정하시겠습니까?
-            </span>
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>
-            취소
-          </AlertDialogCancel>
-          <AlertDialogAction onClick={onGoToEdit}>
-            중복 품목 수정하러 가기
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+    <ConfirmDialog
+      open={open}
+      onOpenChange={handleOpenChange}
+      onConfirm={handleConfirm}
+      title="품목코드 중복"
+      description={
+        <>
+          입력하신 조건의 품목코드가 이미 존재합니다.
+          <span className="block mt-2 font-medium text-foreground">
+            기존 품목을 수정하시겠습니까?
+          </span>
+        </>
+      }
+      confirmText="중복 품목 수정하러 가기"
+    />
   );
 }

src/components/items/ItemListClient.tsx

@@ -16,16 +16,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 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 { Search, Plus, Edit, Trash2, Package } from 'lucide-react';
 import { TableLoadingSpinner } from '@/components/ui/loading-spinner';
 import { useItemList } from '@/hooks/useItemList';
@@ -503,27 +494,19 @@ export default function ItemListClient() {
       />
 
       {/* 개별 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>품목 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              품목 &quot;{itemToDelete?.code}&quot;을(를) 삭제하시겠습니까?
-              <br />
-              이 작업은 되돌릴 수 없습니다.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        title="품목 삭제"
+        description={
+          <>
+            품목 &quot;{itemToDelete?.code}&quot;을(를) 삭제하시겠습니까?
+            <br />
+            이 작업은 되돌릴 수 없습니다.
+          </>
+        }
+      />
     </>
   );
 }

src/components/items/ItemMasterDataManagement/dialogs/TabManagementDialogs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
@@ -212,32 +212,22 @@ export function TabManagementDialogs({
       </Dialog>
 
       {/* 탭 삭제 확인 다이얼로그 */}
-      <AlertDialog open={isDeleteTabDialogOpen} onOpenChange={setIsDeleteTabDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>탭 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              "{customTabs.find(t => t.id === deletingTabId)?.label}" 탭을 삭제하시겠습니까?
-              <br />
-              이 작업은 되돌릴 수 없습니다.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => {
-              setIsDeleteTabDialogOpen(false);
-              setDeletingTabId(null);
-            }}>
-              취소
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteTab}
-              className="bg-red-500 hover:bg-red-600"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={isDeleteTabDialogOpen}
+        onOpenChange={(open) => {
+          setIsDeleteTabDialogOpen(open);
+          if (!open) setDeletingTabId(null);
+        }}
+        onConfirm={confirmDeleteTab}
+        title="탭 삭제"
+        description={
+          <>
+            &quot;{customTabs.find(t => t.id === deletingTabId)?.label}&quot; 탭을 삭제하시겠습니까?
+            <br />
+            이 작업은 되돌릴 수 없습니다.
+          </>
+        }
+      />
 
       {/* 탭 추가/수정 다이얼로그 */}
       <Dialog open={isAddTabDialogOpen} onOpenChange={(open) => {
@@ -363,32 +353,22 @@ export function TabManagementDialogs({
       </Dialog>
 
       {/* 속성 하위 탭 삭제 확인 다이얼로그 */}
-      <AlertDialog open={isDeleteAttributeTabDialogOpen} onOpenChange={setIsDeleteAttributeTabDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>속성 탭 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              "{attributeSubTabs.find(t => t.id === deletingAttributeTabId)?.label}" 탭을 삭제하시겠습니까?
-              <br />
-              이 작업은 되돌릴 수 없습니다.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => {
-              setIsDeleteAttributeTabDialogOpen(false);
-              setDeletingAttributeTabId(null);
-            }}>
-              취소
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteAttributeTab}
-              className="bg-red-500 hover:bg-red-600"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={isDeleteAttributeTabDialogOpen}
+        onOpenChange={(open) => {
+          setIsDeleteAttributeTabDialogOpen(open);
+          if (!open) setDeletingAttributeTabId(null);
+        }}
+        onConfirm={confirmDeleteAttributeTab}
+        title="속성 탭 삭제"
+        description={
+          <>
+            &quot;{attributeSubTabs.find(t => t.id === deletingAttributeTabId)?.label}&quot; 탭을 삭제하시겠습니까?
+            <br />
+            이 작업은 되돌릴 수 없습니다.
+          </>
+        }
+      />
 
       {/* 속성 하위 탭 추가/수정 다이얼로그 */}
       <Dialog open={isAddAttributeTabDialogOpen} onOpenChange={(open) => {