(최겸)기술영업 벤더 개발 초안(index 스키마 미포함 상태)

10 files changed, 2132 insertions, 0 deletions

diff --git a/lib/tech-vendors/table/attachmentButton.tsx b/lib/tech-vendors/table/attachmentButton.tsx
new file mode 100644
index 00000000..12dc6f77
--- /dev/null
+++ b/lib/tech-vendors/table/attachmentButton.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { PaperclipIcon } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+import { type VendorAttach } from '@/db/schema/vendors';
+import { downloadTechVendorAttachments } from '../service';
+
+interface AttachmentsButtonProps {
+  vendorId: number;
+  hasAttachments: boolean;
+  attachmentsList?: VendorAttach[];
+}
+
+export function AttachmentsButton({ vendorId, hasAttachments, attachmentsList = [] }: AttachmentsButtonProps) {
+  if (!hasAttachments) return null;
+
+  const handleDownload = async () => {
+    try {
+      toast.loading('첨부파일을 준비하는 중...');
+
+      // 서버 액션 호출
+      const result = await downloadTechVendorAttachments(vendorId);
+
+      // 로딩 토스트 닫기
+      toast.dismiss();
+
+      if (!result || !result.url) {
+        toast.error('다운로드 준비 중 오류가 발생했습니다.');
+        return;
+      }
+
+      // 파일 다운로드 트리거
+      toast.success('첨부파일 다운로드가 시작되었습니다.');
+
+      // 다운로드 링크 열기
+      const a = document.createElement('a');
+      a.href = result.url;
+      a.download = result.fileName || '첨부파일.zip';
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+    } catch (error) {
+      toast.dismiss();
+      toast.error('첨부파일 다운로드에 실패했습니다.');
+      console.error('첨부파일 다운로드 오류:', error);
+    }
+  };
+
+  return (
+    <>
+      {attachmentsList && attachmentsList.length > 0 &&
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDownload}
+          title={`${attachmentsList.length}개 파일 다운로드`}
+        >
+          <PaperclipIcon className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {/* {attachmentsList.length > 1 && (
+        <Badge
+          variant="secondary"
+          className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.425rem] leading-none flex items-center justify-center"
+        >
+          {attachmentsList.length}
+        </Badge>
+      )} */}
+        </Button>
+      }
+    </>
+  );
+}
diff --git a/lib/tech-vendors/table/excel-template-download.tsx b/lib/tech-vendors/table/excel-template-download.tsx
new file mode 100644
index 00000000..65b880da
--- /dev/null
+++ b/lib/tech-vendors/table/excel-template-download.tsx
@@ -0,0 +1,128 @@
+import * as ExcelJS from 'exceljs';

+import { saveAs } from "file-saver";

+

+// 벤더 타입 enum

+const VENDOR_TYPES = ["조선", "해양TOP", "해양HULL"] as const;

+

+/**

+ * 기술영업 벤더 데이터 가져오기를 위한 Excel 템플릿 파일 생성 및 다운로드

+ */

