feat: 레이아웃/출하/생산/회계/대시보드 전반 개선

- HeaderFavoritesBar 대폭 개선
- Sidebar/AuthenticatedLayout 소폭 수정
- ShipmentCreate, VehicleDispatch 출하 관련 개선
- WorkOrderCreate/Edit, WorkerScreen 생산 관련 개선
- InspectionCreate 자재 입고검사 개선
- DailyReport, VendorDetail 회계 수정
- CEO 대시보드: CardManagement/DailyProduction/DailyAttendance 섹션 개선
- useCEODashboard, expense transformer 정비
- DocumentViewer, PDF generate route 소폭 수정
- bill-prototype 개발 페이지 추가
- mockData 불필요 데이터 제거

src/components/accounting/DailyReport/index.tsx

@@ -20,6 +20,7 @@ import { Input } from '@/components/ui/input';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { formatNumber as formatAmount } from '@/lib/utils/amount';
+import { printElement } from '@/lib/print-utils';
 import type { NoteReceivableItem, DailyAccountItem } from './types';
 import { getNoteReceivables, getDailyAccounts, getDailyReportSummary } from './actions';
 import { toast } from 'sonner';
@@ -204,9 +205,19 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
   }, []);
 
   // ===== 인쇄 =====
+  const printAreaRef = useRef<HTMLDivElement>(null);
   const handlePrint = useCallback(() => {
-    window.print();
-  }, []);
+    if (printAreaRef.current) {
+      printElement(printAreaRef.current, {
+        title: `일일일보_${startDate}`,
+        styles: `
+          .print-container { font-size: 11px; }
+          table { width: 100%; margin-bottom: 12px; }
+          h3 { margin-bottom: 8px; }
+        `,
+      });
+    }
+  }, [startDate]);
 
   // ===== USD 금액 포맷 =====
   const formatUsd = useCallback((value: number) => `$ ${formatAmount(value)}`, []);
@@ -299,6 +310,8 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
         </CardContent>
       </Card>
 
+      {/* 인쇄 영역 */}
+      <div ref={printAreaRef} className="print-area space-y-4 md:space-y-6">
       {/* 일자별 입출금 합계 */}
       <Card>
         <CardContent className="px-3 pt-4 pb-3 md:px-6 md:pt-6 md:pb-6">
@@ -660,6 +673,7 @@ export function DailyReport({ initialNoteReceivables = [], initialDailyAccounts
           </div>
         </CardContent>
       </Card>
+      </div>
     </PageLayout>
   );
 }

src/components/accounting/VendorManagement/VendorDetail.tsx

@@ -10,12 +10,6 @@ import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetai
 import { vendorConfig } from './vendorConfig';
 import { CreditAnalysisModal, MOCK_CREDIT_DATA } from './CreditAnalysisModal';
 
-// 필드명 매핑
-const FIELD_NAME_MAP: Record<string, string> = {
-  businessNumber: '사업자등록번호',
-  vendorName: '거래처명',
-  category: '거래처 유형',
-};
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -29,7 +23,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 // 새 입력 컴포넌트
 import { PhoneInput } from '@/components/ui/phone-input';
 import { BusinessNumberInput } from '@/components/ui/business-number-input';
@@ -186,13 +179,25 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
     }
 
     setValidationErrors(errors);
+    if (Object.keys(errors).length > 0) {
+      const firstError = Object.values(errors)[0];
+      toast.error(firstError);
+    }
     return Object.keys(errors).length === 0;
   }, [formData.businessNumber, formData.vendorName, formData.category]);
 
   // 필드 변경 핸들러
   const handleChange = useCallback((field: string, value: string | number | boolean) => {
     setFormData(prev => ({ ...prev, [field]: value }));
-  }, []);
+    // 에러 클리어
+    if (validationErrors[field]) {
+      setValidationErrors(prev => {
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    }
+  }, [validationErrors]);
 
   // 파일 검증 및 추가
   const validateAndAddFiles = useCallback((files: FileList | File[]) => {
@@ -265,7 +270,6 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
   // 저장 핸들러 (IntegratedDetailTemplate용)
   const handleSubmit = useCallback(async () => {
     if (!validateForm()) {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
       return { success: false, error: '입력 내용을 확인해주세요.' };
     }
 
@@ -326,8 +330,9 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
           onChange={(e) => handleChange(field, type === 'number' ? Number(e.target.value) : e.target.value)}
           placeholder={placeholder}
           disabled={isViewMode || disabled}
-          className="bg-white"
+          className={`bg-white ${validationErrors[field] ? 'border-red-500' : ''}`}
         />
+        {validationErrors[field] && <p className="text-sm text-red-500">{validationErrors[field]}</p>}
       </div>
     );
   };
@@ -350,7 +355,7 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
           onValueChange={(val) => handleChange(field, val)}
           disabled={isViewMode}
         >
-          <SelectTrigger className="bg-white">
+          <SelectTrigger className={`bg-white ${validationErrors[field] ? 'border-red-500' : ''}`}>
             <SelectValue placeholder="선택" />
           </SelectTrigger>
           <SelectContent>
@@ -361,6 +366,7 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
             ))}
           </SelectContent>
         </Select>
+        {validationErrors[field] && <p className="text-sm text-red-500">{validationErrors[field]}</p>}
       </div>
     );
   };
