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/settings/SubscriptionManagement/SubscriptionClient.tsx

@@ -6,16 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Badge } from '@/components/ui/badge';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { toast } from 'sonner';
@@ -218,33 +209,29 @@ export function SubscriptionClient({ initialData }: SubscriptionClientProps) {
       </PageLayout>
 
       {/* ===== 서비스 해지 확인 다이얼로그 ===== */}
-      <AlertDialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-red-500" />
-              서비스 해지
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-left">
-              모든 데이터가 삭제되며 복구할 수 없습니다.
-              <br />
-              <span className="font-medium text-red-600">
-                정말 서비스를 해지하시겠습니까?
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isCancelling}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleCancelService}
-              className="bg-red-600 hover:bg-red-700"
-              disabled={isCancelling}
-            >
-              {isCancelling ? '처리 중...' : '확인'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={showCancelDialog}
+        onOpenChange={setShowCancelDialog}
+        onConfirm={handleCancelService}
+        variant="destructive"
+        title={
+          <span className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-red-500" />
+            서비스 해지
+          </span>
+        }
+        description={
+          <>
+            모든 데이터가 삭제되며 복구할 수 없습니다.
+            <br />
+            <span className="font-medium text-red-600">
+              정말 서비스를 해지하시겠습니까?
+            </span>
+          </>
+        }
+        confirmText="확인"
+        loading={isCancelling}
+      />
     </>
   );
 }

src/components/settings/SubscriptionManagement/SubscriptionManagement.tsx

@@ -6,16 +6,7 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import type { SubscriptionInfo } from './types';
@@ -231,33 +222,29 @@ export function SubscriptionManagement({ initialData }: SubscriptionManagementPr
       </PageLayout>
 
       {/* ===== 서비스 해지 확인 다이얼로그 ===== */}
-      <AlertDialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-red-500" />
-              서비스 해지
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-left">
-              모든 데이터가 삭제되며 복구할 수 없습니다.
-              <br />
-              <span className="font-medium text-red-600">
-                정말 서비스를 해지하시겠습니까?
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isCancelling}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleCancelService}
-              className="bg-red-600 hover:bg-red-700"
-              disabled={isCancelling}
-            >
-              {isCancelling ? '처리 중...' : '확인'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={showCancelDialog}
+        onOpenChange={setShowCancelDialog}
+        onConfirm={handleCancelService}
+        variant="destructive"
+        title={
+          <span className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-red-500" />
+            서비스 해지
+          </span>
+        }
+        description={
+          <>
+            모든 데이터가 삭제되며 복구할 수 없습니다.
+            <br />
+            <span className="font-medium text-red-600">
+              정말 서비스를 해지하시겠습니까?
+            </span>
+          </>
+        }
+        confirmText="확인"
+        loading={isCancelling}
+      />
     </>
   );
 }