+export async function exportTechVendorTemplate() {

+  // 워크북 생성

+  const workbook = new ExcelJS.Workbook();

+  workbook.creator = 'Tech Vendor Management System';

+  workbook.created = new Date();

+  

+  // 워크시트 생성

+  const worksheet = workbook.addWorksheet('기술영업 벤더');

+

+  // 컬럼 헤더 정의 및 스타일 적용

+  worksheet.columns = [

+    { header: '업체명', key: 'vendorName', width: 20 },

+    { header: '이메일', key: 'email', width: 25 },

+    { header: '사업자등록번호', key: 'taxId', width: 15 },

+    { header: '벤더타입', key: 'techVendorType', width: 15 },

+    { header: '주소', key: 'address', width: 30 },

+    { header: '국가', key: 'country', width: 15 },

+    { header: '전화번호', key: 'phone', width: 15 },

+    { header: '웹사이트', key: 'website', width: 25 },

+    { header: '아이템', key: 'items', width: 30 },

+  ];

+

+  // 헤더 스타일 적용

+  const headerRow = worksheet.getRow(1);

+  headerRow.font = { bold: true };

+  headerRow.fill = {

+    type: 'pattern',

+    pattern: 'solid',

+    fgColor: { argb: 'FFE0E0E0' }

+  };

+  headerRow.alignment = { vertical: 'middle', horizontal: 'center' };

+

+  // 테두리 스타일 적용

+  headerRow.eachCell((cell) => {

+    cell.border = {

+      top: { style: 'thin' },

+      left: { style: 'thin' },

+      bottom: { style: 'thin' },

+      right: { style: 'thin' }

+    };

+  });

+

+  // 샘플 데이터 추가

+  const sampleData = [

+    { 

+      vendorName: '샘플 업체 1',

+      email: 'sample1@example.com',

+      taxId: '123-45-67890',

+      techVendorType: '조선',

+      address: '서울시 강남구',

+      country: '대한민국',

+      phone: '02-1234-5678',

+      website: 'https://example1.com',

+      items: 'ITEM001,ITEM002'

+    },

+    { 

+      vendorName: '샘플 업체 2',

+      email: 'sample2@example.com',

+      taxId: '234-56-78901',

+      techVendorType: '해양TOP',

+      address: '부산시 해운대구',

+      country: '대한민국',

+      phone: '051-234-5678',

+      website: 'https://example2.com',

+      items: 'ITEM003,ITEM004'

+    }

+  ];

+

+  // 데이터 행 추가

+  sampleData.forEach(item => {

+    worksheet.addRow(item);

+  });

+

+  // 데이터 행 스타일 적용

+  worksheet.eachRow((row, rowNumber) => {

+    if (rowNumber > 1) { // 헤더를 제외한 데이터 행

+      row.eachCell((cell) => {

+        cell.border = {

+          top: { style: 'thin' },

+          left: { style: 'thin' },

+          bottom: { style: 'thin' },

+          right: { style: 'thin' }

+        };

+      });

+    }

+  });

+

+  // 워크시트에 벤더 타입 관련 메모 추가

+  const infoRow = worksheet.addRow(['벤더 타입 안내: ' + VENDOR_TYPES.join(', ')]);

+  infoRow.font = { bold: true, color: { argb: 'FF0000FF' } };

+  worksheet.mergeCells(`A${infoRow.number}:I${infoRow.number}`);

+

+  // 워크시트 보호 (선택적)

+  worksheet.protect('', {

+    selectLockedCells: true,

+    selectUnlockedCells: true,

+    formatColumns: true,

+    formatRows: true,

+    insertColumns: false,

+    insertRows: true,

+    insertHyperlinks: false,

+    deleteColumns: false,

+    deleteRows: true,

+    sort: true,

+    autoFilter: true,

+    pivotTables: false

+  });

+

+  try {

+    // 워크북을 Blob으로 변환

+    const buffer = await workbook.xlsx.writeBuffer();

+    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

+    saveAs(blob, 'tech-vendor-template.xlsx');

+    return true;

+  } catch (error) {

+    console.error('Excel 템플릿 생성 오류:', error);

+    throw error;

+  }

+} 
\ No newline at end of file
diff --git a/lib/tech-vendors/table/feature-flags-provider.tsx b/lib/tech-vendors/table/feature-flags-provider.tsx
new file mode 100644
index 00000000..81131894
--- /dev/null
+++ b/lib/tech-vendors/table/feature-flags-provider.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+
+import { dataTableConfig, type DataTableConfig } from "@/config/data-table"
+import { cn } from "@/lib/utils"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"]
+
+interface FeatureFlagsContextProps {
+  featureFlags: FeatureFlagValue[]
+  setFeatureFlags: (value: FeatureFlagValue[]) => void
+}
+
+const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({
+  featureFlags: [],
+  setFeatureFlags: () => {},
+})
+
+export function useFeatureFlags() {
+  const context = React.useContext(FeatureFlagsContext)
+  if (!context) {
+    throw new Error(
+      "useFeatureFlags must be used within a FeatureFlagsProvider"
+    )
+  }
+  return context
+}
+
+interface FeatureFlagsProviderProps {
+  children: React.ReactNode
+}
+
+export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) {
+  const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>(
+    "flags",
+    {
+      defaultValue: [],
+      parse: (value) => value.split(",") as FeatureFlagValue[],
+      serialize: (value) => value.join(","),
+      eq: (a, b) =>
+        a.length === b.length && a.every((value, index) => value === b[index]),
+      clearOnDefault: true,
+      shallow: false,
+    }
+  )
+
+  return (
+    <FeatureFlagsContext.Provider
+      value={{
+        featureFlags,
+        setFeatureFlags: (value) => void setFeatureFlags(value),
+      }}
+    >
+      <div className="w-full overflow-x-auto">
+        <ToggleGroup
+          type="multiple"
+          variant="outline"
+          size="sm"
+          value={featureFlags}
+          onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)}
+          className="w-fit gap-0"
+        >
+          {dataTableConfig.featureFlags.map((flag, index) => (
+            <Tooltip key={flag.value}>
+              <ToggleGroupItem
+                value={flag.value}
+                className={cn(
+                  "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90",
+                  {
+                    "rounded-l-sm border-r-0": index === 0,
+                    "rounded-r-sm":
+                      index === dataTableConfig.featureFlags.length - 1,
+                  }
+                )}
+                asChild
+              >
+                <TooltipTrigger>
+                  <flag.icon className="size-3.5 shrink-0" aria-hidden="true" />
+                  {flag.label}
+                </TooltipTrigger>
+              </ToggleGroupItem>
+              <TooltipContent
+                align="start"
+                side="bottom"
+                sideOffset={6}
+                className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground"
+              >
+                <div>{flag.tooltipTitle}</div>
+                <div className="text-xs text-muted-foreground">
+                  {flag.tooltipDescription}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      </div>
+      {children}
+    </FeatureFlagsContext.Provider>
+  )
+}
diff --git a/lib/tech-vendors/table/import-button.tsx b/lib/tech-vendors/table/import-button.tsx
new file mode 100644
index 00000000..7346e5fe
--- /dev/null
+++ b/lib/tech-vendors/table/import-button.tsx
@@ -0,0 +1,293 @@
+"use client"

+

+import * as React from "react"

+import { Upload } from "lucide-react"

+import { toast } from "sonner"

+import * as ExcelJS from 'exceljs'

+

+import { Button } from "@/components/ui/button"

+import {

+  Dialog,

+  DialogContent,

+  DialogDescription,

+  DialogFooter,

+  DialogHeader,

+  DialogTitle,

+} from "@/components/ui/dialog"

+import { Progress } from "@/components/ui/progress"

+import { importTechVendorsFromExcel } from "../service"

+import { decryptWithServerAction } from "@/components/drm/drmUtils"

+

+interface ImportTechVendorButtonProps {

+  onSuccess?: () => void;

+}

+

+export function ImportTechVendorButton({ onSuccess }: ImportTechVendorButtonProps) {

+  const [open, setOpen] = React.useState(false);

+  const [file, setFile] = React.useState<File | null>(null);

+  const [isUploading, setIsUploading] = React.useState(false);

+  const [progress, setProgress] = React.useState(0);

+  const [error, setError] = React.useState<string | null>(null);

+

+  const fileInputRef = React.useRef<HTMLInputElement>(null);

+

+  // 파일 선택 처리

+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {

+    const selectedFile = e.target.files?.[0];

+    if (!selectedFile) return;

+

+    if (!selectedFile.name.endsWith('.xlsx') && !selectedFile.name.endsWith('.xls')) {

+      setError("Excel 파일(.xlsx 또는 .xls)만 가능합니다.");

+      return;

+    }

+

+    setFile(selectedFile);

+    setError(null);

+  };

+

+  // 데이터 가져오기 처리

+  const handleImport = async () => {

+    if (!file) {

+      setError("가져올 파일을 선택해주세요.");

+      return;

+    }

+

+    try {

+      setIsUploading(true);

+      setProgress(0);

+      setError(null);

+

+      // DRM 복호화 처리

+      let arrayBuffer: ArrayBuffer;

+      try {

+        setProgress(10);

+        toast.info("파일 복호화 중...");

+        arrayBuffer = await decryptWithServerAction(file);

+        setProgress(30);

+      } catch (decryptError) {

+        console.error("파일 복호화 실패, 원본 파일 사용:", decryptError);

+        toast.warning("파일 복호화에 실패하여 원본 파일을 사용합니다.");

+        arrayBuffer = await file.arrayBuffer();

+      }

+      

+      // ExcelJS 워크북 로드

+      const workbook = new ExcelJS.Workbook();

+      await workbook.xlsx.load(arrayBuffer);

+      

+      // 첫 번째 워크시트 가져오기

+      const worksheet = workbook.worksheets[0];

+      if (!worksheet) {

+        throw new Error("Excel 파일에 워크시트가 없습니다.");

+      }

+      

+      // 헤더 행 찾기

+      let headerRowIndex = 1;

+      let headerRow: ExcelJS.Row | undefined;

+      let headerValues: (string | null)[] = [];

+      

+      worksheet.eachRow((row, rowNumber) => {

+        const values = row.values as (string | null)[];

+        if (!headerRow && values.some(v => v === "업체명" || v === "vendorName")) {

+          headerRowIndex = rowNumber;

+          headerRow = row;

+          headerValues = [...values];

+        }

+      });

+      

+      if (!headerRow) {

+        throw new Error("Excel 파일에서 헤더 행을 찾을 수 없습니다.");

+      }

+      

+      // 헤더를 기반으로 인덱스 매핑 생성

+      const headerMapping: Record<string, number> = {};

+      headerValues.forEach((value, index) => {

+        if (typeof value === 'string') {

+          headerMapping[value] = index;

+        }

+      });

+      

+      // 필수 헤더 확인

+      const requiredHeaders = ["업체명", "이메일", "사업자등록번호", "벤더타입"];

+      const alternativeHeaders = {

+        "업체명": ["vendorName"],

+        "이메일": ["email"],

+        "사업자등록번호": ["taxId"],

+        "벤더타입": ["techVendorType"],

+        "주소": ["address"],

+        "국가": ["country"],

+        "전화번호": ["phone"],

+        "웹사이트": ["website"],

+        "아이템": ["items"]

+      };

+      

+      // 헤더 매핑 확인 (대체 이름 포함)

+      const missingHeaders = requiredHeaders.filter(header => {

+        const alternatives = alternativeHeaders[header as keyof typeof alternativeHeaders] || [];

+        return !(header in headerMapping) && 

+               !alternatives.some(alt => alt in headerMapping);

+      });

+      

+      if (missingHeaders.length > 0) {

+        throw new Error(`다음 필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);

+      }

+      

+      // 데이터 행 추출

+      const dataRows: Record<string, any>[] = [];

+      

+      worksheet.eachRow((row, rowNumber) => {

+        if (rowNumber > headerRowIndex) {

+          const rowData: Record<string, any> = {};

+          const values = row.values as (string | null | undefined)[];

+          

+          // 헤더 매핑에 따라 데이터 추출

+          Object.entries(headerMapping).forEach(([header, index]) => {

+            rowData[header] = values[index] || "";

+          });

+          

+          // 빈 행이 아닌 경우만 추가

+          if (Object.values(rowData).some(value => value && value.toString().trim() !== "")) {

+            dataRows.push(rowData);

+          }

+        }

+      });

+      

+      if (dataRows.length === 0) {

+        throw new Error("Excel 파일에 가져올 데이터가 없습니다.");

+      }

+      

+      // 진행 상황 업데이트를 위한 콜백

+      const updateProgress = (current: number, total: number) => {

+        const percentage = Math.round((current / total) * 100);

+        setProgress(percentage);

+      };

+      

+      // 벤더 데이터 처리

+      const vendors = dataRows.map(row => ({

+        vendorName: row["업체명"] || row["vendorName"] || "",

+        email: row["이메일"] || row["email"] || "",

+        taxId: row["사업자등록번호"] || row["taxId"] || "",

+        techVendorType: row["벤더타입"] || row["techVendorType"] || "",

+        address: row["주소"] || row["address"] || null,

+        country: row["국가"] || row["country"] || null,

+        phone: row["전화번호"] || row["phone"] || null,

+        website: row["웹사이트"] || row["website"] || null,

+        items: row["아이템"] || row["items"] || ""

+      }));

+

+      // 벤더 데이터 가져오기 실행

+      const result = await importTechVendorsFromExcel(vendors);

+      

+      if (result.success) {

+        toast.success(`${vendors.length}개의 기술영업 벤더가 성공적으로 가져와졌습니다.`);

+      } else {

+        toast.error(result.error || "벤더 가져오기에 실패했습니다.");

+      }

+      

+      // 상태 초기화 및 다이얼로그 닫기

+      setFile(null);

+      setOpen(false);

+      

+      // 성공 콜백 호출

+      if (onSuccess) {

+        onSuccess();

+      }

+    } catch (error) {

+      console.error("Excel 파일 처리 중 오류 발생:", error);

+      setError(error instanceof Error ? error.message : "파일 처리 중 오류가 발생했습니다.");

+    } finally {

+      setIsUploading(false);

+    }

+  };

+

+  // 다이얼로그 열기/닫기 핸들러

+  const handleOpenChange = (newOpen: boolean) => {

+    if (!newOpen) {

+      // 닫을 때 상태 초기화

+      setFile(null);

+      setError(null);

+      setProgress(0);

+      if (fileInputRef.current) {

+        fileInputRef.current.value = "";

+      }

+    }

+    setOpen(newOpen);

+  };

+

+  return (

+    <>

+      <Button

+        variant="outline"

+        size="sm"

+        className="gap-2"

+        onClick={() => setOpen(true)}

+        disabled={isUploading}

+      >

+        <Upload className="size-4" aria-hidden="true" />

+        <span className="hidden sm:inline">Import</span>

+      </Button>

+

+      <Dialog open={open} onOpenChange={handleOpenChange}>

+        <DialogContent className="sm:max-w-[500px]">

+          <DialogHeader>

+            <DialogTitle>기술영업 벤더 가져오기</DialogTitle>

+            <DialogDescription>

+              기술영업 벤더를 Excel 파일에서 가져옵니다.

+              <br />

+              올바른 형식의 Excel 파일(.xlsx)을 업로드하세요.

+            </DialogDescription>

+          </DialogHeader>

+

+          <div className="space-y-4 py-4">

+            <div className="flex items-center gap-4">

+              <input

+                type="file"

+                ref={fileInputRef}

+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-foreground file:font-medium"

+                accept=".xlsx,.xls"

+                onChange={handleFileChange}

+                disabled={isUploading}

+              />

+            </div>

+

+            {file && (

+              <div className="text-sm text-muted-foreground">

+                선택된 파일: <span className="font-medium">{file.name}</span> ({(file.size / 1024).toFixed(1)} KB)

+              </div>

+            )}

+

+            {isUploading && (

+              <div className="space-y-2">

+                <Progress value={progress} />

+                <p className="text-sm text-muted-foreground text-center">

+                  {progress}% 완료

+                </p>

+              </div>

+            )}

+

+            {error && (

+              <div className="text-sm font-medium text-destructive">

+                {error}

+              </div>

+            )}

+          </div>

+

+          <DialogFooter>

+            <Button

+              variant="outline"

+              onClick={() => setOpen(false)}

+              disabled={isUploading}

+            >

+              취소

+            </Button>

+            <Button 

+              onClick={handleImport} 

+              disabled={!file || isUploading}

+            >

+              {isUploading ? "처리 중..." : "가져오기"}

+            </Button>

+          </DialogFooter>

+        </DialogContent>

+      </Dialog>

+    </>

+  );

+} 
\ No newline at end of file
diff --git a/lib/tech-vendors/table/tech-vendors-table-columns.tsx b/lib/tech-vendors/table/tech-vendors-table-columns.tsx
new file mode 100644
index 00000000..438f4000
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendors-table-columns.tsx
@@ -0,0 +1,331 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+import { toast } from "sonner"
+
+import { getErrorMessage } from "@/lib/handle-error"
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useRouter } from "next/navigation"
+
+import { TechVendor, techVendors } from "@/db/schema/techVendors"
+import { modifyTechVendor } from "../service"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { techVendorColumnsConfig } from "@/config/techVendorColumnsConfig"
+import { Separator } from "@/components/ui/separator"
+import { getVendorStatusIcon } from "../utils"
+
+// 타입 정의 추가
+type StatusType = (typeof techVendors.status.enumValues)[number];
+type BadgeVariantType = "default" | "secondary" | "destructive" | "outline";
+type StatusConfig = {
+  variant: BadgeVariantType;
+  className: string;
+};
+type StatusDisplayMap = {
+  [key in StatusType]: string;
+};
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TechVendor> | null>>;
+  router: NextRouter;
+}
+
+
+
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction, router }: GetColumnsProps): ColumnDef<TechVendor>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<TechVendor> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<TechVendor> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-label="Open menu"
+              variant="ghost"
+              className="flex size-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="size-4" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "update" })}
+            >
+              레코드 편집
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              onSelect={() => {
+                // 1) 만약 rowAction을 열고 싶다면
+                // setRowAction({ row, type: "update" })
+
+                // 2) 자세히 보기 페이지로 클라이언트 라우팅
+                router.push(`/evcp/tech-vendors/${row.original.id}/info`);
+              }}
+            >
+              상세보기
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => {
+                // 새창으로 열기 위해 window.open() 사용
+                window.open(`/evcp/tech-vendors/${row.original.id}/info`, '_blank');
+              }}
+            >
+              상세보기(새창)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() => setRowAction({ row, type: "log" })}
+            >
+              감사 로그 보기
+            </DropdownMenuItem>
+
+            <Separator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Status</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup
+                  value={row.original.status}
+                  onValueChange={(value) => {
+                    startUpdateTransition(() => {
+                      toast.promise(
+                        modifyTechVendor({
+                          id: String(row.original.id),
+                          status: value as TechVendor["status"],
+                          vendorName: row.original.vendorName, // Required field from UpdateVendorSchema
+                        }),
+                        {
+                          loading: "Updating...",
+                          success: "Label updated",
+                          error: (err) => getErrorMessage(err),
+                        }
+                      )
+                    })
+                  }}
+                >
+                  {techVendors.status.enumValues.map((status) => (
+                    <DropdownMenuRadioItem
+                      key={status}
+                      value={status}
+                      className="capitalize"
+                      disabled={isUpdatePending}
+                    >
+                      {status}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+
+
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
+  // ----------------------------------------------------------------
+  // 3-1) groupMap: { [groupName]: ColumnDef<TechVendor>[] }
+  const groupMap: Record<string, ColumnDef<TechVendor>[]> = {}
+
+  techVendorColumnsConfig.forEach((cfg) => {
+    // 만약 group가 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // child column 정의
+    const childCol: ColumnDef<TechVendor> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+        // Status 컬럼 렌더링 개선 - 아이콘과 더 선명한 배경색 사용
+        if (cfg.id === "status") {
+          const statusVal = row.original.status;
+          if (!statusVal) return null;
+
+          // Status badge variant mapping - 더 뚜렷한 색상으로 변경
+          const getStatusConfig = (status: StatusType): StatusConfig & { iconColor: string } => {
+            switch (status) {
+              case "PENDING_REVIEW":
+                return {
+                  variant: "outline",
+                  className: "bg-yellow-100 text-yellow-800 border-yellow-300",
+                  iconColor: "text-yellow-600"
+                };
+              case "IN_REVIEW":
+                return {
+                  variant: "outline",
+                  className: "bg-blue-100 text-blue-800 border-blue-300",
+                  iconColor: "text-blue-600"
+                };
+              case "REJECTED":
+                return {
+                  variant: "outline",
+                  className: "bg-red-100 text-red-800 border-red-300",
+                  iconColor: "text-red-600"
+                };
+              case "ACTIVE":
+                return {
+                  variant: "outline",
+                  className: "bg-emerald-100 text-emerald-800 border-emerald-300 font-semibold",
+                  iconColor: "text-emerald-600"
+                };
+              case "INACTIVE":
+                return {
+                  variant: "outline",
+                  className: "bg-gray-100 text-gray-800 border-gray-300",
+                  iconColor: "text-gray-600"
+                };
+              case "BLACKLISTED":
+                return {
+                  variant: "outline",
+                  className: "bg-slate-800 text-white border-slate-900",
+                  iconColor: "text-white"
+                };
+              default:
+                return {
+                  variant: "outline",
+                  className: "bg-gray-100 text-gray-800 border-gray-300",
+                  iconColor: "text-gray-600"
+                };
+            }
+          };
+           
+          // 상태 표시 텍스트
+          const getStatusDisplay = (status: StatusType): string => {
+            const statusMap: StatusDisplayMap = {
+              "PENDING_REVIEW": "가입 신청 중",
+              "IN_REVIEW": "심사 중",
+              "REJECTED": "심사 거부됨",
+              "ACTIVE": "활성 상태",
+              "INACTIVE": "비활성 상태",
+              "BLACKLISTED": "거래 금지"
+            };
+            
+            return statusMap[status] || status;
+          };
+           
+          const statusConfig = getStatusConfig(statusVal);
+          const displayText = getStatusDisplay(statusVal);
+          const StatusIcon = getVendorStatusIcon(statusVal);
+           
+          return (
+            <div className="flex items-center gap-2">
+              <Badge 
+                variant={statusConfig.variant} 
+                className={statusConfig.className}
+              >
+                <StatusIcon className={`mr-1 h-3.5 w-3.5 ${statusConfig.iconColor}`} />
+                {displayText}
+              </Badge>
+            </div>
+          );
+        }
+         
+        // 날짜 컬럼 포맷팅
+        if (cfg.type === "date" && cell.getValue()) {
+          return formatDate(cell.getValue() as Date);
+        }
+        
+        return cell.getValue();
+      },
+    };
+     
+    groupMap[groupName].push(childCol);
+  });
+
+  // 3-2) groupMap -> columns (그룹별 -> 중첩 헤더 ColumnDef[] 배열 변환)
+  const columns: ColumnDef<TechVendor>[] = [
+    selectColumn, // 1) 체크박스
+  ];
+
+  // 3-3) 그룹이 있는 컬럼들은 중첩 헤더로, 없는 것들은 그냥 컬럼으로
+  Object.entries(groupMap).forEach(([groupName, childColumns]) => {
+    if (groupName === "_noGroup") {
+      // 그룹이 없는 컬럼들은 그냥 추가
+      columns.push(...childColumns);
+    } else {
+      // 그룹이 있는 컬럼들은 헤더 아래 자식으로 중첩
+      columns.push({
+        id: groupName,
+        header: groupName, // 그룹명을 헤더로
+        columns: childColumns, // 그룹에 속한 컬럼들을 자식으로
+      });
+    }
+  });
+
+  columns.push(actionsColumn); // 마지막에 액션 컬럼 추가
+   
+  return columns;
+}
\ No newline at end of file
diff --git a/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx b/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx
new file mode 100644
index 00000000..2cc83105
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendors-table-floating-bar.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { SelectTrigger } from "@radix-ui/react-select"
+import { type Table } from "@tanstack/react-table"
+import {
+  ArrowUp,
+  CheckCircle2,
+  Download,
+  Loader,
+  Trash2,
+  X,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Kbd } from "@/components/kbd"
+
+import { ActionConfirmDialog } from "@/components/ui/action-dialog"
+import { Vendor, vendors } from "@/db/schema/vendors"
+import { modifyTechVendors } from "../service"
+import { TechVendor } from "@/db/schema"
+
+interface VendorsTableFloatingBarProps {
+  table: Table<Vendor>
+}
+
+
+export function VendorsTableFloatingBar({ table }: VendorsTableFloatingBarProps) {
+  const rows = table.getFilteredSelectedRowModel().rows
+
+  const [isPending, startTransition] = React.useTransition()
+  const [action, setAction] = React.useState<
+    "update-status" | "export" | "delete"
+  >()
+  // Clear selection on Escape key press
+  React.useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        table.toggleAllRowsSelected(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [table])
+
+
+
+  // 공용 confirm dialog state
+  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+  const [confirmProps, setConfirmProps] = React.useState<{
+    title: string
+    description?: string
+    onConfirm: () => Promise<void> | void
+  }>({
+    title: "",
+    description: "",
+    onConfirm: () => { },
+  })
+
+
+  // 2) 
+  function handleSelectStatus(newStatus: Vendor["status"]) {
+    setAction("update-status")
+
+    setConfirmProps({
+      title: `Update ${rows.length} vendor${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
+      description: "This action will override their current status.",
+      onConfirm: async () => {
+        startTransition(async () => {
+          const { error } = await modifyTechVendors({
+            ids: rows.map((row) => String(row.original.id)),
+            status: newStatus as TechVendor["status"],
+          })
+          if (error) {
+            toast.error(error)
+            return
+          }
+          toast.success("Vendors updated")
+          setConfirmDialogOpen(false)
+        })
+      },
+    })
+    setConfirmDialogOpen(true)
+  }
+
+
+  return (
+    <Portal >
+      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
+        <div className="w-full overflow-x-auto">
+          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
+            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
+              <span className="whitespace-nowrap text-xs">
+                {rows.length} selected
+              </span>
+              <Separator orientation="vertical" className="ml-2 mr-1" />
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5 hover:border"
+                    onClick={() => table.toggleAllRowsSelected(false)}
+                  >
+                    <X className="size-3.5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
+                  <p className="mr-2">Clear selection</p>
+                  <Kbd abbrTitle="Escape" variant="outline">
+                    Esc
+                  </Kbd>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <Separator orientation="vertical" className="hidden h-5 sm:block" />
+            <div className="flex items-center gap-1.5">
+              <Select
+                onValueChange={(value: Vendor["status"]) => {
+                  handleSelectStatus(value)
+                }}
+              >
+                <Tooltip>
+                  <SelectTrigger asChild>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
+                        disabled={isPending}
+                      >
+                        {isPending && action === "update-status" ? (
+                          <Loader
+                            className="size-3.5 animate-spin"
+                            aria-hidden="true"
+                          />
+                        ) : (
+                          <CheckCircle2
+                            className="size-3.5"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                  </SelectTrigger>
+                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                    <p>Update status</p>
+                  </TooltipContent>
+                </Tooltip>
+                <SelectContent align="center">
+                  <SelectGroup>
+                    {vendors.status.enumValues.map((status) => (
+                      <SelectItem
+                        key={status}
+                        value={status}
+                        className="capitalize"
+                      >
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    size="icon"
+                    className="size-7 border"
+                    onClick={() => {
+                      setAction("export")
+
+                      startTransition(() => {
+                        exportTableToExcel(table, {
+                          excludeColumns: ["select", "actions"],
+                          onlySelected: true,
+                        })
+                      })
+                    }}
+                    disabled={isPending}
+                  >
+                    {isPending && action === "export" ? (
+                      <Loader
+                        className="size-3.5 animate-spin"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Download className="size-3.5" aria-hidden="true" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
+                  <p>Export vendors</p>
+                </TooltipContent>
+              </Tooltip>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* 공용 Confirm Dialog */}
+      <ActionConfirmDialog
+        open={confirmDialogOpen}
+        onOpenChange={setConfirmDialogOpen}
+        title={confirmProps.title}
+        description={confirmProps.description}
+        onConfirm={confirmProps.onConfirm}
+        isLoading={isPending && (action === "delete" || action === "update-status")}
+        confirmLabel={
+          action === "delete"
+            ? "Delete"
+            : action === "update-status"
+            ? "Update"
+            : "Confirm"
+        }
+        confirmVariant={
+          action === "delete" ? "destructive" : "default"
+        }
+      />
+    </Portal>
+  )
+}
diff --git a/lib/tech-vendors/table/tech-vendors-table-toolbar-actions.tsx b/lib/tech-vendors/table/tech-vendors-table-toolbar-actions.tsx
new file mode 100644
index 00000000..82383a3a
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendors-table-toolbar-actions.tsx
@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, FileSpreadsheet, Upload, Check, BuildingIcon, FileText } from "lucide-react"
+import { toast } from "sonner"
+
+import { exportTableToExcel } from "@/lib/export"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { exportVendorsWithRelatedData } from "./vendor-all-export"
+import { TechVendor } from "@/db/schema/techVendors"
+import { ImportTechVendorButton } from "./import-button"
+import { exportTechVendorTemplate } from "./excel-template-download"
+
+interface TechVendorsTableToolbarActionsProps {
+  table: Table<TechVendor>
+}
+
+export function TechVendorsTableToolbarActions({ table }: TechVendorsTableToolbarActionsProps) {
+  const [isExporting, setIsExporting] = React.useState(false);
+  
+  // 선택된 모든 벤더 가져오기
+  const selectedVendors = React.useMemo(() => {
+    return table
+      .getFilteredSelectedRowModel()
+      .rows
+      .map(row => row.original);
+  }, [table.getFilteredSelectedRowModel().rows]);
+  
+  // 테이블의 모든 벤더 가져오기 (필터링된 결과)
+  const allFilteredVendors = React.useMemo(() => {
+    return table
+      .getFilteredRowModel()
+      .rows
+      .map(row => row.original);
+  }, [table.getFilteredRowModel().rows]);
+  
+  // 선택된 벤더 통합 내보내기 함수 실행
+  const handleSelectedExport = async () => {
+    if (selectedVendors.length === 0) {
+      toast.warning("내보낼 협력업체를 선택해주세요.");
+      return;
+    }
+    
+    try {
+      setIsExporting(true);
+      toast.info(`선택된 ${selectedVendors.length}개 업체의 정보를 내보내는 중입니다...`);
+      await exportVendorsWithRelatedData(selectedVendors, "selected-vendors-detailed");
+      toast.success(`${selectedVendors.length}개 업체 정보 내보내기가 완료되었습니다.`);
+    } catch (error) {
+      console.error("상세 정보 내보내기 오류:", error);
+      toast.error("상세 정보 내보내기 중 오류가 발생했습니다.");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  // 모든 벤더 통합 내보내기 함수 실행
+  const handleAllFilteredExport = async () => {
+    if (allFilteredVendors.length === 0) {
+      toast.warning("내보낼 협력업체가 없습니다.");
+      return;
+    }
+    
+    try {
+      setIsExporting(true);
+      toast.info(`총 ${allFilteredVendors.length}개 업체의 정보를 내보내는 중입니다...`);
+      await exportVendorsWithRelatedData(allFilteredVendors, "all-vendors-detailed");
+      toast.success(`${allFilteredVendors.length}개 업체 정보 내보내기가 완료되었습니다.`);
+    } catch (error) {
+      console.error("상세 정보 내보내기 오류:", error);
+      toast.error("상세 정보 내보내기 중 오류가 발생했습니다.");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  
+  return (
+    <div className="flex items-center gap-2">
+      {/* Import 버튼 추가 */}
+      <ImportTechVendorButton 
+        onSuccess={() => {
+          // 성공 시 테이블 새로고침
+          toast.success("업체 정보 가져오기가 완료되었습니다.");
+        }} 
+      />
+
+      {/* Export 드롭다운 메뉴로 변경 */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            disabled={isExporting}
+          >
+            <Download className="size-4" aria-hidden="true" />
+            <span className="hidden sm:inline">
+              {isExporting ? "내보내는 중..." : "Export"}
+            </span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {/* 템플릿 다운로드 추가 */}
+          <DropdownMenuItem
+            onClick={() => exportTechVendorTemplate()}
+            disabled={isExporting}
+          >
+            <FileText className="mr-2 size-4" />
+            <span>Excel 템플릿 다운로드</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+          
+          {/* 기본 내보내기 - 현재 테이블에 보이는 데이터만 */}
+          <DropdownMenuItem
+            onClick={() =>
+              exportTableToExcel(table, {
+                filename: "vendors",
+                excludeColumns: ["select", "actions"],
+              })
+            }
+            disabled={isExporting}
+          >
+            <FileText className="mr-2 size-4" />
+            <span>현재 테이블 데이터 내보내기</span>
+          </DropdownMenuItem>
+          
+          <DropdownMenuSeparator />
+          
+          {/* 선택된 벤더만 상세 내보내기 */}
+          <DropdownMenuItem 
+            onClick={handleSelectedExport}
+            disabled={selectedVendors.length === 0 || isExporting}
+          >
+            <FileSpreadsheet className="mr-2 size-4" />
+            <span>선택한 업체 상세 정보 내보내기</span>
+            {selectedVendors.length > 0 && (
+              <span className="ml-1 text-xs text-muted-foreground">({selectedVendors.length}개)</span>
+            )}
+          </DropdownMenuItem>
+          
+          {/* 모든 필터링된 벤더 상세 내보내기 */}
+          <DropdownMenuItem 
+            onClick={handleAllFilteredExport}
+            disabled={allFilteredVendors.length === 0 || isExporting}
+          >
+            <Download className="mr-2 size-4" />
+            <span>모든 업체 상세 정보 내보내기</span>
+            {allFilteredVendors.length > 0 && (
+              <span className="ml-1 text-xs text-muted-foreground">({allFilteredVendors.length}개)</span>
+            )}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/tech-vendors/table/tech-vendors-table.tsx b/lib/tech-vendors/table/tech-vendors-table.tsx
new file mode 100644
index 00000000..55632182
--- /dev/null
+++ b/lib/tech-vendors/table/tech-vendors-table.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { getColumns } from "./tech-vendors-table-columns"
+import { getTechVendors, getTechVendorStatusCounts } from "../service"
+import { TechVendor, techVendors } from "@/db/schema/techVendors"
+import { TechVendorsTableToolbarActions } from "./tech-vendors-table-toolbar-actions"
+import { UpdateVendorSheet } from "./update-vendor-sheet"
+import { getVendorStatusIcon } from "../utils"
+// import { ViewTechVendorLogsDialog } from "./view-tech-vendors-logs-dialog"
+
+interface TechVendorsTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getTechVendors>>,
+      Awaited<ReturnType<typeof getTechVendorStatusCounts>>
+    ]
+  >
+}
+
+export function TechVendorsTable({ promises }: TechVendorsTableProps) {
+  // Suspense로 받아온 데이터
+  const [{ data, pageCount }, statusCounts] = React.use(promises)
+  const [isCompact, setIsCompact] = React.useState<boolean>(false) 
+
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechVendor> | null>(null)
+  
+  // **router** 획득
+  const router = useRouter()
+  
+  // getColumns() 호출 시, router를 주입
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction, router }),
+    [setRowAction, router]
+  )
+  
+  // 상태 한글 변환 유틸리티 함수
+  const getStatusDisplay = (status: string): string => {
+    const statusMap: Record<string, string> = {
+      "PENDING_REVIEW": "가입 신청 중",
+      "IN_REVIEW": "심사 중", 
+      "REJECTED": "심사 거부됨",
+      "ACTIVE": "활성 상태",
+      "INACTIVE": "비활성 상태",
+      "BLACKLISTED": "거래 금지"
+    };
+    
+    return statusMap[status] || status;
+  };
+  
+  const filterFields: DataTableFilterField<TechVendor>[] = [
+    {
+      id: "status",
+      label: "상태",
+      options: techVendors.status.enumValues.map((status) => ({
+        label: getStatusDisplay(status),
+        value: status,
+        count: statusCounts[status],
+      })),
+    },
+    
+    { id: "vendorCode", label: "업체 코드" },
+  ]
+  
+  const advancedFilterFields: DataTableAdvancedFilterField<TechVendor>[] = [
+    { id: "vendorName", label: "업체명", type: "text" },
+    { id: "vendorCode", label: "업체코드", type: "text" },
+    { id: "email", label: "이메일", type: "text" },
+    { id: "country", label: "국가", type: "text" },
+    {
+      id: "status",
+      label: "업체승인상태",
+      type: "multi-select",
+      options: techVendors.status.enumValues.map((status) => ({
+        label: getStatusDisplay(status),
+        value: status,
+        count: statusCounts[status],
+        icon: getVendorStatusIcon(status),
+      })),
+    },
+    { id: "createdAt", label: "등록일", type: "date" },
+    { id: "updatedAt", label: "수정일", type: "date" },
+  ]
+  
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => String(originalRow.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  const handleCompactChange = React.useCallback((compact: boolean) => {
+    setIsCompact(compact)
+  }, [])
+  
+  
+  return (
+    <>
+      <DataTable
+        table={table}
+        compact={isCompact}
+        // floatingBar={<TechVendorsTableFloatingBar table={table} />}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+          enableCompactToggle={true}
+          compactStorageKey="techVendorsTableCompact"
+          onCompactChange={handleCompactChange}
+        >
+          <TechVendorsTableToolbarActions table={table} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+      <UpdateVendorSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        vendor={rowAction?.row.original ?? null}
+      />
+      
+      {/* ViewTechVendorLogsDialog 컴포넌트는 아직 구현되지 않았습니다.
+      <ViewTechVendorLogsDialog
+        open={rowAction?.type === "log"}
+        onOpenChange={() => setRowAction(null)}
+        vendorId={rowAction?.row.original?.id ?? null}
+      /> */}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/tech-vendors/table/update-vendor-sheet.tsx b/lib/tech-vendors/table/update-vendor-sheet.tsx
new file mode 100644
index 00000000..c33bbf03
--- /dev/null
+++ b/lib/tech-vendors/table/update-vendor-sheet.tsx
@@ -0,0 +1,390 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { 
+  Loader, 
+  Activity, 
+  AlertCircle, 
+  AlertTriangle, 
+  ClipboardList, 
+  FilePenLine, 
+  XCircle, 
+  Circle as CircleIcon,
+  Building,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useSession } from "next-auth/react" // Import useSession
+
+import { TechVendor, techVendors } from "@/db/schema/techVendors"
+import { updateTechVendorSchema, type UpdateTechVendorSchema } from "../validations"
+import { modifyTechVendor } from "../service"
+
+interface UpdateVendorSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  vendor: TechVendor | null
+}
+type StatusType = (typeof techVendors.status.enumValues)[number];
+
+type StatusConfig = {
+  Icon: React.ElementType;
+  className: string;
+  label: string;
+};
+
+// 상태 표시 유틸리티 함수
+const getStatusConfig = (status: StatusType): StatusConfig => {
+  switch(status) {
+    case "PENDING_REVIEW":
+      return { 
+        Icon: ClipboardList,
+        className: "text-yellow-600", 
+        label: "가입 신청 중"
+      };
+    case "IN_REVIEW":
+      return { 
+        Icon: FilePenLine,
+        className: "text-blue-600", 
+        label: "심사 중"
+      };
+    case "REJECTED":
+      return { 
+        Icon: XCircle,
+        className: "text-red-600", 
+        label: "심사 거부됨"
+      };
+    case "ACTIVE":
+      return { 
+        Icon: Activity,
+        className: "text-emerald-600", 
+        label: "활성 상태"
+      };
+    case "INACTIVE":
+      return { 
+        Icon: AlertCircle,
+        className: "text-gray-600", 
+        label: "비활성 상태"
+      };
+    case "BLACKLISTED":
+      return { 
+        Icon: AlertTriangle,
+        className: "text-slate-800", 
+        label: "거래 금지"
+      };
+    default:
+      return { 
+        Icon: CircleIcon,
+        className: "text-gray-600", 
+        label: status
+      };
+  }
+};
+
+
+// 폼 컴포넌트
+export function UpdateVendorSheet({ vendor, ...props }: UpdateVendorSheetProps) {
+  const [isPending, startTransition] = React.useTransition()
+  const { data: session } = useSession()
+  // 폼 정의 - UpdateVendorSchema 타입을 직접 사용
+  const form = useForm<UpdateTechVendorSchema>({
+    resolver: zodResolver(updateTechVendorSchema),
+    defaultValues: {
+      // 업체 기본 정보
+      vendorName: vendor?.vendorName ?? "",
+      vendorCode: vendor?.vendorCode ?? "",
+      address: vendor?.address ?? "",
+      country: vendor?.country ?? "",
+      phone: vendor?.phone ?? "",
+      email: vendor?.email ?? "",
+      website: vendor?.website ?? "",
+      status: vendor?.status ?? "ACTIVE",
+    },
+  })
+
+  React.useEffect(() => {
+    if (vendor) {
+      form.reset({
+        vendorName: vendor?.vendorName ?? "",
+        vendorCode: vendor?.vendorCode ?? "",
+        address: vendor?.address ?? "",
+        country: vendor?.country ?? "",
+        phone: vendor?.phone ?? "",
+        email: vendor?.email ?? "",
+        website: vendor?.website ?? "",
+        status: vendor?.status ?? "ACTIVE",
+
+      });
+    }
+  }, [vendor, form]);
+
+
+  // 제출 핸들러
+  async function onSubmit(data: UpdateTechVendorSchema) {
+    if (!vendor) return
+    
+    if (!session?.user?.id) {
+      toast.error("사용자 인증 정보를 찾을 수 없습니다.")
+      return
+    }
+  startTransition(async () => {
+    try {
+      // Add status change comment if status has changed
+      const oldStatus = vendor.status ?? "ACTIVE" // Default to ACTIVE if undefined
+      const newStatus = data.status ?? "ACTIVE" // Default to ACTIVE if undefined
+      
+      const statusComment = 
+        oldStatus !== newStatus 
+          ? `상태 변경: ${getStatusConfig(oldStatus).label} → ${getStatusConfig(newStatus).label}`
+          : ""  // Empty string instead of undefined
+      
+      // 업체 정보 업데이트 - userId와 상태 변경 코멘트 추가
+      const { error } = await modifyTechVendor({ 
+        id: String(vendor.id),
+        userId: Number(session.user.id), // Add user ID from session
+        comment: statusComment, // Add comment for status changes
+        ...data  // 모든 데이터 전달 - 서비스 함수에서 필요한 필드만 처리
+      })
+      
+      if (error) throw new Error(error)
+      
+      toast.success("업체 정보가 업데이트되었습니다!")
+      form.reset()
+      props.onOpenChange?.(false)
+    } catch (err: any) {
+      toast.error(String(err))
+    }
+  })
+}
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-lg overflow-y-auto">
+        <SheetHeader className="text-left">
+          <SheetTitle>업체 정보 수정</SheetTitle>
+          <SheetDescription>
+            업체 세부 정보를 수정하고 변경 사항을 저장하세요
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+            {/* 업체 기본 정보 섹션 */}
+            <div className="space-y-4">
+              <div className="flex items-center">
+                <Building className="mr-2 h-5 w-5 text-muted-foreground" />
+                <h3 className="text-sm font-medium">업체 기본 정보</h3>
+              </div>
+              <FormDescription>
+                업체가 제공한 기본 정보입니다. 필요시 수정하세요.
+              </FormDescription>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {/* vendorName */}
+                <FormField
+                  control={form.control}
+                  name="vendorName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>업체명</FormLabel>
+                      <FormControl>
+                        <Input placeholder="업체명 입력" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* vendorCode */}
+                <FormField
+                  control={form.control}
+                  name="vendorCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>업체 코드</FormLabel>
+                      <FormControl>
+                        <Input placeholder="예: ABC123" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* address */}
+                <FormField
+                  control={form.control}
+                  name="address"
+                  render={({ field }) => (
+                    <FormItem className="md:col-span-2">
+                      <FormLabel>주소</FormLabel>
+                      <FormControl>
+                        <Input placeholder="주소 입력" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* country */}
+                <FormField
+                  control={form.control}
+                  name="country"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>국가</FormLabel>
+                      <FormControl>
+                        <Input placeholder="예: 대한민국" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* phone */}
+                <FormField
+                  control={form.control}
+                  name="phone"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>전화번호</FormLabel>
+                      <FormControl>
+                        <Input placeholder="예: 010-1234-5678" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* email */}
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>이메일</FormLabel>
+                      <FormControl>
+                        <Input placeholder="예: info@company.com" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* website */}
+                <FormField
+                  control={form.control}
+                  name="website"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>웹사이트</FormLabel>
+                      <FormControl>
+                        <Input placeholder="예: https://www.company.com" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* status with icons */}
+                <FormField
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => {
+                    // 현재 선택된 상태의 구성 정보 가져오기
+                    const selectedConfig = getStatusConfig(field.value ?? "ACTIVE");
+                    const SelectedIcon = selectedConfig?.Icon || CircleIcon;
+
+                    return (
+                      <FormItem>
+                        <FormLabel>업체승인상태</FormLabel>
+                        <FormControl>
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          >
+                            <SelectTrigger className="w-full">
+                              <SelectValue>
+                                {field.value && (
+                                  <div className="flex items-center">
+                                    <SelectedIcon className={`mr-2 h-4 w-4 ${selectedConfig.className}`} />
+                                    <span>{selectedConfig.label}</span>
+                                  </div>
+                                )}
+                              </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectGroup>
+                                {techVendors.status.enumValues.map((status) => {
+                                  const config = getStatusConfig(status);
+                                  const StatusIcon = config.Icon;
+                                  return (
+                                    <SelectItem key={status} value={status}>
+                                      <div className="flex items-center">
+                                        <StatusIcon className={`mr-2 h-4 w-4 ${config.className}`} />
+                                        <span>{config.label}</span>
+                                      </div>
+                                    </SelectItem>
+                                  );
+                                })}
+                              </SelectGroup>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    );
+                  }}
+                />
+
+                                
+               
+
+              </div>
+            </div>
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  취소
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && (
+                  <Loader className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                )}
+                저장
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/tech-vendors/table/vendor-all-export.ts b/lib/tech-vendors/table/vendor-all-export.ts
new file mode 100644
index 00000000..4278249a
--- /dev/null
+++ b/lib/tech-vendors/table/vendor-all-export.ts
@@ -0,0 +1,252 @@
+// /lib/vendor-export.ts
+import ExcelJS from "exceljs"
+import { TechVendor, TechVendorContact, TechVendorItem } from "@/db/schema/techVendors"
+import { exportTechVendorDetails } from "../service";
+
+/**
+ * 선택된 벤더의 모든 관련 정보를 통합 시트 형식으로 엑셀로 내보내는 함수
+ * - 기본정보 시트
+ * - 연락처 시트
+ * - 아이템 시트
+ * 각 시트에는 식별을 위한 벤더 코드, 벤더명, 세금ID가 포함됨
+ */
+export async function exportVendorsWithRelatedData(
+  vendors: TechVendor[],
+  filename = "tech-vendors-detailed"
+): Promise<void> {
+  if (!vendors.length) return;
+
+  // 선택된 벤더 ID 목록
+  const vendorIds = vendors.map(vendor => vendor.id);
+  
+  try {
+    // 서버로부터 모든 관련 데이터 가져오기
+    const vendorsWithDetails = await exportTechVendorDetails(vendorIds);
+    
+    if (!vendorsWithDetails.length) {
+      throw new Error("내보내기 데이터를 가져오는 중 오류가 발생했습니다.");
+    }
+    
+    // 워크북 생성
+    const workbook = new ExcelJS.Workbook();
+    
+    // 데이터 타입 확인 (서비스에서 반환하는 실제 데이터 형태)
+    const vendorData = vendorsWithDetails as unknown as any[];
+        
+    // ===== 1. 기본 정보 시트 =====
+    createBasicInfoSheet(workbook, vendorData);
+    
+    // ===== 2. 연락처 시트 =====
+    createContactsSheet(workbook, vendorData);
+    
+    // ===== 3. 아이템 시트 =====
+    createItemsSheet(workbook, vendorData);
+    
+    
+    // 파일 다운로드
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename}-${new Date().toISOString().split("T")[0]}.xlsx`;
+    link.click();
+    URL.revokeObjectURL(url);
+    
+    return;
+  } catch (error) {
+    console.error("Export error:", error);
+    throw error;
+  }
+}
+
+// 기본 정보 시트 생성 함수
+function createBasicInfoSheet(
+  workbook: ExcelJS.Workbook, 
+  vendors: TechVendor[]
+): void {
+  const basicInfoSheet = workbook.addWorksheet("기본정보");
+  
+  // 기본 정보 시트 헤더 설정
+  basicInfoSheet.columns = [
+    { header: "업체코드", key: "vendorCode", width: 15 },
+    { header: "업체명", key: "vendorName", width: 20 },
+    { header: "세금ID", key: "taxId", width: 15 },
+    { header: "국가", key: "country", width: 10 },
+    { header: "상태", key: "status", width: 15 },
+    { header: "이메일", key: "email", width: 20 },
+    { header: "전화번호", key: "phone", width: 15 },
+    { header: "웹사이트", key: "website", width: 20 },
+    { header: "주소", key: "address", width: 30 },
+    { header: "대표자명", key: "representativeName", width: 15 },
+    { header: "생성일", key: "createdAt", width: 15 },
+  ];
+
+  // 헤더 스타일 설정
+  applyHeaderStyle(basicInfoSheet);
+
+  // 벤더 데이터 추가
+  vendors.forEach((vendor: TechVendor) => {
+    basicInfoSheet.addRow({
+      vendorCode: vendor.vendorCode || "",
+      vendorName: vendor.vendorName,
+      taxId: vendor.taxId,
+      country: vendor.country,
+      status: getStatusText(vendor.status), // 상태 코드를 읽기 쉬운 텍스트로 변환
+      email: vendor.email,
+      phone: vendor.phone,
+      website: vendor.website,
+      address: vendor.address,
+      representativeName: vendor.representativeName,
+      createdAt: vendor.createdAt ? formatDate(vendor.createdAt) : "",
+    });
+  });
+}
+
+// 연락처 시트 생성 함수
+function createContactsSheet(
+  workbook: ExcelJS.Workbook, 
+  vendors: TechVendor[]
+): void {
+  const contactsSheet = workbook.addWorksheet("연락처");
+  
+  contactsSheet.columns = [
+    // 벤더 식별 정보
+    { header: "업체코드", key: "vendorCode", width: 15 },
+    { header: "업체명", key: "vendorName", width: 20 },
+    { header: "세금ID", key: "taxId", width: 15 },
+    // 연락처 정보
+    { header: "이름", key: "contactName", width: 15 },
+    { header: "직책", key: "contactPosition", width: 15 },
+    { header: "이메일", key: "contactEmail", width: 25 },
+    { header: "전화번호", key: "contactPhone", width: 15 },
+    { header: "주요 연락처", key: "isPrimary", width: 10 },
+  ];
+
+  // 헤더 스타일 설정
+  applyHeaderStyle(contactsSheet);
+
+  // 벤더별 연락처 데이터 추가
+  vendors.forEach((vendor: TechVendor) => {
+    if (vendor.contacts && vendor.contacts.length > 0) {
+      vendor.contacts.forEach((contact: TechVendorContact) => {
+        contactsSheet.addRow({
+          // 벤더 식별 정보
+          vendorCode: vendor.vendorCode || "",
+          vendorName: vendor.vendorName,
+          taxId: vendor.taxId,
+          // 연락처 정보
+          contactName: contact.contactName,
+          contactPosition: contact.contactPosition || "",
+          contactEmail: contact.contactEmail,
+          contactPhone: contact.contactPhone || "",
+          isPrimary: contact.isPrimary ? "예" : "아니오",
+        });
+      });
+    } else {
+      // 연락처가 없는 경우에도 벤더 정보만 추가
+      contactsSheet.addRow({
+        vendorCode: vendor.vendorCode || "",
+        vendorName: vendor.vendorName,
+        taxId: vendor.taxId,
+        contactName: "",
+        contactPosition: "",
+        contactEmail: "",
+        contactPhone: "",
+        isPrimary: "",
+      });
+    }
+  });
+}
+
+// 아이템 시트 생성 함수
+function createItemsSheet(
+  workbook: ExcelJS.Workbook, 
+  vendors: TechVendor[]
+): void {
+  const itemsSheet = workbook.addWorksheet("아이템");
+  
+  itemsSheet.columns = [
+    // 벤더 식별 정보
+    { header: "업체코드", key: "vendorCode", width: 15 },
+    { header: "업체명", key: "vendorName", width: 20 },
+    { header: "세금ID", key: "taxId", width: 15 },
+    // 아이템 정보
+    { header: "아이템 코드", key: "itemCode", width: 15 },
+    { header: "아이템명", key: "itemName", width: 25 },
+    { header: "설명", key: "description", width: 30 },
+    { header: "등록일", key: "createdAt", width: 15 },
+  ];
+
+  // 헤더 스타일 설정
+  applyHeaderStyle(itemsSheet);
+
+  // 벤더별 아이템 데이터 추가
+  vendors.forEach((vendor: TechVendor) => {
+    if (vendor.items && vendor.items.length > 0) {
+      vendor.items.forEach((item: TechVendorItem) => {
+        itemsSheet.addRow({
+          // 벤더 식별 정보
+          vendorCode: vendor.vendorCode || "",
+          vendorName: vendor.vendorName,
+          taxId: vendor.taxId,
+          // 아이템 정보
+          itemCode: item.itemCode,
+          itemName: item.itemName,
+          createdAt: item.createdAt ? formatDate(item.createdAt) : "",
+        });
+      });
+    } else {
+      // 아이템이 없는 경우에도 벤더 정보만 추가
+      itemsSheet.addRow({
+        vendorCode: vendor.vendorCode || "",
+        vendorName: vendor.vendorName,
+        taxId: vendor.taxId,
+        itemCode: "",
+        itemName: "",
+        createdAt: "",
+      });
+    }
+  });
+}
+
+
+// 헤더 스타일 적용 함수
+function applyHeaderStyle(sheet: ExcelJS.Worksheet): void {
+  const headerRow = sheet.getRow(1);
+  headerRow.font = { bold: true };
+  headerRow.alignment = { horizontal: "center" };
+  headerRow.eachCell((cell: ExcelJS.Cell) => {
+    cell.fill = {
+      type: "pattern",
+      pattern: "solid",
+      fgColor: { argb: "FFCCCCCC" },
+    };
+  });
+}
+
+// 날짜 포맷 함수
+function formatDate(date: Date | string): string {
+  if (!date) return "";
+  if (typeof date === 'string') {
+    date = new Date(date);
+  }
+  return date.toISOString().split('T')[0];
+}
+
+
+// 상태 코드를 읽기 쉬운 텍스트로 변환하는 함수
+function getStatusText(status: string): string {
+  const statusMap: Record<string, string> = {
+    "PENDING_REVIEW": "검토 대기중",
+    "IN_REVIEW": "검토 중",
+    "REJECTED": "거부됨",
+    "ACTIVE": "활성",
+    "INACTIVE": "비활성",
+    "BLACKLISTED": "거래 금지"
+  };
+  
+  return statusMap[status] || status;
+}
\ No newline at end of file