refactor: UniversalListPage externalIsLoading 지원 및 스켈레톤 개선

- UniversalListPage에 externalIsLoading prop 추가
- CardTransactionDetailClient DevFill 자동입력 기능 추가
- 여러 컴포넌트 로딩 상태 처리 개선
- skeleton 컴포넌트 확장

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

src/components/settings/LeavePolicyManagement/index.tsx

@@ -5,7 +5,7 @@ import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { CalendarDays, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { QuantityInput } from '@/components/ui/quantity-input';
@@ -92,7 +92,7 @@ export function LeavePolicyManagement() {
           description="휴가 정책을 관리합니다"
           icon={CalendarDays}
         />
-        <ContentLoadingSpinner text="휴가 정책을 불러오는 중..." />
+        <ContentSkeleton type="form" rows={6} />
       </PageLayout>
     );
   }

src/components/settings/PermissionManagement/PermissionDetailClient.tsx

@@ -14,7 +14,7 @@ import {
   RotateCcw,
   Loader2,
 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { DetailPageSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -456,7 +456,7 @@ export function PermissionDetailClient({ permissionId, isNew = false }: Permissi
   if (isLoading) {
     return (
       <PageLayout>
-        <ContentLoadingSpinner text="권한 정보를 불러오는 중..." />
+        <DetailPageSkeleton />
       </PageLayout>
     );
   }

src/components/settings/PermissionManagement/index.tsx

@@ -15,7 +15,6 @@ import {
   Loader2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { TableRow, TableCell } from '@/components/ui/table';
@@ -394,11 +393,7 @@ export function PermissionManagement() {
     </div>
   ), [handleBulkDelete, handleAdd]);
 
-  // ===== 로딩/에러 상태 =====
-  if (isLoading) {
-    return <ContentLoadingSpinner text="권한 정보를 불러오는 중..." />;
-  }
-
+  // ===== 에러 상태 =====
   if (error) {
     return (
       <div className="flex flex-col items-center justify-center h-96 gap-4">
@@ -517,6 +512,7 @@ export function PermissionManagement() {
         searchValue: searchQuery,
         setSearchValue: setSearchQuery,
       }}
+      externalIsLoading={isLoading}
     />
   );
 }

src/components/settings/RankManagement/index.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Award, Plus, GripVertical, Pencil, Trash2, Loader2 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
@@ -252,7 +252,7 @@ export function RankManagement() {
         <Card>
           <CardContent className="p-0">
             {isLoading ? (
-              <ContentLoadingSpinner text="직급 목록을 불러오는 중..." />
+              <ContentSkeleton type="list" rows={5} />
             ) : (
               <div className="divide-y">
                 {ranks.map((rank, index) => (

src/components/settings/TitleManagement/index.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { Briefcase, Plus, GripVertical, Pencil, Trash2, Loader2 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent } from '@/components/ui/card';
@@ -252,7 +252,7 @@ export function TitleManagement() {
         <Card>
           <CardContent className="p-0">
             {isLoading ? (
-              <ContentLoadingSpinner text="직책 목록을 불러오는 중..." />
+              <ContentSkeleton type="list" rows={5} />
             ) : (
               <div className="divide-y">
                 {titles.map((title, index) => (