Merge remote-tracking branch 'origin/master'

claudedocs/dev/[REF] all-pages-test-urls.md

@@ -90,12 +90,14 @@ http://localhost:3000/ko/sales/quote-management/test/1/edit   # 🧪 견적 수
 | **공정관리** | `/ko/master-data/process-management` | ✅ |
 | **단가표관리** | `/ko/master-data/pricing-table-management` | 🆕 NEW |
 | **└ 단가배포관리** | `/ko/master-data/price-distribution` | 🆕 NEW |
+| **점검표관리** | `/ko/master-data/checklist-management` | 🆕 NEW |
 
 ```
 http://localhost:3000/ko/master-data/item-master-data-management
 http://localhost:3000/ko/master-data/process-management            # 공정관리
 http://localhost:3000/ko/master-data/pricing-table-management      # 🆕 단가표관리
 http://localhost:3000/ko/master-data/price-distribution             # 🆕 단가배포관리
+http://localhost:3000/ko/master-data/checklist-management           # 🆕 점검표관리
 ```
 
 ---

src/app/[locale]/(protected)/master-data/checklist-management/[id]/items/[itemId]/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+/**
+ * 점검표 항목 상세/수정/등록 페이지
+ *
+ * - /[id]/items/[itemId] → 상세 보기
+ * - /[id]/items/[itemId]?mode=edit → 수정
+ * - /[id]/items/new → 등록
+ */
+
+import { use } from 'react';
+import { ItemDetailClient } from '@/components/checklist-management';
+
+export default function ItemDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string; itemId: string }>;
+}) {
+  const { id, itemId } = use(params);
+
+  return <ItemDetailClient checklistId={id} itemId={itemId} />;
+}

src/app/[locale]/(protected)/master-data/checklist-management/[id]/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+/**
+ * 점검표 상세/수정 페이지
+ *
+ * - /[id] → 상세 보기 (view 모드)
+ * - /[id]?mode=edit → 수정 (edit 모드)
+ */
+
+import { use } from 'react';
+import { ChecklistDetailClient } from '@/components/checklist-management';
+
+export default function ChecklistDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+
+  return <ChecklistDetailClient checklistId={id} />;
+}

src/app/[locale]/(protected)/master-data/checklist-management/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+/**
+ * 점검표 목록/등록 페이지
+ */
+
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import ChecklistListClient from '@/components/checklist-management/ChecklistListClient';
+import { ChecklistDetailClient } from '@/components/checklist-management';
+import { ListPageSkeleton } from '@/components/ui/skeleton';
+
+function ChecklistManagementContent() {
+  const searchParams = useSearchParams();
+  const mode = searchParams.get('mode');
+
+  if (mode === 'new') {
+    return <ChecklistDetailClient checklistId="new" />;
+  }
+
+  return <ChecklistListClient />;
+}
+
+export default function ChecklistManagementPage() {
+  return (
+    <Suspense fallback={<ListPageSkeleton showHeader={false} />}>
+      <ChecklistManagementContent />
+    </Suspense>
+  );
+}

src/app/[locale]/(protected)/quality/qms/components/AuditProgressBar.tsx

@@ -48,7 +48,7 @@ export function AuditProgressBar({
           activeDay === 1 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
         )}>
           <div className="flex items-center justify-between mb-1">