@@ -368,35 +374,6 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
   // 폼 콘텐츠 렌더링 (View/Edit 공통)
   const renderFormContent = () => (
     <div className="space-y-6">
-      {/* Validation 에러 표시 */}
-      {Object.keys(validationErrors).length > 0 && (
-        <Alert className="bg-red-50 border-red-200">
-          <AlertDescription className="text-red-900">
-            <div className="flex items-start gap-2">
-              <span className="text-lg">⚠️</span>
-              <div className="flex-1">
-                <strong className="block mb-2">
-                  입력 내용을 확인해주세요 ({Object.keys(validationErrors).length}개 오류)
-                </strong>
-                <ul className="space-y-1 text-sm">
-                  {Object.entries(validationErrors).map(([field, message]) => {
-                    const fieldName = FIELD_NAME_MAP[field] || field;
-                    return (
-                      <li key={field} className="flex items-start gap-1">
-                        <span>•</span>
-                        <span>
-                          <strong>{fieldName}</strong>: {message}
-                        </span>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </div>
-          </AlertDescription>
-        </Alert>
-      )}
-
       {/* 기본 정보 */}
       <Card>
         <CardHeader>
@@ -496,6 +473,7 @@ export function VendorDetail({ mode, vendorId, openModal }: VendorDetailProps) {
                 showValidation={!isViewMode}
                 error={!!validationErrors.businessNumber}
               />
+              {validationErrors.businessNumber && <p className="text-sm text-red-500">{validationErrors.businessNumber}</p>}
             </div>
             {renderField('거래처코드', 'vendorCode', formData.vendorCode, { placeholder: '자동생성', disabled: true })}
             {renderField('거래처명', 'vendorName', formData.vendorName, { required: true })}

src/components/business/CEODashboard/CEODashboard.tsx

@@ -49,14 +49,14 @@ import { transformEntertainmentDetailResponse, transformWelfareDetailResponse, t
 export function CEODashboard() {
   const router = useRouter();
 
-  // API 데이터 Hook (신규 6개는 백엔드 API 구현 전까지 비활성)
+  // API 데이터 Hook
   const apiData = useCEODashboard({
-    salesStatus: false,
-    purchaseStatus: false,
-    dailyProduction: false,
-    unshipped: false,
-    construction: false,
-    dailyAttendance: false,
+    salesStatus: true,
+    purchaseStatus: true,
+    dailyProduction: true,
+    unshipped: true,
+    construction: true,
+    dailyAttendance: true,
   });
 
   // TodayIssue API Hook (Phase 2)

src/components/business/CEODashboard/mockData.ts

@@ -100,52 +100,6 @@ const _originalMockData: CEODashboardData = {
       },
     ],
   },
-  cardManagement: {
-    warningBanner: '가지급금 인정이자 4.6%, 법인세 및 연말정산 시 대표자 종합세 가중 주의',
-    cards: [
-      { id: 'cm1', label: '카드', amount: 3123000, previousLabel: '미정리 5건' },
-      { id: 'cm2', label: '경조사', amount: 3123000, previousLabel: '미증빙 5건' },
-      { id: 'cm3', label: '상품권', amount: 3123000, previousLabel: '미증빙 5건' },
-      { id: 'cm4', label: '접대비', amount: 3123000, previousLabel: '미증빙 5건' },
-      { id: 'cm_total', label: '총 가지급금 합계', amount: 350000000 },
-    ],
-    checkPoints: [
-      {
-        id: 'cm-cp1',
-        type: 'success',
-        message: '법인카드 사용 총 850만원이 가지급금으로 전환되었습니다. 연 4.6% 인정이자가 발생합니다.',
-        highlights: [
-          { text: '850만원', color: 'red' },
-          { text: '가지급금', color: 'red' },
-          { text: '연 4.6% 인정이자', color: 'red' },
-        ],
-      },
-      {
-        id: 'cm-cp2',
-        type: 'success',
-        message: '현재 가지급금 3.5원 × 4.6% = 연 약 1,400만원의 인정이자가 발생 중입니다.',
-        highlights: [
-          { text: '연 약 1,400만원의 인정이자', color: 'red' },
-        ],
-      },
-      {
-        id: 'cm-cp3',
-        type: 'success',
-        message: '상품권/귀금속 등 접대비 불인정 항목 결제 감지. 가지급금 처리 예정입니다.',
-        highlights: [
-          { text: '불인정 항목 결제 감지', color: 'red' },
-        ],
-      },
-      {
-        id: 'cm-cp4',
-        type: 'success',
-        message: '주말 카드 사용 100만원 결제 감지. 업무관련성 소명이 어려울 수 있으니 기록을 남겨주세요.',
-        highlights: [
-          { text: '주말 카드 사용 100만원 결제 감지', color: 'red' },
-        ],
-      },
-    ],
-  },
   entertainment: {
     cards: [
       { id: 'et1', label: '주말/심야', amount: 3123000, previousLabel: '미증빙 5건' },

src/components/business/CEODashboard/sections/CardManagementSection.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { CreditCard, Wallet, Receipt, AlertTriangle, Gift } from 'lucide-react';
+import { CreditCard, Wallet, Receipt, AlertTriangle, Gift, CheckCircle2, ShieldAlert } from 'lucide-react';
+import { formatKoreanAmount } from '@/lib/utils/amount';
 import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
 import type { CardManagementData } from '../types';
 
@@ -14,9 +16,33 @@ interface CardManagementSectionProps {
   onCardClick?: (cardId: string) => void;
 }
 
+/** subLabel에서 "미정리 N건", "미증빙 N건" 등의 건수를 파싱 */
+function parseIssueCount(subLabel?: string): number {
+  if (!subLabel) return 0;
+  const match = subLabel.match(/(\d+)\s*건/);
+  return match ? parseInt(match[1], 10) : 0;
+}
+
 export function CardManagementSection({ data, onCardClick }: CardManagementSectionProps) {
   const router = useRouter();
 
+  // 카드별 미정리/미증빙 건수 집계
+  const issueStats = useMemo(() => {
+    let totalCount = 0;
+    let totalAmount = 0;
+    const issueCards: string[] = [];
+
+    for (const card of data.cards) {
+      const count = parseIssueCount(card.subLabel);
+      if (count > 0 || card.isHighlighted) {
+        totalCount += count;
+        totalAmount += card.subAmount ?? 0;
+        issueCards.push(card.label);
+      }
+    }
+    return { totalCount, totalAmount, issueCards, hasIssues: totalCount > 0 };
+  }, [data.cards]);
+
   const handleClick = (cardId: string) => {
     if (onCardClick) {
       onCardClick(cardId);
@@ -31,9 +57,46 @@ export function CardManagementSection({ data, onCardClick }: CardManagementSecti
       title="가지급금 현황"
       subtitle="가지급금 관리 현황"
     >
-      {data.warningBanner && (
-        <div className="bg-red-500 text-white text-sm font-medium px-4 py-2 rounded-lg mb-4 flex items-center gap-2">
-          <AlertTriangle className="h-4 w-4" />
+      {/* 상태 배너: 미정리 있으면 빨간 펄스, 정상이면 초록 */}
+      {issueStats.hasIssues ? (
+        <div className="relative overflow-hidden rounded-lg mb-4">
+          {/* 펄스 배경 */}
+          <div className="absolute inset-0 bg-red-500 animate-pulse opacity-20 rounded-lg" />
+          <div className="relative bg-red-50 dark:bg-red-900/40 border border-red-300 dark:border-red-700 px-4 py-3 rounded-lg flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2.5">
+              <div className="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center shrink-0">
+                <ShieldAlert className="h-4 w-4 text-white" />
+              </div>
+              <div>
+                <p className="text-sm font-bold text-red-700 dark:text-red-300">
+                  미정리 {issueStats.totalCount}건
+                </p>
+                <p className="text-xs text-red-600/80 dark:text-red-400/80">
+                  {issueStats.issueCards.join(' · ')}
+                </p>
+              </div>
+            </div>
+            {issueStats.totalAmount > 0 && (
+              <div className="text-right shrink-0">
+                <p className="text-lg font-bold text-red-700 dark:text-red-300">
+                  {formatKoreanAmount(issueStats.totalAmount)}
+                </p>
+                <p className="text-[11px] text-red-500/70 dark:text-red-400/60">미정리 총액</p>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 px-4 py-2.5 rounded-lg mb-4 flex items-center gap-2.5">
+          <CheckCircle2 className="h-4 w-4 text-green-500" />
+          <span className="text-sm font-medium text-green-700 dark:text-green-300">미정리 건 없음 — 가지급금 정상 관리 중</span>
+        </div>
+      )}
+
+      {/* 기존 warningBanner 호환 (issueStats과 별도 메시지가 있는 경우) */}
+      {data.warningBanner && issueStats.hasIssues && (
+        <div className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 text-xs font-medium px-3 py-2 rounded-lg mb-4 flex items-center gap-2">
+          <AlertTriangle className="h-3.5 w-3.5" />
           {data.warningBanner}
         </div>
       )}

src/components/business/CEODashboard/sections/DailyAttendanceSection.tsx

@@ -53,7 +53,7 @@ export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
         <Button
           variant="ghost"
           size="sm"
-          onClick={(e) => { e.stopPropagation(); router.push('/ko/hr/attendance'); }}
+          onClick={(e) => { e.stopPropagation(); router.push('/hr/attendance-management'); }}
           className="text-white hover:bg-white/10 gap-1 text-xs"
         >
           근태관리

src/components/business/CEODashboard/sections/DailyProductionSection.tsx

@@ -83,6 +83,12 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
       }
     >
         {/* 공정 탭 */}
+        {data.processes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+            <Factory className="h-10 w-10 mb-3 opacity-30" />
+            <p className="text-sm">오늘 등록된 작업 지시가 없습니다.</p>
+          </div>
+        ) : (
         <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList className="mb-4">
             {data.processes.map((process) => (
@@ -240,6 +246,7 @@ export function DailyProductionSection({ data, showShipment = true }: DailyProdu
             </TabsContent>
           ))}
         </Tabs>
+        )}
 
     </CollapsibleDashboardCard>
 

src/components/document-system/viewer/DocumentViewer.tsx

@@ -198,7 +198,8 @@ export function DocumentViewer({
               }
             }
           } catch {
-            // 변환 실패 시 원본 src 유지
+            // 변환 실패 시 빈 이미지로 대체 (Puppeteer에서 proxy URL 요청 방지)
+            clonedImg.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
           }
         }
       })

src/components/layout/HeaderFavoritesBar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Star } from 'lucide-react';
+import { Bookmark, MoreHorizontal } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Tooltip,
@@ -20,14 +20,68 @@ import { useFavoritesStore } from '@/stores/favoritesStore';
 import { iconMap } from '@/lib/utils/menuTransform';
 import type { FavoriteItem } from '@/stores/favoritesStore';
 
+// "시스템 대시보드" 기준 텍스트 폭 (7글자 ≈ 80px)
+const TEXT_DEFAULT_MAX = 80;
+const TEXT_EXPANDED_MAX = 200;
+const TEXT_SHRUNK_MAX = 28;
+const OVERFLOW_BTN_WIDTH = 56;
+const GAP = 6;
+
 interface HeaderFavoritesBarProps {
   isMobile: boolean;
 }
 
+/** 별 아이콘 드롭다운 (공간 부족 / 모바일 / 태블릿) */
+function StarDropdown({
+  favorites,
+  className,
+  onItemClick,
+}: {
+  favorites: FavoriteItem[];
+  className?: string;
+  onItemClick: (item: FavoriteItem) => void;
+}) {
+  const getIcon = (name: string) => iconMap[name] || null;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="default"
+          size="sm"
+          className={`p-0 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center ${className ?? 'w-10 h-10'}`}
+          title="즐겨찾기"
+        >
+          <Bookmark className="h-4 w-4 fill-white" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {favorites.map((item) => {
+          const Icon = getIcon(item.iconName);
+          return (
+            <DropdownMenuItem
+              key={item.id}
+              onClick={() => onItemClick(item)}
+              className="flex items-center gap-2 cursor-pointer"
+            >
+              {Icon && <Icon className="h-4 w-4" />}
+              <span>{item.label}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps) {
   const router = useRouter();
   const { favorites } = useFavoritesStore();
   const [isTablet, setIsTablet] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chipWidthsRef = useRef<number[]>([]);
+  const measuredRef = useRef(false);
+  const [visibleCount, setVisibleCount] = useState(favorites.length);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
 
   // 태블릿 감지 (768~1024)
   useEffect(() => {
@@ -40,6 +94,70 @@ export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps
     return () => window.removeEventListener('resize', check);
   }, []);
 
+  // 즐겨찾기 변경 시 측정 리셋
+  useEffect(() => {
+    measuredRef.current = false;
+    chipWidthsRef.current = [];
+    setVisibleCount(favorites.length);
+  }, [favorites.length]);
+
+  // 모바일/태블릿 ↔ 데스크탑 전환 시 측정 리셋
+  useEffect(() => {
+    if (!isMobile && !isTablet) {
+      measuredRef.current = false;
+      chipWidthsRef.current = [];
+      setVisibleCount(favorites.length);
+    }
+  }, [isMobile, isTablet, favorites.length]);
+
+  // 데스크탑 동적 오버플로: 전체 chip 폭 측정 → 저장 → resize 시 재계산
+  useEffect(() => {
+    if (isMobile || isTablet) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const calculate = () => {
+      // 최초: 전체 chip 렌더 상태에서 폭 저장
+      if (!measuredRef.current) {
+        const chips = container.querySelectorAll<HTMLElement>('[data-chip]');
+        if (chips.length === favorites.length && chips.length > 0) {
+          chipWidthsRef.current = Array.from(chips).map((c) => c.offsetWidth);
+          measuredRef.current = true;
+        } else {
+          return;
+        }
+      }
+
+      const containerWidth = container.offsetWidth;
+      const widths = chipWidthsRef.current;
+
+      // 공간 부족: chip 1개 + overflow 버튼도 안 들어가면 전부 드롭다운
+      const minChipWidth = Math.min(...widths);
+      if (containerWidth < minChipWidth + OVERFLOW_BTN_WIDTH + GAP) {
+        setVisibleCount(0);
+        return;
+      }
+
+      let totalWidth = 0;
+      let count = 0;
+
+      for (let i = 0; i < widths.length; i++) {
+        const needed = totalWidth + widths[i] + (count > 0 ? GAP : 0);
+        const hasMore = i < widths.length - 1;
+        const reserve = hasMore ? OVERFLOW_BTN_WIDTH + GAP : 0;
+        if (needed + reserve > containerWidth && count > 0) break;
+        totalWidth = needed;
+        count++;
+      }
+      setVisibleCount(count);
+    };
+
+    requestAnimationFrame(calculate);
+    const observer = new ResizeObserver(calculate);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isMobile, isTablet, favorites.length]);
+
   const handleClick = useCallback(
     (item: FavoriteItem) => {
       router.push(item.path);
@@ -49,106 +167,121 @@ export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps
 
   if (favorites.length === 0) return null;
 
-  const getIcon = (iconName: string) => {
-    return iconMap[iconName] || null;
-  };
+  const getIcon = (iconName: string) => iconMap[iconName] || null;
 
-  // 모바일 & 태블릿: 별 아이콘 드롭다운
-  if (isMobile || isTablet) {
+  // 모바일: 별 아이콘 드롭다운 (모바일 헤더용 - flex-1 불필요)
+  if (isMobile) {
     return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="default"
-            size="sm"
-            className={`p-0 rounded-lg min-[320px]:rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center ${
-              isMobile
-                ? 'min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px]'
-                : 'w-10 h-10'
-            }`}
-            title="즐겨찾기"
-          >
-            <Star className="h-4 w-4 fill-white" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          {favorites.map((item) => {
-            const Icon = getIcon(item.iconName);
-            return (
-              <DropdownMenuItem
-                key={item.id}
-                onClick={() => handleClick(item)}
-                className="flex items-center gap-2 cursor-pointer"
-              >
-                {Icon && <Icon className="h-4 w-4" />}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <StarDropdown
+        favorites={favorites}
+        onItemClick={handleClick}
+        className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] rounded-lg min-[320px]:rounded-xl"
+      />
     );
   }
 
-  // 데스크톱: 8개 이하 → 아이콘 버튼, 9개 이상 → 별 드롭다운
-  const DESKTOP_ICON_LIMIT = 8;
-
-  if (favorites.length > DESKTOP_ICON_LIMIT) {
+  // 태블릿: 별 드롭다운 + flex-1 wrapper (데스크탑 헤더에서 오른쪽 정렬 유지)
+  if (isTablet) {
     return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="default"
-            size="sm"
-            className="w-10 h-10 p-0 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center"
-            title="즐겨찾기"
-          >
-            <Star className="h-4 w-4 fill-white" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          {favorites.map((item) => {
-            const Icon = getIcon(item.iconName);
-            return (
-              <DropdownMenuItem
-                key={item.id}
-                onClick={() => handleClick(item)}
-                className="flex items-center gap-2 cursor-pointer"
-              >
-                {Icon && <Icon className="h-4 w-4" />}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <div className="flex-1 min-w-0 flex items-center justify-end">
+        <StarDropdown favorites={favorites} onItemClick={handleClick} className="w-10 h-10" />
+      </div>
     );
   }
 
+  // 데스크톱: containerRef를 항상 렌더 (ResizeObserver 안정성)
+  const visibleItems = favorites.slice(0, visibleCount);
+  const overflowItems = favorites.slice(visibleCount);
+  const showStarOnly = measuredRef.current && visibleCount === 0;
+
   return (
     <TooltipProvider delayDuration={300}>
-      <div className="flex items-center gap-2">
-        {favorites.map((item) => {
-          const Icon = getIcon(item.iconName);
-          if (!Icon) return null;
-          return (
-            <Tooltip key={item.id}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={() => handleClick(item)}
-                  className="rounded-xl bg-blue-600 hover:bg-blue-700 text-white w-10 h-10 p-0 flex items-center justify-center transition-all duration-200"
-                >
-                  <Icon className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                <p>{item.label}</p>
-              </TooltipContent>
-            </Tooltip>
-          );
-        })}
+      <div
+        ref={containerRef}
+        className="flex-1 min-w-0 flex items-center justify-end gap-1.5"
+        onMouseLeave={() => setHoveredId(null)}
+      >
+        {showStarOnly ? (
+          <StarDropdown favorites={favorites} onItemClick={handleClick} />
+        ) : (
+          <>
+            {visibleItems.map((item) => {
+              const Icon = getIcon(item.iconName);
+              const isHovered = hoveredId === item.id;
+              const isOtherHovered = hoveredId !== null && !isHovered;
+
+              const textMaxWidth = isHovered
+                ? TEXT_EXPANDED_MAX
+                : isOtherHovered
+                  ? TEXT_SHRUNK_MAX
+                  : TEXT_DEFAULT_MAX;
+
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      data-chip
+                      variant="default"
+                      size="sm"
+                      onClick={() => handleClick(item)}
+                      onMouseEnter={() => setHoveredId(item.id)}
+                      className={`rounded-full text-white h-8 flex items-center overflow-hidden ${
+                        isOtherHovered ? 'px-2 gap-1 bg-blue-400/70' : 'px-3 gap-1.5 bg-blue-600 hover:bg-blue-700'
+                      }`}
+                      style={{
+                        transition: 'all 500ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                      }}
+                    >
+                      {Icon && <Icon className="h-3.5 w-3.5 shrink-0" />}
+                      <span
+                        className="text-xs whitespace-nowrap overflow-hidden text-ellipsis"
+                        style={{
+                          maxWidth: textMaxWidth,
+                          transition: 'max-width 500ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 400ms ease',
+                          opacity: isOtherHovered ? 0.7 : 1,
+                        }}
+                      >
+                        {item.label}
+                      </span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    <p>{item.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+            {overflowItems.length > 0 && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="rounded-full bg-blue-500/80 hover:bg-blue-600 text-white h-8 px-2.5 gap-1 flex items-center shrink-0"
+                  >
+                    <MoreHorizontal className="h-3.5 w-3.5" />
+                    <span className="text-xs">+{overflowItems.length}</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  {overflowItems.map((item) => {
+                    const Icon = getIcon(item.iconName);
+                    return (
+                      <DropdownMenuItem
+                        key={item.id}
+                        onClick={() => handleClick(item)}
+                        className="flex items-center gap-2 cursor-pointer"
+                      >
+                        {Icon && <Icon className="h-4 w-4" />}
+                        <span>{item.label}</span>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </>
+        )}
       </div>
     </TooltipProvider>
   );

src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronsDownUp, ChevronsUpDown, Circle, Star } from 'lucide-react';
+import { Bookmark, ChevronRight, ChevronsDownUp, ChevronsUpDown, Circle } from 'lucide-react';
 import type { MenuItem } from '@/stores/menuStore';
 import { useEffect, useRef, useCallback } from 'react';
 import { useFavoritesStore, MAX_FAVORITES } from '@/stores/favoritesStore';
@@ -159,7 +159,7 @@ function MenuItemComponent({
               }`}
               title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
             >
-              <Star className={`h-3.5 w-3.5 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-3.5 w-3.5 ${isFav ? 'fill-yellow-500' : ''}`} />
             </button>
           )}
         </div>
@@ -224,7 +224,7 @@ function MenuItemComponent({
               }`}
               title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
             >
-              <Star className={`h-3 w-3 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-3 w-3 ${isFav ? 'fill-yellow-500' : ''}`} />
             </button>
           )}
         </div>
@@ -291,7 +291,7 @@ function MenuItemComponent({
               }`}
               title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
             >
-              <Star className={`h-2.5 w-2.5 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-2.5 w-2.5 ${isFav ? 'fill-yellow-500' : ''}`} />
             </button>
           )}
         </div>

src/components/material/ReceivingManagement/InspectionCreate.tsx

@@ -12,12 +12,12 @@
 
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
 import { getTodayString } from '@/lib/utils/date';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { materialInspectionCreateConfig } from './inspectionConfig';
 import { ContentSkeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
@@ -29,7 +29,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import { getReceivings } from './actions';
 import type { InspectionCheckItem, ReceivingItem } from './types';
 import { SuccessDialog } from './SuccessDialog';
@@ -81,7 +80,7 @@ export function InspectionCreate({ id }: Props) {
   const [opinion, setOpinion] = useState('');
 
   // 유효성 검사 에러
-  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
   // 성공 다이얼로그
   const [showSuccess, setShowSuccess] = useState(false);
@@ -117,15 +116,22 @@ export function InspectionCreate({ id }: Props) {
   // 대상 선택 핸들러
   const handleTargetSelect = useCallback((targetId: string) => {
     setSelectedTargetId(targetId);
-    setValidationErrors([]);
   }, []);
 
   // 판정 변경 핸들러
-  const handleJudgmentChange = useCallback((itemId: string, judgment: '적' | '부적') => {
+  const handleJudgmentChange = useCallback((itemId: string, index: number, judgment: '적' | '부적') => {
     setInspectionItems((prev) =>
       prev.map((item) => (item.id === itemId ? { ...item, judgment } : item))
     );
-    setValidationErrors([]);
+    // 해당 항목의 에러 클리어
+    setValidationErrors((prev) => {
+      const key = `judgment_${index}`;
+      if (prev[key]) {
+        const { [key]: _, ...rest } = prev;
+        return rest;
+      }
+      return prev;
+    });
   }, []);
 
   // 비고 변경 핸들러
@@ -137,22 +143,29 @@ export function InspectionCreate({ id }: Props) {
 
   // 유효성 검사
   const validateForm = useCallback((): boolean => {
-    const errors: string[] = [];
+    const errors: Record<string, string> = {};
 
     // 필수 필드: 검사자
     if (!inspector.trim()) {
-      errors.push('검사자는 필수 입력 항목입니다.');
+      errors.inspector = '검사자는 필수 입력 항목입니다.';
     }
 
     // 검사 항목 판정 확인
     inspectionItems.forEach((item, index) => {
       if (!item.judgment) {
-        errors.push(`${index + 1}. ${item.name}: 판정을 선택해주세요.`);
+        errors[`judgment_${index}`] = `${item.name}: 판정을 선택해주세요.`;
       }
     });
 
     setValidationErrors(errors);
-    return errors.length === 0;
+
+    if (Object.keys(errors).length > 0) {
+      const firstError = Object.values(errors)[0];
+      toast.error(firstError);
+      return false;
+    }
+
+    return true;
   }, [inspector, inspectionItems]);
 
   // 검사 저장
@@ -214,30 +227,6 @@ export function InspectionCreate({ id }: Props) {
 
           {/* 우측: 검사 정보 및 항목 */}
           <div className="lg:col-span-3 space-y-6">
-            {/* Validation 에러 표시 */}
-            {validationErrors.length > 0 && (
-              <Alert className="bg-red-50 border-red-200">
-                <AlertDescription className="text-red-900">
-                  <div className="flex items-start gap-2">
-                    <span className="text-lg">⚠️</span>
-                    <div className="flex-1">
-                      <strong className="block mb-2">
-                        입력 내용을 확인해주세요 ({validationErrors.length}개 오류)
-                      </strong>
-                      <ul className="space-y-1 text-sm">
-                        {validationErrors.map((error, index) => (
-                          <li key={index} className="flex items-start gap-1">
-                            <span>•</span>
-                            <span>{error}</span>
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                </AlertDescription>
-              </Alert>
-            )}
-
             {/* 검사 정보 */}
             <div className="space-y-4 bg-white p-4 rounded-lg border">
               <h3 className="font-medium">검사 정보</h3>
@@ -257,10 +246,19 @@ export function InspectionCreate({ id }: Props) {
                     value={inspector}
                     onChange={(e) => {
                       setInspector(e.target.value);
-                      setValidationErrors([]);
+                      if (validationErrors.inspector) {
+                        setValidationErrors((prev) => {
+                          const { inspector: _, ...rest } = prev;
+                          return rest;
+                        });
+                      }
                     }}
                     placeholder="검사자명 입력"
+                    className={validationErrors.inspector ? 'border-red-500' : ''}
                   />
+                  {validationErrors.inspector && (
+                    <p className="text-sm text-red-500">{validationErrors.inspector}</p>
+                  )}
                 </div>
                 <div className="space-y-2">
                   <Label className="text-sm text-muted-foreground">LOT번호 (YYMMDD-##)</Label>
@@ -284,39 +282,45 @@ export function InspectionCreate({ id }: Props) {
                     </tr>
                   </thead>
                   <tbody>
-                    {inspectionItems.map((item) => (
-                      <tr key={item.id} className="border-t">
-                        <td className="px-3 py-2">{item.name}</td>
-                        <td className="px-3 py-2 text-muted-foreground text-xs">
-                          {item.specification}
-                        </td>
-                        <td className="px-3 py-2">{item.method}</td>
-                        <td className="px-3 py-2">
-                          <Select
-                            value={item.judgment || ''}
-                            onValueChange={(value) =>
-                              handleJudgmentChange(item.id, value as '적' | '부적')
-                            }
-                          >
-                            <SelectTrigger className="h-8">
-                              <SelectValue placeholder="선택" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="적">적</SelectItem>
-                              <SelectItem value="부적">부적</SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </td>
-                        <td className="px-3 py-2">
-                          <Input
-                            value={item.remark || ''}
-                            onChange={(e) => handleRemarkChange(item.id, e.target.value)}
-                            placeholder="비고"
-                            className="h-8"
-                          />
-                        </td>
-                      </tr>
-                    ))}
+                    {inspectionItems.map((item, index) => {
+                      const judgmentErrorKey = `judgment_${index}`;
+                      return (
+                        <tr key={item.id} className="border-t">
+                          <td className="px-3 py-2">{item.name}</td>
+                          <td className="px-3 py-2 text-muted-foreground text-xs">
+                            {item.specification}
+                          </td>
+                          <td className="px-3 py-2">{item.method}</td>
+                          <td className="px-3 py-2">
+                            <Select
+                              value={item.judgment || ''}
+                              onValueChange={(value) =>
+                                handleJudgmentChange(item.id, index, value as '적' | '부적')
+                              }
+                            >
+                              <SelectTrigger className={`h-8 ${validationErrors[judgmentErrorKey] ? 'border-red-500' : ''}`}>
+                                <SelectValue placeholder="선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="적">적</SelectItem>
+                                <SelectItem value="부적">부적</SelectItem>
+                              </SelectContent>
+                            </Select>
+                            {validationErrors[judgmentErrorKey] && (
+                              <p className="text-xs text-red-500 mt-1">{validationErrors[judgmentErrorKey]}</p>
+                            )}
+                          </td>
+                          <td className="px-3 py-2">
+                            <Input
+                              value={item.remark || ''}
+                              onChange={(e) => handleRemarkChange(item.id, e.target.value)}
+                              placeholder="비고"
+                              className="h-8"
+                            />
+                          </td>
+                        </tr>
+                      );
+                    })}
                   </tbody>
                 </table>
               </div>
@@ -361,4 +365,4 @@ export function InspectionCreate({ id }: Props) {
       renderForm={renderFormContent}
     />
   );
-}
+}

src/components/outbound/ShipmentManagement/ShipmentCreate.tsx

@@ -16,7 +16,6 @@ import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import {
   Table,
   TableBody,
@@ -138,7 +137,7 @@ export function ShipmentCreate() {
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
   // 아코디언 상태
   const [accordionValue, setAccordionValue] = useState<string[]>([]);
@@ -226,7 +225,9 @@ export function ShipmentCreate() {
       setProductGroups([]);
       setOtherParts([]);
     }
-    if (validationErrors.length > 0) setValidationErrors([]);
+    if (validationErrors.lotNo) {
+      setValidationErrors(prev => { const { lotNo: _, ...rest } = prev; return rest; });
+    }
   }, [validationErrors]);
 
   // 배송방식에 따라 운임비용 '없음' 고정 여부 판단
@@ -245,7 +246,13 @@ export function ShipmentCreate() {
     } else {
       setFormData(prev => ({ ...prev, [field]: value }));
     }
-    if (validationErrors.length > 0) setValidationErrors([]);
+    if (validationErrors[field]) {
+      setValidationErrors(prev => {
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    }
   };
 
   // 배차 정보 핸들러
@@ -289,12 +296,16 @@ export function ShipmentCreate() {
   }, [router]);
 
   const validateForm = (): boolean => {
-    const errors: string[] = [];
-    if (!formData.lotNo) errors.push('로트번호는 필수 선택 항목입니다.');
-    if (!formData.scheduledDate) errors.push('출고예정일은 필수 입력 항목입니다.');
-    if (!formData.deliveryMethod) errors.push('배송방식은 필수 선택 항목입니다.');
+    const errors: Record<string, string> = {};
+    if (!formData.lotNo) errors.lotNo = '로트번호는 필수 선택 항목입니다.';
+    if (!formData.scheduledDate) errors.scheduledDate = '출고예정일은 필수 입력 항목입니다.';
+    if (!formData.deliveryMethod) errors.deliveryMethod = '배송방식은 필수 선택 항목입니다.';
     setValidationErrors(errors);
-    return errors.length === 0;
+    if (Object.keys(errors).length > 0) {
+      const firstError = Object.values(errors)[0];
+      toast.error(firstError);
+    }
+    return Object.keys(errors).length === 0;
   };
 
   const handleSubmit = useCallback(async (): Promise<{ success: boolean; error?: string }> => {
@@ -349,30 +360,6 @@ export function ShipmentCreate() {
   // 폼 컨텐츠 렌더링
   const renderFormContent = useCallback((_props: { formData: Record<string, unknown>; onChange: (key: string, value: unknown) => void; mode: string; errors: Record<string, string> }) => (
     <div className="space-y-6">
-      {/* Validation 에러 표시 */}
-      {validationErrors.length > 0 && (
-        <Alert className="bg-red-50 border-red-200">
-          <AlertDescription className="text-red-900">
-            <div className="flex items-start gap-2">
-              <span className="text-lg">⚠️</span>
-              <div className="flex-1">
-                <strong className="block mb-2">
-                  입력 내용을 확인해주세요 ({validationErrors.length}개 오류)
-                </strong>
-                <ul className="space-y-1 text-sm">
-                  {validationErrors.map((err, index) => (
-                    <li key={index} className="flex items-start gap-1">
-                      <span>•</span>
-                      <span>{err}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </AlertDescription>
-        </Alert>
-      )}
-
       {/* 카드 1: 기본 정보 */}
       <Card>
         <CardHeader>
@@ -393,7 +380,7 @@ export function ShipmentCreate() {
                 onValueChange={handleLotChange}
                 disabled={isSubmitting}
               >
-                <SelectTrigger>
+                <SelectTrigger className={validationErrors.lotNo ? 'border-red-500' : ''}>
                   <SelectValue placeholder="로트 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -404,6 +391,7 @@ export function ShipmentCreate() {
                   ))}
                 </SelectContent>
               </Select>
+              {validationErrors.lotNo && <p className="text-sm text-red-500">{validationErrors.lotNo}</p>}
             </div>
             {/* 현장명 - LOT 선택 시 자동 매핑 */}
             <div>
@@ -432,7 +420,9 @@ export function ShipmentCreate() {
                 value={formData.scheduledDate}
                 onChange={(date) => handleInputChange('scheduledDate', date)}
                 disabled={isSubmitting}
+                className={validationErrors.scheduledDate ? 'border-red-500' : ''}
               />
+              {validationErrors.scheduledDate && <p className="text-sm text-red-500">{validationErrors.scheduledDate}</p>}
             </div>
             <div className="space-y-2">
               <Label>출고일</Label>
@@ -449,7 +439,7 @@ export function ShipmentCreate() {
                 onValueChange={(value) => handleInputChange('deliveryMethod', value)}
                 disabled={isSubmitting}
               >
-                <SelectTrigger>
+                <SelectTrigger className={validationErrors.deliveryMethod ? 'border-red-500' : ''}>
                   <SelectValue placeholder="배송방식 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -460,6 +450,7 @@ export function ShipmentCreate() {
                   ))}
                 </SelectContent>
               </Select>
+              {validationErrors.deliveryMethod && <p className="text-sm text-red-500">{validationErrors.deliveryMethod}</p>}
             </div>
             <div className="space-y-2">
               <Label>운임비용</Label>
@@ -748,9 +739,7 @@ export function ShipmentCreate() {
         isLoading={false}
         onCancel={handleCancel}
         renderForm={(_props: { formData: Record<string, unknown>; onChange: (key: string, value: unknown) => void; mode: string; errors: Record<string, string> }) => (
-          <Alert className="bg-red-50 border-red-200">
-            <AlertDescription className="text-red-900">{error}</AlertDescription>
-          </Alert>
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-900">{error}</div>
         )}
       />
     );

src/components/outbound/VehicleDispatchManagement/VehicleDispatchDetail.tsx

@@ -9,14 +9,6 @@ import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { vehicleDispatchConfig } from './vehicleDispatchConfig';
 import { getVehicleDispatchById } from './actions';
@@ -111,34 +103,20 @@ export function VehicleDispatchDetail({ id }: VehicleDispatchDetailProps) {
           </CardContent>
         </Card>
 
-        {/* 카드 2: 배차 정보 (테이블 형태) */}
+        {/* 카드 2: 배차 정보 */}
         <Card>
           <CardHeader>
             <CardTitle className="text-base">배차 정보</CardTitle>
           </CardHeader>
-          <CardContent className="p-0">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>물류업체</TableHead>
-                  <TableHead>입차일시</TableHead>
-                  <TableHead>구분</TableHead>
-                  <TableHead>차량번호</TableHead>
-                  <TableHead>기사연락처</TableHead>
-                  <TableHead>비고</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>{detail.logisticsCompany || '-'}</TableCell>
-                  <TableCell>{detail.arrivalDateTime || '-'}</TableCell>
-                  <TableCell>{detail.tonnage || '-'}</TableCell>
-                  <TableCell>{detail.vehicleNo || '-'}</TableCell>
-                  <TableCell>{detail.driverContact || '-'}</TableCell>
-                  <TableCell>{detail.remarks || '-'}</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+              {renderInfoField('물류업체', detail.logisticsCompany)}
+              {renderInfoField('입차일시', detail.arrivalDateTime)}
+              {renderInfoField('구분', detail.tonnage)}
+              {renderInfoField('차량번호', detail.vehicleNo)}
+              {renderInfoField('기사연락처', detail.driverContact)}
+              {renderInfoField('비고', detail.remarks)}
+            </div>
           </CardContent>
         </Card>
 

src/components/outbound/VehicleDispatchManagement/VehicleDispatchEdit.tsx

@@ -12,7 +12,6 @@ import { DateTimePicker } from '@/components/ui/date-time-picker';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import {
   Select,
   SelectContent,
@@ -70,7 +69,7 @@ export function VehicleDispatchEdit({ id }: VehicleDispatchEditProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
   // 데이터 로드
   const loadData = useCallback(async () => {
@@ -121,13 +120,13 @@ export function VehicleDispatchEdit({ id }: VehicleDispatchEditProps) {
       vat,
       totalAmount: total,
     }));
-    if (validationErrors.length > 0) setValidationErrors([]);
+    if (Object.keys(validationErrors).length > 0) setValidationErrors({});
   }, [validationErrors]);
 
   // 폼 입력 핸들러
   const handleInputChange = (field: keyof VehicleDispatchEditFormData, value: string) => {
     setFormData(prev => ({ ...prev, [field]: value }));
-    if (validationErrors.length > 0) setValidationErrors([]);
+    if (Object.keys(validationErrors).length > 0) setValidationErrors({});
   };
 
   const handleCancel = useCallback(() => {
@@ -177,19 +176,6 @@ export function VehicleDispatchEdit({ id }: VehicleDispatchEditProps) {
             </Badge>
           </div>
 
-          {/* Validation 에러 표시 */}
-          {validationErrors.length > 0 && (
-            <Alert className="bg-red-50 border-red-200">
-              <AlertDescription className="text-red-900">
-                <ul className="space-y-1 text-sm">
-                  {validationErrors.map((err, index) => (
-                    <li key={index}>• {err}</li>
-                  ))}
-                </ul>
-              </AlertDescription>
-            </Alert>
-          )}
-
           {/* 카드 1: 기본 정보 (운임비용만 편집 가능) */}
           <Card>
             <CardHeader>
@@ -370,11 +356,9 @@ export function VehicleDispatchEdit({ id }: VehicleDispatchEditProps) {
           mode: string;
           errors: Record<string, string>;
         }) => (
-          <Alert className="bg-red-50 border-red-200">
-            <AlertDescription className="text-red-900">
-              {error || '배차차량 정보를 찾을 수 없습니다.'}
-            </AlertDescription>
-          </Alert>
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-900">
+            {error || '배차차량 정보를 찾을 수 없습니다.'}
+          </div>
         )}
       />
     );

src/components/outbound/VehicleDispatchManagement/actions.ts

@@ -22,6 +22,93 @@ interface PaginationMeta {
   total: number;
 }
 
+// ===== 목데이터 (API 미응답 시 fallback) =====
+const MOCK_LIST: VehicleDispatchItem[] = [
+  {
+    id: 'mock-1',
+    dispatchNo: 'DC-20260301-001',
+    shipmentNo: 'SH-20260228-012',
+    lotNo: 'LOT-260228-01',
+    siteName: '삼성전자 평택캠퍼스',
+    orderCustomer: '삼성전자(주)',
+    logisticsCompany: '한진택배',
+    tonnage: '5톤',
+    supplyAmount: 350000,
+    vat: 35000,
+    totalAmount: 385000,
+    freightCostType: 'prepaid',
+    vehicleNo: '경기12가3456',
+    driverContact: '010-1234-5678',
+    writer: '홍길동',
+    arrivalDateTime: '2026-03-05T09:00:00',
+    status: 'draft',
+    remarks: '오전 입차 요청',
+  },
+  {
+    id: 'mock-2',
+    dispatchNo: 'DC-20260301-002',
+    shipmentNo: 'SH-20260227-008',
+    lotNo: 'LOT-260227-03',
+    siteName: 'LG디스플레이 파주공장',
+    orderCustomer: 'LG디스플레이(주)',
+    logisticsCompany: '대한통운',
+    tonnage: '3.5톤',
+    supplyAmount: 220000,
+    vat: 22000,
+    totalAmount: 242000,
+    freightCostType: 'collect',
+    vehicleNo: '서울34나7890',
+    driverContact: '010-9876-5432',
+    writer: '김철수',
+    arrivalDateTime: '2026-03-04T14:30:00',
+    status: 'completed',
+    remarks: '',
+  },
+];
+
+const MOCK_DETAIL: Record<string, VehicleDispatchDetail> = {
+  'mock-1': {
+    id: 'mock-1',
+    dispatchNo: 'DC-20260301-001',
+    shipmentNo: 'SH-20260228-012',
+    lotNo: 'LOT-260228-01',
+    siteName: '삼성전자 평택캠퍼스',
+    orderCustomer: '삼성전자(주)',
+    freightCostType: 'prepaid',
+    status: 'draft',
+    writer: '홍길동',
+    logisticsCompany: '한진택배',
+    arrivalDateTime: '2026-03-05T09:00:00',
+    tonnage: '5톤',
+    vehicleNo: '경기12가3456',
+    driverContact: '010-1234-5678',
+    remarks: '오전 입차 요청',
+    supplyAmount: 350000,
+    vat: 35000,
+    totalAmount: 385000,
+  },
+  'mock-2': {
+    id: 'mock-2',
+    dispatchNo: 'DC-20260301-002',
+    shipmentNo: 'SH-20260227-008',
+    lotNo: 'LOT-260227-03',
+    siteName: 'LG디스플레이 파주공장',
+    orderCustomer: 'LG디스플레이(주)',
+    freightCostType: 'collect',
+    status: 'completed',
+    writer: '김철수',
+    logisticsCompany: '대한통운',
+    arrivalDateTime: '2026-03-04T14:30:00',
+    tonnage: '3.5톤',
+    vehicleNo: '서울34나7890',
+    driverContact: '010-9876-5432',
+    remarks: '',
+    supplyAmount: 220000,
+    vat: 22000,
+    totalAmount: 242000,
+  },
+};
+
 // ===== API 응답 → 프론트 타입 변환 =====
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function transformToListItem(data: any): VehicleDispatchItem {
@@ -89,7 +176,7 @@ export async function getVehicleDispatches(params?: {
   pagination: PaginationMeta;
   error?: string;
 }> {
-  return executePaginatedAction({
+  const result = await executePaginatedAction({
     url: buildApiUrl('/api/v1/vehicle-dispatches', {
       search: params?.search,
       status: params?.status !== 'all' ? params?.status : undefined,
@@ -101,6 +188,30 @@ export async function getVehicleDispatches(params?: {
     transform: transformToListItem,
     errorMessage: '배차차량 목록 조회에 실패했습니다.',
   });
+
+  // API 데이터가 없으면 목데이터 합산
+  if (result.success && result.data.length === 0) {
+    let mockFiltered = [...MOCK_LIST];
+    if (params?.status && params.status !== 'all') {
+      mockFiltered = mockFiltered.filter((m) => m.status === params.status);
+    }
+    if (params?.search) {
+      const q = params.search.toLowerCase();
+      mockFiltered = mockFiltered.filter((m) =>
+        m.dispatchNo.toLowerCase().includes(q) ||
+        m.lotNo?.toLowerCase().includes(q) ||
+        m.siteName.toLowerCase().includes(q) ||
+        m.orderCustomer.toLowerCase().includes(q)
+      );
+    }
+    return {
+      ...result,
+      data: mockFiltered,
+      pagination: { ...result.pagination, total: mockFiltered.length, lastPage: 1 },
+    };
+  }
+
+  return result;
 }
 
 // ===== 배차차량 통계 조회 =====
@@ -109,7 +220,7 @@ export async function getVehicleDispatchStats(): Promise<{
   data?: VehicleDispatchStats;
   error?: string;
 }> {
-  return executeServerAction<
+  const result = await executeServerAction<
     { prepaid_amount: number; collect_amount: number; total_amount: number },
     VehicleDispatchStats
   >({
@@ -121,6 +232,15 @@ export async function getVehicleDispatchStats(): Promise<{
     }),
     errorMessage: '배차차량 통계 조회에 실패했습니다.',
   });
+
+  // API 통계가 모두 0이면 목데이터 기반 통계
+  if (result.success && result.data && result.data.totalAmount === 0) {
+    const prepaid = MOCK_LIST.filter((m) => m.freightCostType === 'prepaid').reduce((s, m) => s + m.totalAmount, 0);
+    const collect = MOCK_LIST.filter((m) => m.freightCostType === 'collect').reduce((s, m) => s + m.totalAmount, 0);
+    return { ...result, data: { prepaidAmount: prepaid, collectAmount: collect, totalAmount: prepaid + collect } };
+  }
+
+  return result;
 }
 
 // ===== 배차차량 상세 조회 =====
@@ -129,6 +249,11 @@ export async function getVehicleDispatchById(id: string): Promise<{
   data?: VehicleDispatchDetail;
   error?: string;
 }> {
+  // 목데이터 ID인 경우 바로 반환
+  if (id.startsWith('mock-') && MOCK_DETAIL[id]) {
+    return { success: true, data: MOCK_DETAIL[id] };
+  }
+
   return executeServerAction({
     url: buildApiUrl(`/api/v1/vehicle-dispatches/${id}`),
     transform: transformToDetail,

src/components/production/WorkOrders/WorkOrderCreate.tsx

@@ -8,7 +8,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, FileText, X, Edit, Loader2, Plus, Search, Trash2 } from 'lucide-react';
+import { FileText, X, Edit, Loader2, Plus, Search, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -22,14 +22,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { SalesOrderSelectModal } from './SalesOrderSelectModal';
 import { AssigneeSelectModal } from './AssigneeSelectModal';
 import { toast } from 'sonner';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { createWorkOrder, getProcessOptions, searchItemsForWorkOrder, type ProcessOption, type ManualItemOption } from './actions';
-import { PROCESS_TYPE_LABELS, type ProcessType, type SalesOrder } from './types';
+import { type SalesOrder } from './types';
 import { workOrderCreateConfig } from './workOrderConfig';
 
 import { useDevFill } from '@/components/dev';
@@ -44,20 +43,6 @@ interface ManualItem {
   unit: string;
 }
 
-// Validation 에러 타입
-interface ValidationErrors {
-  [key: string]: string;
-}
-
-// 필드명 매핑
-const FIELD_NAME_MAP: Record<string, string> = {
-  selectedOrder: '수주',
-  client: '발주처',
-  projectName: '현장명',
-  processId: '공정',
-  shipmentDate: '출고예정일',
-};
-
 type RegistrationMode = 'linked' | 'manual';
 
 interface FormData {
@@ -102,7 +87,7 @@ export function WorkOrderCreate() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isAssigneeModalOpen, setIsAssigneeModalOpen] = useState(false);
   const [assigneeNames, setAssigneeNames] = useState<string[]>([]);
-  const [validationErrors, setValidationErrors] = useState<ValidationErrors>({});
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [processOptions, setProcessOptions] = useState<ProcessOption[]>([]);
   const [isLoadingProcesses, setIsLoadingProcesses] = useState(true);
@@ -114,6 +99,17 @@ export function WorkOrderCreate() {
   const [isSearchingItems, setIsSearchingItems] = useState(false);
   const [showItemSearch, setShowItemSearch] = useState(false);
 
+  // 필드 에러 클리어 헬퍼
+  const clearFieldError = useCallback((field: string) => {
+    if (validationErrors[field]) {
+      setValidationErrors(prev => {
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    }
+  }, [validationErrors]);
+
   // 공정 옵션 로드
   useEffect(() => {
     async function loadProcessOptions() {
@@ -173,6 +169,7 @@ export function WorkOrderCreate() {
       orderNo: order.orderNo,
       itemCount: order.itemCount,
     });
+    clearFieldError('selectedOrder');
   };
 
   // 수주 해제
@@ -217,6 +214,7 @@ export function WorkOrderCreate() {
     setShowItemSearch(false);
     setItemSearchQuery('');
     setItemSearchResults([]);
+    clearFieldError('items');
   };
 
   // 품목 수량 변경
@@ -232,7 +230,7 @@ export function WorkOrderCreate() {
   // 폼 제출
   const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
     // Validation 체크
-    const errors: ValidationErrors = {};
+    const errors: Record<string, string> = {};
 
     if (mode === 'linked') {
       if (!formData.selectedOrder) {
@@ -261,8 +259,8 @@ export function WorkOrderCreate() {
     // 에러가 있으면 상태 업데이트 후 리턴
     if (Object.keys(errors).length > 0) {
       setValidationErrors(errors);
-      // 페이지 상단으로 스크롤
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      const firstError = Object.values(errors)[0];
+      toast.error(firstError);
       return { success: false, error: '' };
     }
 
@@ -318,35 +316,6 @@ export function WorkOrderCreate() {
   // 폼 컨텐츠 렌더링
   const renderFormContent = useCallback(() => (
     <div className="space-y-6">
-        {/* Validation 에러 표시 */}
-        {Object.keys(validationErrors).length > 0 && (
-          <Alert className="bg-red-50 border-red-200">
-            <AlertDescription className="text-red-900">
-              <div className="flex items-start gap-2">
-                <span className="text-lg">⚠️</span>
-                <div className="flex-1">
-                  <strong className="block mb-2">
-                    입력 내용을 확인해주세요 ({Object.keys(validationErrors).length}개 오류)
-                  </strong>
-                  <ul className="space-y-1 text-sm">
-                    {Object.entries(validationErrors).map(([field, message]) => {
-                      const fieldName = FIELD_NAME_MAP[field] || field;
-                      return (
-                        <li key={field} className="flex items-start gap-1">
-                          <span>•</span>
-                          <span>
-                            <strong>{fieldName}</strong>: {message}
-                          </span>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </div>
-            </AlertDescription>
-          </Alert>
-        )}
-
         {/* 등록 방식 */}
         <section className="bg-white border rounded-lg p-6">
           <h3 className="font-semibold mb-4">등록 방식</h3>
@@ -381,7 +350,7 @@ export function WorkOrderCreate() {
           <section className="bg-muted/30 border rounded-lg p-6">
             <h3 className="font-semibold mb-4">수주 정보</h3>
             {!formData.selectedOrder ? (
-              <div className="flex items-center justify-between p-4 bg-white border rounded-lg">
+              <div className={`flex items-center justify-between p-4 bg-white border rounded-lg ${validationErrors.selectedOrder ? 'border-red-500' : ''}`}>
                 <div className="flex items-center gap-3">
                   <FileText className="w-5 h-5 text-muted-foreground" />
                   <div>
@@ -448,6 +417,7 @@ export function WorkOrderCreate() {
                 </div>
               </div>
             )}
+            {validationErrors.selectedOrder && <p className="text-sm text-red-500 mt-1">{validationErrors.selectedOrder}</p>}
           </section>
         )}
 
@@ -459,21 +429,29 @@ export function WorkOrderCreate() {
               <Label>발주처 *</Label>
               <Input
                 value={formData.client}
-                onChange={(e) => setFormData({ ...formData, client: e.target.value })}
+                onChange={(e) => {
+                  setFormData({ ...formData, client: e.target.value });
+                  clearFieldError('client');
+                }}
                 placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '발주처 입력'}
                 disabled={mode === 'linked'}
-                className="bg-white"
+                className={`bg-white ${validationErrors.client ? 'border-red-500' : ''}`}
               />
+              {validationErrors.client && <p className="text-sm text-red-500">{validationErrors.client}</p>}
             </div>
             <div className="space-y-2">
               <Label>현장명 *</Label>
               <Input
                 value={formData.projectName}
-                onChange={(e) => setFormData({ ...formData, projectName: e.target.value })}
+                onChange={(e) => {
+                  setFormData({ ...formData, projectName: e.target.value });
+                  clearFieldError('projectName');
+                }}
                 placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '현장명 입력'}
                 disabled={mode === 'linked'}
-                className="bg-white"
+                className={`bg-white ${validationErrors.projectName ? 'border-red-500' : ''}`}
               />
+              {validationErrors.projectName && <p className="text-sm text-red-500">{validationErrors.projectName}</p>}
             </div>
             <div className="space-y-2">
               <Label>수주번호</Label>
@@ -506,10 +484,13 @@ export function WorkOrderCreate() {
               <Label>공정구분 *</Label>
               <Select
                 value={formData.processId?.toString() || ''}
-                onValueChange={(value) => setFormData({ ...formData, processId: parseInt(value) })}
+                onValueChange={(value) => {
+                  setFormData({ ...formData, processId: parseInt(value) });
+                  clearFieldError('processId');
+                }}
                 disabled={isLoadingProcesses}
               >
-                <SelectTrigger className="bg-white">
+                <SelectTrigger className={`bg-white ${validationErrors.processId ? 'border-red-500' : ''}`}>
                   <SelectValue placeholder={isLoadingProcesses ? '로딩 중...' : '공정을 선택하세요'} />
                 </SelectTrigger>
                 <SelectContent>
@@ -520,6 +501,7 @@ export function WorkOrderCreate() {
                   ))}
                 </SelectContent>
               </Select>
+              {validationErrors.processId && <p className="text-sm text-red-500">{validationErrors.processId}</p>}
               <p className="text-xs text-muted-foreground">
                 공정코드: {getSelectedProcessCode()}
               </p>
@@ -529,8 +511,13 @@ export function WorkOrderCreate() {
               <Label>출고예정일 *</Label>
               <DatePicker
                 value={formData.shipmentDate}
-                onChange={(date) => setFormData({ ...formData, shipmentDate: date })}
+                onChange={(date) => {
+                  setFormData({ ...formData, shipmentDate: date });
+                  clearFieldError('shipmentDate');
+                }}
+                className={validationErrors.shipmentDate ? 'border-red-500' : ''}
               />
+              {validationErrors.shipmentDate && <p className="text-sm text-red-500">{validationErrors.shipmentDate}</p>}
             </div>
 
             <div className="space-y-2">
@@ -717,7 +704,7 @@ export function WorkOrderCreate() {
           />
         </section>
       </div>
-  ), [mode, formData, validationErrors, processOptions, isLoadingProcesses, assigneeNames, getSelectedProcessCode, manualItems, showItemSearch, itemSearchQuery, itemSearchResults, isSearchingItems]);
+  ), [mode, formData, validationErrors, processOptions, isLoadingProcesses, assigneeNames, getSelectedProcessCode, manualItems, showItemSearch, itemSearchQuery, itemSearchResults, isSearchingItems, clearFieldError]);
 
   return (
     <>
@@ -751,4 +738,4 @@ export function WorkOrderCreate() {
       />
     </>
   );
-}
+}

src/components/production/WorkOrders/WorkOrderEdit.tsx

@@ -30,7 +30,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { AssigneeSelectModal } from './AssigneeSelectModal';
 import { toast } from 'sonner';
@@ -52,17 +51,6 @@ interface EditableItem extends WorkOrderItem {
   editQuantity?: number;
 }
 
-// Validation 에러 타입
-interface ValidationErrors {
-  [key: string]: string;
-}
-
-// 필드명 매핑
-const FIELD_NAME_MAP: Record<string, string> = {
-  processId: '공정',
-  scheduledDate: '출고예정일',
-};
-
 interface FormData {
   // 기본 정보 (읽기 전용)
   client: string;
@@ -101,7 +89,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
   const [isAssigneeModalOpen, setIsAssigneeModalOpen] = useState(false);
   const [deleteTargetItemId, setDeleteTargetItemId] = useState<string | null>(null);
   const [assigneeNames, setAssigneeNames] = useState<string[]>([]);
-  const [validationErrors, setValidationErrors] = useState<ValidationErrors>({});
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [processOptions, setProcessOptions] = useState<ProcessOption[]>([]);
@@ -213,7 +201,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
   // 폼 제출
   const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
     // Validation 체크
-    const errors: ValidationErrors = {};
+    const errors: Record<string, string> = {};
 
     if (!formData.processId) {
       errors.processId = '공정을 선택해주세요';
@@ -226,7 +214,8 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
     // 에러가 있으면 상태 업데이트 후 리턴
     if (Object.keys(errors).length > 0) {
       setValidationErrors(errors);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      const firstError = Object.values(errors)[0];
+      toast.error(firstError);
       return { success: false, error: '입력 정보를 확인해주세요.' };
     }
 
@@ -344,35 +333,6 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
   // 폼 컨텐츠 렌더링 (기획서 4열 그리드)
   const renderFormContent = useCallback(() => (
     <div className="space-y-6">
-        {/* Validation 에러 표시 */}
-        {Object.keys(validationErrors).length > 0 && (
-          <Alert className="bg-red-50 border-red-200">
-            <AlertDescription className="text-red-900">
-              <div className="flex items-start gap-2">
-                <span className="text-lg">⚠️</span>
-                <div className="flex-1">
-                  <strong className="block mb-2">
-                    입력 내용을 확인해주세요 ({Object.keys(validationErrors).length}개 오류)
-                  </strong>
-                  <ul className="space-y-1 text-sm">
-                    {Object.entries(validationErrors).map(([field, message]) => {
-                      const fieldName = FIELD_NAME_MAP[field] || field;
-                      return (
-                        <li key={field} className="flex items-start gap-1">
-                          <span>•</span>
-                          <span>
-                            <strong>{fieldName}</strong>: {message}
-                          </span>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </div>
-            </AlertDescription>
-          </Alert>
-        )}
-
         {/* 기본 정보 (기획서 4열 구성) */}
         <section className="bg-amber-50 border border-amber-200 rounded-lg p-4 md:p-6">
           <h3 className="font-semibold mb-4">기본 정보</h3>
@@ -391,10 +351,15 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
               <Label className="text-sm text-muted-foreground">공정 *</Label>
               <Select
                 value={formData.processId?.toString() || ''}
-                onValueChange={(value) => setFormData({ ...formData, processId: parseInt(value) })}
+                onValueChange={(value) => {
+                  setFormData({ ...formData, processId: parseInt(value) });
+                  if (validationErrors.processId) {
+                    setValidationErrors(prev => { const { processId: _, ...rest } = prev; return rest; });
+                  }
+                }}
                 disabled={isLoadingProcesses}
               >
-                <SelectTrigger className="bg-white">
+                <SelectTrigger className={`bg-white ${validationErrors.processId ? 'border-red-500' : ''}`}>
                   <SelectValue placeholder={isLoadingProcesses ? '로딩 중...' : '공정 선택'} />
                 </SelectTrigger>
                 <SelectContent>
@@ -405,6 +370,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
                   ))}
                 </SelectContent>
               </Select>
+              {validationErrors.processId && <p className="text-sm text-red-500">{validationErrors.processId}</p>}
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">구분</Label>
@@ -442,8 +408,15 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
               <Label className="text-sm text-muted-foreground">출고예정일 *</Label>
               <DatePicker
                 value={formData.scheduledDate}
-                onChange={(date) => setFormData({ ...formData, scheduledDate: date })}
+                onChange={(date) => {
+                  setFormData({ ...formData, scheduledDate: date });
+                  if (validationErrors.scheduledDate) {
+                    setValidationErrors(prev => { const { scheduledDate: _, ...rest } = prev; return rest; });
+                  }
+                }}
+                className={validationErrors.scheduledDate ? 'border-red-500' : ''}
               />
+              {validationErrors.scheduledDate && <p className="text-sm text-red-500">{validationErrors.scheduledDate}</p>}
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">틀수</Label>
@@ -671,4 +644,4 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
       />
     </>
   );
-}
+}

src/components/production/WorkerScreen/index.tsx

@@ -348,15 +348,28 @@ export default function WorkerScreen() {
   // 작업지시별 단계 진행 캐시: { [workOrderId]: StepProgressItem[] }
   const [stepProgressMap, setStepProgressMap] = useState<Record<string, StepProgressItem[]>>({});
 
-  // 데이터 로드
+  // 데이터 로드 (작업목록 + 공정목록 + 부서목록 병렬)
   const loadData = useCallback(async () => {
     setIsLoading(true);
     try {
-      const result = await getMyWorkOrders();
-      if (result.success) {
-        setWorkOrders(result.data);
+      const [workOrderResult, processResult, deptResult] = await Promise.all([
+        getMyWorkOrders(),
+        getProcessList({ size: 100 }),
+        getDepartments(),
+      ]);
+
+      if (workOrderResult.success) {
+        setWorkOrders(workOrderResult.data);
       } else {
-        toast.error(result.error || '작업 목록 조회에 실패했습니다.');
+        toast.error(workOrderResult.error || '작업 목록 조회에 실패했습니다.');
+      }
+
+      if (processResult.success && processResult.data?.items) {
+        setProcessListCache(processResult.data.items);
+      }
+
+      if (deptResult.success) {
+        setDepartmentList(deptResult.data);
       }
     } catch (error) {
       if (isNextRedirectError(error)) throw error;
@@ -369,10 +382,6 @@ export default function WorkerScreen() {
 
   useEffect(() => {
     loadData();
-    // 부서 목록 로드
-    getDepartments().then((res) => {
-      if (res.success) setDepartmentList(res.data);
-    });
   }, [loadData]);
 
   // 부서 선택 시 해당 부서 사용자 목록 로드
@@ -455,21 +464,6 @@ export default function WorkerScreen() {
   // 공정 목록 캐시
   const [processListCache, setProcessListCache] = useState<Process[]>([]);
 
-  // 공정 목록 조회 (최초 1회)
-  useEffect(() => {
-    const fetchProcessList = async () => {
-      try {
-        const result = await getProcessList({ size: 100 });
-        if (result.success && result.data?.items) {
-          setProcessListCache(result.data.items);
-        }
-      } catch (error) {
-        console.error('Failed to fetch process list:', error);
-      }
-    };
-    fetchProcessList();
-  }, []);
-
   // 활성 공정 목록 (탭용) - 공정관리에서 등록된 활성 공정만
   const processTabs = useMemo(() => {
     return processListCache.filter((p) => p.status === '사용중');
@@ -1478,6 +1472,9 @@ export default function WorkerScreen() {
         </div>
 
         {/* 공정별 탭 (공정관리 API 기반 동적 생성) */}
+        {isLoading ? (
+          <ContentSkeleton type="list" rows={1} />
+        ) : (
         <Tabs
           value={activeTab}
           onValueChange={(v) => setActiveTab(v)}
@@ -1708,11 +1705,12 @@ export default function WorkerScreen() {
             </TabsContent>
           ))}
         </Tabs>
+        )}
       </div>
 
       {/* 하단 고정 버튼 */}
       {(hasWipItems || activeProcessSettings.needsWorkLog || activeProcessSettings.hasDocumentTemplate) && (
-        <div className={`fixed bottom-4 left-3 right-3 px-3 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:left-auto md:right-[24px] md:px-6 ${sidebarCollapsed ? 'md:left-[113px]' : 'md:left-[304px]'}`}>
+        <div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[24px] ${sidebarCollapsed ? 'md:left-[120px]' : 'md:left-[280px]'}`}>
           <div className="flex gap-2 md:gap-3">
             {hasWipItems ? (
               <Button