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/AccountInfoManagement/index.tsx

@@ -21,6 +21,7 @@ import {
   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 { AccountInfo, TermsAgreement, MarketingConsent } from './types';
@@ -441,30 +442,23 @@ export function AccountInfoClient({
       </AlertDialog>
 
       {/* 사용중지 확인 다이얼로그 */}
-      <AlertDialog open={showSuspendDialog} onOpenChange={setShowSuspendDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>계정 사용중지</AlertDialogTitle>
-            <AlertDialogDescription>
-              정말 사용중지하시겠습니까?
-              <br />
-              <span className="text-muted-foreground text-sm">
-                해당 테넌트의 사용이 중지됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isSuspending}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmSuspend}
-              className="bg-orange-600 hover:bg-orange-700"
-              disabled={isSuspending}
-            >
-              {isSuspending ? '처리 중...' : '확인'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={showSuspendDialog}
+        onOpenChange={setShowSuspendDialog}
+        onConfirm={handleConfirmSuspend}
+        title="계정 사용중지"
+        description={
+          <>
+            정말 사용중지하시겠습니까?
+            <br />
+            <span className="text-muted-foreground text-sm">
+              해당 테넌트의 사용이 중지됩니다.
+            </span>
+          </>
+        }
+        variant="warning"
+        loading={isSuspending}
+      />
     </>
   );
 }

src/components/settings/AccountManagement/AccountDetail.tsx

@@ -16,16 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { toast } from 'sonner';
@@ -218,29 +209,20 @@ export function AccountDetail({ account, mode: initialMode }: AccountDetailProps
         </div>
 
         {/* 삭제 확인 다이얼로그 */}
-        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
-              <AlertDialogDescription>
-                계좌를 정말 삭제하시겠습니까?
-                <br />
-                <span className="text-muted-foreground text-sm">
-                  삭제된 계좌의 과거 사용 내역은 보존됩니다.
-                </span>
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>취소</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={handleConfirmDelete}
-                className="bg-red-600 hover:bg-red-700"
-              >
-                삭제
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
+        <DeleteConfirmDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          description={
+            <>
+              계좌를 정말 삭제하시겠습니까?
+              <br />
+              <span className="text-muted-foreground text-sm">
+                삭제된 계좌의 과거 사용 내역은 보존됩니다.
+              </span>
+            </>
+          }
+          onConfirm={handleConfirmDelete}
+        />
       </PageLayout>
     );
   }

src/components/settings/AccountManagement/index.tsx

@@ -15,22 +15,12 @@ import {
   Pencil,
   Trash2,
   Plus,
-  Loader2,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { TableRow, TableCell } from '@/components/ui/table';
 import {
   UniversalListPage,
@@ -349,66 +339,40 @@ export function AccountManagement() {
       <UniversalListPage config={config} />
 
       {/* 단일 삭제 확인 다이얼로그 */}
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              계좌를 정말 삭제하시겠습니까?
-              <br />
-              <span className="text-muted-foreground text-sm">
-                삭제된 계좌의 과거 사용 내역은 보존됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-red-600 hover:bg-red-700"
-              disabled={isDeleting}
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  삭제 중...
-                </>
-              ) : '삭제'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        onConfirm={handleConfirmDelete}
+        title="계좌 삭제"
+        description={
+          <>
+            계좌를 정말 삭제하시겠습니까?
+            <br />
+            <span className="text-muted-foreground text-sm">
+              삭제된 계좌의 과거 사용 내역은 보존됩니다.
+            </span>
+          </>
+        }
+        loading={isDeleting}
+      />
 
       {/* 다중 삭제 확인 다이얼로그 */}
-      <AlertDialog open={showBulkDeleteDialog} onOpenChange={setShowBulkDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              선택하신 {bulkDeleteIds.length}개의 계좌를 정말 삭제하시겠습니까?
-              <br />
-              <span className="text-muted-foreground text-sm">
-                삭제된 계좌의 과거 사용 내역은 보존됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmBulkDelete}
-              className="bg-red-600 hover:bg-red-700"
-              disabled={isDeleting}
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  삭제 중...
-                </>
-              ) : '삭제'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={showBulkDeleteDialog}
+        onOpenChange={setShowBulkDeleteDialog}
+        onConfirm={handleConfirmBulkDelete}
+        title="계좌 삭제"
+        description={
+          <>
+            선택하신 <strong>{bulkDeleteIds.length}개</strong>의 계좌를 정말 삭제하시겠습니까?
+            <br />
+            <span className="text-muted-foreground text-sm">
+              삭제된 계좌의 과거 사용 내역은 보존됩니다.
+            </span>
+          </>
+        }
+        loading={isDeleting}
+      />
     </>
   );
 }

src/components/settings/PermissionManagement/PermissionDetail.tsx

@@ -21,16 +21,7 @@ import {
   TableHeader,
   TableRow,
 } 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 { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { permissionConfig } from './permissionConfig';
 import type { Permission, MenuPermission, PermissionType } from './types';
@@ -444,29 +435,21 @@ export function PermissionDetail({ permission, onBack, onSave, onDelete }: Permi
       />
 
       {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>권한 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              &quot;{permission.name}&quot; 권한을 삭제하시겠습니까?
-              <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}
+        onConfirm={confirmDelete}
+        title="권한 삭제"
+        description={
+          <>
+            &quot;{permission.name}&quot; 권한을 삭제하시겠습니까?
+            <br />
+            <span className="text-destructive">
+              이 권한을 사용 중인 사원이 있으면 해당 사원의 권한이 초기화됩니다.
+            </span>
+          </>
+        }
+      />
     </>
   );
 }