-            <span className="text-xs font-medium text-gray-600">1일차: 기준/매뉴얼</span>
+            <span className="text-xs font-medium text-gray-600">기준/매뉴얼 심사</span>
             <span className={cn(
               'text-xs font-bold',
               day1Percentage === 100 ? 'text-green-600' : 'text-gray-600'
@@ -73,7 +73,7 @@ export function AuditProgressBar({
           activeDay === 2 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
         )}>
           <div className="flex items-center justify-between mb-1">
-            <span className="text-xs font-medium text-gray-600">2일차: 로트추적</span>
+            <span className="text-xs font-medium text-gray-600">로트 추적 심사</span>
             <span className={cn(
               'text-xs font-bold',
               day2Percentage === 100 ? 'text-green-600' : 'text-gray-600'

src/app/[locale]/(protected)/quality/qms/components/DayTabs.tsx

@@ -41,7 +41,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
         >
           <Calendar className="h-4 w-4 shrink-0" />
           <span className="font-medium text-xs sm:text-sm">
-            <span className="hidden sm:inline">1일차: 기준/매뉴얼</span>
+            <span className="hidden sm:inline">기준/매뉴얼 심사</span>
             <span className="sm:hidden">1일차</span>
           </span>
           <span className={cn(
@@ -65,7 +65,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
         >
           <Calendar className="h-4 w-4 shrink-0" />
           <span className="font-medium text-xs sm:text-sm">
-            <span className="hidden sm:inline">2일차: 로트추적</span>
+            <span className="hidden sm:inline">로트 추적 심사</span>
             <span className="sm:hidden">2일차</span>
           </span>
           <span className={cn(
@@ -105,7 +105,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
         {/* 1일차 진행률 */}
         <div className="flex items-center gap-2 sm:gap-3">
           <span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
-            <span className="hidden sm:inline">1일차: 기준/매뉴얼</span>
+            <span className="hidden sm:inline">기준/매뉴얼 심사</span>
             <span className="sm:hidden">1일차</span>
           </span>
           <div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
@@ -128,7 +128,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
         {/* 2일차 진행률 */}
         <div className="flex items-center gap-2 sm:gap-3">
           <span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
-            <span className="hidden sm:inline">2일차: 로트추적</span>
+            <span className="hidden sm:inline">로트 추적 심사</span>
             <span className="sm:hidden">2일차</span>
           </span>
           <div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">

src/app/[locale]/(protected)/quality/qms/mockData.ts

@@ -291,7 +291,7 @@ export const DEFAULT_DOCUMENTS: Document[] = [
   { id: 'def-8', type: 'quality', title: '품질관리서', count: 0, items: [] },
 ];
 
-// ===== 1일차: 기준/매뉴얼 심사 Mock 데이터 =====
+// ===== 기준/매뉴얼 심사 심사 Mock 데이터 =====
 
 // 1일차 점검표 카테고리
 export const MOCK_DAY1_CATEGORIES: ChecklistCategory[] = [

src/app/[locale]/(protected)/quality/qms/page.tsx

@@ -255,7 +255,7 @@ export default function QualityInspectionPage() {
                 : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300'
             }`}
           >
-            1일차: 기준/매뉴얼 심사
+            기준/매뉴얼 심사 심사
           </button>
           <button
             type="button"
@@ -266,7 +266,7 @@ export default function QualityInspectionPage() {
                 : 'bg-white border-gray-200 text-gray-700 hover:border-blue-300'
             }`}
           >
-            2일차: 로트추적 심사
+            로트 추적 심사 심사
           </button>
         </div>
       )}
@@ -282,7 +282,7 @@ export default function QualityInspectionPage() {
       />
 
       {activeDay === 1 ? (
-        // ===== 1일차: 기준/매뉴얼 심사 =====
+        // ===== 기준/매뉴얼 심사 심사 =====
         <div className="flex-1 grid grid-cols-12 gap-3 sm:gap-4 lg:min-h-0">
           {/* 좌측: 점검표 항목 */}
           <div className={`col-span-12 min-h-[250px] sm:min-h-[300px] lg:min-h-0 lg:h-full overflow-auto ${
@@ -326,7 +326,7 @@ export default function QualityInspectionPage() {
           )}
         </div>
       ) : (
-        // ===== 2일차: 로트추적 심사 =====
+        // ===== 로트 추적 심사 심사 =====
         <div className="flex-1 grid grid-cols-12 gap-3 sm:gap-4 lg:gap-6 lg:min-h-0">
             <div className="col-span-12 lg:col-span-3 min-h-[250px] sm:min-h-[300px] lg:min-h-0 lg:h-full overflow-auto lg:overflow-hidden">
               <ReportList

src/app/[locale]/(protected)/quality/qms/types.ts

@@ -44,7 +44,7 @@ export interface DocumentItem {
   subType?: 'screen' | 'bending' | 'slat' | 'jointbar';
 }
 
-// ===== 1일차: 기준/매뉴얼 심사 타입 =====
+// ===== 기준/매뉴얼 심사 심사 타입 =====
 
 // 점검표 하위 항목
 export interface ChecklistSubItem {

src/components/checklist-management/ChecklistDetail.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+/**
+ * 점검표 상세 뷰 컴포넌트
+ *
+ * 기획서 스크린샷 2 기준:
+ * - 기본 정보: 점검표 번호, 점검표명, 상태
+ * - 항목 목록 테이블: 드래그&드롭 순서변경 + 항목 등록 버튼
+ * - 하단: 삭제, 수정 버튼
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Edit, GripVertical, Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { useMenuStore } from '@/store/menuStore';
+import { usePermission } from '@/hooks/usePermission';
+import { toast } from 'sonner';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
+import { getChecklistItems, reorderChecklistItems, deleteChecklist } from './actions';
+import type { Checklist, ChecklistItem } from '@/types/checklist';
+
+interface ChecklistDetailProps {
+  checklist: Checklist;
+}
+
+export function ChecklistDetail({ checklist }: ChecklistDetailProps) {
+  const router = useRouter();
+  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
+  const { canUpdate } = usePermission();
+
+  const [items, setItems] = useState<ChecklistItem[]>([]);
+  const [isItemsLoading, setIsItemsLoading] = useState(true);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // 드래그 상태
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
+
+  // 항목 목록 로드
+  useEffect(() => {
+    const loadItems = async () => {
+      setIsItemsLoading(true);
+      const result = await getChecklistItems(checklist.id);
+      if (result.success && result.data) {
+        setItems(result.data);
+      }
+      setIsItemsLoading(false);
+    };
+    loadItems();
+  }, [checklist.id]);
+
+  // 네비게이션
+  const handleEdit = () => {
+    router.push(`/ko/master-data/checklist-management/${checklist.id}?mode=edit`);
+  };
+
+  const handleList = () => {
+    router.push('/ko/master-data/checklist-management');
+  };
+
+  const handleAddItem = () => {
+    router.push(`/ko/master-data/checklist-management/${checklist.id}/items/new`);
+  };
+
+  const handleItemClick = (itemId: string) => {
+    router.push(`/ko/master-data/checklist-management/${checklist.id}/items/${itemId}`);
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const result = await deleteChecklist(checklist.id);
+      if (result.success) {
+        toast.success('점검표가 삭제되었습니다.');
+        router.push('/ko/master-data/checklist-management');
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.');
+      }
+    } catch {
+      toast.error('삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsDeleting(false);
+      setDeleteDialogOpen(false);
+    }
+  };
+
+  // ===== 드래그&드롭 =====
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+      setDragIndex(index);
+      dragNodeRef.current = e.currentTarget;
+      e.dataTransfer.effectAllowed = 'move';
+      requestAnimationFrame(() => {
+        if (dragNodeRef.current) dragNodeRef.current.style.opacity = '0.4';
+      });
+    },
+    []
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      setDragOverIndex(index);
+    },
+    []
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (dragNodeRef.current) dragNodeRef.current.style.opacity = '1';
+    setDragIndex(null);
+    setDragOverIndex(null);
+    dragNodeRef.current = null;
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
+      e.preventDefault();
+      if (dragIndex === null || dragIndex === dropIndex) return;
+
+      setItems((prev) => {
+        const updated = [...prev];
+        const [moved] = updated.splice(dragIndex, 1);
+        updated.splice(dropIndex, 0, moved);
+        const reordered = updated.map((item, i) => ({ ...item, order: i + 1 }));
+
+        reorderChecklistItems(
+          checklist.id,
+          reordered.map((it) => ({ id: it.id, order: it.order }))
+        );
+
+        return reordered;
+      });
+
+      handleDragEnd();
+    },
+    [dragIndex, handleDragEnd, checklist.id]
+  );
+
+  return (
+    <PageLayout>
+      <PageHeader title="점검표 상세" />
+
+      <div className="space-y-6 pb-24">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">점검표 번호</div>
+                <div className="font-medium font-mono">{checklist.checklistCode}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">점검표</div>
+                <div className="font-medium">{checklist.checklistName}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">상태</div>
+                <Badge variant={checklist.status === '사용' ? 'default' : 'secondary'}>
+                  {checklist.status}
+                </Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 항목 테이블 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base">
+                항목 목록
+                {!isItemsLoading && (
+                  <span className="text-sm font-normal text-muted-foreground ml-2">
+                    총 {items.length}건
+                  </span>
+                )}
+              </CardTitle>
+              <Button size="sm" onClick={handleAddItem}>
+                <Plus className="h-4 w-4 mr-1" />
+                항목 등록
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            {isItemsLoading ? (
+              <div className="p-8 text-center text-muted-foreground">로딩 중...</div>
+            ) : items.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                등록된 항목이 없습니다. [항목 등록] 버튼으로 추가해주세요.
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b bg-muted/30">
+                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        No.
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        항목 번호
+                      </th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        순서
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        항목명
+                      </th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        문서
+                      </th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        사용
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {items.map((item, index) => (
+                      <tr
+                        key={item.id}
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, index)}
+                        onDragOver={(e) => handleDragOver(e, index)}
+                        onDragEnd={handleDragEnd}
+                        onDrop={(e) => handleDrop(e, index)}
+                        onClick={() => handleItemClick(item.id)}
+                        className={`border-b cursor-pointer transition-colors hover:bg-muted/50 ${
+                          dragOverIndex === index && dragIndex !== index
+                            ? 'border-t-2 border-t-primary'
+                            : ''
+                        }`}
+                      >
+                        <td
+                          className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                        </td>
+                        <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
+                          {index + 1}
+                        </td>
+                        <td className="px-3 py-3 text-sm font-mono">{item.itemCode}</td>
+                        <td className="w-16 px-3 py-3 text-center text-sm">
+                          {item.order}
+                        </td>
+                        <td className="px-3 py-3 text-sm font-medium">{item.itemName}</td>
+                        <td className="w-16 px-3 py-3 text-center text-sm">
+                          {item.documentCount}
+                        </td>
+                        <td className="w-16 px-3 py-3 text-center">
+                          <Badge
+                            variant={item.status === '사용' ? 'default' : 'secondary'}
+                            className="text-xs"
+                          >
+                            {item.status}
+                          </Badge>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 하단 액션 버튼 (sticky) */}
+      <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-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}
+      >
+        <Button variant="outline" onClick={handleList} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">목록으로</span>
+        </Button>
+        {canUpdate && (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="destructive"
+              onClick={() => setDeleteDialogOpen(true)}
+              size="sm"
+              className="md:size-default"
+            >
+              <Trash2 className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">삭제</span>
+            </Button>
+            <Button onClick={handleEdit} size="sm" className="md:size-default">
+              <Edit className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수정</span>
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        description="이 점검표를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+        loading={isDeleting}
+        onConfirm={handleDelete}
+      />
+    </PageLayout>
+  );
+}

src/components/checklist-management/ChecklistDetailClient.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * 점검표 상세 클라이언트 컴포넌트
+ *
+ * 라우팅:
+ * - /[id] → 상세 보기 (view)
+ * - /[id]?mode=edit → 수정 (edit)
+ * - ?mode=new → 등록 (create)
+ */
+
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ChecklistDetail } from './ChecklistDetail';
+import { ChecklistForm } from './ChecklistForm';
+import { getChecklistById } from './actions';
+import type { Checklist } from '@/types/checklist';
+import { DetailPageSkeleton } from '@/components/ui/skeleton';
+import { ErrorCard } from '@/components/ui/error-card';
+import { toast } from 'sonner';
+
+type DetailMode = 'view' | 'edit' | 'create';
+
+interface ChecklistDetailClientProps {
+  checklistId?: string;
+}
+
+const BASE_PATH = '/ko/master-data/checklist-management';
+
+export function ChecklistDetailClient({ checklistId }: ChecklistDetailClientProps) {
+  const searchParams = useSearchParams();
+  const modeFromQuery = searchParams.get('mode') as DetailMode | null;
+  const isNewMode = !checklistId || checklistId === 'new';
+
+  const [mode, setMode] = useState<DetailMode>(() => {
+    if (isNewMode) return 'create';
+    if (modeFromQuery === 'edit') return 'edit';
+    return 'view';
+  });
+
+  const [checklistData, setChecklistData] = useState<Checklist | null>(null);
+  const [isLoading, setIsLoading] = useState(!isNewMode);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isNewMode) {
+      setIsLoading(false);
+      return;
+    }
+
+    const loadData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await getChecklistById(checklistId!);
+        if (result.success && result.data) {
+          setChecklistData(result.data);
+        } else {
+          setError(result.error || '점검표 정보를 찾을 수 없습니다.');
+          toast.error('점검표를 불러오는데 실패했습니다.');
+        }
+      } catch {
+        setError('점검표 정보를 불러오는 중 오류가 발생했습니다.');
+        toast.error('점검표를 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [checklistId, isNewMode]);
+
+  useEffect(() => {
+    if (!isNewMode && modeFromQuery === 'edit') {
+      setMode('edit');
+    } else if (!isNewMode && !modeFromQuery) {
+      setMode('view');
+    }
+  }, [modeFromQuery, isNewMode]);
+
+  if (isLoading) {
+    return <DetailPageSkeleton sections={1} fieldsPerSection={3} />;
+  }
+
+  if (error && !isNewMode) {
+    return (
+      <ErrorCard
+        type="network"
+        title="점검표 정보를 불러올 수 없습니다"
+        description={error}
+        tips={[
+          '해당 점검표가 존재하는지 확인해주세요',
+          '인터넷 연결 상태를 확인해주세요',
+        ]}
+        homeButtonLabel="목록으로 이동"
+        homeButtonHref={BASE_PATH}
+      />
+    );
+  }
+
+  if (mode === 'create') {
+    return <ChecklistForm mode="create" />;
+  }
+
+  if (mode === 'edit' && checklistData) {
+    return <ChecklistForm mode="edit" initialData={checklistData} />;
+  }
+
+  if (mode === 'view' && checklistData) {
+    return <ChecklistDetail checklist={checklistData} />;
+  }
+
+  return (
+    <ErrorCard
+      type="not-found"
+      title="점검표를 찾을 수 없습니다"
+      description="요청하신 점검표 정보가 존재하지 않습니다."
+      homeButtonLabel="목록으로 이동"
+      homeButtonHref={BASE_PATH}
+    />
+  );
+}

src/components/checklist-management/ChecklistForm.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * 점검표 등록/수정 폼 컴포넌트
+ *
+ * 기획서 스크린샷 2 기준:
+ * - 기본 정보: 점검표 번호(자동), 점검표명, 상태
+ */
+
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
+import { toast } from 'sonner';
+import type { Checklist } from '@/types/checklist';
+import { createChecklist, updateChecklist } from './actions';
+import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
+
+const createConfig: DetailConfig = {
+  title: '점검표',
+  description: '새로운 점검표를 등록합니다',
+  basePath: '',
+  fields: [],
+  actions: {
+    showBack: true,
+    showEdit: false,
+    showDelete: false,
+    showSave: true,
+    submitLabel: '등록',
+  },
+};
+
+const editConfig: DetailConfig = {
+  ...createConfig,
+  description: '점검표 정보를 수정합니다',
+  actions: {
+    ...createConfig.actions,
+    submitLabel: '저장',
+  },
+};
+
+interface ChecklistFormProps {
+  mode: 'create' | 'edit';
+  initialData?: Checklist;
+}
+
+export function ChecklistForm({ mode, initialData }: ChecklistFormProps) {
+  const router = useRouter();
+  const isEdit = mode === 'edit';
+
+  const [checklistName, setChecklistName] = useState(initialData?.checklistName || '');
+  const [status, setStatus] = useState<string>(initialData?.status || '사용');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
+    if (!checklistName.trim()) {
+      toast.error('점검표명을 입력해주세요.');
+      return { success: false, error: '점검표명을 입력해주세요.' };
+    }
+
+    const formData = {
+      checklistName: checklistName.trim(),
+      status: status as '사용' | '미사용',
+    };
+
+    setIsLoading(true);
+    try {
+      if (isEdit && initialData?.id) {
+        const result = await updateChecklist(initialData.id, formData);
+        if (result.success) {
+          toast.success('점검표가 수정되었습니다.');
+          router.push(`/ko/master-data/checklist-management/${initialData.id}`);
+          return { success: true };
+        } else {
+          toast.error(result.error || '수정에 실패했습니다.');
+          return { success: false, error: result.error };
+        }
+      } else {
+        const result = await createChecklist(formData);
+        if (result.success && result.data) {
+          toast.success('점검표가 등록되었습니다.');
+          router.push(`/ko/master-data/checklist-management/${result.data.id}`);
+          return { success: true };
+        } else {
+          toast.error(result.error || '등록에 실패했습니다.');
+          return { success: false, error: result.error };
+        }
+      }
+    } catch {
+      toast.error('처리 중 오류가 발생했습니다.');
+      return { success: false, error: '처리 중 오류가 발생했습니다.' };
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (isEdit && initialData?.id) {
+      router.push(`/ko/master-data/checklist-management/${initialData.id}`);
+    } else {
+      router.push('/ko/master-data/checklist-management');
+    }
+  };
+
+  const renderFormContent = useCallback(
+    () => (
+      <div className="space-y-6">
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+              <div className="space-y-2">
+                <Label>점검표 번호</Label>
+                <Input
+                  value={initialData?.checklistCode || '자동생성'}
+                  disabled
+                  className="bg-muted"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="checklistName">점검표 *</Label>
+                <Input
+                  id="checklistName"
+                  value={checklistName}
+                  onChange={(e) => setChecklistName(e.target.value)}
+                  placeholder="점검표명을 입력하세요"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>상태</Label>
+                <Select value={status} onValueChange={setStatus}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사용">사용</SelectItem>
+                    <SelectItem value="미사용">미사용</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    ),
+    [checklistName, status, initialData?.checklistCode]
+  );
+
+  const config = isEdit ? editConfig : createConfig;
+
+  return (
+    <IntegratedDetailTemplate
+      config={config}
+      mode={isEdit ? 'edit' : 'create'}
+      isLoading={false}
+      onCancel={handleCancel}
+      onSubmit={handleSubmit}
+      renderForm={renderFormContent}
+    />
+  );
+}

src/components/checklist-management/ChecklistListClient.tsx

@@ -0,0 +1,519 @@
+'use client';
+
+/**
+ * 점검표 목록 - UniversalListPage 기반
+ *
+ * 공정 목록(ProcessListClient)과 동일한 패턴:
+ * - 클라이언트 사이드 필터링 (상태별)
+ * - 드래그&드롭 순서 변경
+ * - 상태 토글
+ */
+
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { ClipboardList, Plus, GripVertical } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { TableCell, TableRow, TableHead } from '@/components/ui/table';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import {
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+  type ListParams,
+} from '@/components/templates/UniversalListPage';
+import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
+import { toast } from 'sonner';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
+import type { Checklist } from '@/types/checklist';
+import {
+  getChecklistList,
+  deleteChecklist,
+  deleteChecklists,
+  toggleChecklistStatus,
+  getChecklistStats,
+  reorderChecklists,
+} from './actions';
+
+export default function ChecklistListClient() {
+  const router = useRouter();
+
+  // ===== 상태 =====
+  const [allChecklists, setAllChecklists] = useState<Checklist[]>([]);
+  const [stats, setStats] = useState({ total: 0, active: 0, inactive: 0 });
+  const [isLoading, setIsLoading] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  // 날짜 범위 상태
+  const [startDate, setStartDate] = useState('2025-01-01');
+  const [endDate, setEndDate] = useState('2025-12-31');
+
+  // 검색어 상태
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // 드래그&드롭 순서 변경 상태
+  const [isOrderChanged, setIsOrderChanged] = useState(false);
+  const dragIdRef = useRef<string | null>(null);
+  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
+  const allChecklistsRef = useRef(allChecklists);
+  allChecklistsRef.current = allChecklists;
+
+  // ===== 데이터 로드 =====
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const [listResult, statsResult] = await Promise.all([
+        getChecklistList(),
+        getChecklistStats(),
+      ]);
+
+      if (listResult.success && listResult.data) {
+        setAllChecklists(listResult.data.items);
+      }
+      if (statsResult.success && statsResult.data) {
+        setStats(statsResult.data);
+      }
+    } catch {
+      toast.error('데이터 로드에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // ===== 핸들러 =====
+  const handleRowClick = useCallback(
+    (checklist: Checklist) => {
+      router.push(`/ko/master-data/checklist-management/${checklist.id}`);
+    },
+    [router]
+  );
+
+  const handleCreate = useCallback(() => {
+    router.push('/ko/master-data/checklist-management?mode=new');
+  }, [router]);
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!deleteTargetId) return;
+    setIsLoading(true);
+    try {
+      const result = await deleteChecklist(deleteTargetId);
+      if (result.success) {
+        toast.success('점검표가 삭제되었습니다.');
+        setAllChecklists((prev) => prev.filter((c) => c.id !== deleteTargetId));
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.');
+      }
+    } catch {
+      toast.error('삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+      setDeleteDialogOpen(false);
+      setDeleteTargetId(null);
+    }
+  }, [deleteTargetId]);
+
+  const handleBulkDelete = useCallback(
+    async (selectedIds: string[]) => {
+      if (selectedIds.length === 0) {
+        toast.warning('삭제할 항목을 선택해주세요.');
+        return;
+      }
+      setIsLoading(true);
+      try {
+        const result = await deleteChecklists(selectedIds);
+        if (result.success) {
+          toast.success(`${result.deletedCount}개 항목이 삭제되었습니다.`);
+          await loadData();
+        } else {
+          toast.error(result.error || '일괄 삭제에 실패했습니다.');
+        }
+      } catch {
+        toast.error('일괄 삭제 중 오류가 발생했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [loadData]
+  );
+
+  const handleToggleStatus = useCallback(
+    async (checklistId: string) => {
+      setIsLoading(true);
+      try {
+        const result = await toggleChecklistStatus(checklistId);
+        if (result.success && result.data) {
+          toast.success('상태가 변경되었습니다.');
+          setAllChecklists((prev) =>
+            prev.map((c) => (c.id === checklistId ? result.data! : c))
+          );
+        } else {
+          toast.error(result.error || '상태 변경에 실패했습니다.');
+        }
+      } catch {
+        toast.error('상태 변경 중 오류가 발생했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  // ===== 드래그&드롭 =====
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, id: string) => {
+      dragIdRef.current = id;
+      dragNodeRef.current = e.currentTarget;
+      e.dataTransfer.effectAllowed = 'move';
+      requestAnimationFrame(() => {
+        if (dragNodeRef.current) dragNodeRef.current.style.opacity = '0.4';
+      });
+    },
+    []
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      e.currentTarget.classList.add('border-t-2', 'border-t-primary');
+    },
+    []
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>) => {
+      const related = e.relatedTarget as Node;
+      if (!e.currentTarget.contains(related)) {
+        e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+      }
+    },
+    []
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (dragNodeRef.current) dragNodeRef.current.style.opacity = '1';
+    dragIdRef.current = null;
+    dragNodeRef.current = null;
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, dropId: string) => {
+      e.preventDefault();
+      e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+      const dragId = dragIdRef.current;
+      if (!dragId || dragId === dropId) {
+        handleDragEnd();
+        return;
+      }
+      setAllChecklists((prev) => {
+        const updated = [...prev];
+        const dragIdx = updated.findIndex((c) => c.id === dragId);
+        const dropIdx = updated.findIndex((c) => c.id === dropId);
+        if (dragIdx === -1 || dropIdx === -1) return prev;
+        const [moved] = updated.splice(dragIdx, 1);
+        updated.splice(dropIdx, 0, moved);
+        return updated;
+      });
+      setIsOrderChanged(true);
+      handleDragEnd();
+    },
+    [handleDragEnd]
+  );
+
+  const handleSaveOrder = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const orderData = allChecklistsRef.current.map((c, idx) => ({
+        id: c.id,
+        order: idx + 1,
+      }));
+      const result = await reorderChecklists(orderData);
+      if (result.success) {
+        toast.success('순서가 저장되었습니다.');
+        setIsOrderChanged(false);
+      } else {
+        toast.error(result.error || '순서 저장에 실패했습니다.');
+      }
+    } catch {
+      toast.error('순서 저장 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Checklist> = useMemo(
+    () => ({
+      title: '점검표 목록',
+      icon: ClipboardList,
+      basePath: '/master-data/checklist-management',
+      idField: 'id',
+
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const [listResult, statsResult] = await Promise.all([
+              getChecklistList(),
+              getChecklistStats(),
+            ]);
+            if (listResult.success && listResult.data) {
+              setAllChecklists(listResult.data.items);
+              if (statsResult.success && statsResult.data) {
+                setStats(statsResult.data);
+              }
+              return {
+                success: true,
+                data: listResult.data.items,
+                totalCount: listResult.data.items.length,
+                totalPages: 1,
+              };
+            }
+            return { success: false, error: '데이터 로드에 실패했습니다.' };
+          } catch {
+            return { success: false, error: '서버 오류가 발생했습니다.' };
+          }
+        },
+        deleteItem: async (id: string) => {
+          const result = await deleteChecklist(id);
+          return { success: result.success, error: result.error };
+        },
+        deleteBulk: async (ids: string[]) => {
+          const result = await deleteChecklists(ids);
+          return { success: result.success, error: result.error };
+        },
+      },
+
+      // 테이블 컬럼 (showCheckbox: false → 수동 관리)
+      showCheckbox: false,
+      columns: [
+        { key: 'drag', label: '', className: 'w-[40px]' },
+        { key: 'checkbox', label: '', className: 'w-[50px]' },
+        { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
+        { key: 'checklistCode', label: '점검표 번호', className: 'w-[120px]' },
+        { key: 'checklistName', label: '점검표', className: 'min-w-[200px]' },
+        { key: 'items', label: '항목', className: 'w-[80px] text-center' },
+        { key: 'documents', label: '문서', className: 'w-[80px] text-center' },
+        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
+      ],
+
+      // 커스텀 테이블 헤더 (드래그 → 전체선택 체크박스 → No. → 데이터 순)
+      renderCustomTableHeader: ({ displayData, selectedItems, onToggleSelectAll }) => (
+        <>
+          <TableHead className="w-[40px]" />
+          <TableHead className="w-[50px] text-center">
+            <Checkbox
+              checked={displayData.length > 0 && selectedItems.size === displayData.length}
+              onCheckedChange={onToggleSelectAll}
+            />
+          </TableHead>
+          <TableHead className="w-[60px] text-center">No.</TableHead>
+          <TableHead className="w-[120px]">점검표 번호</TableHead>
+          <TableHead className="min-w-[200px]">점검표</TableHead>
+          <TableHead className="w-[80px] text-center">항목</TableHead>
+          <TableHead className="w-[80px] text-center">문서</TableHead>
+          <TableHead className="w-[80px] text-center">상태</TableHead>
+        </>
+      ),
+
+      clientSideFiltering: true,
+      itemsPerPage: 20,
+
+      hideSearch: true,
+      searchValue: searchQuery,
+      onSearchChange: setSearchQuery,
+
+      dateRangeSelector: {
+        enabled: true,
+        showPresets: true,
+        startDate,
+        endDate,
+        onStartDateChange: setStartDate,
+        onEndDateChange: setEndDate,
+      },
+
+      filterConfig: [
+        {
+          key: 'status',
+          label: '상태',
+          type: 'single' as const,
+          options: [
+            { value: '사용', label: '사용' },
+            { value: '미사용', label: '미사용' },
+          ],
+          allOptionLabel: '전체',
+        },
+      ],
+      initialFilters: { status: '' },
+
+      customFilterFn: (
+        items: Checklist[],
+        filterValues: Record<string, string | string[]>
+      ) => {
+        const statusFilter = filterValues.status as string;
+        if (!statusFilter) return items;
+        return items.filter((item) => item.status === statusFilter);
+      },
+
+      searchFilter: (item, searchValue) => {
+        if (!searchValue || !searchValue.trim()) return true;
+        const search = searchValue.toLowerCase().trim();
+        return (
+          (item.checklistCode || '').toLowerCase().includes(search) ||
+          (item.checklistName || '').toLowerCase().includes(search)
+        );
+      },
+
+      headerActions: () => (
+        <Button
+          variant="outline"
+          onClick={handleSaveOrder}
+          disabled={!isOrderChanged}
+        >
+          순서 변경 저장
+        </Button>
+      ),
+
+      createButton: {
+        label: '점검표 등록',
+        onClick: handleCreate,
+        icon: Plus,
+      },
+
+      onBulkDelete: handleBulkDelete,
+
+      renderTableRow: (
+        checklist: Checklist,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Checklist>
+      ) => (
+        <TableRow
+          key={checklist.id}
+          draggable
+          onDragStart={(e) => handleDragStart(e, checklist.id)}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDragEnd={handleDragEnd}
+          onDrop={(e) => handleDrop(e, checklist.id)}
+          className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
+          onClick={() => handleRowClick(checklist)}
+        >
+          <TableCell
+            className="text-center cursor-grab active:cursor-grabbing"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+          </TableCell>
+          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={handlers.isSelected}
+              onCheckedChange={handlers.onToggle}
+            />
+          </TableCell>
+          <TableCell className="text-center text-muted-foreground">
+            {globalIndex}
+          </TableCell>
+          <TableCell className="font-medium">{checklist.checklistCode}</TableCell>
+          <TableCell>{checklist.checklistName}</TableCell>
+          <TableCell className="text-center">{checklist.itemCount}</TableCell>
+          <TableCell className="text-center">{checklist.documentCount}</TableCell>
+          <TableCell
+            className="text-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Badge
+              variant={checklist.status === '사용' ? 'default' : 'secondary'}
+              className="cursor-pointer"
+              onClick={() => handleToggleStatus(checklist.id)}
+            >
+              {checklist.status}
+            </Badge>
+          </TableCell>
+        </TableRow>
+      ),
+
+      renderMobileCard: (
+        checklist: Checklist,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Checklist>
+      ) => (
+        <ListMobileCard
+          key={checklist.id}
+          id={checklist.id}
+          isSelected={handlers.isSelected}
+          onToggleSelection={handlers.onToggle}
+          onClick={() => handleRowClick(checklist)}
+          headerBadges={
+            <>
+              <Badge variant="outline" className="text-xs">
+                #{globalIndex}
+              </Badge>
+              <Badge variant="outline" className="text-xs font-mono">
+                {checklist.checklistCode}
+              </Badge>
+            </>
+          }
+          title={checklist.checklistName}
+          statusBadge={
+            <Badge
+              variant={checklist.status === '사용' ? 'default' : 'secondary'}
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleStatus(checklist.id);
+              }}
+            >
+              {checklist.status}
+            </Badge>
+          }
+          infoGrid={
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+              <InfoField label="항목" value={`${checklist.itemCount}개`} />
+              <InfoField label="문서" value={`${checklist.documentCount}개`} />
+            </div>
+          }
+        />
+      ),
+    }),
+    [
+      handleCreate,
+      handleRowClick,
+      handleToggleStatus,
+      handleBulkDelete,
+      startDate,
+      endDate,
+      searchQuery,
+      isOrderChanged,
+      handleSaveOrder,
+      handleDragStart,
+      handleDragOver,
+      handleDragLeave,
+      handleDragEnd,
+      handleDrop,
+    ]
+  );
+
+  return (
+    <>
+      <UniversalListPage
+        config={config}
+        initialData={allChecklists}
+        onSearchChange={setSearchQuery}
+      />
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        description="선택한 점검표를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+        loading={isLoading}
+        onConfirm={handleDeleteConfirm}
+      />
+    </>
+  );
+}

src/components/checklist-management/ItemDetail.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+/**
+ * 항목 상세 뷰 컴포넌트
+ *
+ * 기획서 스크린샷 3 기준:
+ * - 기본 정보: 항목 번호, 항목명, 소개, 상태
+ * - 문서 정보: 순서, 문서 번호, 문서, 개정, 시행일
+ * - 하단: 삭제, 수정 버튼
+ */
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Edit, GripVertical, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { useMenuStore } from '@/store/menuStore';
+import { usePermission } from '@/hooks/usePermission';
+import { toast } from 'sonner';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { deleteChecklistItem } from './actions';
+import type { ChecklistItem } from '@/types/checklist';
+
+interface ItemDetailProps {
+  item: ChecklistItem;
+  checklistId: string;
+}
+
+export function ItemDetail({ item, checklistId }: ItemDetailProps) {
+  const router = useRouter();
+  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
+  const { canUpdate, canDelete } = usePermission();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleEdit = () => {
+    router.push(
+      `/ko/master-data/checklist-management/${checklistId}/items/${item.id}?mode=edit`
+    );
+  };
+
+  const handleBack = () => {
+    router.push(`/ko/master-data/checklist-management/${checklistId}`);
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const result = await deleteChecklistItem(checklistId, item.id);
+      if (result.success) {
+        toast.success('항목이 삭제되었습니다.');
+        router.push(`/ko/master-data/checklist-management/${checklistId}`);
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.');
+      }
+    } catch {
+      toast.error('삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteDialog(false);
+    }
+  };
+
+  const documents = item.documents || [];
+
+  return (
+    <PageLayout>
+      <PageHeader title="항목 상세" />
+
+      <div className="space-y-6 pb-24">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">항목 번호</div>
+                <div className="font-medium font-mono">{item.itemCode}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">항목명</div>
+                <div className="font-medium">{item.itemName}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">소개</div>
+                <div className="font-medium">{item.description || '-'}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">상태</div>
+                <Badge variant={item.status === '사용' ? 'default' : 'secondary'}>
+                  {item.status}
+                </Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 문서 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">문서 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            {documents.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                등록된 문서가 없습니다.
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b bg-muted/30">
+                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        순서
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        문서 번호
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        문서
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        개정
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        시행일
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {documents.map((doc) => (
+                      <tr key={doc.id} className="border-b hover:bg-muted/50">
+                        <td className="w-10 px-3 py-3 text-center">
+                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                        </td>
+                        <td className="w-14 px-3 py-3 text-center text-sm">
+                          {doc.order}
+                        </td>
+                        <td className="px-3 py-3 text-sm font-mono">
+                          {doc.documentCode}
+                        </td>
+                        <td className="px-3 py-3 text-sm text-primary underline cursor-pointer">
+                          {doc.documentName}
+                        </td>
+                        <td className="px-3 py-3 text-sm">{doc.revision}</td>
+                        <td className="px-3 py-3 text-sm">{doc.effectiveDate}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 하단 액션 버튼 (sticky) */}
+      <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-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}
+      >
+        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
+          <ArrowLeft className="h-4 w-4 md:mr-2" />
+          <span className="hidden md:inline">점검표로 돌아가기</span>
+        </Button>
+        <div className="flex items-center gap-2">
+          {canDelete && (
+            <Button
+              variant="destructive"
+              onClick={() => setShowDeleteDialog(true)}
+              size="sm"
+              className="md:size-default"
+            >
+              <Trash2 className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">삭제</span>
+            </Button>
+          )}
+          {canUpdate && (
+            <Button onClick={handleEdit} size="sm" className="md:size-default">
+              <Edit className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수정</span>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>항목 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &apos;{item.itemName}&apos; 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? '삭제 중...' : '삭제'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </PageLayout>
+  );
+}

src/components/checklist-management/ItemDetailClient.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * 항목 상세 클라이언트 컴포넌트
+ *
+ * 라우팅:
+ * - /[id]/items/[itemId] → 상세 보기
+ * - /[id]/items/[itemId]?mode=edit → 수정
+ * - /[id]/items/new → 등록
+ */
+
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ItemDetail } from './ItemDetail';
+import { ItemForm } from './ItemForm';
+import { getChecklistItemById } from './actions';
+import type { ChecklistItem } from '@/types/checklist';
+import { DetailPageSkeleton } from '@/components/ui/skeleton';
+import { ErrorCard } from '@/components/ui/error-card';
+import { toast } from 'sonner';
+
+type DetailMode = 'view' | 'edit' | 'create';
+
+interface ItemDetailClientProps {
+  checklistId: string;
+  itemId: string;
+}
+
+export function ItemDetailClient({ checklistId, itemId }: ItemDetailClientProps) {
+  const searchParams = useSearchParams();
+  const modeFromQuery = searchParams.get('mode') as DetailMode | null;
+  const isNewMode = itemId === 'new';
+
+  const [mode] = useState<DetailMode>(() => {
+    if (isNewMode) return 'create';
+    if (modeFromQuery === 'edit') return 'edit';
+    return 'view';
+  });
+
+  const [itemData, setItemData] = useState<ChecklistItem | null>(null);
+  const [isLoading, setIsLoading] = useState(!isNewMode);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isNewMode) {
+      setIsLoading(false);
+      return;
+    }
+
+    const loadData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await getChecklistItemById(checklistId, itemId);
+        if (result.success && result.data) {
+          setItemData(result.data);
+        } else {
+          setError(result.error || '항목 정보를 찾을 수 없습니다.');
+          toast.error('항목을 불러오는데 실패했습니다.');
+        }
+      } catch {
+        setError('항목 정보를 불러오는 중 오류가 발생했습니다.');
+        toast.error('항목을 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [checklistId, itemId, isNewMode]);
+
+  if (isLoading) {
+    return <DetailPageSkeleton sections={1} fieldsPerSection={4} />;
+  }
+
+  if (error && !isNewMode) {
+    return (
+      <ErrorCard
+        type="network"
+        title="항목 정보를 불러올 수 없습니다"
+        description={error}
+        tips={['해당 항목이 존재하는지 확인해주세요']}
+        homeButtonLabel="점검표로 돌아가기"
+        homeButtonHref={`/ko/master-data/checklist-management/${checklistId}`}
+      />
+    );
+  }
+
+  if (mode === 'create') {
+    return <ItemForm mode="create" checklistId={checklistId} />;
+  }
+
+  if (mode === 'edit' && itemData) {
+    return <ItemForm mode="edit" checklistId={checklistId} initialData={itemData} />;
+  }
+
+  if (mode === 'view' && itemData) {
+    return <ItemDetail item={itemData} checklistId={checklistId} />;
+  }
+
+  return (
+    <ErrorCard
+      type="not-found"
+      title="항목을 찾을 수 없습니다"
+      description="요청하신 항목 정보가 존재하지 않습니다."
+      homeButtonLabel="점검표로 돌아가기"
+      homeButtonHref={`/ko/master-data/checklist-management/${checklistId}`}
+    />
+  );
+}

src/components/checklist-management/ItemForm.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+/**
+ * 항목 등록/수정 폼 컴포넌트
+ *
+ * 기획서 스크린샷 3 기준:
+ * - 기본 정보: 항목 번호(자동), 항목명, 소개, 상태
+ * - 문서 정보: 순서, 문서 번호, 문서, 개정, 시행일 + 행 추가/삭제
+ */
+
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Plus, Trash2, GripVertical } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
+import { toast } from 'sonner';
+import type { ChecklistItem, ChecklistDocumentFormData } from '@/types/checklist';
+import { createChecklistItem, updateChecklistItem } from './actions';
+import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
+
+const itemCreateConfig: DetailConfig = {
+  title: '항목',
+  description: '새로운 항목을 등록합니다',
+  basePath: '',
+  fields: [],
+  actions: {
+    showBack: true,
+    showEdit: false,
+    showDelete: false,
+    showSave: true,
+    submitLabel: '등록',
+  },
+};
+
+const itemEditConfig: DetailConfig = {
+  ...itemCreateConfig,
+  description: '항목 정보를 수정합니다',
+  actions: {
+    ...itemCreateConfig.actions,
+    submitLabel: '저장',
+  },
+};
+
+interface ItemFormProps {
+  mode: 'create' | 'edit';
+  checklistId: string;
+  initialData?: ChecklistItem;
+}
+
+export function ItemForm({ mode, checklistId, initialData }: ItemFormProps) {
+  const router = useRouter();
+  const isEdit = mode === 'edit';
+
+  const [itemName, setItemName] = useState(initialData?.itemName || '');
+  const [description, setDescription] = useState(initialData?.description || '');
+  const [status, setStatus] = useState<string>(initialData?.status || '사용');
+
+  // 문서 목록 상태
+  const [documents, setDocuments] = useState<ChecklistDocumentFormData[]>(() => {
+    if (initialData?.documents && initialData.documents.length > 0) {
+      return initialData.documents.map((doc) => ({
+        id: doc.id,
+        documentCode: doc.documentCode,
+        documentName: doc.documentName,
+        revision: doc.revision,
+        effectiveDate: doc.effectiveDate,
+        order: doc.order,
+      }));
+    }
+    return [];
+  });
+
+  const handleAddDocument = () => {
+    setDocuments((prev) => [
+      ...prev,
+      {
+        documentCode: '',
+        documentName: '',
+        revision: '',
+        effectiveDate: '',
+        order: prev.length + 1,
+      },
+    ]);
+  };
+
+  const handleRemoveDocument = (index: number) => {
+    setDocuments((prev) => {
+      const updated = prev.filter((_, i) => i !== index);
+      return updated.map((doc, i) => ({ ...doc, order: i + 1 }));
+    });
+  };
+
+  const handleDocumentChange = (
+    index: number,
+    field: keyof ChecklistDocumentFormData,
+    value: string | number
+  ) => {
+    setDocuments((prev) =>
+      prev.map((doc, i) => (i === index ? { ...doc, [field]: value } : doc))
+    );
+  };
+
+  const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
+    if (!itemName.trim()) {
+      toast.error('항목명을 입력해주세요.');
+      return { success: false, error: '항목명을 입력해주세요.' };
+    }
+
+    const formData = {
+      itemName: itemName.trim(),
+      description: description.trim(),
+      status: status as '사용' | '미사용',
+      documents,
+    };
+
+    try {
+      if (isEdit && initialData?.id) {
+        const result = await updateChecklistItem(checklistId, initialData.id, formData);
+        if (result.success) {
+          toast.success('항목이 수정되었습니다.');
+          router.push(
+            `/ko/master-data/checklist-management/${checklistId}/items/${initialData.id}`
+          );
+          return { success: true };
+        } else {
+          toast.error(result.error || '수정에 실패했습니다.');
+          return { success: false, error: result.error };
+        }
+      } else {
+        const result = await createChecklistItem(checklistId, formData);
+        if (result.success && result.data) {
+          toast.success('항목이 등록되었습니다.');
+          router.push(`/ko/master-data/checklist-management/${checklistId}`);
+          return { success: true };
+        } else {
+          toast.error(result.error || '등록에 실패했습니다.');
+          return { success: false, error: result.error };
+        }
+      }
+    } catch {
+      toast.error('처리 중 오류가 발생했습니다.');
+      return { success: false, error: '처리 중 오류가 발생했습니다.' };
+    }
+  };
+
+  const handleCancel = () => {
+    if (isEdit && initialData?.id) {
+      router.push(
+        `/ko/master-data/checklist-management/${checklistId}/items/${initialData.id}`
+      );
+    } else {
+      router.push(`/ko/master-data/checklist-management/${checklistId}`);
+    }
+  };
+
+  const renderFormContent = useCallback(
+    () => (
+      <div className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-2">
+                <Label>항목 번호</Label>
+                <Input
+                  value={initialData?.itemCode || '자동생성'}
+                  disabled
+                  className="bg-muted"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="itemName">항목명 *</Label>
+                <Input
+                  id="itemName"
+                  value={itemName}
+                  onChange={(e) => setItemName(e.target.value)}
+                  placeholder="항목명을 입력하세요"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">소개</Label>
+                <Input
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="소개를 입력하세요"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>상태</Label>
+                <Select value={status} onValueChange={setStatus}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="사용">사용</SelectItem>
+                    <SelectItem value="미사용">미사용</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 문서 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base">
+                문서 정보
+                <span className="text-sm font-normal text-muted-foreground ml-2">
+                  총 {documents.length}건
+                </span>
+              </CardTitle>
+              <Button size="sm" type="button" onClick={handleAddDocument}>
+                <Plus className="h-4 w-4 mr-1" />
+                문서 추가
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            {documents.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                등록된 문서가 없습니다. [문서 추가] 버튼으로 추가해주세요.
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b bg-muted/30">
+                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        순서
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        문서 번호
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        문서
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        개정
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        시행일
+                      </th>
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        삭제
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {documents.map((doc, index) => (
+                      <tr key={`doc-${index}`} className="border-b">
+                        <td className="w-10 px-3 py-2 text-center">
+                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                        </td>
+                        <td className="w-14 px-3 py-2 text-center text-sm">
+                          {doc.order}
+                        </td>
+                        <td className="px-3 py-2">
+                          <Input
+                            value={doc.documentCode}
+                            onChange={(e) =>
+                              handleDocumentChange(index, 'documentCode', e.target.value)
+                            }
+                            placeholder="문서 번호"
+                            className="h-8"
+                          />
+                        </td>
+                        <td className="px-3 py-2">
+                          <Input
+                            value={doc.documentName}
+                            onChange={(e) =>
+                              handleDocumentChange(index, 'documentName', e.target.value)
+                            }
+                            placeholder="문서명"
+                            className="h-8"
+                          />
+                        </td>
+                        <td className="px-3 py-2">
+                          <Input
+                            value={doc.revision}
+                            onChange={(e) =>
+                              handleDocumentChange(index, 'revision', e.target.value)
+                            }
+                            placeholder="REV"
+                            className="h-8"
+                          />
+                        </td>
+                        <td className="px-3 py-2">
+                          <Input
+                            type="date"
+                            value={doc.effectiveDate}
+                            onChange={(e) =>
+                              handleDocumentChange(index, 'effectiveDate', e.target.value)
+                            }
+                            className="h-8"
+                          />
+                        </td>
+                        <td className="w-14 px-3 py-2 text-center">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                            onClick={() => handleRemoveDocument(index)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    ),
+    [itemName, description, status, documents, initialData?.itemCode]
+  );
+
+  const config = isEdit ? itemEditConfig : itemCreateConfig;
+
+  return (
+    <IntegratedDetailTemplate
+      config={config}
+      mode={isEdit ? 'edit' : 'create'}
+      isLoading={false}
+      onCancel={handleCancel}
+      onSubmit={handleSubmit}
+      renderForm={renderFormContent}
+    />
+  );
+}

src/components/checklist-management/actions.ts

@@ -0,0 +1,342 @@
+'use server';
+
+/**
+ * 점검표 관리 Server Actions
+ *
+ * 현재: Mock 데이터 기반
+ * 추후: executeServerAction으로 백엔드 API 연동 전환
+ */
+
+import type {
+  Checklist,
+  ChecklistFormData,
+  ChecklistItem,
+  ChecklistItemFormData,
+  ChecklistDocument,
+} from '@/types/checklist';
+
+// ============================================================================
+// Mock 데이터
+// ============================================================================
+
+const MOCK_DOCUMENTS: ChecklistDocument[] = [
+  {
+    id: 'doc-1',
+    itemId: 'item-1',
+    documentCode: 'QM-std-1-1-1',
+    documentName: '문서명.pdf',
+    revision: 'REV12',
+    effectiveDate: '2026-01-05',
+    order: 1,
+  },
+  {
+    id: 'doc-2',
+    itemId: 'item-1',
+    documentCode: 'QM-std-1-1-1',
+    documentName: '문서명.pdf',
+    revision: 'REV12',
+    effectiveDate: '2026-01-06',
+    order: 2,
+  },
+];
+
+const MOCK_ITEMS: ChecklistItem[] = [
+  {
+    id: 'item-1',
+    checklistId: 'cl-1',
+    itemCode: '123123',
+    itemName: '1. 수입검사 기준 확인',
+    description: '소개 문구',
+    documentCount: 3,
+    status: '사용',
+    order: 1,
+    documents: MOCK_DOCUMENTS,
+    createdAt: '2026-01-01T00:00:00Z',
+    updatedAt: '2026-01-01T00:00:00Z',
+  },
+  {
+    id: 'item-2',
+    checklistId: 'cl-1',
+    itemCode: '123123',
+    itemName: '항목명',
+    description: '',
+    documentCount: 3,
+    status: '사용',
+    order: 2,
+    documents: [],
+    createdAt: '2026-01-01T00:00:00Z',
+    updatedAt: '2026-01-01T00:00:00Z',
+  },
+  {
+    id: 'item-3',
+    checklistId: 'cl-1',
+    itemCode: '123123',
+    itemName: '항목명',
+    description: '',
+    documentCount: 3,
+    status: '사용',
+    order: 3,
+    documents: [],
+    createdAt: '2026-01-01T00:00:00Z',
+    updatedAt: '2026-01-01T00:00:00Z',
+  },
+];
+
+const MOCK_CHECKLISTS: Checklist[] = [
+  {
+    id: 'cl-1',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '사용',
+    order: 1,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-2',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '미사용',
+    order: 2,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-3',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '사용',
+    order: 3,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-4',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '미사용',
+    order: 4,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-5',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '사용',
+    order: 5,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-6',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '미사용',
+    order: 6,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+  {
+    id: 'cl-7',
+    checklistCode: '변호명',
+    checklistName: '점검표명',
+    itemCount: 3,
+    documentCount: 6,
+    status: '사용',
+    order: 7,
+    createdAt: '2025-09-01T00:00:00Z',
+    updatedAt: '2025-09-01T00:00:00Z',
+  },
+];
+
+// ============================================================================
+// 점검표 CRUD
+// ============================================================================
+
+export async function getChecklistList(): Promise<{
+  success: boolean;
+  data?: { items: Checklist[] };
+  error?: string;
+}> {
+  return { success: true, data: { items: [...MOCK_CHECKLISTS] } };
+}
+
+export async function getChecklistById(id: string): Promise<{
+  success: boolean;
+  data?: Checklist;
+  error?: string;
+}> {
+  const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
+  if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
+  return { success: true, data: { ...checklist } };
+}
+
+export async function createChecklist(data: ChecklistFormData): Promise<{
+  success: boolean;
+  data?: Checklist;
+  error?: string;
+}> {
+  const newChecklist: Checklist = {
+    id: `cl-${Date.now()}`,
+    checklistCode: `CL-${String(MOCK_CHECKLISTS.length + 1).padStart(3, '0')}`,
+    checklistName: data.checklistName,
+    itemCount: 0,
+    documentCount: 0,
+    status: data.status,
+    order: MOCK_CHECKLISTS.length + 1,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  };
+  return { success: true, data: newChecklist };
+}
+
+export async function updateChecklist(
+  id: string,
+  data: ChecklistFormData
+): Promise<{ success: boolean; data?: Checklist; error?: string }> {
+  const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
+  if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
+  const updated = {
+    ...checklist,
+    checklistName: data.checklistName,
+    status: data.status,
+    updatedAt: new Date().toISOString(),
+  };
+  return { success: true, data: updated };
+}
+
+export async function deleteChecklist(id: string): Promise<{
+  success: boolean;
+  error?: string;
+}> {
+  return { success: true };
+}
+
+export async function deleteChecklists(ids: string[]): Promise<{
+  success: boolean;
+  deletedCount?: number;
+  error?: string;
+}> {
+  return { success: true, deletedCount: ids.length };
+}
+
+export async function toggleChecklistStatus(id: string): Promise<{
+  success: boolean;
+  data?: Checklist;
+  error?: string;
+}> {
+  const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
+  if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
+  const toggled = {
+    ...checklist,
+    status: checklist.status === '사용' ? '미사용' as const : '사용' as const,
+  };
+  return { success: true, data: toggled };
+}
+
+export async function reorderChecklists(
+  items: { id: string; order: number }[]
+): Promise<{ success: boolean; error?: string }> {
+  return { success: true };
+}
+
+export async function getChecklistStats(): Promise<{
+  success: boolean;
+  data?: { total: number; active: number; inactive: number };
+  error?: string;
+}> {
+  const active = MOCK_CHECKLISTS.filter((c) => c.status === '사용').length;
+  return {
+    success: true,
+    data: {
+      total: MOCK_CHECKLISTS.length,
+      active,
+      inactive: MOCK_CHECKLISTS.length - active,
+    },
+  };
+}
+
+// ============================================================================
+// 점검표 항목 CRUD
+// ============================================================================
+
+export async function getChecklistItems(checklistId: string): Promise<{
+  success: boolean;
+  data?: ChecklistItem[];
+  error?: string;
+}> {
+  return { success: true, data: [...MOCK_ITEMS] };
+}
+
+export async function getChecklistItemById(
+  checklistId: string,
+  itemId: string
+): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
+  const item = MOCK_ITEMS.find((i) => i.id === itemId);
+  if (!item) return { success: false, error: '항목을 찾을 수 없습니다.' };
+  return { success: true, data: { ...item, documents: [...MOCK_DOCUMENTS] } };
+}
+
+export async function createChecklistItem(
+  checklistId: string,
+  data: ChecklistItemFormData
+): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
+  const newItem: ChecklistItem = {
+    id: `item-${Date.now()}`,
+    checklistId,
+    itemCode: String(Date.now()).slice(-6),
+    itemName: data.itemName,
+    description: data.description,
+    documentCount: data.documents.length,
+    status: data.status,
+    order: MOCK_ITEMS.length + 1,
+    documents: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  };
+  return { success: true, data: newItem };
+}
+
+export async function updateChecklistItem(
+  checklistId: string,
+  itemId: string,
+  data: ChecklistItemFormData
+): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
+  const item = MOCK_ITEMS.find((i) => i.id === itemId);
+  if (!item) return { success: false, error: '항목을 찾을 수 없습니다.' };
+  const updated = {
+    ...item,
+    itemName: data.itemName,
+    description: data.description,
+    status: data.status,
+    updatedAt: new Date().toISOString(),
+  };
+  return { success: true, data: updated };
+}
+
+export async function deleteChecklistItem(
+  checklistId: string,
+  itemId: string
+): Promise<{ success: boolean; error?: string }> {
+  return { success: true };
+}
+
+export async function reorderChecklistItems(
+  checklistId: string,
+  items: { id: string; order: number }[]
+): Promise<{ success: boolean; error?: string }> {
+  return { success: true };
+}

src/components/checklist-management/index.ts

@@ -0,0 +1,7 @@
+export { default as ChecklistListClient } from './ChecklistListClient';
+export { ChecklistDetailClient } from './ChecklistDetailClient';
+export { ChecklistDetail } from './ChecklistDetail';
+export { ChecklistForm } from './ChecklistForm';
+export { ItemDetailClient } from './ItemDetailClient';
+export { ItemDetail } from './ItemDetail';
+export { ItemForm } from './ItemForm';

src/components/orders/documents/SalesOrderDocument.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 /**
- * 수주서 문서 컴포넌트
- * - 스크린샷 기반 디자인
- * - 제목 좌측, 결재란 우측
- * - 신청업체/신청내용/납품정보 3열 구조
- * - 스크린, 모터, 절곡물 테이블
+ * 수주서 문서 컴포넌트 (기획서 D1.8 기준 리디자인)
+ * - 출고증(ShipmentOrderDocument)과 동일한 자재 섹션 구조
+ * - 수주서 전용 헤더 (결재란, 로트번호, 제품코드, 인정번호)
+ * - 배차정보/LOT 컬럼 없음
  */
 
+import { useState } from "react";
 import { getTodayString } from "@/utils/date";
 import { OrderItem } from "../actions";
 import { ProductInfo } from "./OrderDocumentModal";
@@ -15,8 +15,8 @@ import { ConstructionApprovalTable } from "@/components/document-system";
 
 interface SalesOrderDocumentProps {
   documentNumber?: string;
-  orderNumber: string;  // 로트번호
-  certificationNumber?: string;  // 인정번호
+  orderNumber: string;
+  certificationNumber?: string;
   orderDate?: string;
   client: string;
   siteName?: string;
@@ -35,23 +35,64 @@ interface SalesOrderDocumentProps {
   remarks?: string;
 }
 
-/**
- * 수량 포맷 함수
- */
-function formatQuantity(quantity: number, unit?: string): string {
-  const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
-  const upperUnit = (unit || "").toUpperCase();
+// ===== 문서 전용 목데이터 (출고증과 동일 구조) =====
 
-  if (countableUnits.includes(upperUnit)) {
-    return Math.round(quantity).toLocaleString();
-  }
+const MOCK_SCREEN_ROWS = [
+  { no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
 
-  const rounded = Math.round(quantity * 10000) / 10000;
-  return rounded.toLocaleString(undefined, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4
-  });
-}
+const MOCK_STEEL_ROWS = [
+  { no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
+
+const MOCK_MOTOR_LEFT = [
+  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6 },
+  { item: '브라켓트', type: '-', spec: '380X180', qty: 6 },
+  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4 },
+];
+
+const MOCK_MOTOR_RIGHT = [
+  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1 },
+  { item: '전동개폐기', type: '매입', spec: '-', qty: 1 },
+];
+
+const MOCK_GUIDE_RAIL_ITEMS = [
+  { name: '항목명', spec: 'L: 3,000', qty: 22 },
+  { name: '하부BASE', spec: '130X80', qty: 22 },
+];
+
+const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
+
+const MOCK_CASE_ITEMS = [
+  { name: '500X330', spec: 'L: 4,000', qty: 3 },
+  { name: '500X330', spec: 'L: 5,000', qty: 4 },
+  { name: '상부덮개', spec: '1219X389', qty: 55 },
+  { name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
+];
+
+const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
+
+const MOCK_BOTTOM_SCREEN = [
+  { name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
+  { name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
+];
+
+const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
+
+const MOCK_SUBSIDIARY = [
+  { leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
+  { leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
+];
+
+// ===== 공통 스타일 =====
+const thBase = 'border-r border-gray-400 px-1 py-1';
+const tdBase = 'border-r border-gray-300 px-1 py-1';
+const tdCenter = `${tdBase} text-center`;
+const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
 
 export function SalesOrderDocument({
   documentNumber = "ABC123",
@@ -73,53 +114,14 @@ export function SalesOrderDocument({
   products = [],
   remarks,
 }: SalesOrderDocumentProps) {
-  // 스크린 제품만 필터링
-  const screenProducts = products.filter(p =>
-    p.productCategory?.includes("스크린") ||
-    p.productName?.includes("스크린") ||
-    p.productName?.includes("방화") ||
-    p.productName?.includes("셔터")
-  );
+  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
 
-  // 모터 아이템 필터링
-  const motorItems = items.filter(item =>
-    item.itemName?.toLowerCase().includes("모터") ||
-    item.type?.includes("모터") ||
-    item.itemCode?.startsWith("MT")
-  );
-
-  // 브라켓 아이템 필터링
-  const bracketItems = items.filter(item =>
-    item.itemName?.includes("브라켓") ||
-    item.type?.includes("브라켓")
-  );
-
-  // 가이드레일 아이템 필터링
-  const guideRailItems = items.filter(item =>
-    item.itemName?.includes("가이드") ||
-    item.itemName?.includes("레일") ||
-    item.type?.includes("가이드")
-  );
-
-  // 케이스 아이템 필터링
-  const caseItems = items.filter(item =>
-    item.itemName?.includes("케이스") ||
-    item.itemName?.includes("셔터박스") ||
-    item.type?.includes("케이스")
-  );
-
-  // 하단마감재 아이템 필터링
-  const bottomFinishItems = items.filter(item =>
-    item.itemName?.includes("하단") ||
-    item.itemName?.includes("마감") ||
-    item.type?.includes("하단마감")
-  );
+  const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
 
   return (
     <div className="bg-white p-8 min-h-full text-[11px]">
-      {/* 헤더: 수주서 제목 (좌측) + 결재란 (우측) */}
+      {/* ========== 헤더: 수주서 제목 + 결재란 ========== */}
       <div className="flex justify-between items-start mb-4">
-        {/* 수주서 제목 (좌측) */}
         <div>
           <h1 className="text-2xl font-bold tracking-widest mb-2">수 주 서</h1>
           <div className="text-[10px] space-y-1">
@@ -129,30 +131,26 @@ export function SalesOrderDocument({
             </div>
           </div>
         </div>
-
-        {/* 결재란 (우측) */}
-        <ConstructionApprovalTable
-          approvers={{ writer: { name: '홍길동' } }}
-        />
+        <ConstructionApprovalTable approvers={{ writer: { name: '홍길동' } }} />
       </div>
 
-      {/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
+      {/* ========== 로트번호 / 제품명 / 제품코드 / 인정번호 ========== */}
       <table className="border border-gray-400 w-full mb-3 text-[10px]">
         <tbody>
           <tr>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{products[0]?.productCategory || "-"}</td>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || "-"}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
             <td className="px-2 py-1 border-r border-gray-400">{orderNumber}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
+            <td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || "-"}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
+            <td className="px-2 py-1 border-r border-gray-400">KWS01</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
             <td className="px-2 py-1">{certificationNumber}</td>
           </tr>
         </tbody>
       </table>
 
-      {/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
+      {/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
       <div className="border border-gray-400 mb-4">
         <div className="grid grid-cols-3">
           {/* 신청업체 */}
@@ -165,21 +163,17 @@ export function SalesOrderDocument({
                   <td className="px-2 py-1">{orderDate}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
-                  <td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
+                  <td className="bg-gray-100 px-2 py-1 font-medium">수주처</td>
                   <td className="px-2 py-1">{client}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
                   <td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
                   <td className="px-2 py-1">{manager}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                   <td className="px-2 py-1">{managerContact}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
-                  <td className="px-2 py-1">{address}</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -201,14 +195,10 @@ export function SalesOrderDocument({
                   <td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
                   <td className="px-2 py-1">{expectedShipDate}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                   <td className="px-2 py-1">{shutterCount}개소</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -230,377 +220,411 @@ export function SalesOrderDocument({
                   <td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
                   <td className="px-2 py-1">{recipientContact}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                   <td className="px-2 py-1">{deliveryMethod}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
         </div>
+        {/* 배송지 주소 - 한 줄 병합 */}
+        <div className="border-t border-gray-400 flex">
+          <div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
+          <div className="px-2 py-1 flex-1">{address}</div>
+        </div>
       </div>
 
       <p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
 
-      {/* 1. 스크린 테이블 */}
+      {/* ========== 1. 스크린 ========== */}
       <div className="mb-4">
         <p className="font-bold mb-2">1. 스크린</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
                 <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
               </tr>
               <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">브라켓트</th>
-                <th className="border-r border-gray-400 px-1">용량Kg</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {screenProducts.length > 0 ? (
-                screenProducts.map((product, index) => (
-                  <tr key={index} className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.productCategory || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.code || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
-                    <td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
-                    <td className="px-1 py-1 text-center">SUS마감</td>
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td colSpan={13} className="px-2 py-3 text-center text-gray-400">
-                    등록된 스크린 제품이 없습니다
-                  </td>
+              {MOCK_SCREEN_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.type}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 2. 모터 테이블 */}
+      {/* ========== 2. 철재 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">2. 모터</p>
+        <p className="font-bold mb-2">2. 철재</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="px-2 py-1 w-14">수량</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No.</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
+                <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
+              </tr>
+              <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {(motorItems.length > 0 || bracketItems.length > 0) ? (
-                <>
-                  {/* 모터 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.spec || "KD-150K"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0] ? formatQuantity(motorItems[0].quantity, motorItems[0].unit) : "6"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.spec || "KD-150K"}</td>
-                    <td className="px-2 py-1 text-center">{motorItems[1] ? formatQuantity(motorItems[1].quantity, motorItems[1].unit) : "6"}</td>
-                  </tr>
-                  {/* 브라켓트 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.spec || "380X180 [2-4\"]"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0] ? formatQuantity(bracketItems[0].quantity, bracketItems[0].unit) : "6"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.spec || "380X180 [2-4\"]"}</td>
-                    <td className="px-2 py-1 text-center">{bracketItems[1] ? formatQuantity(bracketItems[1].quantity, bracketItems[1].unit) : "6"}</td>
-                  </tr>
-                  {/* 브라켓트 추가 행 (밑침통 영금) */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.spec || "∠40-40 L380"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2] ? formatQuantity(bracketItems[2].quantity, bracketItems[2].unit) : "44"}</td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="px-2 py-1 text-center"></td>
-                  </tr>
-                </>
-              ) : (
-                <tr>
-                  <td colSpan={8} className="px-2 py-3 text-center text-gray-400">
-                    등록된 모터/브라켓 품목이 없습니다
-                  </td>
+              {MOCK_STEEL_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.jointBar}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 3. 절곡물 */}
+      {/* ========== 3. 모터 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">3. 절곡물</p>
-
-        {/* 3-1. 가이드레일 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {guideRailItems.length > 0 ? (
-                  <>
-                    {/* 1행: L: 3,000 / 22 */}
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="px-2 py-1 text-center">22</td>
-                    </tr>
-                    {/* 2행: 하부BASE */}
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    {/* 3행: 빈 행 */}
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    {/* 4행: 제품명 */}
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="px-2 py-1 text-center">KSS01</td>
-                    </tr>
-                  </>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 가이드레일이 없습니다
-                    </td>
+        <p className="font-bold mb-2">3. 모터</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className="px-1 py-1 w-10">수량</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: motorRows }).map((_, i) => {
+                const left = MOCK_MOTOR_LEFT[i];
+                const right = MOCK_MOTOR_RIGHT[i];
+                return (
+                  <tr key={i} className="border-b border-gray-300">
+                    <td className={tdBase}>{left?.item || ''}</td>
+                    <td className={tdBase}>{left?.type || ''}</td>
+                    <td className={tdBase}>{left?.spec || ''}</td>
+                    <td className={tdCenter}>{left?.qty ?? ''}</td>
+                    <td className={tdBase}>{right?.item || ''}</td>
+                    <td className={tdBase}>{right?.type || ''}</td>
+                    <td className={tdBase}>{right?.spec || ''}</td>
+                    <td className="px-1 py-1 text-center">{right?.qty ?? ''}</td>
                   </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 가이드레일 마감재</div>
-                    <div className="text-red-600 font-medium">양측에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
-                  <td className="px-2 py-1 text-center">4,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
-                  <td className="px-2 py-1 text-center">1</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-2 text-[10px]">
-            <span className="font-medium">• 별도 추가사항</span>
-          </div>
-        </div>
-
-        {/* 3-2. 케이스(셔터박스) */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">&nbsp;</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {caseItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
-                      <div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
-                        IMG
-                      </div>
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      500X330<br/>(150X300,<br/>400K원)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      3<br/>4<br/>55
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
-                    <td className="px-2 py-1 text-center">22</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 케이스가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 판넬부, 전면부</div>
-                    <div className="text-red-600 font-medium">감싸에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="px-2 py-1 text-center">3,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="px-2 py-1 text-center">44</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* 3-3. 하단마감재 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {bottomFinishItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="px-2 py-1 text-center">11</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={9} className="px-2 py-2 text-center text-gray-400">
-                      등록된 하단마감재가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
+                );
+              })}
+            </tbody>
+          </table>
         </div>
       </div>
 
-      {/* 특이사항 */}
+      {/* ========== 4. 절곡물 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">4. 절곡물</p>
+
+        {/* 4-1. 가이드레일 */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
+
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>백면형 (120X70)</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-2. 케이스(셔터박스) */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-2. 케이스(셔터박스) - EGI 1.5ST</p>
+
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_CASE_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
+        <div className="mb-3">
+          <div className="flex items-center gap-2 mb-2">
+            <button
+              onClick={() => setBottomFinishView('screen')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'screen'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 스크린의 경우
+            </button>
+            <button
+              onClick={() => setBottomFinishView('steel')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'steel'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 절재의 경우
+            </button>
+          </div>
+
+          {bottomFinishView === 'screen' ? (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className={`${thBase} w-10`}>수량</th>
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {MOCK_BOTTOM_SCREEN.map((row, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        <td className={tdBase}>{row.name}</td>
+                        <td className={tdCenter}>{row.spec}</td>
+                        <td className={tdCenter}>{row.l1}</td>
+                        <td className={tdCenter}>{row.q1}</td>
+                        <td className={tdBase}>{row.name2}</td>
+                        <td className={tdCenter}>{row.spec2}</td>
+                        <td className={tdCenter}>{row.l2}</td>
+                        <td className="px-1 py-1 text-center">{row.q2}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 -EGI 1.5ST
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-32`}>하단마감재</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b border-gray-300">
+                      <td className={tdCenter}>
+                        <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
+                      </td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
+                      <td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ========== 5. 부자재 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">5. 부자재</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className="px-1 py-1 w-10">수량</th>
+              </tr>
+            </thead>
+            <tbody>
+              {MOCK_SUBSIDIARY.map((row, i) => (
+                <tr key={i} className="border-b border-gray-300">
+                  <td className={tdBase}>{row.leftItem}</td>
+                  <td className={tdCenter}>{row.leftSpec}</td>
+                  <td className={tdCenter}>{row.leftQty}</td>
+                  <td className={tdBase}>{row.rightItem}</td>
+                  <td className={tdCenter}>{row.rightSpec}</td>
+                  <td className="px-1 py-1 text-center">{row.rightQty}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ========== 특이사항 ========== */}
       {remarks && (
         <div className="mb-4">
           <p className="font-bold mb-2">【 특이사항 】</p>
@@ -611,4 +635,4 @@ export function SalesOrderDocument({
       )}
     </div>
   );
-}
+}

src/components/outbound/ShipmentManagement/documents/ShipmentOrderDocument.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 /**
- * 출고 문서 공통 컴포넌트 (수주서 레이아웃 기반)
- * - 출고증, 납품확인서에서 제목만 변경하여 사용
- * - 수주서(SalesOrderDocument)와 동일한 레이아웃
+ * 출고 문서 공통 컴포넌트 (기획서 D1.8 기준 리디자인)
+ * - 출고증: showDispatchInfo + showLotColumn
+ * - 납품확인서: 기본값 (배차정보 없음, LOT 컬럼 없음)
  */
 
+import { useState } from 'react';
 import type { ShipmentDetail } from '../types';
 import { DELIVERY_METHOD_LABELS } from '../types';
 import { ConstructionApprovalTable } from '@/components/document-system';
@@ -14,56 +15,78 @@ interface ShipmentOrderDocumentProps {
   title: string;
   data: ShipmentDetail;
   showDispatchInfo?: boolean;
+  showLotColumn?: boolean;
 }
 
-export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }: ShipmentOrderDocumentProps) {
-  // 스크린 제품 필터링 (productGroups 기반)
-  const screenProducts = data.productGroups.filter(g =>
-    g.productName?.includes('스크린') ||
-    g.productName?.includes('방화') ||
-    g.productName?.includes('셔터')
-  );
+// ===== 문서 전용 목데이터 =====
 
-  // 전체 부품 목록
-  const allParts = [
-    ...data.productGroups.flatMap(g => g.parts),
-    ...data.otherParts,
-  ];
+const MOCK_SCREEN_ROWS = [
+  { no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
 
-  // 모터 아이템 필터링
-  const motorItems = allParts.filter(part =>
-    part.itemName?.includes('모터')
-  );
+const MOCK_STEEL_ROWS = [
+  { no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+  { no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
+];
 
-  // 브라켓 아이템 필터링
-  const bracketItems = allParts.filter(part =>
-    part.itemName?.includes('브라켓')
-  );
+const MOCK_MOTOR_LEFT = [
+  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6, lot: '123123' },
+  { item: '브라켓트', type: '-', spec: '380X180', qty: 6, lot: '123123' },
+  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4, lot: '123123' },
+];
 
-  // 가이드레일 아이템 필터링
-  const guideRailItems = allParts.filter(part =>
-    part.itemName?.includes('가이드') ||
-    part.itemName?.includes('레일')
-  );
+const MOCK_MOTOR_RIGHT = [
+  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1, lot: '123123' },
+  { item: '전동개폐기', type: '매입', spec: '-', qty: 1, lot: '123123' },
+];
 
-  // 케이스 아이템 필터링
-  const caseItems = allParts.filter(part =>
-    part.itemName?.includes('케이스') ||
-    part.itemName?.includes('셔터박스')
-  );
+const MOCK_GUIDE_RAIL_ITEMS = [
+  { name: '항목명', spec: 'L: 3,000', qty: 22 },
+  { name: '하부BASE', spec: '130X80', qty: 22 },
+];
 
-  // 하단마감재 아이템 필터링
-  const bottomFinishItems = allParts.filter(part =>
-    part.itemName?.includes('하단') ||
-    part.itemName?.includes('마감')
-  );
+const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
+
+const MOCK_CASE_ITEMS = [
+  { name: '500X330', spec: 'L: 4,000', qty: 3 },
+  { name: '500X330', spec: 'L: 5,000', qty: 4 },
+  { name: '상부덮개', spec: '1219X389', qty: 55 },
+  { name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
+];
+
+const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
+
+const MOCK_BOTTOM_SCREEN = [
+  { name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
+  { name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
+  { name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
+];
+
+const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
+
+const MOCK_SUBSIDIARY = [
+  { leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
+  { leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
+];
+
+// ===== 공통 스타일 =====
+const thBase = 'border-r border-gray-400 px-1 py-1';
+const tdBase = 'border-r border-gray-300 px-1 py-1';
+const tdCenter = `${tdBase} text-center`;
+const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
+
+export function ShipmentOrderDocument({ title, data, showDispatchInfo = false, showLotColumn = false }: ShipmentOrderDocumentProps) {
+  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
 
   const deliveryMethodLabel = DELIVERY_METHOD_LABELS[data.deliveryMethod] || '-';
   const fullAddress = [data.address, data.addressDetail].filter(Boolean).join(' ') || data.deliveryAddress || '-';
+  const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
 
   return (
     <div className="bg-white p-8 min-h-full text-[11px]">
-      {/* 헤더: 제목 (좌측) + 결재란 (우측) */}
+      {/* ========== 헤더: 제목 + 결재란 ========== */}
       <div className="flex justify-between items-start mb-4">
         <div>
           <h1 className="text-2xl font-bold tracking-widest mb-2">{title}</h1>
@@ -74,30 +97,26 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
             </div>
           </div>
         </div>
-
-        {/* 결재란 (우측) */}
-        <ConstructionApprovalTable
-          approvers={{ writer: { name: '홍길동' } }}
-        />
+        <ConstructionApprovalTable approvers={{ writer: { name: '홍길동' } }} />
       </div>
 
-      {/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
+      {/* ========== 로트번호 / 제품명 / 제품코드 / 인정번호 ========== */}
       <table className="border border-gray-400 w-full mb-3 text-[10px]">
         <tbody>
           <tr>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
-            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
-            <td className="px-2 py-1 border-r border-gray-400">{data.products[0]?.itemName || '-'}</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
             <td className="px-2 py-1 border-r border-gray-400">{data.lotNo}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
+            <td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
+            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
+            <td className="px-2 py-1 border-r border-gray-400">KWS01</td>
             <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
-            <td className="px-2 py-1">-</td>
+            <td className="px-2 py-1">ABC1234</td>
           </tr>
         </tbody>
       </table>
 
-      {/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
+      {/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
       <div className="border border-gray-400 mb-4">
         <div className="grid grid-cols-3">
           {/* 신청업체 */}
@@ -110,21 +129,17 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="px-2 py-1">{data.scheduledDate}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
-                  <td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
+                  <td className="bg-gray-100 px-2 py-1 font-medium">수주처</td>
                   <td className="px-2 py-1">{data.customerName}</td>
                 </tr>
                 <tr className="border-b border-gray-300">
                   <td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
                   <td className="px-2 py-1">{data.registrant || '-'}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                   <td className="px-2 py-1">{data.driverContact || '-'}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
-                  <td className="px-2 py-1">{fullAddress}</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -146,14 +161,10 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
                   <td className="px-2 py-1">{data.shipmentDate || data.scheduledDate}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                   <td className="px-2 py-1">{data.productGroups.length}개소</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
@@ -175,21 +186,22 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
                   <td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
                   <td className="px-2 py-1">{data.receiverContact || '-'}</td>
                 </tr>
-                <tr className="border-b border-gray-300">
+                <tr>
                   <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                   <td className="px-2 py-1">{deliveryMethodLabel}</td>
                 </tr>
-                <tr>
-                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
-                  <td className="px-2 py-1">&nbsp;</td>
-                </tr>
               </tbody>
             </table>
           </div>
         </div>
+        {/* 배송지 주소 - 한 줄 병합 */}
+        <div className="border-t border-gray-400 flex">
+          <div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
+          <div className="px-2 py-1 flex-1">{fullAddress}</div>
+        </div>
       </div>
 
-      {/* 배차정보 (출고증에서만 표시) */}
+      {/* ========== 배차정보 (출고증에서만) ========== */}
       {showDispatchInfo && (() => {
         const dispatch = data.vehicleDispatches[0];
         return (
@@ -221,366 +233,406 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
         );
       })()}
 
-      <p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
+      {/* ========== 자재 및 철거 내역 헤더 ========== */}
+      <div className="bg-gray-800 text-white text-center py-2 font-bold mb-4">
+        자재 및 철거 내역
+      </div>
 
-      {/* 1. 스크린 테이블 */}
+      {/* ========== 1. 스크린 ========== */}
       <div className="mb-4">
         <p className="font-bold mb-2">1. 스크린</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
-                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
                 <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
               </tr>
               <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">가로</th>
-                <th className="border-r border-gray-400 px-1">세로</th>
-                <th className="border-r border-gray-400 px-1">브라켓트</th>
-                <th className="border-r border-gray-400 px-1">용량Kg</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {screenProducts.length > 0 ? (
-                screenProducts.map((group, index) => {
-                  // specification에서 가로x세로 파싱 (예: "2000 x 2500 mm")
-                  const specMatch = group.specification?.match(/(\d+)\s*[xX×]\s*(\d+)/);
-                  const width = specMatch ? specMatch[1] : '-';
-                  const height = specMatch ? specMatch[2] : '-';
-
-                  return (
-                    <tr key={group.id} className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{group.productName || '-'}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">-</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
-                      <td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
-                      <td className="px-1 py-1 text-center">SUS마감</td>
-                    </tr>
-                  );
-                })
-              ) : (
-                <tr>
-                  <td colSpan={13} className="px-2 py-3 text-center text-gray-400">
-                    등록된 스크린 제품이 없습니다
-                  </td>
+              {MOCK_SCREEN_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.type}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 2. 모터 테이블 */}
+      {/* ========== 2. 절재 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">2. 모터</p>
+        <p className="font-bold mb-2">2. 절재</p>
         <div className="border border-gray-400">
           <table className="w-full">
             <thead>
               <tr className="bg-gray-100 border-b border-gray-400">
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
-                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
-                <th className="px-2 py-1 w-14">수량</th>
+                <th className={`${thBase} w-8`} rowSpan={2}>No.</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
+                <th className={thBase} colSpan={2}>오픈사이즈</th>
+                <th className={thBase} colSpan={2}>제작사이즈</th>
+                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
+                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
+                <th className={thBase} colSpan={2}>모터</th>
+                <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
+              </tr>
+              <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>가로</th>
+                <th className={thBase}>세로</th>
+                <th className={thBase}>브라켓트</th>
+                <th className={thBase}>용량Kg</th>
               </tr>
             </thead>
             <tbody>
-              {(motorItems.length > 0 || bracketItems.length > 0) ? (
-                <>
-                  {/* 모터 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.specification || 'KD-150K'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
-                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.specification || 'KD-150K'}</td>
-                    <td className="px-2 py-1 text-center">{motorItems[1]?.quantity ?? '-'}</td>
-                  </tr>
-                  {/* 브라켓트 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.specification || '380X180 [2-4"]'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.specification || '380X180 [2-4"]'}</td>
-                    <td className="px-2 py-1 text-center">{bracketItems[1]?.quantity ?? '-'}</td>
-                  </tr>
-                  {/* 브라켓트 추가 행 */}
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
-                    <td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
-                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.specification || '∠40-40 L380'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2]?.quantity ?? '-'}</td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="border-r border-gray-300 px-2 py-1"></td>
-                    <td className="px-2 py-1 text-center"></td>
-                  </tr>
-                </>
-              ) : (
-                <tr>
-                  <td colSpan={8} className="px-2 py-3 text-center text-gray-400">
-                    등록된 모터/브라켓 품목이 없습니다
-                  </td>
+              {MOCK_STEEL_ROWS.map((row) => (
+                <tr key={row.no} className="border-b border-gray-300">
+                  <td className={tdCenter}>{row.no}</td>
+                  <td className={tdCenter}>{row.code}</td>
+                  <td className={tdCenter}>{row.openW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.openH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeW.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.madeH.toLocaleString()}</td>
+                  <td className={tdCenter}>{row.guideRail}</td>
+                  <td className={tdCenter}>{row.shaft}</td>
+                  <td className={tdCenter}>{row.jointBar}</td>
+                  <td className={tdCenter}>{row.caseInch}</td>
+                  <td className={tdCenter}>{row.bracket}</td>
+                  <td className={tdCenter}>{row.capacity}</td>
+                  <td className="px-1 py-1 text-center">{row.finish}</td>
                 </tr>
-              )}
+              ))}
             </tbody>
           </table>
         </div>
       </div>
 
-      {/* 3. 절곡물 */}
+      {/* ========== 3. 모터 ========== */}
       <div className="mb-4">
-        <p className="font-bold mb-2">3. 절곡물</p>
-
-        {/* 3-1. 가이드레일 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {guideRailItems.length > 0 ? (
-                  <>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">{guideRailItems[0]?.quantity ?? 22}</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
-                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
-                          IMG
-                        </div>
-                      </td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
-                      <td className="px-2 py-1 text-center">{guideRailItems[1]?.quantity ?? 22}</td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
-                      <td className="px-2 py-1 text-center"></td>
-                    </tr>
-                    <tr className="border-b border-gray-300">
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
-                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
-                      <td className="px-2 py-1 text-center">KSS01</td>
-                    </tr>
-                  </>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 가이드레일이 없습니다
-                    </td>
+        <p className="font-bold mb-2">3. 모터</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                {showLotColumn && <th className={`${thBase} w-16`}>입고 LOT</th>}
+                <th className={`${thBase} w-20`}>항목</th>
+                <th className={`${thBase} w-20`}>구분</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={showLotColumn ? `${thBase} w-10` : 'px-1 py-1 w-10'}>수량</th>
+                {showLotColumn && <th className="px-1 py-1 w-16">입고 LOT</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: motorRows }).map((_, i) => {
+                const left = MOCK_MOTOR_LEFT[i];
+                const right = MOCK_MOTOR_RIGHT[i];
+                return (
+                  <tr key={i} className="border-b border-gray-300">
+                    <td className={tdBase}>{left?.item || ''}</td>
+                    <td className={tdBase}>{left?.type || ''}</td>
+                    <td className={tdBase}>{left?.spec || ''}</td>
+                    <td className={tdCenter}>{left?.qty ?? ''}</td>
+                    {showLotColumn && <td className={tdCenter}>{left?.lot || ''}</td>}
+                    <td className={tdBase}>{right?.item || ''}</td>
+                    <td className={tdBase}>{right?.type || ''}</td>
+                    <td className={tdBase}>{right?.spec || ''}</td>
+                    <td className={showLotColumn ? tdCenter : 'px-1 py-1 text-center'}>{right?.qty ?? ''}</td>
+                    {showLotColumn && <td className="px-1 py-1 text-center">{right?.lot || ''}</td>}
                   </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 가이드레일 마감재</div>
-                    <div className="text-red-600 font-medium">양측에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
-                  <td className="px-2 py-1 text-center">4,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
-                  <td className="px-2 py-1 text-center">1</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-2 text-[10px]">
-            <span className="font-medium">• 별도 추가사항</span>
-          </div>
-        </div>
-
-        {/* 3-2. 케이스(셔터박스) */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">&nbsp;</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {caseItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
-                      <div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
-                        IMG
-                      </div>
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      500X330<br/>(150X300,<br/>400K원)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
-                      3<br/>4<br/>55
-                    </td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
-                    <td className="px-2 py-1 text-center">22</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
-                      등록된 케이스가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          {/* 연기차단재 정보 */}
-          <div className="mt-2 border border-gray-400">
-            <table className="w-full text-[10px]">
-              <tbody>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div className="font-medium">연기차단재(W50)</div>
-                    <div>• 판넬부, 전면부</div>
-                    <div className="text-red-600 font-medium">감싸에 설치</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
-                    <div>EGI 0.8T +</div>
-                    <div>화이버글라스코팅직물</div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
-                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
-                      IMG
-                    </div>
-                  </td>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
-                  <td className="px-2 py-1 text-center">3,000</td>
-                </tr>
-                <tr>
-                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
-                  <td className="px-2 py-1 text-center">44</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* 3-3. 하단마감재 */}
-        <div className="mb-3">
-          <p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
-          <div className="border border-gray-400">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-100 border-b border-gray-400">
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
-                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
-                  <th className="px-2 py-1 w-12">수량</th>
-                </tr>
-              </thead>
-              <tbody>
-                {bottomFinishItems.length > 0 ? (
-                  <tr className="border-b border-gray-300">
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
-                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
-                    <td className="px-2 py-1 text-center">11</td>
-                  </tr>
-                ) : (
-                  <tr>
-                    <td colSpan={9} className="px-2 py-2 text-center text-gray-400">
-                      등록된 하단마감재가 없습니다
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
+                );
+              })}
+            </tbody>
+          </table>
         </div>
       </div>
 
-      {/* 특이사항 */}
+      {/* ========== 4. 절곡물 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">4. 절곡물</p>
+
+        {/* 4-1. 가이드레일 */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
+
+          {/* 메인 테이블 */}
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>백면형 (120X70)</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-2. 케이스(셔터박스) */}
+        <div className="mb-3">
+          <p className="text-[10px] font-medium mb-1">4-2. 케이스(셔터박스) - EGI 1.5ST</p>
+
+          {/* 메인 테이블 */}
+          <div className="border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-400">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                {MOCK_CASE_ITEMS.map((item, i) => (
+                  <tr key={i} className="border-b border-gray-300">
+                    {i === 0 && (
+                      <td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
+                        <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
+                      </td>
+                    )}
+                    <td className={tdCenter}>{item.name}</td>
+                    <td className={tdCenter}>{item.spec}</td>
+                    <td className="px-1 py-1 text-center">{item.qty}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* 연기차단재 */}
+          <div className="mt-1 border border-gray-400">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
+                  <th className={`${thBase} w-32`}>&nbsp;</th>
+                  <th className={`${thBase} w-24`}>항목</th>
+                  <th className={`${thBase} w-20`}>규격</th>
+                  <th className="px-1 py-1 w-14">수량</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-gray-300">
+                  <td className={tdCenter}>
+                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                  </td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
+                  <td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
+                  <td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-1 text-[10px]">
+            <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
+          </p>
+        </div>
+
+        {/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
+        <div className="mb-3">
+          {/* 토글 버튼 */}
+          <div className="flex items-center gap-2 mb-2">
+            <button
+              onClick={() => setBottomFinishView('screen')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'screen'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 스크린의 경우
+            </button>
+            <button
+              onClick={() => setBottomFinishView('steel')}
+              className={`px-3 py-1 text-[10px] font-bold border rounded ${
+                bottomFinishView === 'steel'
+                  ? 'bg-gray-800 text-white border-gray-800'
+                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
+              }`}
+            >
+              # 절재의 경우
+            </button>
+          </div>
+
+          {bottomFinishView === 'screen' ? (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className={`${thBase} w-10`}>수량</th>
+                      <th className={`${thBase} w-20`}>항목</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {MOCK_BOTTOM_SCREEN.map((row, i) => (
+                      <tr key={i} className="border-b border-gray-300">
+                        <td className={tdBase}>{row.name}</td>
+                        <td className={tdCenter}>{row.spec}</td>
+                        <td className={tdCenter}>{row.l1}</td>
+                        <td className={tdCenter}>{row.q1}</td>
+                        <td className={tdBase}>{row.name2}</td>
+                        <td className={tdCenter}>{row.spec2}</td>
+                        <td className={tdCenter}>{row.l2}</td>
+                        <td className="px-1 py-1 text-center">{row.q2}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-[10px] font-medium mb-1">
+                4-3. 하단마감재 -EGI 1.5ST
+              </p>
+              <div className="border border-gray-400">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-100 border-b border-gray-400">
+                      <th className={`${thBase} w-32`}>하단마감재</th>
+                      <th className={`${thBase} w-14`}>규격</th>
+                      <th className={`${thBase} w-16`}>길이</th>
+                      <th className="px-1 py-1 w-10">수량</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b border-gray-300">
+                      <td className={tdCenter}>
+                        <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
+                      </td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
+                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
+                      <td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ========== 5. 부자재 ========== */}
+      <div className="mb-4">
+        <p className="font-bold mb-2">5. 부자재</p>
+        <div className="border border-gray-400">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100 border-b border-gray-400">
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className={`${thBase} w-10`}>수량</th>
+                <th className={`${thBase} w-24`}>항목</th>
+                <th className={`${thBase} w-20`}>규격</th>
+                <th className="px-1 py-1 w-10">수량</th>
+              </tr>
+            </thead>
+            <tbody>
+              {MOCK_SUBSIDIARY.map((row, i) => (
+                <tr key={i} className="border-b border-gray-300">
+                  <td className={tdBase}>{row.leftItem}</td>
+                  <td className={tdCenter}>{row.leftSpec}</td>
+                  <td className={tdCenter}>{row.leftQty}</td>
+                  <td className={tdBase}>{row.rightItem}</td>
+                  <td className={tdCenter}>{row.rightSpec}</td>
+                  <td className="px-1 py-1 text-center">{row.rightQty}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* ========== 특이사항 ========== */}
       {data.remarks && (
         <div className="mb-4">
           <p className="font-bold mb-2">【 특이사항 】</p>

src/components/outbound/ShipmentManagement/documents/ShippingSlip.tsx

@@ -13,5 +13,5 @@ interface ShippingSlipProps {
 }
 
 export function ShippingSlip({ data }: ShippingSlipProps) {
-  return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo />;
+  return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo showLotColumn />;
 }

src/components/process-management/ProcessDetail.tsx

@@ -11,7 +11,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, Edit, GripVertical, Plus, Package } from 'lucide-react';
+import { ArrowLeft, Edit, GripVertical, Plus, Package, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -19,7 +19,9 @@ import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
 import { useMenuStore } from '@/store/menuStore';
 import { usePermission } from '@/hooks/usePermission';
-import { getProcessSteps, reorderProcessSteps } from './actions';
+import { toast } from 'sonner';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
+import { getProcessSteps, reorderProcessSteps, deleteProcess } from './actions';
 import type { Process, ProcessStep } from '@/types/process';
 
 interface ProcessDetailProps {
@@ -35,6 +37,10 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
   const [steps, setSteps] = useState<ProcessStep[]>([]);
   const [isStepsLoading, setIsStepsLoading] = useState(true);
 
+  // 삭제 다이얼로그 상태
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
   // 드래그 상태
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
@@ -75,6 +81,24 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
     router.push(`/ko/master-data/process-management/${process.id}/steps/${stepId}`);
   };
 
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      const result = await deleteProcess(process.id);
+      if (result.success) {
+        toast.success('공정이 삭제되었습니다.');
+        router.push('/ko/master-data/process-management');
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.');
+      }
+    } catch {
+      toast.error('삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsDeleting(false);
+      setDeleteDialogOpen(false);
+    }
+  };
+
   // ===== 드래그&드롭 (HTML5 네이티브) =====
   const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
     setDragIndex(index);
@@ -343,12 +367,27 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
           <span className="hidden md:inline">목록으로</span>
         </Button>
         {canUpdate && (
-          <Button onClick={handleEdit} size="sm" className="md:size-default">
-            <Edit className="h-4 w-4 md:mr-2" />
-            <span className="hidden md:inline">수정</span>
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="destructive" onClick={() => setDeleteDialogOpen(true)} size="sm" className="md:size-default">
+              <Trash2 className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">삭제</span>
+            </Button>
+            <Button onClick={handleEdit} size="sm" className="md:size-default">
+              <Edit className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">수정</span>
+            </Button>
+          </div>
         )}
       </div>
+
+      {/* 삭제 확인 다이얼로그 */}
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        description="이 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+        loading={isDeleting}
+        onConfirm={handleDelete}
+      />
     </PageLayout>
   );
 }

src/components/process-management/ProcessListClient.tsx

@@ -9,10 +9,11 @@
  * - 삭제 다이얼로그
  */
 
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { Wrench, Plus } from 'lucide-react';
-import { TableCell, TableRow } from '@/components/ui/table';
+import { Wrench, Plus, GripVertical } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { TableCell, TableRow, TableHead } from '@/components/ui/table';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -26,7 +27,7 @@ import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
 import { toast } from 'sonner';
 import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import type { Process } from '@/types/process';
-import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats } from './actions';
+import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats, reorderProcesses } from './actions';
 
 interface ProcessListClientProps {
   initialData?: Process[];
@@ -50,6 +51,13 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
   // 검색어 상태
   const [searchQuery, setSearchQuery] = useState('');
 
+  // 드래그&드롭 순서 변경 상태
+  const [isOrderChanged, setIsOrderChanged] = useState(false);
+  const dragProcessIdRef = useRef<string | null>(null);
+  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
+  const allProcessesRef = useRef(allProcesses);
+  allProcessesRef.current = allProcesses;
+
   // ===== 데이터 로드 =====
   const loadData = useCallback(async () => {
     setIsLoading(true);
@@ -177,6 +185,78 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
     }
   }, [allProcesses]);
 
+  // ===== 드래그&드롭 순서 변경 =====
+  const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, processId: string) => {
+    dragProcessIdRef.current = processId;
+    dragNodeRef.current = e.currentTarget;
+    e.dataTransfer.effectAllowed = 'move';
+    requestAnimationFrame(() => {
+      if (dragNodeRef.current) {
+        dragNodeRef.current.style.opacity = '0.4';
+      }
+    });
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    e.currentTarget.classList.add('border-t-2', 'border-t-primary');
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLTableRowElement>) => {
+    const related = e.relatedTarget as Node;
+    if (!e.currentTarget.contains(related)) {
+      e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+    }
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    if (dragNodeRef.current) {
+      dragNodeRef.current.style.opacity = '1';
+    }
+    dragProcessIdRef.current = null;
+    dragNodeRef.current = null;
+  }, []);
+
+  const handleProcessDrop = useCallback((e: React.DragEvent<HTMLTableRowElement>, dropProcessId: string) => {
+    e.preventDefault();
+    e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+    const dragId = dragProcessIdRef.current;
+    if (!dragId || dragId === dropProcessId) {
+      handleDragEnd();
+      return;
+    }
+    setAllProcesses((prev) => {
+      const updated = [...prev];
+      const dragIdx = updated.findIndex(p => p.id === dragId);
+      const dropIdx = updated.findIndex(p => p.id === dropProcessId);
+      if (dragIdx === -1 || dropIdx === -1) return prev;
+      const [moved] = updated.splice(dragIdx, 1);
+      updated.splice(dropIdx, 0, moved);
+      return updated;
+    });
+    setIsOrderChanged(true);
+    handleDragEnd();
+  }, [handleDragEnd]);
+
+  const handleSaveOrder = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const orderData = allProcessesRef.current.map((p, idx) => ({ id: p.id, order: idx + 1 }));
+      const result = await reorderProcesses(orderData);
+      if (result.success) {
+        toast.success('순서가 저장되었습니다.');
+        setIsOrderChanged(false);
+      } else {
+        toast.error(result.error || '순서 저장에 실패했습니다.');
+      }
+    } catch {
+      toast.error('순서 저장 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
   // ===== UniversalListPage Config =====
   const config: UniversalListConfig<Process> = useMemo(
     () => ({
@@ -230,8 +310,11 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
         },
       },
 
-      // 테이블 컬럼
+      // 테이블 컬럼 (showCheckbox: false + renderCustomTableHeader로 수동 관리)
+      showCheckbox: false,
       columns: [
+        { key: 'drag', label: '', className: 'w-[40px]' },
+        { key: 'checkbox', label: '', className: 'w-[50px]' },
         { key: 'no', label: '번호', className: 'w-[60px] text-center' },
         { key: 'processCode', label: '공정번호', className: 'w-[120px]' },
         { key: 'processName', label: '공정명', className: 'min-w-[200px]' },
@@ -240,6 +323,25 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
         { key: 'status', label: '상태', className: 'w-[80px] text-center' },
       ],
 
+      // 커스텀 테이블 헤더 (드래그 → 전체선택 체크박스 → 번호 → 데이터 순)
+      renderCustomTableHeader: ({ displayData, selectedItems, onToggleSelectAll }) => (
+        <>
+          <TableHead className="w-[40px]" />
+          <TableHead className="w-[50px] text-center">
+            <Checkbox
+              checked={displayData.length > 0 && selectedItems.size === displayData.length}
+              onCheckedChange={onToggleSelectAll}
+            />
+          </TableHead>
+          <TableHead className="w-[60px] text-center">번호</TableHead>
+          <TableHead className="w-[120px]">공정번호</TableHead>
+          <TableHead className="min-w-[200px]">공정명</TableHead>
+          <TableHead className="w-[120px]">담당부서</TableHead>
+          <TableHead className="w-[80px] text-center">품목</TableHead>
+          <TableHead className="w-[80px] text-center">상태</TableHead>
+        </>
+      ),
+
       // 클라이언트 사이드 필터링
       clientSideFiltering: true,
       itemsPerPage: 20,
@@ -292,6 +394,13 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
         );
       },
 
+      // 순서 변경 저장 버튼
+      headerActions: () => (
+        <Button variant="outline" onClick={handleSaveOrder} disabled={!isOrderChanged}>
+          순서 변경 저장
+        </Button>
+      ),
+
       // 등록 버튼 (공통 컴포넌트에서 오른쪽에 렌더링)
       createButton: {
         label: '공정 등록',
@@ -315,9 +424,21 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
         return (
           <TableRow
             key={process.id}
+            draggable
+            onDragStart={(e) => handleDragStart(e, process.id)}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDragEnd={handleDragEnd}
+            onDrop={(e) => handleProcessDrop(e, process.id)}
             className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
             onClick={() => handleRowClick(process)}
           >
+            <TableCell
+              className="text-center cursor-grab active:cursor-grabbing"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+            </TableCell>
             <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
               <Checkbox
                 checked={handlers.isSelected}
@@ -388,7 +509,7 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
         );
       },
     }),
-    [handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery]
+    [handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery, isOrderChanged, handleSaveOrder, handleDragStart, handleDragOver, handleDragLeave, handleDragEnd, handleProcessDrop]
   );
 
   return (

src/components/process-management/actions.ts

@@ -321,6 +321,27 @@ export async function toggleProcessActive(id: string): Promise<{ success: boolea
   return { success: result.success, data: result.data, error: result.error };
 }
 
+/**
+ * 공정 순서 변경
+ */
+export async function reorderProcesses(
+  processes: { id: string; order: number }[]
+): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
+  const result = await executeServerAction({
+    url: `${API_URL}/api/v1/processes/reorder`,
+    method: 'PATCH',
+    body: {
+      items: processes.map((p) => ({
+        id: parseInt(p.id, 10),
+        sort_order: p.order,
+      })),
+    },
+    errorMessage: '공정 순서 변경에 실패했습니다.',
+  });
+  if (result.__authError) return { success: false, __authError: true };
+  return { success: result.success, error: result.error };
+}
+
 /**
  * 공정 옵션 목록 (드롭다운용)
  */

src/lib/utils/menuRefresh.ts

@@ -91,7 +91,9 @@ export async function refreshMenus(): Promise<RefreshMenuResult> {
 
     const data = await response.json();
 
-    if (!data.menus || !Array.isArray(data.menus)) {
+    // 백엔드 ApiResponse::success() 응답 형식: { success, message, data: [...] }
+    const apiMenus = data.data;
+    if (!apiMenus || !Array.isArray(apiMenus)) {
       return {
         success: false,
         updated: false,
@@ -100,7 +102,7 @@ export async function refreshMenus(): Promise<RefreshMenuResult> {
     }
 
     // 3. 메뉴 변환
-    const transformedMenus = transformApiMenusToMenuItems(data.menus);
+    const transformedMenus = transformApiMenusToMenuItems(apiMenus);
     const newHash = generateMenuHash(transformedMenus);
 
     // 4. 변경 없으면 업데이트 스킵
@@ -159,7 +161,9 @@ export async function forceRefreshMenus(): Promise<RefreshMenuResult> {
 
     const data = await response.json();
 
-    if (!data.menus || !Array.isArray(data.menus)) {
+    // 백엔드 ApiResponse::success() 응답 형식: { success, message, data: [...] }
+    const apiMenus = data.data;
+    if (!apiMenus || !Array.isArray(apiMenus)) {
       return {
         success: false,
         updated: false,
@@ -167,7 +171,7 @@ export async function forceRefreshMenus(): Promise<RefreshMenuResult> {
       };
     }
 
-    const transformedMenus = transformApiMenusToMenuItems(data.menus);
+    const transformedMenus = transformApiMenusToMenuItems(apiMenus);
 
     // localStorage 업데이트
     const userData = localStorage.getItem('user');

src/types/checklist.ts

@@ -0,0 +1,73 @@
+/**
+ * 점검표 관리 타입 정의
+ */
+
+// ============================================================================
+// 점검표 (Checklist)
+// ============================================================================
+
+export interface Checklist {
+  id: string;
+  checklistCode: string;       // 점검표 번호
+  checklistName: string;       // 점검표명
+  itemCount: number;           // 항목 수
+  documentCount: number;       // 문서 수
+  status: '사용' | '미사용';
+  order: number;               // 정렬 순서
+  items?: ChecklistItem[];     // 하위 항목 목록
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ChecklistFormData {
+  checklistName: string;
+  status: '사용' | '미사용';
+}
+
+// ============================================================================
+// 점검표 항목 (Checklist Item)
+// ============================================================================
+
+export interface ChecklistItem {
+  id: string;
+  checklistId: string;         // 소속 점검표 ID
+  itemCode: string;            // 항목 번호
+  itemName: string;            // 항목명
+  description: string;         // 소개
+  documentCount: number;       // 문서 수
+  status: '사용' | '미사용';
+  order: number;               // 정렬 순서
+  documents?: ChecklistDocument[]; // 하위 문서 목록
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ChecklistItemFormData {
+  itemName: string;
+  description: string;
+  status: '사용' | '미사용';
+  documents: ChecklistDocumentFormData[];
+}
+
+// ============================================================================
+// 점검표 문서 (Checklist Document)
+// ============================================================================
+
+export interface ChecklistDocument {
+  id: string;
+  itemId: string;              // 소속 항목 ID
+  documentCode: string;        // 문서 번호
+  documentName: string;        // 문서명 (파일명)
+  revision: string;            // 개정 (REV12 등)
+  effectiveDate: string;       // 시행일
+  order: number;               // 정렬 순서
+}
+
+export interface ChecklistDocumentFormData {
+  id?: string;
+  documentCode: string;
+  documentName: string;
+  revision: string;
+  effectiveDate: string;
+  order: number;
+}