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

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

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

src/components/production/ProductionDashboard/index.tsx

@@ -13,7 +13,7 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Factory, Clock, PlayCircle, CheckCircle2, AlertTriangle, Timer, Users } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { StatCardGridSkeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -170,7 +170,7 @@ export default function ProductionDashboard() {
         </Tabs>
 
         {/* 로딩 상태 */}
-        {isLoading && <ContentLoadingSpinner text="생산 현황을 불러오는 중..." />}
+        {isLoading && <StatCardGridSkeleton count={6} />}
 
         {/* 통계 카드 */}
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">

src/components/production/WorkOrders/AssigneeSelectModal.tsx

@@ -9,7 +9,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { Check, X, ChevronDown, ChevronRight } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -290,7 +290,7 @@ export function AssigneeSelectModal({
         {/* 컨텐츠 영역 */}
         <div className="max-h-[400px] overflow-y-auto">
           {loading ? (
-            <ContentLoadingSpinner text="부서 목록을 불러오는 중..." />
+            <ContentSkeleton type="list" rows={6} />
           ) : error ? (
             <div className="flex flex-col items-center justify-center py-12 text-center">
               <p className="text-red-500 mb-2">{error}</p>

src/components/production/WorkOrders/SalesOrderSelectModal.tsx

@@ -7,7 +7,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { Search, FileText } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import {
   Dialog,
   DialogContent,
@@ -121,7 +121,7 @@ export function SalesOrderSelectModal({
         {/* 수주 목록 */}
         <div className="max-h-[400px] overflow-y-auto space-y-2">
           {isLoading ? (
-            <ContentLoadingSpinner text="수주 목록을 불러오는 중..." />
+            <ContentSkeleton type="cards" rows={4} />
           ) : salesOrders.map((order) => (
             <div
               key={order.id}

src/components/production/WorkOrders/WorkOrderCreate.tsx

@@ -513,6 +513,7 @@ export function WorkOrderCreate() {
       <IntegratedDetailTemplate
         config={workOrderCreateConfig}
         mode="create"
+        isLoading={isLoadingProcesses}
         isSubmitting={isSubmitting}
         onBack={handleCancel}
         onCancel={handleCancel}

src/components/production/WorkerScreen/MaterialInputModal.tsx

@@ -12,7 +12,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { Loader2 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import {
   Dialog,
   DialogContent,
@@ -200,7 +200,7 @@ export function MaterialInputModal({
             </h3>
 
             {isLoading ? (
-              <ContentLoadingSpinner text="자재 목록을 불러오는 중..." />
+              <ContentSkeleton type="table" rows={4} />
             ) : materials.length === 0 ? (
               <div className="border rounded-lg">
                 <Table>

src/components/production/WorkerScreen/ProcessDetailSection.tsx

@@ -14,7 +14,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { ChevronDown, Loader2 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -176,7 +176,7 @@ export function ProcessDetailSection({
       {/* 공정 단계 목록 */}
       <div className="space-y-2">
         {isLoading ? (
-          <ContentLoadingSpinner text="공정 단계를 불러오는 중..." />
+          <ContentSkeleton type="list" rows={4} />
         ) : steps.length === 0 ? (
           <div className="py-8 text-center text-gray-500">
             등록된 공정 단계가 없습니다.

src/components/production/WorkerScreen/index.tsx

@@ -12,7 +12,7 @@
 
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
+import { ContentSkeleton } from '@/components/ui/skeleton';
 import { Card, CardContent } from '@/components/ui/card';
 import {
   Select,
@@ -281,7 +281,7 @@ export default function WorkerScreen() {
             </Select>
           </div>
           {isLoading ? (
-            <ContentLoadingSpinner text="작업 목록을 불러오는 중..." />
+            <ContentSkeleton type="cards" rows={4} />
           ) : sortedWorkOrders.length === 0 ? (
             <Card>
               <CardContent className="py-12 text-center text-muted-foreground">