src/components/settings/PermissionManagement/PermissionDetailClient.tsx

@@ -29,16 +29,7 @@ import {
   TableHeader,
   TableRow,
 } 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 { PageHeader } from '@/components/organisms/PageHeader';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { ServerErrorPage } from '@/components/common/ServerErrorPage';
@@ -669,37 +660,22 @@ export function PermissionDetailClient({ permissionId, isNew = false }: Permissi
 
       {/* 삭제 확인 다이얼로그 */}
       {!isNew && role && (
-        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>역할 삭제</AlertDialogTitle>
-              <AlertDialogDescription>
-                &quot;{role.name}&quot; 역할을 삭제하시겠습니까?
-                <br />
-                <span className="text-destructive">
-                  이 역할을 사용 중인 사원이 있으면 해당 사원의 역할이 초기화됩니다.
-                </span>
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={confirmDelete}
-                disabled={isDeleting}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              >
-                {isDeleting ? (
-                  <>
-                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                    삭제 중...
-                  </>
-                ) : (
-                  '삭제'
-                )}
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
+        <DeleteConfirmDialog
+          open={deleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+          onConfirm={confirmDelete}
+          title="역할 삭제"
+          description={
+            <>
+              &quot;{role.name}&quot; 역할을 삭제하시겠습니까?
+              <br />
+              <span className="text-destructive">
+                이 역할을 사용 중인 사원이 있으면 해당 사원의 역할이 초기화됩니다.
+              </span>
+            </>
+          }
+          loading={isDeleting}
+        />
       )}
     </PageLayout>
   );

src/components/settings/PermissionManagement/index.tsx

@@ -27,16 +27,7 @@ import {
   type TabOption,
 } from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
 import type { Role, RoleStats } from './types';
 import { fetchRoles, fetchRoleStats, deleteRole } from './actions';
@@ -467,40 +458,25 @@ export function PermissionManagement() {
     renderMobileCard,
 
     renderDialogs: () => (
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>역할 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              {isBulkDelete
-                ? `선택한 ${selectedItems.size}개의 역할을 삭제하시겠습니까?`
-                : `"${roleToDelete?.name}" 역할을 삭제하시겠습니까?`
-              }
-              <br />
-              <span className="text-destructive">
-                이 역할을 사용 중인 사원이 있으면 해당 사원의 역할이 초기화됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  삭제 중...
-                </>
-              ) : (
-                '삭제'
-              )}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={confirmDelete}
+        title="역할 삭제"
+        description={
+          <>
+            {isBulkDelete
+              ? `선택한 ${selectedItems.size}개의 역할을 삭제하시겠습니까?`
+              : `"${roleToDelete?.name}" 역할을 삭제하시겠습니까?`
+            }
+            <br />
+            <span className="text-destructive">
+              이 역할을 사용 중인 사원이 있으면 해당 사원의 역할이 초기화됩니다.
+            </span>
+          </>
+        }
+        loading={isDeleting}
+      />
     ),
   };
 

src/components/settings/RankManagement/index.tsx

@@ -9,16 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
 import { RankDialog } from './RankDialog';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
 import type { Rank } from './types';
 import {
@@ -339,33 +330,22 @@ export function RankManagement() {
       />
 
       {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>직급 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              &quot;{rankToDelete?.name}&quot; 직급을 삭제하시겠습니까?
-              <br />
-              <span className="text-destructive">
-                이 직급을 사용 중인 사원이 있으면 해당 사원의 직급이 초기화됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isSubmitting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              disabled={isSubmitting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isSubmitting ? (
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-              ) : null}
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={confirmDelete}
+        title="직급 삭제"
+        description={
+          <>
+            &quot;{rankToDelete?.name}&quot; 직급을 삭제하시겠습니까?
+            <br />
+            <span className="text-destructive">
+              이 직급을 사용 중인 사원이 있으면 해당 사원의 직급이 초기화됩니다.
+            </span>
+          </>
+        }
+        loading={isSubmitting}
+      />
     </PageLayout>
   );
 }

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}
+      />
     </>
   );
 }

src/components/settings/TitleManagement/index.tsx

@@ -9,16 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
 import { TitleDialog } from './TitleDialog';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle as AlertTitle,
-} from '@/components/ui/alert-dialog';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
 import type { Title } from './types';
 import {
@@ -339,33 +330,22 @@ export function TitleManagement() {
       />
 
       {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertTitle>직책 삭제</AlertTitle>
-            <AlertDialogDescription>
-              &quot;{titleToDelete?.name}&quot; 직책을 삭제하시겠습니까?
-              <br />
-              <span className="text-destructive">
-                이 직책을 사용 중인 사원이 있으면 해당 사원의 직책이 초기화됩니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isSubmitting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              disabled={isSubmitting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isSubmitting ? (
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-              ) : null}
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={confirmDelete}
+        title="직책 삭제"
+        description={
+          <>
+            &quot;{titleToDelete?.name}&quot; 직책을 삭제하시겠습니까?
+            <br />
+            <span className="text-destructive">
+              이 직책을 사용 중인 사원이 있으면 해당 사원의 직책이 초기화됩니다.
+            </span>
+          </>
+        }
+        loading={isSubmitting}
+      />
     </PageLayout>
   );
 }