diff --git a/frontend/app/(main)/COMPANY_16/outsourcing/outbound/page.tsx b/frontend/app/(main)/COMPANY_16/outsourcing/outbound/page.tsx
new file mode 100644
index 00000000..002597be
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_16/outsourcing/outbound/page.tsx
@@ -0,0 +1,1450 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter,
+ DialogDescription,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import {
+ Plus,
+ Trash2,
+ Loader2,
+ Download,
+ Package,
+ Search,
+ X,
+ Settings2,
+ ChevronRight,
+ ChevronsLeft,
+ ChevronLeft,
+ ChevronsRight,
+ RefreshCw,
+ Inbox,
+ Filter,
+ Check,
+ ArrowUp,
+ ArrowDown,
+ Save,
+} from "lucide-react";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { useAuth } from "@/hooks/useAuth";
+import { useConfirmDialog } from "@/components/common/ConfirmDialog";
+import { toast } from "sonner";
+import { useTableSettings } from "@/hooks/useTableSettings";
+import { TableSettingsModal } from "@/components/common/TableSettingsModal";
+import {
+ DynamicSearchFilter,
+ FilterValue,
+} from "@/components/common/DynamicSearchFilter";
+import { exportToExcel } from "@/lib/utils/excelExport";
+import {
+ getOutsourcingOutboundList,
+ getCandidates,
+ createOutsourcingOutbound,
+ deleteOutsourcingOutbound,
+ generateOutsourcingOutboundNumber,
+ getOutsourcingWarehouses,
+ type OutsourcingCandidate,
+ type OutsourcingOutboundItem,
+ type WarehouseOption,
+} from "@/lib/api/outsourcingOutbound";
+
+// ===== 상태 뱃지 색상 =====
+const OUTBOUND_STATUS_OPTIONS = [
+ { value: "대기", label: "대기", color: "bg-secondary text-secondary-foreground" },
+ { value: "출고완료", label: "출고완료", color: "bg-primary/10 text-primary" },
+ { value: "출고취소", label: "출고취소", color: "bg-destructive/10 text-destructive" },
+];
+
+const getStatusColor = (status: string) =>
+ OUTBOUND_STATUS_OPTIONS.find((s) => s.value === status)?.color ||
+ "bg-muted text-muted-foreground";
+
+// ===== 메인 그리드 컬럼 =====
+const GRID_COLUMNS = [
+ { key: "outbound_number", label: "외주출고번호" },
+ { key: "outbound_date", label: "출고일" },
+ { key: "reference_number", label: "작업지시번호" },
+ { key: "customer_name", label: "외주사" },
+ { key: "item_code", label: "품목코드" },
+ { key: "item_name", label: "품목명" },
+ { key: "specification", label: "규격" },
+ { key: "outbound_qty", label: "출고수량" },
+ { key: "warehouse_name", label: "출고창고" },
+ { key: "outbound_status", label: "상태" },
+ { key: "memo", label: "비고" },
+];
+
+// 체크박스(1) + GRID_COLUMNS(11) = 12
+const TOTAL_COLS = 12;
+
+// ===== 헤더 필터 Popover =====
+function HeaderFilterPopover({
+ colKey,
+ colLabel,
+ uniqueValues,
+ filterValues,
+ onToggle,
+ onClear,
+}: {
+ colKey: string;
+ colLabel: string;
+ uniqueValues: string[];
+ filterValues: Set
;
+ onToggle: (colKey: string, value: string) => void;
+ onClear: (colKey: string) => void;
+}) {
+ const [filterSearch, setFilterSearch] = useState("");
+ const hasFilter = filterValues.size > 0;
+ const filteredValues = uniqueValues.filter(
+ (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase()),
+ );
+
+ return (
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+ 필터: {colLabel}
+ {hasFilter && (
+
+ )}
+
+
+
+ setFilterSearch(e.target.value)}
+ placeholder="검색..."
+ className="h-7 text-xs pl-7"
+ />
+
+
+ {filteredValues.slice(0, 100).map((val) => {
+ const isSelected = filterValues.has(val);
+ return (
+
onToggle(colKey, val)}
+ >
+
+ {isSelected && (
+
+ )}
+
+
{val || "(빈 값)"}
+
+ );
+ })}
+ {filteredValues.length > 100 && (
+
+ ...외 {filteredValues.length - 100}개
+
+ )}
+
+
+ {/* 검색 영역 */}
+
+
+ {/* 외주출고 목록 테이블 */}
+
+ {/* 패널 헤더 */}
+
+
+
+
외주출고 목록
+
+ {filteredRows.length}건
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const allFilteredIds = filteredRows.map((r) => r.id);
+ const allChecked =
+ allFilteredIds.length > 0 &&
+ allFilteredIds.every((id) => checkedIds.includes(id));
+ setCheckedIds(allChecked ? [] : allFilteredIds);
+ }}
+ >
+ {
+ const allFilteredIds = filteredRows.map((r) => r.id);
+ return (
+ allFilteredIds.length > 0 &&
+ allFilteredIds.every((id) => checkedIds.includes(id))
+ );
+ })()}
+ onCheckedChange={() => {}}
+ />
+
+ {GRID_COLUMNS.map((col) => {
+ const isRight = ["outbound_qty"].includes(col.key);
+ return (
+
+
+
handleSort(col.key)}
+ >
+
{col.label}
+ {sortState?.key === col.key &&
+ (sortState.direction === "asc" ? (
+
+ ) : (
+
+ ))}
+
+ {(columnUniqueValues[col.key] || []).length > 0 && (
+
()
+ }
+ onToggle={toggleHeaderFilter}
+ onClear={clearHeaderFilter}
+ />
+ )}
+
+
+
+ 등록된 외주출고 내역이 없어요
+
+
+
+
+ {/* 페이지네이션 */}
+
+
+
+ 전체
+
+ {filteredRows.length.toLocaleString()}
+
+ 건
+
+
+ setPageSizeInput(e.target.value)}
+ onBlur={applyPageSize}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ applyPageSize();
+ }
+ }}
+ className="h-7 w-16 text-center text-xs"
+ />
+ 건씩 보기
+
+
+
+
+
+ {getPageNumbers().map((page, idx) =>
+ page === "..." ? (
+
+ ...
+
+ ) : (
+
+ ),
+ )}
+
+
+
+
+ {
+ if (e.key === "Enter") {
+ const val = parseInt(
+ (e.target as HTMLInputElement).value,
+ 10,
+ );
+ if (!isNaN(val) && val >= 1 && val <= totalPages) {
+ setCurrentPage(val);
+ (e.target as HTMLInputElement).value = "";
+ (e.target as HTMLInputElement).blur();
+ }
+ }
+ }}
+ onBlur={(e) => {
+ const val = parseInt(e.target.value, 10);
+ if (!isNaN(val) && val >= 1 && val <= totalPages) {
+ setCurrentPage(val);
+ }
+ e.target.value = "";
+ }}
+ />
+ / {totalPages} 페이지
+
+
+
+
+ {/* 외주출고 등록 모달 */}
+
+
+ {/* 테이블 설정 모달 */}
+
+
+ {/* 확인 다이얼로그 */}
+ {ConfirmDialogComponent}
+