(대표님) 구매 기본계약, gtc 개발

34 files changed, 8674 insertions, 364 deletions

diff --git a/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx
new file mode 100644
index 00000000..a9ef0f0e
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/bulk-update-gtc-clauses-dialog.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import { Loader, Edit, AlertCircle } from "lucide-react"
+import { toast } from "sonner"
+
+import { bulkUpdateGtcClausesSchema, type BulkUpdateGtcClausesSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { bulkUpdateGtcClauses } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+
+interface BulkUpdateGtcClausesDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  selectedClauses: GtcClauseTreeView[]
+}
+
+export function BulkUpdateGtcClausesDialog({ 
+  selectedClauses, 
+  ...props 
+}: BulkUpdateGtcClausesDialogProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  const form = useForm<BulkUpdateGtcClausesSchema>({
+    resolver: zodResolver(bulkUpdateGtcClausesSchema),
+    defaultValues: {
+      clauseIds: selectedClauses.map(clause => clause.id),
+      updates: {
+        category: "",
+        isActive: true,
+      },
+      editReason: "",
+    },
+  })
+
+  React.useEffect(() => {
+    if (selectedClauses.length > 0) {
+      form.setValue("clauseIds", selectedClauses.map(clause => clause.id))
+    }
+  }, [selectedClauses, form])
+
+  async function onSubmit(data: BulkUpdateGtcClausesSchema) {
+    startUpdateTransition(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      try {
+        const result = await bulkUpdateGtcClauses({
+          ...data,
+          updatedById: currentUserId
+        })
+        
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success(`${selectedClauses.length}개의 조항이 수정되었습니다.`)
+      } catch (error) {
+        toast.error("조항 일괄 수정 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    props.onOpenChange?.(nextOpen)
+  }
+
+  // 선택된 조항들의 통계
+  const categoryCounts = React.useMemo(() => {
+    const counts: Record<string, number> = {}
+    selectedClauses.forEach(clause => {
+      const category = clause.category || "미분류"
+      counts[category] = (counts[category] || 0) + 1
+    })
+    return counts
+  }, [selectedClauses])
+
+  const activeCount = selectedClauses.filter(clause => clause.isActive).length
+  const inactiveCount = selectedClauses.length - activeCount
+
+  if (selectedClauses.length === 0) {
+    return null
+  }
+
+  return (
+    <Dialog {...props} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Edit className="h-5 w-5" />
+            조항 일괄 수정
+          </DialogTitle>
+          <DialogDescription>
+            선택한 {selectedClauses.length}개 조항의 공통 속성을 일괄 수정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 선택된 조항 요약 */}
+        <div className="space-y-4 p-4 bg-muted/50 rounded-lg">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">선택된 조항 정보</span>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">총 조항 수</div>
+              <div>{selectedClauses.length}개</div>
+            </div>
+            
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">상태</div>
+              <div className="flex gap-2">
+                <Badge variant="default">{activeCount}개 활성</Badge>
+                {inactiveCount > 0 && (
+                  <Badge variant="secondary">{inactiveCount}개 비활성</Badge>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* 분류별 통계 */}
+          <div>
+            <div className="font-medium text-muted-foreground mb-2">현재 분류 현황</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(categoryCounts).map(([category, count]) => (
+                <Badge key={category} variant="outline" className="text-xs">
+                  {category}: {count}개
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          {/* 조항 미리보기 (최대 5개) */}
+          <div>
+            <div className="font-medium text-muted-foreground mb-2">포함된 조항 (일부)</div>
+            <div className="space-y-1 max-h-24 overflow-y-auto">
+              {selectedClauses.slice(0, 5).map(clause => (
+                <div key={clause.id} className="flex items-center gap-2 text-xs">
+                  <Badge variant="outline">{clause.itemNumber}</Badge>
+                  <span className="truncate">{clause.subtitle}</span>
+                </div>
+              ))}
+              {selectedClauses.length > 5 && (
+                <div className="text-xs text-muted-foreground">
+                  ... 외 {selectedClauses.length - 5}개 조항
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4">
+              {/* 분류 수정 */}
+              <FormField
+                control={form.control}
+                name="updates.category"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>분류 변경 (선택사항)</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="새로운 분류명을 입력하세요 (빈칸으로 두면 변경하지 않음)"
+                        {...field} 
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      모든 선택된 조항의 분류가 동일한 값으로 변경됩니다.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 활성 상태 변경 */}
+              <FormField
+                control={form.control}
+                name="updates.isActive"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">활성 상태</FormLabel>
+                      <FormDescription>
+                        선택된 모든 조항의 활성 상태를 설정합니다.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              {/* 편집 사유 */}
+              <FormField
+                control={form.control}
+                name="editReason"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>편집 사유 *</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="일괄 수정 사유를 입력하세요..."
+                        {...field}
+                        rows={3}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      일괄 수정의 이유를 명확히 기록해주세요.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter className="mt-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => props.onOpenChange?.(false)}
+                disabled={isUpdatePending}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Update {selectedClauses.length} Clauses
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx b/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx
new file mode 100644
index 00000000..f979f0ea
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/clause-preview-viewer.tsx
@@ -0,0 +1,570 @@
+"use client"
+
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  SetStateAction,
+  Dispatch,
+} from "react"
+import { WebViewerInstance } from "@pdftron/webviewer"
+import { Loader2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+
+interface ClausePreviewViewerProps {
+  clauses: GtcClauseTreeView[]
+  document: any
+  instance: WebViewerInstance | null
+  setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>
+  onSuccess?: () => void
+  onError?: () => void
+}
+
+export function ClausePreviewViewer({
+  clauses,
+  document,
+  instance,
+  setInstance,
+  onSuccess,
+  onError,
+}: ClausePreviewViewerProps) {
+  const [fileLoading, setFileLoading] = useState<boolean>(true)
+  const [loadingStage, setLoadingStage] = useState<string>("뷰어 준비 중...")
+  const viewer = useRef<HTMLDivElement>(null)
+  const initialized = useRef(false)
+  const isCancelled = useRef(false)
+
+  // WebViewer 초기화 (단계별)
+  useEffect(() => {
+    if (!initialized.current && viewer.current) {
+      initialized.current = true
+      isCancelled.current = false
+
+      initializeViewerStepByStep()
+    }
+
+    return () => {
+      if (instance) {
+        try {
+          instance.UI.dispose()
+        } catch (error) {
+          console.warn("뷰어 정리 중 오류:", error)
+        }
+      }
+      isCancelled.current = true;
+      setTimeout(() => cleanupHtmlStyle(), 500);
+    }
+  }, [])
+
+  const initializeViewerStepByStep = async () => {
+    try {
+      setLoadingStage("라이브러리 로딩 중...")
+      
+      // 1단계: 라이브러리 동적 import (지연 추가)
+      await new Promise(resolve => setTimeout(resolve, 300))
+      const { default: WebViewer } = await import("@pdftron/webviewer")
+      
+      if (isCancelled.current || !viewer.current) {
+        console.log("📛 WebViewer 초기화 취소됨")
+        return
+      }
+
+      setLoadingStage("뷰어 초기화 중...")
+      
+      // 2단계: WebViewer 인스턴스 생성
+      const webviewerInstance = await WebViewer(
+        {
+          path: "/pdftronWeb",
+          licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY,
+          fullAPI: true,
+          enableOfficeEditing: true,
+          l: "ko",
+          enableReadOnlyMode: false,
+        },
+        viewer.current
+      )
+
+      if (isCancelled.current) {
+        console.log("📛 WebViewer 초기화 취소됨")
+        return
+      }
+
+      setInstance(webviewerInstance)
+      setLoadingStage("UI 설정 중...")
+
+      // 3단계: UI 설정 (약간의 지연 후)
+      await new Promise(resolve => setTimeout(resolve, 500))
+      await configureViewerUI(webviewerInstance)
+
+      setLoadingStage("문서 생성 중...")
+
+      // 4단계: 문서 생성 (충분한 지연 후)
+      await new Promise(resolve => setTimeout(resolve, 800))
+      await generateDocumentFromClauses(webviewerInstance, clauses, document)
+
+    } catch (error) {
+      console.error("❌ WebViewer 단계별 초기화 실패:", error)
+      setFileLoading(false)
+      onError?.() // 초기화 실패 콜백 호출
+      toast.error(`뷰어 초기화 실패: ${error instanceof Error ? error.message : '알 수 없는 오류'}`)
+    }
+  }
+
+  const configureViewerUI = async (webviewerInstance: WebViewerInstance) => {
+    try {
+      const { disableElements, enableElements, setToolbarGroup } = webviewerInstance.UI
+
+      // 미리보기에 필요한 도구만 활성화
+      enableElements([
+        "toolbarGroup-View",
+        "zoomInButton",
+        "zoomOutButton",
+        "fitButton",
+        "rotateCounterClockwiseButton",
+        "rotateClockwiseButton",
+      ])
+
+      // 편집 도구는 비활성화
+      disableElements([
+        "toolbarGroup-Edit",
+        "toolbarGroup-Insert",
+        "toolbarGroup-Annotate",
+        "toolbarGroup-Shapes",
+        "toolbarGroup-Forms",
+      ])
+
+      setToolbarGroup("toolbarGroup-View")
+
+      console.log("✅ UI 설정 완료")
+    } catch (uiError) {
+      console.warn("⚠️ UI 설정 중 오류:", uiError)
+      // UI 설정 실패해도 계속 진행
+    }
+  }
+
+  // 문서 생성 함수 (재시도 로직 포함)
+  const generateDocumentFromClauses = async (
+    webviewerInstance: WebViewerInstance,
+    clauses: GtcClauseTreeView[],
+    document: any,
+    retryCount = 0
+  ) => {
+    const MAX_RETRIES = 3
+    
+    try {
+      console.log("📄 조항 기반 DOCX 문서 생성 시작:", clauses.length)
+
+      // 활성화된 조항만 필터링하고 정렬
+      const activeClauses = clauses
+        .filter(clause => clause.isActive !== false)
+        .sort((a, b) => {
+          if (a.sortOrder && b.sortOrder) {
+            return parseFloat(a.sortOrder) - parseFloat(b.sortOrder)
+          }
+          return a.itemNumber.localeCompare(b.itemNumber, undefined, { numeric: true })
+        })
+
+      if (activeClauses.length === 0) {
+        throw new Error("활성화된 조항이 없습니다.")
+      }
+
+      setLoadingStage(`문서 생성 중... (${activeClauses.length}개 조항 처리)`)
+
+      // DOCX 문서 생성 (재시도 로직 포함)
+      const docxBlob = await generateDocxDocumentWithRetry(activeClauses, document)
+
+      // 파일 생성
+      const docxFile = new File([docxBlob], `${document?.title || 'GTC계약서'}_미리보기.docx`, {
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      })
+
+      setLoadingStage("문서 로딩 중...")
+
+      // WebViewer가 완전히 준비된 상태인지 확인
+      await waitForViewerReady(webviewerInstance)
+
+      // DOCX 문서 로드 (재시도 포함)
+      await loadDocumentWithRetry(webviewerInstance, docxFile)
+
+      console.log("✅ DOCX 기반 문서 생성 완료")
+      toast.success("Word 문서 미리보기가 생성되었습니다.")
+      setFileLoading(false)
+      onSuccess?.() // 성공 콜백 호출
+
+    } catch (err) {
+      console.error(`❌ DOCX 문서 생성 중 오류 (시도 ${retryCount + 1}/${MAX_RETRIES + 1}):`, err)
+      
+      if (retryCount < MAX_RETRIES) {
+        console.log(`🔄 ${(retryCount + 1) * 1000}ms 후 재시도...`)
+        setLoadingStage(`재시도 중... (${retryCount + 1}/${MAX_RETRIES})`)
+        
+        await new Promise(resolve => setTimeout(resolve, (retryCount + 1) * 1000))
+        
+        if (!isCancelled.current) {
+          return generateDocumentFromClauses(webviewerInstance, clauses, document, retryCount + 1)
+        }
+      } else {
+        setFileLoading(false)
+        onError?.() // 실패 콜백 호출
+        toast.error(`문서 생성 실패: ${err instanceof Error ? err.message : '알 수 없는 오류'}`)
+      }
+    }
+  }
+
+  // WebViewer 준비 상태 확인
+  const waitForViewerReady = async (webviewerInstance: WebViewerInstance, timeout = 5000) => {
+    const startTime = Date.now()
+    
+    while (Date.now() - startTime < timeout) {
+      try {
+        // UI가 준비되었는지 확인
+        if (webviewerInstance.UI && webviewerInstance.Core) {
+          console.log("✅ WebViewer 준비 완료")
+          return
+        }
+      } catch (error) {
+        // 아직 준비되지 않음
+      }
+      
+      await new Promise(resolve => setTimeout(resolve, 100))
+    }
+    
+    throw new Error("WebViewer 준비 시간 초과")
+  }
+
+  // 문서 로드 재시도 함수
+  const loadDocumentWithRetry = async (
+    webviewerInstance: WebViewerInstance, 
+    file: File, 
+    retryCount = 0
+  ) => {
+    const MAX_LOAD_RETRIES = 2
+    
+    try {
+      await webviewerInstance.UI.loadDocument(file, {
+        filename: file.name,
+        enableOfficeEditing: true,
+      })
+      console.log("✅ 문서 로드 성공")
+    } catch (error) {
+      console.error(`문서 로드 실패 (시도 ${retryCount + 1}):`, error)
+      
+      if (retryCount < MAX_LOAD_RETRIES) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        return loadDocumentWithRetry(webviewerInstance, file, retryCount + 1)
+      } else {
+        throw new Error(`문서 로드 실패: ${error instanceof Error ? error.message : '알 수 없는 오류'}`)
+      }
+    }
+  }
+
+  // DOCX 생성 재시도 함수
+  const generateDocxDocumentWithRetry = async (
+    clauses: GtcClauseTreeView[], 
+    document: any, 
+    retryCount = 0
+  ): Promise<Blob> => {
+    try {
+      return await generateDocxDocument(clauses, document)
+    } catch (error) {
+      console.error(`DOCX 생성 실패 (시도 ${retryCount + 1}):`, error)
+      
+      if (retryCount < 2) {
+        await new Promise(resolve => setTimeout(resolve, 500))
+        return generateDocxDocumentWithRetry(clauses, document, retryCount + 1)
+      } else {
+        throw error
+      }
+    }
+  }
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <div
+        ref={viewer}
+        className="w-full h-full"
+        style={{
+          position: 'relative',
+          overflow: 'hidden',
+          contain: 'layout style paint',
+        }}
+      >
+        {fileLoading && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-90 z-10">
+            <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
+            <p className="text-sm text-muted-foreground">{loadingStage}</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {clauses.filter(c => c.isActive !== false).length}개 조항 처리 중
+            </p>
+            <div className="mt-3 text-xs text-gray-400">
+              초기화에 시간이 걸릴 수 있습니다...
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ===== 유틸리티 함수들 =====
+
+// data URL 판별 및 디코딩 유틸
+function isDataUrl(url: string) {
+  return /^data:/.test(url);
+}
+
+function dataUrlToUint8Array(dataUrl: string): { bytes: Uint8Array; mime: string } {
+  // 형식: data:<mime>;base64,<payload>
+  const match = dataUrl.match(/^data:([^;]+);base64,(.*)$/);
+  if (!match) {
+    // base64가 아닌 data URL도 가능하지만, 여기서는 base64만 지원
+    throw new Error("지원하지 않는 data URL 형식입니다.");
+  }
+  const mime = match[1];
+  const base64 = match[2];
+  const binary = atob(base64);
+  const len = binary.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) bytes[i] = binary.charCodeAt(i);
+  return { bytes, mime };
+}
+
+// 이미지 불러오기 + 크기 계산 (data:, http:, / 경로 모두 지원)
+async function fetchImageData(url: string, maxWidthPx = 500) {
+  let blob: Blob;
+  let bytes: Uint8Array;
+
+  if (isDataUrl(url)) {
+    // data URL → Uint8Array, Blob
+    const { bytes: arr, mime } = dataUrlToUint8Array(url);
+    bytes = arr;
+    blob = new Blob([bytes], { type: mime });
+  } else {
+    // http(s) 또는 상대 경로
+    const res = await fetch(url, { cache: "no-store" });
+    if (!res.ok) throw new Error(`이미지 다운로드 실패 (${res.status})`);
+    blob = await res.blob();
+    const arrayBuffer = await blob.arrayBuffer();
+    bytes = new Uint8Array(arrayBuffer);
+  }
+
+  // 원본 크기 파악 (공통)
+  const dims = await new Promise<{ width: number; height: number }>((resolve) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(blob);
+    img.onload = () => {
+      const width = img.naturalWidth || 800;
+      const height = img.naturalHeight || 600;
+      URL.revokeObjectURL(objectUrl);
+      resolve({ width, height });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      resolve({ width: 800, height: 600 }); // 실패 시 기본값
+    };
+    img.src = objectUrl;
+  });
+
+  // 비율 유지 축소
+  const scale = Math.min(1, maxWidthPx / (dims.width || maxWidthPx));
+  const width = Math.round((dims.width || maxWidthPx) * scale);
+  const height = Math.round((dims.height || Math.round(maxWidthPx * 0.6)) * scale);
+
+  return { data: bytes, width, height };
+}
+
+// DOCX 문서 생성 (docx 라이브러리 사용)
+async function generateDocxDocument(
+  clauses: GtcClauseTreeView[],
+  document: any
+): Promise<Blob> {
+  const { Document, Packer, Paragraph, TextRun, AlignmentType, ImageRun } = await import("docx");
+
+  function textToParagraphs(text: string, indentLeft: number) {
+    const lines = text.split("\n");
+    return [
+      new Paragraph({
+        children: lines
+          .map((line, i) => [
+            new TextRun({ text: line }),
+            ...(i < lines.length - 1 ? [new TextRun({ break: 1 })] : []),
+          ])
+          .flat(),
+        indent: { left: indentLeft },
+      }),
+    ];
+  }
+
+  const IMG_TOKEN = /!\[([^\]]+)\]/g; // 예: ![image1753698566087]
+
+  async function pushContentWithInlineImages(
+    content: string,
+    indentLeft: number,
+    children: any[],
+    imageMap: Map<string, any>
+  ) {
+    let lastIndex = 0;
+    for (const match of content.matchAll(IMG_TOKEN)) {
+      const start = match.index ?? 0;
+      const end = start + match[0].length;
+      const imageId = match[1];
+
+      // 앞부분 텍스트
+      if (start > lastIndex) {
+        const txt = content.slice(lastIndex, start);
+        children.push(...textToParagraphs(txt, indentLeft));
+      }
+
+      // 이미지 삽입
+      const imgMeta = imageMap.get(imageId);
+      if (imgMeta?.url) {
+        try {
+          const { data, width, height } = await fetchImageData(imgMeta.url, 520);
+          children.push(
+            new Paragraph({
+              children: [
+                new ImageRun({
+                  data,
+                  transformation: { width, height },
+                }),
+              ],
+              indent: { left: indentLeft },
+            })
+          );
+          // 사용된 이미지 표시(뒤에서 중복 추가 방지)
+          imageMap.delete(imageId);
+        } catch (imgError) {
+          console.warn("이미지 로드 실패:", imgMeta, imgError);
+          // 이미지 로드 실패시 텍스트로 대체
+          children.push(
+            new Paragraph({
+              children: [new TextRun({ text: `[이미지 로드 실패: ${imgMeta.fileName || imageId}]`, color: "999999" })],
+              indent: { left: indentLeft },
+            })
+          );
+        }
+      }
+      // 매칭 실패 시: 아무것도 넣지 않음(토큰 제거)
+
+      lastIndex = end;
+    }
+
+    // 남은 꼬리 텍스트
+    if (lastIndex < content.length) {
+      const tail = content.slice(lastIndex);
+      children.push(...textToParagraphs(tail, indentLeft));
+    }
+  }
+
+  const documentTitle = document?.title || "GTC 계약서";
+  const currentDate = new Date().toLocaleDateString("ko-KR");
+
+  // depth 추정/정렬
+  const structuredClauses = organizeClausesByHierarchy(clauses);
+
+  const children: any[] = [
+    new Paragraph({
+      alignment: AlignmentType.CENTER,
+      children: [new TextRun({ text: documentTitle, bold: true, size: 32 })],
+    }),
+    new Paragraph({
+      alignment: AlignmentType.CENTER,
+      children: [new TextRun({ text: `생성일: ${currentDate}`, size: 20, color: "666666" })],
+    }),
+    new Paragraph({ text: "" }),
+    new Paragraph({ text: "" }),
+  ];
+
+  for (const clause of structuredClauses) {
+    const depth = Math.min(clause.estimatedDepth || 0, 3);
+    const indentLeft = depth * 400;       // 번호/제목
+    const indentContent = indentLeft + 200; // 본문/이미지
+
+    // 번호 + 제목
+    children.push(
+      new Paragraph({
+        children: [
+          new TextRun({ text: `${clause.itemNumber}${clause.subtitle ? "." : ""}`, bold: true, color: "2563eb" }),
+          ...(clause.subtitle
+            ? [new TextRun({ text: " " }), new TextRun({ text: clause.subtitle, bold: true })]
+            : []),
+        ],
+        indent: { left: indentLeft },
+      })
+    );
+
+    const imageMap = new Map(
+      Array.isArray((clause as any).images)
+        ? (clause as any).images.map((im: any) => [String(im.id), im])
+        : []
+    );
+
+    // 내용
+    const hasContent = clause.content && clause.content.trim();
+    if (hasContent) {
+      await pushContentWithInlineImages(clause.content!, indentContent, children, imageMap);
+    }
+
+    // 본문에 등장하지 않은 잔여 이미지(선택: 뒤에 추가)
+    for (const [, imgMeta] of imageMap) {
+      try {
+        const { data, width, height } = await fetchImageData(imgMeta.url, 520);
+        children.push(
+          new Paragraph({
+            children: [new ImageRun({ data, transformation: { width, height } })],
+            indent: { left: indentContent },
+          })
+        );
+      } catch (e) {
+        children.push(
+          new Paragraph({
+            children: [new TextRun({ text: `이미지 로드 실패: ${imgMeta.fileName || imgMeta.url}`, color: "b91c1c", size: 20 })],
+            indent: { left: indentContent },
+          })
+        );
+        console.warn("이미지 로드 실패(잔여):", imgMeta, e);
+      }
+    }
+
+    // 조항 간 간격
+    children.push(new Paragraph({ text: "" }));
+  }
+
+  const doc = new Document({
+    sections: [{ properties: {}, children }],
+  });
+
+  return await Packer.toBlob(doc);
+}
+
+// 조항들을 계층구조로 정리
+function organizeClausesByHierarchy(clauses: GtcClauseTreeView[]) {
+  // depth가 없는 경우 itemNumber로 depth 추정
+  return clauses.map(clause => ({
+    ...clause,
+    estimatedDepth: clause.depth ?? estimateDepthFromItemNumber(clause.itemNumber)
+  })).sort((a, b) => {
+    // itemNumber 기준 자연 정렬
+    return a.itemNumber.localeCompare(b.itemNumber, undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    })
+  })
+}
+
+// itemNumber로부터 depth 추정
+function estimateDepthFromItemNumber(itemNumber: string): number {
+  const parts = itemNumber.split('.')
+  return Math.max(0, parts.length - 1)
+}
+
+// WebViewer 정리 함수
+const cleanupHtmlStyle = () => {
+  // iframe 스타일 정리 (WebViewer가 추가한 스타일)
+  const elements = document.querySelectorAll('.Document_container');
+  elements.forEach((elem) => {
+    elem.remove();
+  });
+};
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/clause-table.tsx b/lib/basic-contract/gtc-vendor/clause-table.tsx
new file mode 100644
index 00000000..a9230cd4
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/clause-table.tsx
@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+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 type {
+  getGtcClauses,
+  getUsersForFilter,
+  getVendorClausesForDocument
+} from "@/lib/gtc-contract/gtc-clauses/service"
+import { getColumns } from "./gtc-clauses-table-columns"
+import { GtcClausesTableToolbarActions } from "./gtc-clauses-table-toolbar-actions"
+import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog"
+import { UpdateGtcClauseSheet } from "./update-gtc-clause-sheet"
+import { CreateVendorGtcClauseDialog } from "./create-gtc-clause-dialog"
+import { DuplicateGtcClauseDialog } from "./duplicate-gtc-clause-dialog"
+
+interface GtcClausesTableProps {
+  promises: Promise<
+    [
+      Awaited<ReturnType<typeof getGtcClauses>>,
+      Awaited<ReturnType<typeof getUsersForFilter>>,
+      Awaited<ReturnType<typeof getVendorClausesForDocument>>,
+    ]
+  >
+  ,
+  documentId: number
+  document: any
+  vendorId?: number
+  vendorName?: string
+}
+
+export function GtcClausesVendorTable({
+  promises,
+  documentId,
+  document,
+  vendorId,
+  vendorName
+}: GtcClausesTableProps) {
+  const [{ data, pageCount }, users, vendorData] = React.use(promises)
+
+
+  const [rowAction, setRowAction] =
+    React.useState<DataTableRowAction<GtcClauseTreeView> | null>(null)
+
+  const dataWithVendor = React.useMemo(() => {
+    if (!vendorData?.vendorClauseMap) return data
+
+    return data.map(clause => {
+      const vendorClause = vendorData.vendorClauseMap.get(clause.id)
+
+      return {
+        ...clause,
+        vendorInfo: vendorClause || null,
+      }
+    })
+  }, [data, vendorData])
+
+
+  console.log(dataWithVendor,"dataWithVendor")
+  console.log(vendorData,"vendorData")
+
+  const columns = React.useMemo(
+    () => getColumns({
+      setRowAction,
+      documentId,
+      hasVendorInfo: !!vendorId && !!vendorData?.vendorDocument
+    }),
+    [setRowAction, documentId, vendorData]
+  )
+  /**
+   * Filter fields for the data table.
+   */
+  const filterFields: DataTableFilterField<GtcClauseTreeView>[] = [
+    {
+      id: "itemNumber",
+      label: "채번",
+      placeholder: "채번으로 검색...",
+    },
+    {
+      id: "subtitle",
+      label: "소제목",
+      placeholder: "소제목으로 검색...",
+    },
+    {
+      id: "content",
+      label: "상세항목",
+      placeholder: "상세항목으로 검색...",
+    },
+  ]
+
+  /**
+   * Advanced filter fields for the data table.
+   */
+  const advancedFilterFields: DataTableAdvancedFilterField<GtcClauseTreeView>[] = [
+    {
+      id: "itemNumber",
+      label: "채번",
+      type: "text",
+    },
+    {
+      id: "category",
+      label: "분류",
+      type: "text",
+    },
+    {
+      id: "subtitle",
+      label: "소제목",
+      type: "text",
+    },
+    {
+      id: "content",
+      label: "상세항목",
+      type: "text",
+    },
+    {
+      id: "depth",
+      label: "계층 깊이",
+      type: "multi-select",
+      options: [
+        { label: "1단계", value: "0" },
+        { label: "2단계", value: "1" },
+        { label: "3단계", value: "2" },
+        { label: "4단계", value: "3" },
+        { label: "5단계", value: "4" },
+      ],
+    },
+    {
+      id: "createdByName",
+      label: "작성자",
+      type: "multi-select",
+      options: users.map((user) => ({
+        label: user.name,
+        value: user.name,
+      })),
+    },
+    {
+      id: "updatedByName",
+      label: "수정자",
+      type: "multi-select",
+      options: users.map((user) => ({
+        label: user.name,
+        value: user.name,
+      })),
+    },
+    {
+      id: "createdAt",
+      label: "작성일",
+      type: "date",
+    },
+    {
+      id: "updatedAt",
+      label: "수정일",
+      type: "date",
+    },
+  ]
+
+  const { table } = useDataTable({
+    data: dataWithVendor,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ "id": "itemNumber", "desc": false }],
+      columnPinning: { right: ["actions"] },
+    },
+    getRowId: (originalRow) => `${originalRow.id}`,
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <>
+      <DataTable
+        table={table}
+      // floatingBar={<GtcClausesTableFloatingBar table={table} />}
+      >
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <GtcClausesTableToolbarActions
+            table={table}
+            documentId={documentId}
+            document={document}
+          />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      {/* 삭제 다이얼로그 */}
+      <DeleteGtcClausesDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        gtcClauses={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => rowAction?.row.toggleSelected(false)}
+      />
+
+      {/* 수정 시트 */}
+      <UpdateGtcClauseSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        gtcClause={rowAction?.row.original ?? null}
+        vendorInfo={rowAction?.row.original?.vendorInfo ?? null}
+        documentId={documentId}
+        vendorId={vendorId}
+        vendorName={vendorName}
+      />
+
+      {/* 생성 다이얼로그 */}
+      {/* <CreateVendorGtcClauseDialog 
+        key="main-create"
+        documentId={documentId}
+        document={document}
+      /> */}
+
+      {/* 하위 조항 추가 다이얼로그 */}
+      <CreateVendorGtcClauseDialog
+        key={`sub-create-${rowAction?.row.original.id || 'none'}`}
+        documentId={documentId}
+        document={document}
+        parentClause={rowAction?.type === "addSubClause" ? rowAction.row.original : null}
+        open={rowAction?.type === "addSubClause"}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRowAction(null)
+          }
+        }}
+        showTrigger={false}
+        onSuccess={() => {
+          setRowAction(null)
+          // 테이블 리프레시 로직
+        }}
+      />
+
+      {/* 조항 복제 다이얼로그 */}
+      <DuplicateGtcClauseDialog
+        open={rowAction?.type === "duplicate"}
+        onOpenChange={() => setRowAction(null)}
+        sourceClause={rowAction?.row.original ?? null}
+        onSuccess={() => {
+          // 테이블 리프레시 로직
+        }}
+      />
+
+
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx b/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx
new file mode 100644
index 00000000..36d47403
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/clause-variable-settings-dialog.tsx
@@ -0,0 +1,364 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import { Loader, Settings2, Wand2, Copy, Eye } from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+import { updateGtcClauseSchema, type UpdateGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { updateGtcClause } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+
+interface ClauseVariableSettingsDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  clause: GtcClauseTreeView | null
+  onSuccess?: () => void
+}
+
+export function ClauseVariableSettingsDialog({ 
+  clause, 
+  onSuccess,
+  ...props 
+}: ClauseVariableSettingsDialogProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [showPreview, setShowPreview] = React.useState(false)
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  const form = useForm<UpdateGtcClauseSchema>({
+    resolver: zodResolver(updateGtcClauseSchema),
+    defaultValues: {
+      numberVariableName: "",
+      subtitleVariableName: "",
+      contentVariableName: "",
+      editReason: "",
+    },
+  })
+
+  // clause가 변경될 때 폼 데이터 설정
+  React.useEffect(() => {
+    if (clause) {
+      form.reset({
+        numberVariableName: clause.numberVariableName || "",
+        subtitleVariableName: clause.subtitleVariableName || "",
+        contentVariableName: clause.contentVariableName || "",
+        editReason: "",
+      })
+    }
+  }, [clause, form])
+
+  const generateAutoVariableNames = () => {
+    if (!clause) return
+
+    const fullPath = clause.fullPath || clause.itemNumber
+
+    console.log(clause.fullPath,fullPath,"fullPath")
+    console.log(clause, "clause")
+
+    const prefix = "CLAUSE_" + fullPath.replace(/\./g, "_")
+    
+    form.setValue("numberVariableName", `${prefix}_NUMBER`)
+    form.setValue("subtitleVariableName", `${prefix}_SUBTITLE`)
+    form.setValue("contentVariableName", `${prefix}_CONTENT`)
+    
+    toast.success("변수명이 자동 생성되었습니다.")
+  }
+
+  const copyCurrentVariableNames = () => {
+    if (!clause) return
+    
+    const currentVars = {
+      number: clause.autoNumberVariable,
+      subtitle: clause.autoSubtitleVariable,
+      content: clause.autoContentVariable,
+    }
+    
+    form.setValue("numberVariableName", currentVars.number)
+    form.setValue("subtitleVariableName", currentVars.subtitle)
+    form.setValue("contentVariableName", currentVars.content)
+    
+    toast.success("현재 변수명이 복사되었습니다.")
+  }
+
+  async function onSubmit(data: UpdateGtcClauseSchema) {
+    startUpdateTransition(async () => {
+      if (!clause || !currentUserId) {
+        toast.error("조항 정보를 찾을 수 없습니다.")
+        return
+      }
+
+      try {
+        const result = await updateGtcClause(clause.id, {
+          numberVariableName: data.numberVariableName,
+          subtitleVariableName: data.subtitleVariableName,
+          contentVariableName: data.contentVariableName,
+          editReason: data.editReason || "PDFTron 변수명 설정",
+          updatedById: currentUserId,
+        })
+
+        if (result.error) {
+          toast.error(result.error)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success("변수명이 설정되었습니다!")
+        onSuccess?.()
+      } catch (error) {
+        toast.error("변수명 설정 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+      setShowPreview(false)
+    }
+    props.onOpenChange?.(nextOpen)
+  }
+
+  const currentNumberVar = form.watch("numberVariableName")
+  const currentSubtitleVar = form.watch("subtitleVariableName")
+  const currentContentVar = form.watch("contentVariableName")
+  
+  const hasAllVariables = currentNumberVar && currentSubtitleVar && currentContentVar
+
+  if (!clause) {
+    return null
+  }
+
+  return (
+    <Dialog {...props} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <Settings2 className="h-5 w-5" />
+            PDFTron 변수명 설정
+          </DialogTitle>
+          <DialogDescription>
+            조항의 PDFTron 변수명을 설정하여 문서 생성에 사용합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 조항 정보 */}
+        <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0">
+          <div className="font-medium mb-2">대상 조항</div>
+          <div className="space-y-1 text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">{clause.itemNumber}</Badge>
+              <span>{clause.subtitle}</span>
+              <Badge variant={clause.hasAllVariableNames ? "default" : "destructive"}>
+                {clause.hasAllVariableNames ? "설정됨" : "미설정"}
+              </Badge>
+            </div>
+            {clause.fullPath && (
+              <div className="text-xs">경로: {clause.fullPath}</div>
+            )}
+            {clause.category && (
+              <div className="text-xs">분류: {clause.category}</div>
+            )}
+          </div>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0">
+            <div className="flex-1 overflow-y-auto px-1">
+              <div className="space-y-4 py-4">
+                {/* 자동 생성 버튼들 */}
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={generateAutoVariableNames}
+                    className="flex items-center gap-2"
+                  >
+                    <Wand2 className="h-4 w-4" />
+                    자동 생성
+                  </Button>
+                  
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={copyCurrentVariableNames}
+                    className="flex items-center gap-2"
+                  >
+                    <Copy className="h-4 w-4" />
+                    현재값 복사
+                  </Button>
+                  
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowPreview(!showPreview)}
+                    className="flex items-center gap-2"
+                  >
+                    <Eye className="h-4 w-4" />
+                    {showPreview ? "미리보기 숨기기" : "미리보기"}
+                  </Button>
+                </div>
+
+                {/* 현재 설정된 변수명 표시 */}
+                {clause.hasAllVariableNames && (
+                  <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                    <div className="text-sm font-medium text-blue-900 mb-2">현재 설정된 변수명</div>
+                    <div className="space-y-1 text-xs">
+                      <div><code className="bg-blue-100 px-1 rounded">{clause.numberVariableName}</code></div>
+                      <div><code className="bg-blue-100 px-1 rounded">{clause.subtitleVariableName}</code></div>
+                      <div><code className="bg-blue-100 px-1 rounded">{clause.contentVariableName}</code></div>
+                    </div>
+                  </div>
+                )}
+
+                {/* 변수명 입력 필드들 */}
+                <div className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="numberVariableName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>채번 변수명 *</FormLabel>
+                        <FormControl>
+                          <Input 
+                            placeholder="예: CLAUSE_1_NUMBER, HEADER_1_NUM 등"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          문서에서 조항 번호를 표시할 변수명입니다.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="subtitleVariableName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>소제목 변수명 *</FormLabel>
+                        <FormControl>
+                          <Input 
+                            placeholder="예: CLAUSE_1_SUBTITLE, HEADER_1_TITLE 등"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          문서에서 조항 제목을 표시할 변수명입니다.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="contentVariableName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>상세항목 변수명 *</FormLabel>
+                        <FormControl>
+                          <Input 
+                            placeholder="예: CLAUSE_1_CONTENT, BODY_1_TEXT 등"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          문서에서 조항 내용을 표시할 변수명입니다.
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                {/* 미리보기 */}
+                {showPreview && hasAllVariables && (
+                  <div className="p-3 bg-gray-50 border rounded-lg">
+                    <div className="text-sm font-medium mb-2">PDFTron 템플릿 미리보기</div>
+                    <div className="space-y-2 text-xs font-mono bg-white p-2 rounded border">
+                      <div className="text-blue-600">{"{{" + currentNumberVar + "}}"}. {"{{" + currentSubtitleVar + "}}"}</div>
+                      <div className="text-gray-600 ml-4">{"{{" + currentContentVar + "}}"}</div>
+                    </div>
+                    <div className="text-xs text-muted-foreground mt-2">
+                      실제 문서에서 위와 같은 형태로 표시됩니다.
+                    </div>
+                  </div>
+                )}
+
+                {/* 편집 사유 */}
+                <FormField
+                  control={form.control}
+                  name="editReason"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>편집 사유 (선택사항)</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="변수명 설정 사유를 입력하세요..."
+                          {...field}
+                          rows={2}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="flex-shrink-0 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => props.onOpenChange?.(false)}
+                disabled={isUpdatePending}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={isUpdatePending || !hasAllVariables}
+              >
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                <Settings2 className="mr-2 h-4 w-4" />
+                Save Variables
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx b/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx
new file mode 100644
index 00000000..3c98ee4d
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/create-gtc-clause-dialog.tsx
@@ -0,0 +1,625 @@
+// create-vendor-gtc-clause-dialog.tsx
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@/components/ui/command"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Check, ChevronsUpDown, Loader, Plus, Info } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+
+import { createVendorGtcClauseSchema, type CreateVendorGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { createVendorGtcClause, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+import { MarkdownImageEditor } from "./markdown-image-editor"
+
+interface ClauseImage {
+  id: string
+  url: string
+  fileName: string
+  size: number
+}
+
+interface CreateVendorGtcClauseDialogProps {
+  documentId: number
+  document: any
+  vendorDocumentId: number
+  vendorId: number
+  vendorName?: string
+  baseClauseId?: number // Optional - if creating a new vendor clause from scratch
+  baseClause?: GtcClauseTreeView | null // Original clause to modify, if available
+  parentClause?: GtcClauseTreeView | null
+  onSuccess?: () => void
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  showTrigger?: boolean
+}
+
+export function CreateVendorGtcClauseDialog({ 
+  documentId, 
+  document,
+  vendorDocumentId,
+  vendorId,
+  vendorName,
+  baseClauseId,
+  baseClause,
+  parentClause = null,
+  onSuccess,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  showTrigger = true
+}: CreateVendorGtcClauseDialogProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  
+  // controlled vs uncontrolled 모드
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : internalOpen
+  const setOpen = isControlled ? controlledOnOpenChange! : setInternalOpen
+  const [parentClauses, setParentClauses] = React.useState<GtcClauseTreeView[]>([])
+  const [isCreatePending, startCreateTransition] = React.useTransition()
+  const { data: session } = useSession()
+  const [images, setImages] = React.useState<ClauseImage[]>([])
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  React.useEffect(() => {
+    if (open) {
+      loadParentClauses()
+    }
+  }, [open, documentId])
+
+  const loadParentClauses = async () => {
+    try {
+      const tree = await getGtcClausesTree(documentId)
+      setParentClauses(flattenTree(tree))
+    } catch (error) {
+      console.error("Error loading parent clauses:", error)
+    }
+  }
+
+  const form = useForm<CreateVendorGtcClauseSchema>({
+    resolver: zodResolver(createVendorGtcClauseSchema),
+    defaultValues: {
+      documentId,
+      vendorDocumentId,
+      baseClauseId: baseClauseId || null,
+      parentId: parentClause?.id || null,
+      modifiedItemNumber: baseClause?.itemNumber || "",
+      modifiedCategory: baseClause?.category || "",
+      modifiedSubtitle: baseClause?.subtitle || "",
+      modifiedContent: baseClause?.content || "",
+      isNumberModified: false,
+      isCategoryModified: false,
+      isSubtitleModified: false,
+      isContentModified: false,
+      sortOrder: 0,
+      reviewStatus: "draft",
+      negotiationNote: "",
+      isExcluded: false,
+      editReason: "",
+    },
+  })
+
+  const handleContentImageChange = (content: string, newImages: ClauseImage[]) => {
+    form.setValue("modifiedContent", content)
+    setImages(newImages)
+  }
+
+  async function onSubmit(data: CreateVendorGtcClauseSchema) {
+    startCreateTransition(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      try {
+        // 사용자 정보 추가
+        const result = await createVendorGtcClause({
+          ...data,
+          images: images,
+          createdById: currentUserId,
+          vendorId, // 벤더 ID 추가
+          actorName: session?.user?.name || null,
+          actorEmail: session?.user?.email || null,
+        })
+        
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+
+        form.reset()
+        setImages([])
+        setOpen(false)
+        toast.success("벤더 GTC 조항이 생성되었습니다.")
+        onSuccess?.()
+      } catch (error) {
+        toast.error("벤더 조항 생성 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+      setImages([])
+    }
+    setOpen(nextOpen)
+  }
+
+  const selectedParent = parentClauses.find(c => c.id === form.watch("parentId"))
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button variant="default" size="sm">
+            <Plus className="mr-2 h-4 w-4" />
+            {baseClause 
+              ? "조항 협의 생성" 
+              : parentClause 
+                ? "하위 조항 추가" 
+                : "조항 추가"}
+          </Button>
+        </DialogTrigger>
+      )}
+
+      <DialogContent className="max-w-4xl h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>
+            {baseClause 
+              ? `${baseClause.subtitle} 조항 협의 생성` 
+              : parentClause 
+                ? "하위 벤더 조항 생성" 
+                : "새 벤더 조항 생성"}
+          </DialogTitle>
+          <DialogDescription>
+            {vendorName 
+              ? `${vendorName}과(와)의 GTC 조항 협의 내용을 입력하세요.` 
+              : '벤더별 GTC 조항 정보를 입력하세요.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 기존 조항 정보 (있는 경우) */}
+        {baseClause && (
+          <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0 mb-4">
+            <div className="font-medium mb-1">원본 조항 정보</div>
+            <div className="text-muted-foreground space-y-1">
+              <div>채번: {baseClause.itemNumber}</div>
+              {baseClause.category && <div>분류: {baseClause.category}</div>}
+              <div>소제목: {baseClause.subtitle}</div>
+              {baseClause.content && <div>내용: {baseClause.content.substring(0, 80)}...</div>}
+            </div>
+          </div>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0">
+            <div className="flex-1 overflow-y-auto px-1">
+              <div className="space-y-4 py-4">
+                {/* 협의 상태 */}
+                <FormField
+                  control={form.control}
+                  name="reviewStatus"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>협의 상태</FormLabel>
+                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="협의 상태를 선택하세요" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="draft">초안</SelectItem>
+                          <SelectItem value="pending">협의 대기</SelectItem>
+                          <SelectItem value="reviewing">협의 중</SelectItem>
+                          <SelectItem value="approved">승인됨</SelectItem>
+                          <SelectItem value="rejected">거부됨</SelectItem>
+                          <SelectItem value="revised">수정됨</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* 제외 여부 */}
+                <FormField
+                  control={form.control}
+                  name="isExcluded"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel>
+                          이 조항을 벤더 계약에서 제외
+                        </FormLabel>
+                        <FormDescription>
+                          체크하면 최종 계약서에서 이 조항이 제외됩니다
+                        </FormDescription>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                {/* 부모 조항 선택 (벤더 조항에만 필요한 경우) */}
+                {!baseClause && (
+                  <FormField
+                    control={form.control}
+                    name="parentId"
+                    render={({ field }) => {
+                      const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+                      return (
+                        <FormItem>
+                          <FormLabel>부모 조항 (선택사항)</FormLabel>
+                          <FormControl>
+                            <Popover
+                              open={popoverOpen}
+                              onOpenChange={setPopoverOpen}
+                              modal={true}
+                            >
+                              <PopoverTrigger asChild>
+                                <Button
+                                  variant="outline"
+                                  role="combobox"
+                                  aria-expanded={popoverOpen}
+                                  className="w-full justify-between"
+                                >
+                                  {selectedParent
+                                    ? `${selectedParent.itemNumber} - ${selectedParent.subtitle}`
+                                    : "부모 조항을 선택하세요... (최상위 조항인 경우 선택 안함)"}
+                                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                </Button>
+                              </PopoverTrigger>
+
+                              <PopoverContent className="w-full p-0">
+                                <Command>
+                                  <CommandInput
+                                    placeholder="부모 조항 검색..."
+                                    className="h-9"
+                                  />
+                                  <CommandList>
+                                    <CommandEmpty>조항을 찾을 수 없습니다.</CommandEmpty>
+                                    <CommandGroup>
+                                      <CommandItem
+                                        value="none"
+                                        onSelect={() => {
+                                          field.onChange(null)
+                                          setPopoverOpen(false)
+                                        }}
+                                      >
+                                        최상위 조항
+                                        <Check
+                                          className={cn(
+                                            "ml-auto h-4 w-4",
+                                            !field.value ? "opacity-100" : "opacity-0"
+                                          )}
+                                        />
+                                      </CommandItem>
+                                      
+                                      {parentClauses.map((clause) => (
+                                        <CommandItem
+                                          key={clause.id}
+                                          value={`${clause.itemNumber} - ${clause.subtitle}`}
+                                          onSelect={() => {
+                                            field.onChange(clause.id)
+                                            setPopoverOpen(false)
+                                          }}
+                                        >
+                                          <div className="flex items-center w-full">
+                                            <span style={{ marginLeft: `${clause.depth * 12}px` }}>
+                                              {`${clause.itemNumber} - ${clause.subtitle}`}
+                                            </span>
+                                          </div>
+                                          <Check
+                                            className={cn(
+                                              "ml-auto h-4 w-4",
+                                              selectedParent?.id === clause.id
+                                                ? "opacity-100" 
+                                                : "opacity-0"
+                                            )}
+                                          />
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )
+                    }}
+                  />
+                )}
+
+                {/* 채번 수정 */}
+                <div className="space-y-2 border rounded-lg p-3">
+                  <FormField
+                    control={form.control}
+                    name="isNumberModified"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormLabel className="font-normal cursor-pointer">
+                          채번 수정
+                        </FormLabel>
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {form.watch("isNumberModified") && (
+                    <FormField
+                      control={form.control}
+                      name="modifiedItemNumber"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input 
+                              placeholder="수정할 채번 입력"
+                              {...field} 
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+
+                {/* 분류 수정 */}
+                <div className="space-y-2 border rounded-lg p-3">
+                  <FormField
+                    control={form.control}
+                    name="isCategoryModified"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormLabel className="font-normal cursor-pointer">
+                          분류 수정
+                        </FormLabel>
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {form.watch("isCategoryModified") && (
+                    <FormField
+                      control={form.control}
+                      name="modifiedCategory"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input 
+                              placeholder="수정할 분류 입력"
+                              {...field} 
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+
+                {/* 소제목 수정 */}
+                <div className="space-y-2 border rounded-lg p-3">
+                  <FormField
+                    control={form.control}
+                    name="isSubtitleModified"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormLabel className="font-normal cursor-pointer">
+                          소제목 수정
+                        </FormLabel>
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {form.watch("isSubtitleModified") && (
+                    <FormField
+                      control={form.control}
+                      name="modifiedSubtitle"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input 
+                              placeholder="수정할 소제목 입력"
+                              {...field} 
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+
+                {/* 내용 수정 */}
+                <div className="space-y-2 border rounded-lg p-3">
+                  <FormField
+                    control={form.control}
+                    name="isContentModified"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormLabel className="font-normal cursor-pointer">
+                          상세항목 수정
+                        </FormLabel>
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {form.watch("isContentModified") && (
+                    <FormField
+                      control={form.control}
+                      name="modifiedContent"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <MarkdownImageEditor
+                              content={field.value || ""}
+                              images={images}
+                              onChange={handleContentImageChange}
+                              placeholder="수정할 내용을 입력하세요..."
+                              rows={6}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+
+                {/* 협의 노트 */}
+                <FormField
+                  control={form.control}
+                  name="negotiationNote"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>협의 메모</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="협의 과정에서의 메모나 특이사항을 기록하세요..."
+                          {...field}
+                          rows={3}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        벤더와의 협의 내용이나 변경 사유를 기록합니다
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* 편집 사유 */}
+                <FormField
+                  control={form.control}
+                  name="editReason"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>편집 사유 (선택사항)</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="조항 생성 사유를 입력하세요..."
+                          {...field}
+                          rows={2}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="flex-shrink-0 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isCreatePending}
+              >
+                취소
+              </Button>
+              <Button type="submit" disabled={isCreatePending}>
+                {isCreatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                생성
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// 트리를 평면 배열로 변환하는 유틸리티 함수
+function flattenTree(tree: any[]): any[] {
+  const result: any[] = []
+  
+  function traverse(nodes: any[]) {
+    for (const node of nodes) {
+      result.push(node)
+      if (node.children && node.children.length > 0) {
+        traverse(node.children)
+      }
+    }
+  }
+  
+  traverse(tree)
+  return result
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx
new file mode 100644
index 00000000..885a78e0
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/delete-gtc-clauses-dialog.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import { Loader, Trash2, AlertTriangle } from "lucide-react"
+import { toast } from "sonner"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+// import { deleteGtcClauses } from "../service"
+
+interface DeleteGtcClausesDialogProps
+  extends React.ComponentPropsWithRef<typeof AlertDialog> {
+  gtcClauses: GtcClauseTreeView[]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteGtcClausesDialog({
+  gtcClauses,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteGtcClausesDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      try {
+        // ✅ 한 번에 모든 조항 삭제 (배열로 전달)
+        const ids = gtcClauses.map(clause => clause.id)
+        const result = await deleteGtcClauses(ids)
+        
+        if (result.error) {
+          toast.error(`삭제 중 오류가 발생했습니다: ${result.error}`)
+          return
+        }
+
+        props.onOpenChange?.(false)
+        toast.success(
+          `${result.deletedCount}개의 조항이 삭제되었습니다.`
+        )
+        onSuccess?.()
+      } catch (error) {
+        console.error("Delete error:", error)
+        toast.error("조항 삭제 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  const clausesWithChildren = gtcClauses.filter(clause => clause.childrenCount > 0)
+  const hasChildrenWarning = clausesWithChildren.length > 0
+  
+  // 총 삭제될 하위 조항 수 계산
+  const totalChildrenCount = clausesWithChildren.reduce((sum, clause) => sum + clause.childrenCount, 0)
+
+  return (
+    <AlertDialog {...props}>
+      {showTrigger && (
+        <AlertDialogTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash2 className="mr-2 h-4 w-4" />
+            삭제 ({gtcClauses.length})
+          </Button>
+        </AlertDialogTrigger>
+      )}
+
+      <AlertDialogContent className="max-w-md">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            <AlertDialogTitle>조항 삭제</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription asChild>
+            <div className="space-y-3">
+              <p>
+                선택한 {gtcClauses.length}개의 조항을 <strong>완전히 삭제</strong>하시겠습니까?
+                이 작업은 되돌릴 수 없습니다.
+              </p>
+
+              {/* 삭제할 조항 목록 */}
+              <div className="space-y-2">
+                <div className="text-sm font-medium">삭제할 조항:</div>
+                <div className="max-h-32 overflow-y-auto space-y-1">
+                  {gtcClauses.map((clause) => (
+                    <div key={clause.id} className="flex items-center gap-2 text-sm p-2 bg-muted/50 rounded">
+                      <Badge variant="outline" className="text-xs">
+                        {clause.itemNumber}
+                      </Badge>
+                      <span className="flex-1 truncate">{clause.subtitle}</span>
+                      {clause.childrenCount > 0 && (
+                        <Badge variant="destructive" className="text-xs">
+                          하위 {clause.childrenCount}개
+                        </Badge>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 하위 조항 경고 */}
+              {hasChildrenWarning && (
+                <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+                  <div className="flex items-center gap-2 text-destructive text-sm font-medium mb-2">
+                    <AlertTriangle className="h-4 w-4" />
+                    중요: 하위 조항 포함 삭제
+                  </div>
+                  <div className="space-y-1 text-sm text-destructive/80">
+                    <p>하위 조항이 있는 조항을 삭제하면 모든 하위 조항도 함께 삭제됩니다.</p>
+                    <p className="font-medium">
+                      총 삭제될 조항: {gtcClauses.length + totalChildrenCount}개
+                      <span className="text-xs ml-1">
+                        (선택한 {gtcClauses.length}개 + 하위 {totalChildrenCount}개)
+                      </span>
+                    </p>
+                  </div>
+                  <div className="mt-2 text-xs text-destructive/70">
+                    영향받는 조항: {clausesWithChildren.map(c => c.itemNumber).join(', ')}
+                  </div>
+                </div>
+              )}
+
+              <div className="p-2 bg-amber-50 border border-amber-200 rounded text-xs text-amber-800">
+                ⚠️ <strong>실제 삭제</strong>: 데이터베이스에서 완전히 제거되며 복구할 수 없습니다.
+              </div>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeletePending}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onDelete}
+            disabled={isDeletePending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isDeletePending && (
+              <Loader
+                className="mr-2 size-4 animate-spin"
+                aria-hidden="true"
+              />
+            )}
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete Permanently
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx b/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx
new file mode 100644
index 00000000..cb5ac81d
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/duplicate-gtc-clause-dialog.tsx
@@ -0,0 +1,372 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import { Loader, Copy, Info } from "lucide-react"
+import { toast } from "sonner"
+
+import { createGtcClauseSchema, type CreateGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { createGtcClause } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+
+interface DuplicateGtcClauseDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  sourceClause: GtcClauseTreeView | null
+  onSuccess?: () => void
+}
+
+export function DuplicateGtcClauseDialog({ 
+  sourceClause, 
+  onSuccess,
+  ...props 
+}: DuplicateGtcClauseDialogProps) {
+  const [isCreatePending, startCreateTransition] = React.useTransition()
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+
+  const form = useForm<CreateGtcClauseSchema>({
+    resolver: zodResolver(createGtcClauseSchema),
+    defaultValues: {
+      documentId: 0,
+      parentId: null,
+      itemNumber: "",
+      category: "",
+      subtitle: "",
+      content: "",
+      sortOrder: 0,
+      // numberVariableName: "",
+      // subtitleVariableName: "",
+      // contentVariableName: "",
+      editReason: "",
+    },
+  })
+
+  // sourceClause가 변경될 때 폼 데이터 설정
+  React.useEffect(() => {
+    if (sourceClause) {
+      // 새로운 채번 생성 (원본에 "_copy" 추가)
+      const newItemNumber = `${sourceClause.itemNumber}_copy`
+      
+      form.reset({
+        documentId: sourceClause.documentId,
+        parentId: sourceClause.parentId,
+        itemNumber: newItemNumber,
+        category: sourceClause.category || "",
+        subtitle: `${sourceClause.subtitle} (복제)`,
+        content: sourceClause.content || "",
+        sortOrder:parseFloat(sourceClause.sortOrder) + 0.1, // 원본 바로 다음에 위치
+        // numberVariableName: "",
+        // subtitleVariableName: "",
+        // contentVariableName: "",
+        editReason: `조항 복제 (원본: ${sourceClause.itemNumber})`,
+      })
+
+      // 자동 변수명 생성
+      // generateVariableNames(newItemNumber, sourceClause.parentId)
+    }
+  }, [sourceClause, form])
+
+  // const generateVariableNames = (itemNumber: string, parentId: number | null) => {
+  //   if (!sourceClause) return
+    
+  //   let fullPath = itemNumber
+    
+  //   if (parentId && sourceClause.fullPath) {
+  //     const parentPath = sourceClause.fullPath.split('.').slice(0, -1).join('.')
+  //     if (parentPath) {
+  //       fullPath = `${parentPath}.${itemNumber}`
+  //     }
+  //   }
+    
+  //   const prefix = "CLAUSE_" + fullPath.replace(/\./g, "_")
+    
+  //   form.setValue("numberVariableName", `${prefix}_NUMBER`)
+  //   form.setValue("subtitleVariableName", `${prefix}_SUBTITLE`)
+  //   form.setValue("contentVariableName", `${prefix}_CONTENT`)
+  // }
+
+  async function onSubmit(data: CreateGtcClauseSchema) {
+    startCreateTransition(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      try {
+        const result = await createGtcClause({
+          ...data,
+          createdById: currentUserId
+        })
+        
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success("조항이 복제되었습니다.")
+        onSuccess?.()
+      } catch (error) {
+        toast.error("조항 복제 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+    }
+    props.onOpenChange?.(nextOpen)
+  }
+
+  if (!sourceClause) {
+    return null
+  }
+
+  return (
+    <Dialog {...props} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-2xl h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <Copy className="h-5 w-5" />
+            조항 복제
+          </DialogTitle>
+          <DialogDescription>
+            기존 조항을 복제하여 새로운 조항을 생성합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 원본 조항 정보 */}
+        <div className="p-3 bg-muted/50 rounded-lg text-sm flex-shrink-0">
+          <div className="flex items-center gap-2 mb-2">
+            <Info className="h-4 w-4 text-muted-foreground" />
+            <span className="font-medium">복제할 원본 조항</span>
+          </div>
+          <div className="space-y-1 text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">{sourceClause.itemNumber}</Badge>
+              <span>{sourceClause.subtitle}</span>
+            </div>
+            {sourceClause.category && (
+              <div>분류: {sourceClause.category}</div>
+            )}
+            {sourceClause.content && (
+              <div className="text-xs">
+                내용: {sourceClause.content.substring(0, 100)}
+                {sourceClause.content.length > 100 && "..."}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0">
+            <div className="flex-1 overflow-y-auto px-1">
+              <div className="space-y-4 py-4">
+                {/* 새 채번 */}
+                <FormField
+                  control={form.control}
+                  name="itemNumber"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>새 채번 *</FormLabel>
+                      <FormControl>
+                        <Input 
+                          placeholder="예: 1_copy, 1.1_v2, 2.3.1_new 등"
+                          {...field} 
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        복제된 조항의 새로운 번호입니다. 원본과 다른 번호를 사용해주세요.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* 분류 */}
+                <FormField
+                  control={form.control}
+                  name="category"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>분류</FormLabel>
+                      <FormControl>
+                        <Input 
+                          placeholder="분류를 수정하거나 그대로 두세요"
+                          {...field} 
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* 소제목 */}
+                <FormField
+                  control={form.control}
+                  name="subtitle"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>소제목 *</FormLabel>
+                      <FormControl>
+                        <Input 
+                          placeholder="소제목을 수정하세요"
+                          {...field} 
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        복제 시 "(복제)" 접미사가 자동으로 추가됩니다.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* 상세항목 */}
+                <FormField
+                  control={form.control}
+                  name="content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>상세항목</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="내용을 수정하거나 그대로 두세요"
+                          {...field}
+                          rows={6}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        원본 조항의 내용이 복사됩니다. 필요시 수정하세요.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* PDFTron 변수명 섹션 */}
+                {/* <div className="space-y-3 p-3 border rounded-lg">
+                  <div className="flex items-center gap-2">
+                    <Info className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">PDFTron 변수명 (자동 생성)</span>
+                  </div>
+                  
+                  <div className="grid grid-cols-1 gap-3">
+                    <FormField
+                      control={form.control}
+                      name="numberVariableName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>채번 변수명</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="subtitleVariableName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>소제목 변수명</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="contentVariableName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>상세항목 변수명</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  
+                  <div className="text-xs text-muted-foreground">
+                    새 채번을 기반으로 변수명이 자동 생성됩니다.
+                  </div>
+                </div> */}
+
+                {/* 편집 사유 */}
+                <FormField
+                  control={form.control}
+                  name="editReason"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>복제 사유</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder="조항 복제 사유를 입력하세요..."
+                          {...field}
+                          rows={2}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="flex-shrink-0 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => props.onOpenChange?.(false)}
+                disabled={isCreatePending}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isCreatePending}>
+                {isCreatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                <Copy className="mr-2 h-4 w-4" />
+                Duplicate
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/excel-import.tsx b/lib/basic-contract/gtc-vendor/excel-import.tsx
new file mode 100644
index 00000000..d8f435f7
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/excel-import.tsx
@@ -0,0 +1,340 @@
+import { ExcelColumnDef } from "@/lib/export"
+import ExcelJS from "exceljs"
+
+/**
+ * Excel 템플릿 다운로드 함수
+ */
+export async function downloadExcelTemplate(
+  columns: ExcelColumnDef[],
+  {
+    filename = "template",
+    includeExampleData = true,
+    useGroupHeader = true,
+  }: {
+    filename?: string
+    includeExampleData?: boolean
+    useGroupHeader?: boolean
+  } = {}
+): Promise<void> {
+  let sheetData: any[][]
+
+  if (useGroupHeader) {
+    // 2줄 헤더 생성
+    const row1: string[] = []
+    const row2: string[] = []
+
+    columns.forEach((col) => {
+      row1.push(col.group ?? "")
+      row2.push(col.header)
+    })
+
+    sheetData = [row1, row2]
+
+    // 예시 데이터 추가
+    if (includeExampleData) {
+      // 빈 행 3개 추가 (사용자가 데이터 입력할 공간)
+      for (let i = 0; i < 3; i++) {
+        const exampleRow = columns.map((col) => {
+          // 컬럼 타입에 따른 예시 데이터
+          if (col.id === "itemNumber") return i === 0 ? `1.${i + 1}` : i === 1 ? "2.1" : ""
+          if (col.id === "subtitle") return i === 0 ? "예시 조항 소제목" : i === 1 ? "하위 조항 예시" : ""
+          if (col.id === "content") return i === 0 ? "조항의 상세 내용을 입력합니다." : i === 1 ? "하위 조항의 내용" : ""
+          if (col.id === "category") return i === 0 ? "일반조항" : i === 1 ? "특별조항" : ""
+          if (col.id === "sortOrder") return i === 0 ? "10" : i === 1 ? "20" : ""
+          if (col.id === "parentId") return i === 1 ? "1" : ""
+          if (col.id === "isActive") return i === 0 ? "활성" : i === 1 ? "활성" : ""
+          if (col.id === "editReason") return i === 0 ? "신규 작성" : ""
+          return ""
+        })
+        sheetData.push(exampleRow)
+      }
+    }
+  } else {
+    // 1줄 헤더
+    const headerRow = columns.map((col) => col.header)
+    sheetData = [headerRow]
+
+    if (includeExampleData) {
+      // 예시 데이터 행 추가
+      const exampleRow = columns.map(() => "")
+      sheetData.push(exampleRow)
+    }
+  }
+
+  // ExcelJS로 워크북 생성
+  const workbook = new ExcelJS.Workbook()
+  const worksheet = workbook.addWorksheet("GTC조항템플릿")
+
+  // 데이터 추가
+  sheetData.forEach((arr, idx) => {
+    const row = worksheet.addRow(arr)
+
+    // 헤더 스타일 적용
+    if (useGroupHeader) {
+      if (idx < 2) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFE6F3FF" }, // 연한 파란색
+          }
+          cell.border = {
+            top: { style: "thin" },
+            left: { style: "thin" },
+            bottom: { style: "thin" },
+            right: { style: "thin" },
+          }
+        })
+      }
+    } else {
+      if (idx === 0) {
+        row.font = { bold: true }
+        row.alignment = { horizontal: "center" }
+        row.eachCell((cell) => {
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFE6F3FF" },
+          }
+        })
+      }
+    }
+
+    // 예시 데이터 행 스타일
+    if (includeExampleData && idx === (useGroupHeader ? 2 : 1)) {
+      row.eachCell((cell) => {
+        cell.fill = {
+          type: "pattern",
+          pattern: "solid",
+          fgColor: { argb: "FFFFEAA7" }, // 연한 노란색
+        }
+        cell.font = { italic: true, color: { argb: "FF666666" } }
+      })
+    }
+  })
+
+  // 그룹 헤더 병합
+  if (useGroupHeader) {
+    const groupRowIndex = 1
+    const groupRow = worksheet.getRow(groupRowIndex)
+    
+    let start = 1
+    let prevValue = groupRow.getCell(start).value
+
+    for (let c = 2; c <= columns.length; c++) {
+      const cellVal = groupRow.getCell(c).value
+      if (cellVal !== prevValue) {
+        if (prevValue && prevValue.toString().trim() !== "") {
+          worksheet.mergeCells(groupRowIndex, start, groupRowIndex, c - 1)
+        }
+        start = c
+        prevValue = cellVal
+      }
+    }
+
+    if (prevValue && prevValue.toString().trim() !== "") {
+      worksheet.mergeCells(groupRowIndex, start, groupRowIndex, columns.length)
+    }
+  }
+
+  // 컬럼 너비 자동 조정
+  columns.forEach((col, idx) => {
+    let width = Math.max(col.header.length + 5, 15)
+    
+    // 특정 컬럼은 더 넓게
+    if (col.id === "content" || col.id === "subtitle") {
+      width = 30
+    } else if (col.id === "itemNumber") {
+      width = 15
+    } else if (col.id === "editReason") {
+      width = 20
+    }
+    
+    worksheet.getColumn(idx + 1).width = width
+  })
+
+  // 사용 안내 시트 추가
+  const instructionSheet = workbook.addWorksheet("사용안내")
+  const instructions = [
+    ["GTC 조항 Excel 가져오기 사용 안내"],
+    [""],
+    ["1. 기본 규칙"],
+    ["   - 첫 번째 시트(GTC조항템플릿)에 데이터를 입력하세요"],
+    ["   - 헤더 행은 수정하지 마세요"],
+    ["   - 예시 데이터(노란색 행)는 삭제하고 실제 데이터를 입력하세요"],
+    [""],
+    ["2. 필수 입력 항목"],
+    ["   - 채번: 필수 입력 (예: 1.1, 2.3.1)"],
+    ["   - 소제목: 필수 입력"],
+    [""],
+    ["3. 선택 입력 항목"],
+    ["   - 상세항목: 조항의 구체적인 내용"],
+    ["   - 분류: 조항의 카테고리 (예: 일반조항, 특별조항)"],
+    ["   - 순서: 숫자 (기본값: 10, 20, 30...)"],
+    ["   - 상위 조항 ID: 계층 구조를 만들 때 사용"],
+    ["   - 활성 상태: '활성' 또는 '비활성' (기본값: 활성)"],
+    ["   - 편집 사유: 작성/수정 이유"],
+    [""],
+    ["4. 자동 처리 항목"],
+    ["   - ID, 생성일, 수정일: 시스템에서 자동 생성"],
+    ["   - 계층 깊이: 상위 조항 ID를 기반으로 자동 계산"],
+    ["   - 전체 경로: 시스템에서 자동 생성"],
+    [""],
+    ["5. 채번 규칙"],
+    ["   - 같은 부모 하에서 채번은 유일해야 합니다"],
+    ["   - 예: 상위 조항이 같으면 1.1, 1.2는 가능하지만 1.1이 중복되면 오류"],
+    [""],
+    ["6. 계층 구조 만들기"],
+    ["   - 상위 조항 ID: 기존 조항의 ID를 입력"],
+    ["   - 예: ID가 5인 조항 하위에 조항을 만들려면 상위 조항 ID에 5 입력"],
+    ["   - 최상위 조항은 상위 조항 ID를 비워두세요"],
+    [""],
+    ["7. 주의사항"],
+    ["   - 순서는 숫자로 입력하세요 (소수점 가능: 10, 15.5, 20)"],
+    ["   - 상위 조항 ID는 반드시 존재하는 조항의 ID여야 합니다"],
+    ["   - 파일 저장 시 .xlsx 형식으로 저장하세요"],
+  ]
+
+  instructions.forEach((instruction, idx) => {
+    const row = instructionSheet.addRow(instruction)
+    if (idx === 0) {
+      row.font = { bold: true, size: 14 }
+      row.alignment = { horizontal: "center" }
+    } else if (instruction[0]?.match(/^\d+\./)) {
+      row.font = { bold: true }
+    }
+  })
+
+  instructionSheet.getColumn(1).width = 80
+
+  // 파일 다운로드
+  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}.xlsx`
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Excel 파일에서 데이터 파싱
+ */
+export async function parseExcelFile<TData>(
+  file: File,
+  columns: ExcelColumnDef[],
+  {
+    hasGroupHeader = true,
+    sheetName = "GTC조항템플릿",
+  }: {
+    hasGroupHeader?: boolean
+    sheetName?: string
+  } = {}
+): Promise<{
+  data: Partial<TData>[]
+  errors: string[]
+}> {
+  const errors: string[] = []
+  const data: Partial<TData>[] = []
+
+  try {
+    const arrayBuffer = await file.arrayBuffer()
+    const workbook = new ExcelJS.Workbook()
+    await workbook.xlsx.load(arrayBuffer)
+
+    const worksheet = workbook.getWorksheet(sheetName) || workbook.worksheets[0]
+    
+    if (!worksheet) {
+      errors.push("워크시트를 찾을 수 없습니다.")
+      return { data, errors }
+    }
+
+    // 헤더 행 인덱스 결정
+    const headerRowIndex = hasGroupHeader ? 2 : 1
+    const dataStartRowIndex = headerRowIndex + 1
+
+    // 헤더 검증
+    const headerRow = worksheet.getRow(headerRowIndex)
+    const expectedHeaders = columns.map(col => col.header)
+    
+    for (let i = 0; i < expectedHeaders.length; i++) {
+      const cellValue = headerRow.getCell(i + 1).value?.toString() || ""
+      if (cellValue !== expectedHeaders[i]) {
+        errors.push(`헤더가 일치하지 않습니다. 예상: "${expectedHeaders[i]}", 실제: "${cellValue}"`)
+      }
+    }
+
+    if (errors.length > 0) {
+      return { data, errors }
+    }
+
+    // 데이터 파싱
+    let rowIndex = dataStartRowIndex
+    while (rowIndex <= worksheet.actualRowCount) {
+      const row = worksheet.getRow(rowIndex)
+      
+      // 빈 행 체크 (모든 셀이 비어있으면 스킵)
+      const isEmpty = columns.every((col, colIndex) => {
+        const cellValue = row.getCell(colIndex + 1).value
+        return !cellValue || cellValue.toString().trim() === ""
+      })
+
+      if (isEmpty) {
+        rowIndex++
+        continue
+      }
+
+      const rowData: Partial<TData> = {}
+      let hasError = false
+
+      columns.forEach((col, colIndex) => {
+        const cellValue = row.getCell(colIndex + 1).value
+        let processedValue: any = cellValue
+
+        // 데이터 타입별 처리
+        if (cellValue !== null && cellValue !== undefined) {
+          const strValue = cellValue.toString().trim()
+          
+          // 특별한 처리가 필요한 컬럼들
+          if (col.id === "isActive") {
+            processedValue = strValue === "활성"
+          } else if (col.id === "sortOrder") {
+            const numValue = parseFloat(strValue)
+            processedValue = isNaN(numValue) ? null : numValue
+          } else if (col.id === "parentId") {
+            const numValue = parseInt(strValue)
+            processedValue = isNaN(numValue) ? null : numValue
+          } else {
+            processedValue = strValue
+          }
+        }
+
+        // 필수 필드 검증
+        if ((col.id === "itemNumber" || col.id === "subtitle") && (!processedValue || processedValue === "")) {
+          errors.push(`${rowIndex}행: ${col.header}은(는) 필수 입력 항목입니다.`)
+          hasError = true
+        }
+
+        if (processedValue !== null && processedValue !== undefined && processedValue !== "") {
+          (rowData as any)[col.id] = processedValue
+        }
+      })
+
+      if (!hasError) {
+        data.push(rowData)
+      }
+
+      rowIndex++
+    }
+
+  } catch (error) {
+    errors.push(`파일 파싱 중 오류가 발생했습니다: ${error instanceof Error ? error.message : "알 수 없는 오류"}`)
+  }
+
+  return { data, errors }
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx b/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx
new file mode 100644
index 00000000..ef4ed9f9
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/generate-variable-names-dialog.tsx
@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import { Loader, Wand2, Info, Eye } from "lucide-react"
+import { toast } from "sonner"
+
+import { generateVariableNamesSchema, type GenerateVariableNamesSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { generateVariableNames, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+
+interface GenerateVariableNamesDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  documentId: number
+  document: any
+}
+
+export function GenerateVariableNamesDialog({ 
+  documentId, 
+  document,
+  ...props 
+}: GenerateVariableNamesDialogProps) {
+  const [isGenerating, startGenerating] = React.useTransition()
+  const [clauses, setClauses] = React.useState<GtcClauseTreeView[]>([])
+  const [previewClauses, setPreviewClauses] = React.useState<GtcClauseTreeView[]>([])
+  const [showPreview, setShowPreview] = React.useState(false)
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  React.useEffect(() => {
+    if (props.open && documentId) {
+      loadClauses()
+    }
+  }, [props.open, documentId])
+
+  const loadClauses = async () => {
+    try {
+      const tree = await getGtcClausesTree(documentId)
+      const flatClauses = flattenTree(tree)
+      setClauses(flatClauses)
+    } catch (error) {
+      console.error("Error loading clauses:", error)
+    }
+  }
+
+  const form = useForm<GenerateVariableNamesSchema>({
+    resolver: zodResolver(generateVariableNamesSchema),
+    defaultValues: {
+      documentId,
+      prefix: "CLAUSE",
+      includeVendorCode: false,
+      vendorCode: "",
+    },
+  })
+
+  const watchedPrefix = form.watch("prefix")
+  const watchedIncludeVendorCode = form.watch("includeVendorCode")
+  const watchedVendorCode = form.watch("vendorCode")
+
+  // 미리보기 생성
+  React.useEffect(() => {
+    if (clauses.length > 0) {
+      generatePreview()
+    }
+  }, [clauses, watchedPrefix, watchedIncludeVendorCode, watchedVendorCode])
+
+  const generatePreview = () => {
+    const basePrefix = watchedIncludeVendorCode && watchedVendorCode
+      ? `${watchedVendorCode}_${watchedPrefix}`
+      : watchedPrefix
+
+      console.log(basePrefix,"basePrefix")
+
+    const updated = clauses.slice(0, 5).map(clause => {
+      console.log(clause.fullPath,"clause.fullPath")
+
+      const pathPrefix = clause.fullPath?.replace(/\./g, "_") || clause.itemNumber.replace(/\./g, "_")
+      const varPrefix = `${basePrefix}_${pathPrefix}`
+
+      return {
+        ...clause,
+        previewNumberVar: `${varPrefix}_NUMBER`,
+        previewSubtitleVar: `${varPrefix}_SUBTITLE`,
+        previewContentVar: `${varPrefix}_CONTENT`,
+      }
+    })
+
+    setPreviewClauses(updated as any)
+  }
+
+  async function onSubmit(data: GenerateVariableNamesSchema) {
+    startGenerating(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      try {
+        const result = await generateVariableNames({
+          ...data,
+          updatedById: currentUserId
+        })
+        
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success("PDFTron 변수명이 생성되었습니다.")
+      } catch (error) {
+        toast.error("변수명 생성 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+      setShowPreview(false)
+    }
+    props.onOpenChange?.(nextOpen)
+  }
+
+  const clausesWithoutVariables = clauses.filter(clause => !clause.hasAllVariableNames)
+  const clausesWithVariables = clauses.filter(clause => clause.hasAllVariableNames)
+
+  return (
+    <Dialog {...props} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Wand2 className="h-5 w-5" />
+            PDFTron 변수명 자동 생성
+          </DialogTitle>
+          <DialogDescription>
+            문서의 모든 조항에 대해 PDFTron 변수명을 자동으로 생성합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 문서 및 조항 현황 */}
+        <div className="space-y-4 p-4 bg-muted/50 rounded-lg">
+          <div className="flex items-center gap-2">
+            <Info className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">문서 및 조항 현황</span>
+          </div>
+          
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">문서 타입</div>
+              <Badge variant={document?.type === "standard" ? "default" : "secondary"}>
+                {document?.type === "standard" ? "표준" : "프로젝트"}
+              </Badge>
+            </div>
+            
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">총 조항 수</div>
+              <div>{clauses.length}개</div>
+            </div>
+            
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">변수명 설정 완료</div>
+              <Badge variant="default">{clausesWithVariables.length}개</Badge>
+            </div>
+            
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">변수명 미설정</div>
+              <Badge variant="destructive">{clausesWithoutVariables.length}개</Badge>
+            </div>
+          </div>
+
+          {document?.project && (
+            <div className="text-sm">
+              <span className="font-medium text-muted-foreground">프로젝트: </span>
+              {document.project.name} ({document.project.code})
+            </div>
+          )}
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="space-y-4">
+              {/* 기본 접두사 */}
+              <FormField
+                control={form.control}
+                name="prefix"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>기본 접두사</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="CLAUSE"
+                        {...field} 
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      모든 변수명의 시작에 사용될 접두사입니다.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 벤더 코드 포함 여부 */}
+              <FormField
+                control={form.control}
+                name="includeVendorCode"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">벤더 코드 포함</FormLabel>
+                      <FormDescription>
+                        변수명에 벤더 코드를 포함시킵니다. (벤더별 GTC 용)
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              {/* 벤더 코드 입력 */}
+              {watchedIncludeVendorCode && (
+                <FormField
+                  control={form.control}
+                  name="vendorCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>벤더 코드</FormLabel>
+                      <FormControl>
+                        <Input 
+                          placeholder="예: VENDOR_A, ABC_CORP 등"
+                          {...field} 
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        변수명에 포함될 벤더 식별 코드입니다.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                )}
+              />
+
+              {/* 미리보기 토글 */}
+              <div className="flex items-center justify-between">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowPreview(!showPreview)}
+                >
+                  <Eye className="mr-2 h-4 w-4" />
+                  {showPreview ? "미리보기 숨기기" : "미리보기 보기"}
+                </Button>
+              </div>
+
+              {/* 미리보기 */}
+              {showPreview && (
+                <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
+                  <div className="text-sm font-medium">변수명 미리보기 (상위 5개 조항)</div>
+                  <div className="space-y-2 max-h-64 overflow-y-auto">
+                    {previewClauses.map((clause: any) => (
+                      <div key={clause.id} className="p-2 bg-background rounded border text-xs">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Badge variant="outline">{clause.itemNumber}</Badge>
+                          <span className="font-medium truncate">{clause.subtitle}</span>
+                        </div>
+                        <div className="space-y-1 text-muted-foreground">
+                          <div>채번: <code className="text-foreground">{clause.previewNumberVar}</code></div>
+                          <div>소제목: <code className="text-foreground">{clause.previewSubtitleVar}</code></div>
+                          <div>상세항목: <code className="text-foreground">{clause.previewContentVar}</code></div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <DialogFooter className="mt-6">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => props.onOpenChange?.(false)}
+                disabled={isGenerating}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isGenerating}>
+                {isGenerating && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                Generate Variables
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// 트리를 평면 배열로 변환하는 유틸리티 함수
+function flattenTree(tree: any[]): any[] {
+  const result: any[] = []
+  
+  function traverse(nodes: any[]) {
+    for (const node of nodes) {
+      result.push(node)
+      if (node.children && node.children.length > 0) {
+        traverse(node.children)
+      }
+    }
+  }
+  
+  traverse(tree)
+  return result
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx
new file mode 100644
index 00000000..b8f92fab
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-columns.tsx
@@ -0,0 +1,409 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, Edit, Trash2, Plus, Copy } from "lucide-react"
+import { cn, compareItemNumber, 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,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { toast } from "sonner"
+import { useSession } from "next-auth/react"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<GtcClauseTreeView> | null>>
+  documentId: number
+  hasVendorInfo?: boolean
+
+}
+
+export function getColumns({ setRowAction, documentId, hasVendorInfo }: GetColumnsProps): ColumnDef<any>[] {
+  // 1) select
+  const selectColumn: ColumnDef<GtcClauseTreeView> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(v) => row.toggleSelected(!!v)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // 2) 조항 정보
+  const clauseInfoColumns: ColumnDef<GtcClauseTreeView>[] = [
+    {
+      accessorKey: "itemNumber",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="채번" />,
+      cell: ({ row }) => {
+        const itemNumber = row.getValue("itemNumber") as string
+        const depth = row.original.depth
+        const childrenCount = row.original.childrenCount
+        const isModified = row.original.vendorInfo?.isNumberModified
+
+        return (
+          <div className="flex items-center gap-2">
+            <div style={{ marginLeft: `${depth * 20}px` }} className="flex items-center gap-1">
+              <span
+                className={cn(
+                  "font-mono text-sm font-medium",
+                  isModified && "text-red-500 dark:text-red-400"
+                )}
+              >
+                {itemNumber}
+              </span>
+              {childrenCount > 0 && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Badge variant="outline" className="h-5 px-1 text-xs">
+                        {childrenCount}
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{childrenCount}개의 하위 조항</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </div>
+          </div>
+        )
+      },
+      size: 100,
+      enableResizing: true,
+      sortingFn: (rowA, rowB, colId) =>
+        compareItemNumber(rowA.getValue<string>(colId), rowB.getValue<string>(colId)),
+      meta: { excelHeader: "채번" },
+    },
+    {
+      accessorKey: "category",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="분류" />,
+      cell: ({ row }) => {
+        const category = row.getValue("category") as string
+        const isModified = row.original.vendorInfo?.isCategoryModified
+        return category ? (
+          <Badge
+            variant="secondary"
+            className={cn("text-xs", isModified && "bg-red-100 text-red-600")}
+          >
+            {category}
+          </Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        )
+      },
+      size: 100,
+      enableResizing: true,
+      meta: { excelHeader: "분류" },
+    },
+    {
+      accessorKey: "subtitle",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="소제목" />,
+      cell: ({ row }) => {
+        const subtitle = row.getValue("subtitle") as string
+        const depth = row.original.depth
+        const isModified = row.original.vendorInfo?.isSubtitleModified
+
+        return (
+          <div className="flex flex-col min-w-0">
+            <span
+              className={cn(
+                "font-medium truncate",
+                depth === 0 && "text-base",
+                depth === 1 && "text-sm",
+                depth >= 2 && "text-sm text-muted-foreground",
+                isModified && "text-red-500 dark:text-red-400"
+              )}
+              title={subtitle}
+            >
+              {subtitle}
+            </span>
+          </div>
+        )
+      },
+      size: 150,
+      enableResizing: true,
+      meta: { excelHeader: "소제목" },
+    },
+    {
+      accessorKey: "content",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="상세항목" />,
+      cell: ({ row }) => {
+
+        const modifiedContent = row.original.vendorInfo?.modifiedContent
+
+        const content = modifiedContent ? modifiedContent : row.getValue("content") as string | null
+        if (!content) {
+          return (
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">그룹핑 조항</Badge>
+              <span className="text-xs text-muted-foreground">상세내용 없음</span>
+            </div>
+          )
+        }
+        const truncated = content.length > 100 ? `${content.substring(0, 100)}...` : content
+        return (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="">
+                  {/* <p className="text-sm line-clamp-2 text-muted-foreground">{content}</p> */}
+                  <p
+                    className={cn(
+                      "text-sm line-clamp-2",
+                      modifiedContent ? "text-red-500 dark:text-red-400" : "text-muted-foreground"
+                    )}
+                  >
+                    {content}
+                  </p>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-sm">
+                <p className="whitespace-pre-wrap">{content}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )
+      },
+      size: 200,
+      maxSize: 500,
+      enableResizing: true,
+      meta: { excelHeader: "상세항목" },
+    },
+  ]
+
+  // 3) 등록/수정 정보
+  const auditColumns: ColumnDef<GtcClauseTreeView>[] = [
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="작성일" />,
+      cell: ({ row }) => {
+        const date = row.getValue("createdAt") as Date
+        return date ? formatDate(date, "KR") : "-"
+      },
+      size: 120,
+      enableResizing: true,
+      meta: { excelHeader: "작성일" },
+    },
+    {
+      accessorKey: "createdByName",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="작성자" />,
+      cell: ({ row }) => {
+        const v = row.getValue("createdByName") as string
+        return v ? <span className="text-sm">{v}</span> : <span className="text-muted-foreground">-</span>
+      },
+      size: 80,
+      enableResizing: true,
+      meta: { excelHeader: "작성자" },
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정일" />,
+      cell: ({ row }) => {
+        const date = row.getValue("updatedAt") as Date
+        return <span className="text-sm">{date ? formatDate(date, "KR") : "-"}</span>
+      },
+      size: 120,
+      enableResizing: true,
+      meta: { excelHeader: "수정일" },
+    },
+    {
+      accessorKey: "updatedByName",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정자" />,
+      cell: ({ row }) => {
+        const v = row.getValue("updatedByName") as string
+        return v ? <span className="text-sm">{v}</span> : <span className="text-muted-foreground">-</span>
+      },
+      size: 80,
+      enableResizing: true,
+      meta: { excelHeader: "수정자" },
+    },
+  ]
+
+  // 벤더 관련 칼럼 추가
+  const vendorColumns: ColumnDef<any>[] = hasVendorInfo ? [
+    {
+      id: "vendorReviewStatus",
+      accessorFn: (row) => row.vendorInfo?.reviewStatus,
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="협의 상태" />,
+      cell: ({ row }) => {
+        const status = row.original.vendorInfo?.reviewStatus
+        if (!status) return <span className="text-muted-foreground">-</span>
+
+        const statusMap = {
+          draft: { label: "초안", variant: "secondary" },
+          pending: { label: "대기", variant: "outline" },
+          reviewing: { label: "협의중", variant: "default" },
+          approved: { label: "승인", variant: "success" },
+          rejected: { label: "거부", variant: "destructive" },
+          revised: { label: "수정", variant: "warning" },
+        }
+
+        const config = statusMap[status as keyof typeof statusMap]
+        return <Badge variant={config.variant as any}>{config.label}</Badge>
+      },
+      size: 80,
+    },
+    {
+      id: "vendorComment",
+      accessorFn: (row) => row.vendorInfo?.latestComment,
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="협의 코멘트" />,
+      cell: ({ row }) => {
+        const comment = row.original.vendorInfo?.latestComment
+        const history = row.original.vendorInfo?.negotiationHistory
+
+        if (!comment) return <span className="text-muted-foreground">-</span>
+
+        return (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-1">
+                  <span className="text-sm truncate max-w-[200px]">{comment}</span>
+                  {history && history.length > 1 && (
+                    <Badge variant="outline" className="h-5 px-1 text-xs">
+                      {history.length}
+                    </Badge>
+                  )}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-md">
+                <div className="space-y-2">
+                  {history?.slice(0, 3).map((h: any, idx: number) => (
+                    <div key={idx} className="border-b last:border-0 pb-2 last:pb-0">
+                      <p className="text-xs text-muted-foreground">
+                        {h.actorName} • {formatDate(h.createdAt, "KR")}
+                      </p>
+                      <p className="text-sm">{h.comment}</p>
+                    </div>
+                  ))}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )
+      },
+      size: 200,
+    },
+    {
+      id: "vendorModifications",
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정 항목" />,
+      cell: ({ row }) => {
+        const info = row.original.vendorInfo
+        if (!info) return <span className="text-muted-foreground">-</span>
+
+        const mods = []
+        if (info.isNumberModified) mods.push("채번")
+        if (info.isCategoryModified) mods.push("분류")
+        if (info.isSubtitleModified) mods.push("소제목")
+        if (info.isContentModified) mods.push("내용")
+
+        if (mods.length === 0) return <span className="text-muted-foreground">없음</span>
+
+        return (
+          <div className="flex flex-wrap gap-1">
+            {mods.map((mod) => (
+              <Badge key={mod} variant="outline" className="text-xs">
+                {mod}
+              </Badge>
+            ))}
+          </div>
+        )
+      },
+      size: 150,
+    },
+  ] : []
+
+  // 4) actions
+  const actionsColumn: ColumnDef<GtcClauseTreeView> = {
+    id: "actions",
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      const { data: session } = useSession()
+      const gtcClause = row.original
+      const currentUserId = React.useMemo(
+        () => (session?.user?.id ? Number(session.user.id) : null),
+        [session],
+      )
+
+      const handleEdit = () => setRowAction({ row, type: "update" })
+      const handleDelete = () => setRowAction({ row, type: "delete" })
+      const handleAddSubClause = () => setRowAction({ row, type: "addSubClause" })
+      const handleDuplicate = () => setRowAction({ row, type: "duplicate" })
+
+      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-48">
+            <DropdownMenuItem onSelect={handleEdit}>
+              <Edit className="mr-2 h-4 w-4" />
+              협의 확인 및 조항 수정
+            </DropdownMenuItem>
+            {/* <DropdownMenuItem onSelect={handleAddSubClause}>
+              <Plus className="mr-2 h-4 w-4" />
+              하위 조항 추가
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={handleDuplicate}>
+              <Copy className="mr-2 h-4 w-4" />
+              복제
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={handleDelete} className="text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              삭제
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem> */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+    size: 40,
+    maxSize: 40,
+  }
+
+  // 🔹 그룹 헤더 제거: 평탄화된 컬럼 배열 반환
+  return [
+    selectColumn,
+    ...clauseInfoColumns,
+    ...vendorColumns, // 벤더 칼럼 추가
+    ...auditColumns,
+    actionsColumn,
+  ]
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx
new file mode 100644
index 00000000..5b701df6
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-floating-bar.tsx
@@ -0,0 +1,239 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { 
+  Edit, 
+  Trash2, 
+  ArrowUpDown, 
+  Download, 
+  Copy,
+  Wand2,
+  X 
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog"
+
+interface GtcClausesTableFloatingBarProps {
+  table: Table<GtcClauseTreeView>
+}
+
+export function GtcClausesTableFloatingBar({ table }: GtcClausesTableFloatingBarProps) {
+  const selectedRows = table.getSelectedRowModel().rows
+  const selectedCount = selectedRows.length
+
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+
+  if (selectedCount === 0) return null
+
+  const selectedClauses = selectedRows.map(row => row.original)
+
+  const handleClearSelection = () => {
+    table.toggleAllRowsSelected(false)
+  }
+
+  const handleBulkEdit = () => {
+    console.log("Bulk edit:", selectedClauses)
+  }
+
+  const handleReorder = () => {
+    console.log("Reorder:", selectedClauses)
+  }
+
+  const handleExport = () => {
+    console.log("Export:", selectedClauses)
+  }
+
+  const handleDuplicate = () => {
+    console.log("Duplicate:", selectedClauses)
+  }
+
+  const handleGenerateVariables = () => {
+    console.log("Generate variables:", selectedClauses)
+  }
+
+  const canReorder = selectedClauses.every(clause => 
+    clause.parentId === selectedClauses[0].parentId
+  )
+
+  const hasVariablesMissing = selectedClauses.some(clause => 
+    !clause.hasAllVariableNames
+  )
+
+  return (
+    <div className="fixed bottom-4 left-1/2 z-50 w-fit -translate-x-1/2">
+      <div className="w-fit rounded-lg border bg-card p-2 shadow-2xl animate-in fade-in-0 slide-in-from-bottom-2">
+        <div className="flex items-center gap-2">
+          {/* 선택된 항목 수 */}
+          <div className="flex items-center gap-2 px-2">
+            <span className="text-sm font-medium">
+              {selectedCount}개 선택됨
+            </span>
+          </div>
+
+          <Separator orientation="vertical" className="h-6" />
+
+          {/* 액션 버튼들 */}
+          <div className="flex items-center gap-1">
+            {/* 일괄 수정 */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleBulkEdit}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>선택한 조항들을 일괄 수정</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {/* 순서 변경 (같은 부모의 조항들만) */}
+            {canReorder && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleReorder}
+                    >
+                      <ArrowUpDown className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>선택한 조항들의 순서 변경</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+            {/* 복제 */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleDuplicate}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>선택한 조항들을 복제</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {/* 변수명 생성 (변수가 없는 조항이 있을 때만) */}
+            {hasVariablesMissing && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleGenerateVariables}
+                    >
+                      <Wand2 className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>선택한 조항들의 PDFTron 변수명 생성</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+            {/* 내보내기 */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleExport}
+                  >
+                    <Download className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>선택한 조항들을 Excel로 내보내기</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+
+          <Separator orientation="vertical" className="h-6" />
+
+          {/* 삭제 버튼 */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowDeleteDialog(true)}
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>선택한 조항들을 삭제</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <Separator orientation="vertical" className="h-6" />
+
+          {/* 선택 해제 버튼 */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleClearSelection}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>선택 해제</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+
+      {/* 삭제 다이얼로그 */}
+      <DeleteGtcClausesDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        gtcClauses={selectedClauses}
+        showTrigger={false}
+        onSuccess={() => {
+          table.toggleAllRowsSelected(false)
+          setShowDeleteDialog(false)
+        }}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx b/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx
new file mode 100644
index 00000000..3a0fbdb6
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/gtc-clauses-table-toolbar-actions.tsx
@@ -0,0 +1,350 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import {
+  Download,
+  Upload,
+  Settings2,
+  ArrowUpDown,
+  Edit,
+  Eye,
+  FileText,
+  Wand2
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { CreateVendorGtcClauseDialog } from "./create-gtc-clause-dialog"
+import { PreviewDocumentDialog } from "./preview-document-dialog"
+import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog"
+import { exportTableToExcel } from "@/lib/export"
+import { exportFullDataToExcel, type ExcelColumnDef } from "@/lib/export"
+import { getAllGtcClausesForExport, importGtcClausesFromExcel } from "@/lib/gtc-contract/service"
+import { ImportExcelDialog } from "./import-excel-dialog"
+import { toast } from "@/hooks/use-toast"
+
+interface GtcClausesTableToolbarActionsProps {
+  table: Table<GtcClauseTreeView>
+  documentId: number
+  document: any
+  currentUserId?: number // 현재 사용자 ID 추가
+}
+
+// GTC 조항을 위한 Excel 컬럼 정의 (실용적으로 간소화)
+const gtcClauseExcelColumns: ExcelColumnDef[] = [
+  {
+    id: "itemNumber",
+    header: "채번",
+    accessor: "itemNumber",
+    group: "필수 정보"
+  },
+  {
+    id: "subtitle",
+    header: "소제목",
+    accessor: "subtitle",
+    group: "필수 정보"
+  },
+  {
+    id: "content",
+    header: "상세항목",
+    accessor: "content",
+    group: "기본 정보"
+  },
+  {
+    id: "category",
+    header: "분류",
+    accessor: "category",
+    group: "기본 정보"
+  },
+  {
+    id: "sortOrder",
+    header: "순서",
+    accessor: "sortOrder",
+    group: "순서"
+  },
+  {
+    id: "parentId",
+    header: "상위 조항 ID",
+    accessor: "parentId",
+    group: "계층 구조"
+  },
+  {
+    id: "isActive",
+    header: "활성 상태",
+    accessor: (row) => row.isActive ? "활성" : "비활성",
+    group: "상태"
+  },
+  {
+    id: "editReason",
+    header: "편집 사유",
+    accessor: "editReason",
+    group: "추가 정보"
+  }
+]
+
+export function GtcClausesTableToolbarActions({
+  table,
+  documentId,
+  document,
+  currentUserId = 1, // 기본값 설정 (실제로는 auth에서 가져와야 함)
+}: GtcClausesTableToolbarActionsProps) {
+  const [showCreateDialog, setShowCreateDialog] = React.useState(false)
+  const [showReorderDialog, setShowReorderDialog] = React.useState(false)
+  const [showBulkUpdateDialog, setShowBulkUpdateDialog] = React.useState(false)
+  const [showGenerateVariablesDialog, setShowGenerateVariablesDialog] = React.useState(false)
+  const [showPreviewDialog, setShowPreviewDialog] = React.useState(false)
+  const [isExporting, setIsExporting] = React.useState(false)
+
+  const selectedRows = table.getSelectedRowModel().rows
+  const selectedCount = selectedRows.length
+
+  // 테이블의 모든 데이터 가져오기 (현재 페이지만)
+  const allClauses = table.getRowModel().rows.map(row => row.original)
+
+  const transformClausesForPreview = (clauses: GtcClauseTreeView[]) => {
+    return clauses.map(clause => {
+      // vendorInfo가 있고 수정된 값이 있는 경우 적용
+      if (clause.vendorInfo) {
+        const { vendorInfo } = clause;
+        return {
+          ...clause,
+          // null이 아닌 수정값이 있으면 해당 값으로 대체
+          category: vendorInfo.modifiedCategory ?? clause.category,
+          content: vendorInfo.modifiedContent ?? clause.content,
+          itemNumber: vendorInfo.modifiedItemNumber ?? clause.itemNumber,
+          subtitle: vendorInfo.modifiedSubtitle ?? clause.subtitle,
+        };
+      }
+      // vendorInfo가 없으면 원본 그대로 반환
+      return clause;
+    });
+  };
+
+  // 컴포넌트 내에서 변환된 데이터 생성
+  const previewClauses = React.useMemo(
+    () => transformClausesForPreview(allClauses),
+    [allClauses]
+  );
+
+  console.log(allClauses, "allClauses")
+
+  // 현재 페이지 데이터만 Excel로 내보내기
+  const handleExportCurrentPageToExcel = () => {
+    exportTableToExcel(table, {
+      filename: `gtc-clauses-page-${new Date().toISOString().split('T')[0]}`,
+      excludeColumns: ["select", "actions"],
+    })
+  }
+
+  // 전체 데이터를 Excel로 내보내기
+  const handleExportAllToExcel = async () => {
+    try {
+      setIsExporting(true)
+
+      // 서버에서 전체 데이터 가져오기
+      const allData = await getAllGtcClausesForExport(documentId)
+
+      // 전체 데이터를 Excel로 내보내기
+      await exportFullDataToExcel(
+        allData,
+        gtcClauseExcelColumns,
+        {
+          filename: `gtc-clauses-all-${new Date().toISOString().split('T')[0]}`,
+          useGroupHeader: true
+        }
+      )
+
+      toast({
+        title: "내보내기 완료",
+        description: `총 ${allData.length}개의 조항이 Excel 파일로 내보내졌습니다.`,
+      })
+    } catch (error) {
+      console.error("Excel export failed:", error)
+      toast({
+        title: "내보내기 실패",
+        description: "Excel 파일 내보내기 중 오류가 발생했습니다.",
+        variant: "destructive"
+      })
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  // Excel 데이터 가져오기 처리
+  const handleImportExcelData = async (data: Partial<GtcClauseTreeView>[]) => {
+    try {
+      const result = await importGtcClausesFromExcel(documentId, data, currentUserId)
+
+      if (result.success) {
+        toast({
+          title: "가져오기 성공",
+          description: `${result.importedCount}개의 조항이 성공적으로 가져와졌습니다.`,
+        })
+
+        // 테이블 새로고침
+        handleRefreshTable()
+      } else {
+        const errorMessage = result.errors.length > 0
+          ? `오류: ${result.errors.slice(0, 3).join(', ')}${result.errors.length > 3 ? '...' : ''}`
+          : "알 수 없는 오류가 발생했습니다."
+
+        toast({
+          title: "가져오기 실패",
+          description: errorMessage,
+          variant: "destructive"
+        })
+
+        // 오류가 있어도 일부는 성공했을 수 있음
+        if (result.importedCount > 0) {
+          handleRefreshTable()
+        }
+
+        throw new Error("Import failed with errors")
+      }
+    } catch (error) {
+      console.error("Excel import failed:", error)
+      throw error // ImportExcelDialog에서 처리하도록 다시 throw
+    }
+  }
+
+  const handlePreviewDocument = () => {
+    setShowPreviewDialog(true)
+  }
+
+  const handleGenerateDocument = () => {
+    // 최종 문서 생성
+    console.log("Generate final document")
+  }
+
+  const handleReorderClauses = () => {
+    setShowReorderDialog(true)
+  }
+
+  const handleBulkUpdate = () => {
+    setShowBulkUpdateDialog(true)
+  }
+
+  const handleGenerateVariables = () => {
+    setShowGenerateVariablesDialog(true)
+  }
+
+  const handleRefreshTable = () => {
+    // 테이블 새로고침 로직
+    console.log("Refresh table after creation")
+    // table.reset() 또는 상위 컴포넌트의 refetch 함수 호출
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {/* 조항 추가 버튼 */}
+        <CreateVendorGtcClauseDialog
+          documentId={documentId}
+          document={document}
+          onSuccess={handleRefreshTable}
+        />
+
+        {/* 선택된 항목이 있을 때 표시되는 액션들 */}
+        {selectedCount > 0 && (
+          <>
+            <DeleteGtcClausesDialog
+              gtcClauses={allClauses}
+              onSuccess={() => table.toggleAllRowsSelected(false)}
+            />
+          </>
+        )}
+
+        {/* 관리 도구 드롭다운 */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" disabled={isExporting}>
+              <Settings2 className="mr-2 h-4 w-4" />
+              관리 도구
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-64">
+            <DropdownMenuItem onClick={handleExportCurrentPageToExcel}>
+              <Download className="mr-2 h-4 w-4" />
+              현재 페이지 Excel로 내보내기
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              onClick={handleExportAllToExcel}
+              disabled={isExporting}
+            >
+              <Download className="mr-2 h-4 w-4" />
+              {isExporting ? "내보내는 중..." : "전체 데이터 Excel로 내보내기"}
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            {/* <ImportExcelDialog
+              documentId={documentId}
+              columns={gtcClauseExcelColumns}
+              onSuccess={handleRefreshTable}
+              onImport={handleImportExcelData}
+              trigger={
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                  <Upload className="mr-2 h-4 w-4" />
+                  Excel에서 가져오기
+                </DropdownMenuItem>
+              }
+            /> */}
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem onClick={handlePreviewDocument}>
+              <Eye className="mr-2 h-4 w-4" />
+              문서 미리보기
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* 조건부로 표시되는 다이얼로그들 */}
+        {showReorderDialog && (
+          <div>
+            {/* ReorderGtcClausesDialog 컴포넌트가 여기에 올 예정 */}
+          </div>
+        )}
+
+        {showBulkUpdateDialog && (
+          <div>
+            {/* BulkUpdateGtcClausesDialog 컴포넌트가 여기에 올 예정 */}
+          </div>
+        )}
+
+        {showGenerateVariablesDialog && (
+          <div>
+            {/* GenerateVariableNamesDialog 컴포넌트가 여기에 올 예정 */}
+          </div>
+        )}
+      </div>
+
+      {/* 미리보기 다이얼로그 */}
+      <PreviewDocumentDialog
+        open={showPreviewDialog}
+        onOpenChange={setShowPreviewDialog}
+        clauses={previewClauses}
+        document={document}
+        onExport={() => {
+          console.log("Export from preview dialog")
+        }}
+      />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx b/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx
new file mode 100644
index 00000000..f37566fc
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/import-excel-dialog.tsx
@@ -0,0 +1,381 @@
+"use client"
+
+import * as React from "react"
+import { Upload, Download, FileText, AlertCircle, CheckCircle2, X } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+
+import { type ExcelColumnDef } from "@/lib/export"
+import { downloadExcelTemplate, parseExcelFile } from "./excel-import"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { toast } from "@/hooks/use-toast"
+
+interface ImportExcelDialogProps {
+  documentId: number
+  columns: ExcelColumnDef[]
+  onSuccess?: () => void
+  onImport?: (data: Partial<GtcClauseTreeView>[]) => Promise<void>
+  trigger?: React.ReactNode
+}
+
+type ImportStep = "upload" | "preview" | "importing" | "complete"
+
+export function ImportExcelDialog({
+  documentId,
+  columns,
+  onSuccess,
+  onImport,
+  trigger,
+}: ImportExcelDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [step, setStep] = React.useState<ImportStep>("upload")
+  const [selectedFile, setSelectedFile] = React.useState<File | null>(null)
+  const [parsedData, setParsedData] = React.useState<Partial<GtcClauseTreeView>[]>([])
+  const [errors, setErrors] = React.useState<string[]>([])
+  const [isProcessing, setIsProcessing] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  // 다이얼로그 열기/닫기 시 상태 초기화
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen)
+    if (!isOpen) {
+      // 다이얼로그 닫을 때 상태 초기화
+      setStep("upload")
+      setSelectedFile(null)
+      setParsedData([])
+      setErrors([])
+      setIsProcessing(false)
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ""
+      }
+    }
+  }
+
+  // 템플릿 다운로드
+  const handleDownloadTemplate = async () => {
+    try {
+      await downloadExcelTemplate(columns, {
+        filename: `gtc-clauses-template-${new Date().toISOString().split('T')[0]}`,
+        includeExampleData: true,
+        useGroupHeader: true,
+      })
+      
+      toast({
+        title: "템플릿 다운로드 완료",
+        description: "Excel 템플릿이 다운로드되었습니다. 템플릿에 데이터를 입력한 후 업로드해주세요.",
+      })
+    } catch (error) {
+      toast({
+        title: "템플릿 다운로드 실패",
+        description: "템플릿 다운로드 중 오류가 발생했습니다.",
+        variant: "destructive",
+      })
+    }
+  }
+
+  // 파일 선택
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" && 
+          file.type !== "application/vnd.ms-excel") {
+        toast({
+          title: "잘못된 파일 형식",
+          description: "Excel 파일(.xlsx, .xls)만 업로드할 수 있습니다.",
+          variant: "destructive",
+        })
+        return
+      }
+      setSelectedFile(file)
+    }
+  }
+
+  // 파일 파싱
+  const handleParseFile = async () => {
+    if (!selectedFile) return
+
+    setIsProcessing(true)
+    try {
+      const result = await parseExcelFile<GtcClauseTreeView>(
+        selectedFile,
+        columns,
+        {
+          hasGroupHeader: true,
+          sheetName: "GTC조항템플릿",
+        }
+      )
+
+      setParsedData(result.data)
+      setErrors(result.errors)
+
+      if (result.errors.length > 0) {
+        toast({
+          title: "파싱 완료 (오류 있음)",
+          description: `${result.data.length}개의 행을 파싱했지만 ${result.errors.length}개의 오류가 있습니다.`,
+          variant: "destructive",
+        })
+      } else {
+        toast({
+          title: "파싱 완료",
+          description: `${result.data.length}개의 행이 성공적으로 파싱되었습니다.`,
+        })
+      }
+
+      setStep("preview")
+    } catch (error) {
+      toast({
+        title: "파싱 실패",
+        description: "파일 파싱 중 오류가 발생했습니다.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  // 데이터 가져오기 실행
+  const handleImportData = async () => {
+    if (parsedData.length === 0 || !onImport) return
+
+    setStep("importing")
+    try {
+      await onImport(parsedData)
+      setStep("complete")
+      
+      toast({
+        title: "가져오기 완료",
+        description: `${parsedData.length}개의 조항이 성공적으로 가져와졌습니다.`,
+      })
+
+      // 성공 콜백 호출 후 잠시 후 다이얼로그 닫기
+      setTimeout(() => {
+        onSuccess?.()
+        setOpen(false)
+      }, 2000)
+    } catch (error) {
+      toast({
+        title: "가져오기 실패",
+        description: "데이터 가져오기 중 오류가 발생했습니다.",
+        variant: "destructive",
+      })
+      setStep("preview")
+    }
+  }
+
+  const renderUploadStep = () => (
+    <div className="space-y-6">
+      <div className="text-center">
+        <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
+        <h3 className="mt-4 text-lg font-semibold">Excel 파일로 조항 가져오기</h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          먼저 템플릿을 다운로드하여 데이터를 입력한 후 업로드해주세요.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <Button 
+            onClick={handleDownloadTemplate}
+            variant="outline"
+            className="w-full"
+          >
+            <Download className="mr-2 h-4 w-4" />
+            Excel 템플릿 다운로드
+          </Button>
+          <p className="mt-2 text-xs text-muted-foreground">
+            템플릿에는 입력 가이드와 예시 데이터가 포함되어 있습니다.
+          </p>
+        </div>
+
+        <Separator />
+
+        <div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".xlsx,.xls"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+          <Button
+            onClick={() => fileInputRef.current?.click()}
+            variant={selectedFile ? "secondary" : "outline"}
+            className="w-full"
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            {selectedFile ? selectedFile.name : "Excel 파일 선택"}
+          </Button>
+        </div>
+
+        {selectedFile && (
+          <Button
+            onClick={handleParseFile}
+            disabled={isProcessing}
+            className="w-full"
+          >
+            {isProcessing ? "파싱 중..." : "파일 분석하기"}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+
+  const renderPreviewStep = () => (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">데이터 미리보기</h3>
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary">
+            {parsedData.length}개 행
+          </Badge>
+          {errors.length > 0 && (
+            <Badge variant="destructive">
+              {errors.length}개 오류
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {errors.length > 0 && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            <div className="space-y-1">
+              <div className="font-medium">다음 오류들을 확인해주세요:</div>
+              <ul className="list-disc list-inside space-y-1 text-sm">
+                {errors.slice(0, 5).map((error, index) => (
+                  <li key={index}>{error}</li>
+                ))}
+                {errors.length > 5 && (
+                  <li>... 및 {errors.length - 5}개 추가 오류</li>
+                )}
+              </ul>
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <ScrollArea className="h-[300px] border rounded-md">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-12">#</TableHead>
+              <TableHead>채번</TableHead>
+              <TableHead>소제목</TableHead>
+              <TableHead>상세항목</TableHead>
+              <TableHead>분류</TableHead>
+              <TableHead>상태</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {parsedData.map((item, index) => (
+              <TableRow key={index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell className="font-mono">
+                  {item.itemNumber || "-"}
+                </TableCell>
+                <TableCell className="max-w-[200px] truncate">
+                  {item.subtitle || "-"}
+                </TableCell>
+                <TableCell className="max-w-[300px] truncate">
+                  {item.content || "-"}
+                </TableCell>
+                <TableCell>{item.category || "-"}</TableCell>
+                <TableCell>
+                  <Badge variant={item.isActive ? "default" : "secondary"}>
+                    {item.isActive ? "활성" : "비활성"}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          onClick={() => setStep("upload")}
+          className="flex-1"
+        >
+          다시 선택
+        </Button>
+        <Button
+          onClick={handleImportData}
+          disabled={parsedData.length === 0 || errors.length > 0}
+          className="flex-1"
+        >
+          {errors.length > 0 ? "오류 수정 후 가져오기" : `${parsedData.length}개 조항 가져오기`}
+        </Button>
+      </div>
+    </div>
+  )
+
+  const renderImportingStep = () => (
+    <div className="text-center py-8">
+      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+      <h3 className="mt-4 text-lg font-semibold">가져오는 중...</h3>
+      <p className="mt-2 text-sm text-muted-foreground">
+        {parsedData.length}개의 조항을 데이터베이스에 저장하고 있습니다.
+      </p>
+    </div>
+  )
+
+  const renderCompleteStep = () => (
+    <div className="text-center py-8">
+      <CheckCircle2 className="mx-auto h-12 w-12 text-green-500" />
+      <h3 className="mt-4 text-lg font-semibold">가져오기 완료!</h3>
+      <p className="mt-2 text-sm text-muted-foreground">
+        {parsedData.length}개의 조항이 성공적으로 가져와졌습니다.
+      </p>
+    </div>
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm">
+            <Upload className="mr-2 h-4 w-4" />
+            Excel에서 가져오기
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Excel에서 조항 가져오기</DialogTitle>
+          <DialogDescription>
+            Excel 파일을 사용하여 여러 조항을 한 번에 가져올 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="mt-4">
+          {step === "upload" && renderUploadStep()}
+          {step === "preview" && renderPreviewStep()}
+          {step === "importing" && renderImportingStep()}
+          {step === "complete" && renderCompleteStep()}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx b/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx
new file mode 100644
index 00000000..422d8475
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/markdown-image-editor.tsx
@@ -0,0 +1,360 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Upload, X, Image as ImageIcon, Eye, EyeOff } from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+interface ClauseImage {
+  id: string
+  url: string
+  fileName: string
+  size: number
+}
+
+interface MarkdownImageEditorProps {
+  content: string
+  images: ClauseImage[]
+  onChange: (content: string, images: ClauseImage[]) => void
+  placeholder?: string
+  rows?: number
+  className?: string
+}
+
+export function MarkdownImageEditor({ 
+  content, 
+  images, 
+  onChange, 
+  placeholder = "텍스트를 입력하고, 이미지를 삽입하려면 '이미지 추가' 버튼을 클릭하세요.",
+  rows = 6,
+  className 
+}: MarkdownImageEditorProps) {
+  const [imageUploadOpen, setImageUploadOpen] = React.useState(false)
+  const [showPreview, setShowPreview] = React.useState(false)
+  const [uploading, setUploading] = React.useState(false)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  // 이미지 업로드 핸들러
+  const handleImageUpload = async (file: File) => {
+    if (!file.type.startsWith('image/')) {
+      toast.error('이미지 파일만 업로드 가능합니다.')
+      return
+    }
+
+    if (file.size > 5 * 1024 * 1024) { // 5MB 제한
+      toast.error('파일 크기는 5MB 이하여야 합니다.')
+      return
+    }
+
+    setUploading(true)
+    try {
+      // 실제 구현에서는 서버로 업로드
+      const uploadedUrl = await uploadImage(file)
+      const imageId = `image${Date.now()}`
+      
+      // 이미지 배열에 추가
+      const newImages = [...images, {
+        id: imageId,
+        url: uploadedUrl,
+        fileName: file.name,
+        size: file.size,
+      }]
+      
+      // 커서 위치에 이미지 참조 삽입
+      const imageRef = `![${imageId}]`
+      const textarea = textareaRef.current
+      
+      if (textarea) {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        const newContent = content.substring(0, start) + imageRef + content.substring(end)
+        
+        onChange(newContent, newImages)
+        
+        // 커서 위치를 이미지 참조 뒤로 이동
+        setTimeout(() => {
+          textarea.focus()
+          textarea.setSelectionRange(start + imageRef.length, start + imageRef.length)
+        }, 0)
+      } else {
+        // 텍스트 끝에 추가
+        const newContent = content + (content ? '\n\n' : '') + imageRef
+        onChange(newContent, newImages)
+      }
+      
+      toast.success('이미지가 추가되었습니다.')
+      setImageUploadOpen(false)
+    } catch (error) {
+      toast.error('이미지 업로드에 실패했습니다.')
+      console.error('Image upload error:', error)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  // 이미지 제거
+  const removeImage = (imageId: string) => {
+    // 이미지 배열에서 제거
+    const newImages = images.filter(img => img.id !== imageId)
+    
+    // 텍스트에서 이미지 참조 제거
+    const imageRef = `![${imageId}]`
+    const newContent = content.replace(new RegExp(`\\!\\[${imageId}\\]`, 'g'), '')
+    
+    onChange(newContent, newImages)
+    toast.success('이미지가 제거되었습니다.')
+  }
+
+  // 커서 위치에 텍스트 삽입
+  const insertAtCursor = (text: string) => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    const start = textarea.selectionStart
+    const end = textarea.selectionEnd
+    const newContent = content.substring(0, start) + text + content.substring(end)
+    
+    onChange(newContent, images)
+    
+    // 커서 위치 조정
+    setTimeout(() => {
+      textarea.focus()
+      textarea.setSelectionRange(start + text.length, start + text.length)
+    }, 0)
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* 에디터 툴바 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setImageUploadOpen(true)}
+            disabled={uploading}
+          >
+            <Upload className="h-4 w-4 mr-1" />
+            {uploading ? '업로드 중...' : '이미지 추가'}
+          </Button>
+          
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setShowPreview(!showPreview)}
+          >
+            {showPreview ? (
+              <>
+                <EyeOff className="h-4 w-4 mr-1" />
+                편집
+              </>
+            ) : (
+              <>
+                <Eye className="h-4 w-4 mr-1" />
+                미리보기
+              </>
+            )}
+          </Button>
+        </div>
+        
+        {images.length > 0 && (
+          <span className="text-xs text-muted-foreground">
+            {images.length}개 이미지 첨부됨
+          </span>
+        )}
+      </div>
+
+      {/* 에디터 영역 */}
+      {showPreview ? (
+        /* 미리보기 모드 */
+        <div className="border rounded-lg p-4 bg-muted/10 min-h-[200px]">
+          <div className="space-y-3">
+            {renderMarkdownPreview(content, images)}
+          </div>
+        </div>
+      ) : (
+        /* 편집 모드 */
+        <div className="relative">
+          <Textarea
+            ref={textareaRef}
+            value={content}
+            onChange={(e) => onChange(e.target.value, images)}
+            placeholder={placeholder}
+            rows={rows}
+            className="font-mono text-sm resize-none"
+          />
+          
+          {/* 이미지 참조 안내 */}
+          {content.includes('![image') && (
+            <div className="absolute bottom-2 right-2 text-xs text-muted-foreground bg-background/80 px-2 py-1 rounded">
+              ![imageXXX] = 이미지 삽입 위치
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 첨부된 이미지 목록 */}
+      {images.length > 0 && !showPreview && (
+        <div className="space-y-2">
+          <div className="text-sm font-medium">첨부된 이미지:</div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+            {images.map((img) => (
+              <div key={img.id} className="relative group">
+                <img
+                  src={img.url}
+                  alt={img.fileName}
+                  className="w-full h-16 object-cover rounded border"
+                />
+                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded flex items-center justify-center">
+                  <div className="text-white text-xs text-center">
+                    <div className="font-medium">![{img.id}]</div>
+                    <div className="truncate max-w-16" title={img.fileName}>
+                      {img.fileName}
+                    </div>
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="destructive"
+                  size="sm"
+                  className="absolute -top-1 -right-1 h-5 w-5 p-0 opacity-0 group-hover:opacity-100"
+                  onClick={() => removeImage(img.id)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 이미지 업로드 다이얼로그 */}
+      <Dialog open={imageUploadOpen} onOpenChange={setImageUploadOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>이미지 추가</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-6">
+              <div className="flex flex-col items-center justify-center text-center">
+                <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground mb-4">
+                  이미지를 선택하거나 드래그해서 업로드하세요
+                </p>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0]
+                    if (file) handleImageUpload(file)
+                  }}
+                  className="hidden"
+                  id="image-upload"
+                  disabled={uploading}
+                />
+                <label
+                  htmlFor="image-upload"
+                  className={cn(
+                    "cursor-pointer inline-flex items-center gap-2 text-sm bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md",
+                    uploading && "opacity-50 cursor-not-allowed"
+                  )}
+                >
+                  <Upload className="h-4 w-4" />
+                  파일 선택
+                </label>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground space-y-1">
+              <div>• 지원 형식: JPG, PNG, GIF, WebP</div>
+              <div>• 최대 크기: 5MB</div>
+              <div>• 현재 커서 위치에 삽입됩니다</div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+// 마크다운 미리보기 렌더링
+function renderMarkdownPreview(content: string, images: ClauseImage[]) {
+  if (!content.trim()) {
+    return (
+      <p className="text-muted-foreground italic">
+        내용을 입력하세요...
+      </p>
+    )
+  }
+
+  const parts = content.split(/(\![a-zA-Z0-9_]+\])/)
+  
+  return parts.map((part, index) => {
+    // 이미지 참조인지 확인
+    const imageMatch = part.match(/^!\[(.+)\]$/)
+    
+    if (imageMatch) {
+      const imageId = imageMatch[1]
+      const image = images.find(img => img.id === imageId)
+      
+      if (image) {
+        return (
+          <div key={index} className="my-3">
+            <img
+              src={image.url}
+              alt={image.fileName}
+              className="max-w-full h-auto rounded border shadow-sm"
+              style={{ maxHeight: '400px' }}
+            />
+            <p className="text-xs text-muted-foreground mt-1 text-center">
+              {image.fileName} ({formatFileSize(image.size)})
+            </p>
+          </div>
+        )
+      } else {
+        return (
+          <div key={index} className="my-2 p-2 bg-yellow-50 border border-yellow-200 rounded">
+            <p className="text-xs text-yellow-700">
+              ⚠️ 이미지를 찾을 수 없음: {part}
+            </p>
+          </div>
+        )
+      }
+    } else {
+      // 일반 텍스트 (줄바꿈 처리)
+      return part.split('\n').map((line, lineIndex) => (
+        <p key={`${index}-${lineIndex}`} className="text-sm">
+          {line || '\u00A0'} {/* 빈 줄 처리 */}
+        </p>
+      ))
+    }
+  })
+}
+
+// 파일 크기 포맷팅
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes'
+  
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+// 임시 이미지 업로드 함수 (실제 구현 필요)
+async function uploadImage(file: File): Promise<string> {
+  // TODO: 실제 서버 업로드 로직 구현
+  // 현재는 임시로 ObjectURL 반환
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      resolve(e.target?.result as string)
+    }
+    reader.readAsDataURL(file)
+  })
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx b/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx
new file mode 100644
index 00000000..78ddc7f7
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/preview-document-dialog.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+
+import { 
+  Eye, 
+  Download, 
+  Loader2, 
+  FileText, 
+  RefreshCw,
+  Settings,
+  AlertCircle
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { ClausePreviewViewer } from "./clause-preview-viewer"
+
+interface PreviewDocumentDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  clauses: GtcClauseTreeView[]
+  document: any
+  onExport?: () => void
+}
+
+export function PreviewDocumentDialog({ 
+  clauses, 
+  document,
+  onExport,
+  ...props 
+}: PreviewDocumentDialogProps) {
+  const [isGenerating, setIsGenerating] = React.useState(false)
+  const [documentGenerated, setDocumentGenerated] = React.useState(false)
+  const [viewerInstance, setViewerInstance] = React.useState<any>(null)
+  const [hasError, setHasError] = React.useState(false)
+
+  // 조항 통계 계산
+  const stats = React.useMemo(() => {
+    const activeClausesCount = clauses.filter(c => c.isActive !== false).length
+    const topLevelCount = clauses.filter(c => !c.parentId && c.isActive !== false).length
+    const hasContentCount = clauses.filter(c => c.content && c.isActive !== false).length
+    
+    return {
+      total: activeClausesCount,
+      topLevel: topLevelCount,
+      withContent: hasContentCount,
+      withoutContent: activeClausesCount - hasContentCount
+    }
+  }, [clauses])
+
+  const handleGeneratePreview = async () => {
+    setIsGenerating(true)
+    setHasError(false)
+    setDocumentGenerated(false)
+    
+    try {
+      // 실제로는 ClausePreviewViewer에서 문서 생성을 처리하므로
+      // 여기서는 상태만 관리
+      console.log("🚀 문서 미리보기 생성 시작")
+      
+      // ClausePreviewViewer가 완전히 로드될 때까지 기다림
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      
+      if (!hasError) {
+        setDocumentGenerated(true)
+        toast.success("문서 미리보기가 생성되었습니다.")
+      }
+    } catch (error) {
+      console.error("문서 생성 중 오류:", error)
+      setHasError(true)
+      toast.error("문서 생성 중 오류가 발생했습니다.")
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handleExportDocument = () => {
+    if (viewerInstance) {
+      try {
+        // PDFTron의 다운로드 기능 실행
+        viewerInstance.UI.downloadPdf({
+          filename: `${document?.title || 'GTC계약서'}_미리보기.pdf`
+        })
+        toast.success("PDF 다운로드가 시작됩니다.")
+      } catch (error) {
+        console.error("다운로드 오류:", error)
+        toast.error("다운로드 중 오류가 발생했습니다.")
+      }
+    } else {
+      toast.error("뷰어가 준비되지 않았습니다.")
+    }
+  }
+
+  const handleRegenerateDocument = () => {
+    console.log("🔄 문서 재생성 시작")
+    setDocumentGenerated(false)
+    setHasError(false)
+    handleGeneratePreview()
+  }
+
+  const handleViewerSuccess = React.useCallback(() => {
+    setDocumentGenerated(true)
+    setIsGenerating(false)
+    setHasError(false)
+  }, [])
+
+  const handleViewerError = React.useCallback(() => {
+    setHasError(true)
+    setIsGenerating(false)
+    setDocumentGenerated(false)
+  }, [])
+
+  // 다이얼로그가 열릴 때 자동으로 미리보기 생성
+  React.useEffect(() => {
+    if (props.open && !documentGenerated && !isGenerating && !hasError) {
+      const timer = setTimeout(() => {
+        handleGeneratePreview()
+      }, 300) // 다이얼로그 애니메이션 후 시작
+      
+      return () => clearTimeout(timer)
+    }
+  }, [props.open, documentGenerated, isGenerating, hasError])
+
+  // 다이얼로그가 닫힐 때 상태 초기화
+  React.useEffect(() => {
+    if (!props.open) {
+      setDocumentGenerated(false)
+      setIsGenerating(false)
+      setHasError(false)
+      setViewerInstance(null)
+    }
+  }, [props.open])
+
+  return (
+    <Dialog {...props}>
+      <DialogContent className="max-w-7xl h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <Eye className="h-5 w-5" />
+            문서 미리보기
+          </DialogTitle>
+          <DialogDescription>
+            현재 조항들을 기반으로 생성된 문서를 미리보기합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 문서 정보 및 통계 */}
+        <div className="flex-shrink-0 p-4 bg-muted/30 rounded-lg">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <FileText className="h-4 w-4" />
+              <span className="font-medium">{document?.title || 'GTC 계약서'}</span>
+              <Badge variant="outline">{stats.total}개 조항</Badge>
+              {hasError && (
+                <Badge variant="destructive" className="gap-1">
+                  <AlertCircle className="h-3 w-3" />
+                  오류 발생
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {documentGenerated && !hasError && (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleRegenerateDocument}
+                    disabled={isGenerating}
+                  >
+                    <RefreshCw className={`mr-2 h-3 w-3 ${isGenerating ? 'animate-spin' : ''}`} />
+                    재생성
+                  </Button>
+                  {/* <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleExportDocument}
+                    disabled={!viewerInstance}
+                  >
+                    <Download className="mr-2 h-3 w-3" />
+                    PDF 다운로드
+                  </Button> */}
+                </>
+              )}
+              {hasError && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={handleRegenerateDocument}
+                  disabled={isGenerating}
+                >
+                  <RefreshCw className={`mr-2 h-3 w-3 ${isGenerating ? 'animate-spin' : ''}`} />
+                  다시 시도
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-4 gap-4 text-sm">
+            <div className="text-center p-2 bg-background rounded">
+              <div className="font-medium text-lg">{stats.total}</div>
+              <div className="text-muted-foreground">총 조항</div>
+            </div>
+            <div className="text-center p-2 bg-background rounded">
+              <div className="font-medium text-lg">{stats.topLevel}</div>
+              <div className="text-muted-foreground">최상위 조항</div>
+            </div>
+            <div className="text-center p-2 bg-background rounded">
+              <div className="font-medium text-lg text-green-600">{stats.withContent}</div>
+              <div className="text-muted-foreground">내용 있음</div>
+            </div>
+            <div className="text-center p-2 bg-background rounded">
+              <div className="font-medium text-lg text-amber-600">{stats.withoutContent}</div>
+              <div className="text-muted-foreground">제목만</div>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* PDFTron 뷰어 영역 */}
+        <div className="flex-1 min-h-0 relative">
+          {isGenerating ? (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-background">
+              <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
+              <p className="text-lg font-medium mb-2">문서 생성 중...</p>
+              <p className="text-sm text-muted-foreground">
+                {stats.total}개의 조항을 배치하고 있습니다.
+              </p>
+              <p className="text-xs text-gray-400 mt-2">
+                초기화에 시간이 걸릴 수 있습니다...
+              </p>
+            </div>
+          ) : hasError ? (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted/10">
+              <AlertCircle className="h-12 w-12 text-destructive mb-4" />
+              <p className="text-lg font-medium mb-2 text-destructive">문서 생성 실패</p>
+              <p className="text-sm text-muted-foreground mb-4 text-center max-w-md">
+                문서 생성 중 오류가 발생했습니다. 네트워크 연결이나 파일 권한을 확인해주세요.
+              </p>
+              <Button onClick={handleRegenerateDocument} disabled={isGenerating}>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                다시 시도
+              </Button>
+            </div>
+          ) : documentGenerated ? (
+            <ClausePreviewViewer
+              clauses={clauses}
+              document={document}
+              instance={viewerInstance}
+              setInstance={setViewerInstance}
+              onSuccess={handleViewerSuccess}
+              onError={handleViewerError}
+            />
+          ) : (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted/10">
+              <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-lg font-medium mb-2">문서 미리보기 준비 중</p>
+              <Button onClick={handleGeneratePreview} disabled={isGenerating}>
+                <Eye className="mr-2 h-4 w-4" />
+                미리보기 생성
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx b/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx
new file mode 100644
index 00000000..7d0180df
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/reorder-gtc-clauses-dialog.tsx
@@ -0,0 +1,540 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { 
+  Loader, 
+  ArrowUpDown, 
+  ArrowUp, 
+  ArrowDown, 
+  GripVertical, 
+  RotateCcw,
+  Info
+} from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+import { reorderGtcClausesSchema, type ReorderGtcClausesSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { reorderGtcClauses, getGtcClausesTree } from "@/lib/gtc-contract/gtc-clauses/service"
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { useSession } from "next-auth/react"
+
+interface ReorderGtcClausesDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  documentId: number
+  onSuccess?: () => void
+}
+
+interface ClauseWithOrder extends GtcClauseTreeView {
+  newSortOrder: number
+  hasChanges: boolean
+  children?: ClauseWithOrder[]
+}
+
+export function ReorderGtcClausesDialog({ 
+  documentId, 
+  onSuccess,
+  ...props 
+}: ReorderGtcClausesDialogProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const [clauses, setClauses] = React.useState<ClauseWithOrder[]>([])
+  const [originalClauses, setOriginalClauses] = React.useState<ClauseWithOrder[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [draggedItem, setDraggedItem] = React.useState<ClauseWithOrder | null>(null)
+  const { data: session } = useSession()
+
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+
+  const form = useForm<ReorderGtcClausesSchema>({
+    resolver: zodResolver(reorderGtcClausesSchema),
+    defaultValues: {
+      clauses: [],
+      editReason: "",
+    },
+  })
+
+  // 조항 데이터 로드
+  React.useEffect(() => {
+    if (props.open && documentId) {
+      loadClauses()
+    }
+  }, [props.open, documentId])
+
+  const loadClauses = async () => {
+    setIsLoading(true)
+    try {
+      const tree = await getGtcClausesTree(documentId)
+      const flatClauses = flattenTreeWithOrder(tree)
+      setClauses(flatClauses)
+      setOriginalClauses(JSON.parse(JSON.stringify(flatClauses))) // 깊은 복사
+    } catch (error) {
+      console.error("Error loading clauses:", error)
+      toast.error("조항 목록을 불러오는 중 오류가 발생했습니다.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 트리를 평면 배열로 변환하면서 순서 정보 추가
+  const flattenTreeWithOrder = (tree: any[]): ClauseWithOrder[] => {
+    const result: ClauseWithOrder[] = []
+    
+    function traverse(nodes: any[], parentId: number | null = null) {
+      nodes.forEach((node, index) => {
+        const clauseWithOrder: ClauseWithOrder = {
+          ...node,
+          newSortOrder: parseFloat(node.sortOrder),
+          hasChanges: false,
+        }
+        
+        result.push(clauseWithOrder)
+        
+        if (node.children && node.children.length > 0) {
+          traverse(node.children, node.id)
+        }
+      })
+    }
+    
+    traverse(tree)
+    return result
+  }
+
+  // 조항 순서 변경
+  const moveClause = (clauseId: number, direction: 'up' | 'down') => {
+    setClauses(prev => {
+      const newClauses = [...prev]
+      const clauseIndex = newClauses.findIndex(c => c.id === clauseId)
+      
+      if (clauseIndex === -1) return prev
+      
+      const clause = newClauses[clauseIndex]
+      
+      // 같은 부모를 가진 형제 조항들 찾기
+      const siblings = newClauses.filter(c => c.parentId === clause.parentId)
+      const siblingIndex = siblings.findIndex(c => c.id === clauseId)
+      
+      if (direction === 'up' && siblingIndex > 0) {
+        // 위로 이동
+        const targetSibling = siblings[siblingIndex - 1]
+        const tempOrder = clause.newSortOrder
+        clause.newSortOrder = targetSibling.newSortOrder
+        targetSibling.newSortOrder = tempOrder
+        
+        clause.hasChanges = true
+        targetSibling.hasChanges = true
+      } else if (direction === 'down' && siblingIndex < siblings.length - 1) {
+        // 아래로 이동
+        const targetSibling = siblings[siblingIndex + 1]
+        const tempOrder = clause.newSortOrder
+        clause.newSortOrder = targetSibling.newSortOrder
+        targetSibling.newSortOrder = tempOrder
+        
+        clause.hasChanges = true
+        targetSibling.hasChanges = true
+      }
+      
+      // sortOrder로 정렬
+      return newClauses.sort((a, b) => {
+        if (a.parentId !== b.parentId) {
+          // 부모가 다르면 부모 기준으로 정렬
+          return (a.parentId || 0) - (b.parentId || 0)
+        }
+        return a.newSortOrder - b.newSortOrder
+      })
+    })
+  }
+
+  // 변경사항 초기화
+  const resetChanges = () => {
+    setClauses(JSON.parse(JSON.stringify(originalClauses)))
+    toast.success("변경사항이 초기화되었습니다.")
+  }
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragStart = (e: React.DragEvent, clause: ClauseWithOrder) => {
+    setDraggedItem(clause)
+    e.dataTransfer.effectAllowed = 'move'
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  const handleDrop = (e: React.DragEvent, targetClause: ClauseWithOrder) => {
+    e.preventDefault()
+    
+    if (!draggedItem || draggedItem.id === targetClause.id) {
+      setDraggedItem(null)
+      return
+    }
+
+    // 같은 부모를 가진 경우에만 순서 변경 허용
+    if (draggedItem.parentId === targetClause.parentId) {
+      setClauses(prev => {
+        const newClauses = [...prev]
+        const draggedIndex = newClauses.findIndex(c => c.id === draggedItem.id)
+        const targetIndex = newClauses.findIndex(c => c.id === targetClause.id)
+        
+        if (draggedIndex !== -1 && targetIndex !== -1) {
+          const tempOrder = newClauses[draggedIndex].newSortOrder
+          newClauses[draggedIndex].newSortOrder = newClauses[targetIndex].newSortOrder
+          newClauses[targetIndex].newSortOrder = tempOrder
+          
+          newClauses[draggedIndex].hasChanges = true
+          newClauses[targetIndex].hasChanges = true
+        }
+        
+        return newClauses.sort((a, b) => {
+          if (a.parentId !== b.parentId) {
+            return (a.parentId || 0) - (b.parentId || 0)
+          }
+          return a.newSortOrder - b.newSortOrder
+        })
+      })
+    }
+    
+    setDraggedItem(null)
+  }
+
+  async function onSubmit(data: ReorderGtcClausesSchema) {
+    startUpdateTransition(async () => {
+      if (!currentUserId) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      // 변경된 조항들만 필터링
+      const changedClauses = clauses.filter(c => c.hasChanges).map(c => ({
+        id: c.id,
+        sortOrder: c.newSortOrder,
+        parentId: c.parentId,
+        depth: c.depth,
+        fullPath: c.fullPath,
+      }))
+
+      if (changedClauses.length === 0) {
+        toast.error("변경된 조항이 없습니다.")
+        return
+      }
+
+      try {
+        const result = await reorderGtcClauses({
+          clauses: changedClauses,
+          editReason: data.editReason || "조항 순서 변경",
+          updatedById: currentUserId
+        })
+        
+        if (result.error) {
+          toast.error(`에러: ${result.error}`)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success(`${changedClauses.length}개 조항의 순서가 변경되었습니다.`)
+        onSuccess?.()
+      } catch (error) {
+        toast.error("조항 순서 변경 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  function handleDialogOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset()
+      setClauses([])
+      setOriginalClauses([])
+    }
+    props.onOpenChange?.(nextOpen)
+  }
+
+  const changedCount = clauses.filter(c => c.hasChanges).length
+  const groupedClauses = groupClausesByParent(clauses)
+
+  return (
+    <Dialog {...props} onOpenChange={handleDialogOpenChange}>
+      <DialogContent className="max-w-4xl h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <ArrowUpDown className="h-5 w-5" />
+            조항 순서 변경
+          </DialogTitle>
+          <DialogDescription>
+            드래그 앤 드롭 또는 화살표 버튼으로 조항의 순서를 변경하세요. 같은 계층 내에서만 순서 변경이 가능합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 상태 정보 */}
+        <div className="flex items-center justify-between p-3 bg-muted/50 rounded-lg flex-shrink-0">
+          <div className="flex items-center gap-4 text-sm">
+            <div className="flex items-center gap-2">
+              <Info className="h-4 w-4 text-muted-foreground" />
+              <span>총 {clauses.length}개 조항</span>
+            </div>
+            {changedCount > 0 && (
+              <Badge variant="default">
+                {changedCount}개 변경됨
+              </Badge>
+            )}
+          </div>
+          
+          <div className="flex gap-2">
+            {changedCount > 0 && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={resetChanges}
+              >
+                <RotateCcw className="mr-2 h-4 w-4" />
+                초기화
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 min-h-0">
+            {/* 조항 목록 */}
+            <ScrollArea className="flex-1 border rounded-lg">
+              {isLoading ? (
+                <div className="flex items-center justify-center h-32">
+                  <Loader className="h-6 w-6 animate-spin" />
+                  <span className="ml-2">조항을 불러오는 중...</span>
+                </div>
+              ) : (
+                <div className="p-4 space-y-2">
+                  {Object.entries(groupedClauses).map(([parentInfo, clauses]) => (
+                    <ClauseGroup
+                      key={parentInfo}
+                      parentInfo={parentInfo}
+                      clauses={clauses}
+                      onMove={moveClause}
+                      onDragStart={handleDragStart}
+                      onDragOver={handleDragOver}
+                      onDrop={handleDrop}
+                    />
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+
+            {/* 편집 사유 */}
+            <div className="mt-4 flex-shrink-0">
+              <FormField
+                control={form.control}
+                name="editReason"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>편집 사유 (선택사항)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="순서 변경 사유를 입력하세요..."
+                        {...field}
+                        rows={2}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter className="flex-shrink-0 border-t pt-4 mt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => props.onOpenChange?.(false)}
+                disabled={isUpdatePending}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={isUpdatePending || changedCount === 0}
+              >
+                {isUpdatePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                <ArrowUpDown className="mr-2 h-4 w-4" />
+                Apply Changes ({changedCount})
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// 조항 그룹 컴포넌트
+interface ClauseGroupProps {
+  parentInfo: string
+  clauses: ClauseWithOrder[]
+  onMove: (clauseId: number, direction: 'up' | 'down') => void
+  onDragStart: (e: React.DragEvent, clause: ClauseWithOrder) => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: (e: React.DragEvent, clause: ClauseWithOrder) => void
+}
+
+function ClauseGroup({ 
+  parentInfo, 
+  clauses, 
+  onMove, 
+  onDragStart, 
+  onDragOver, 
+  onDrop 
+}: ClauseGroupProps) {
+  const isRootLevel = parentInfo === "root"
+  
+  return (
+    <div className="space-y-1">
+      {!isRootLevel && (
+        <div className="text-sm font-medium text-muted-foreground px-2 py-1 bg-muted/30 rounded">
+          {parentInfo}
+        </div>
+      )}
+      
+      {clauses.map((clause, index) => (
+        <ClauseItem
+          key={clause.id}
+          clause={clause}
+          index={index}
+          isFirst={index === 0}
+          isLast={index === clauses.length - 1}
+          onMove={onMove}
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        />
+      ))}
+    </div>
+  )
+}
+
+// 개별 조항 컴포넌트
+interface ClauseItemProps {
+  clause: ClauseWithOrder
+  index: number
+  isFirst: boolean
+  isLast: boolean
+  onMove: (clauseId: number, direction: 'up' | 'down') => void
+  onDragStart: (e: React.DragEvent, clause: ClauseWithOrder) => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: (e: React.DragEvent, clause: ClauseWithOrder) => void
+}
+
+function ClauseItem({ 
+  clause, 
+  isFirst, 
+  isLast, 
+  onMove, 
+  onDragStart, 
+  onDragOver, 
+  onDrop 
+}: ClauseItemProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 p-3 border rounded-lg bg-background",
+        clause.hasChanges && "border-blue-300 bg-blue-50",
+        "hover:bg-muted/50 transition-colors"
+      )}
+      draggable
+      onDragStart={(e) => onDragStart(e, clause)}
+      onDragOver={onDragOver}
+      onDrop={(e) => onDrop(e, clause)}
+    >
+      {/* 드래그 핸들 */}
+      <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
+      
+      {/* 조항 정보 */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <Badge variant="outline" className="text-xs">
+            {clause.itemNumber}
+          </Badge>
+          <span className="font-medium truncate">{clause.subtitle}</span>
+          {clause.hasChanges && (
+            <Badge variant="default" className="text-xs">
+              변경됨
+            </Badge>
+          )}
+        </div>
+        {clause.content && (
+          <p className="text-xs text-muted-foreground line-clamp-1">
+            {clause.content.substring(0, 100)}...
+          </p>
+        )}
+      </div>
+      
+      {/* 순서 변경 버튼 */}
+      <div className="flex gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          disabled={isFirst}
+          onClick={() => onMove(clause.id, 'up')}
+        >
+          <ArrowUp className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          disabled={isLast}
+          onClick={() => onMove(clause.id, 'down')}
+        >
+          <ArrowDown className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// 조항을 부모별로 그룹화
+function groupClausesByParent(clauses: ClauseWithOrder[]): Record<string, ClauseWithOrder[]> {
+  const groups: Record<string, ClauseWithOrder[]> = {}
+  
+  clauses.forEach(clause => {
+    const parentKey = clause.parentId 
+      ? `${clause.parentItemNumber || 'Unknown'} - ${clause.parentSubtitle || 'Unknown'}`
+      : "root"
+    
+    if (!groups[parentKey]) {
+      groups[parentKey] = []
+    }
+    groups[parentKey].push(clause)
+  })
+  
+  // 각 그룹 내에서 sortOrder로 정렬
+  Object.keys(groups).forEach(key => {
+    groups[key].sort((a, b) => a.newSortOrder - b.newSortOrder)
+  })
+  
+  return groups
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx b/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx
new file mode 100644
index 00000000..3487ebbf
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/update-gtc-clause-sheet.tsx
@@ -0,0 +1,522 @@
+// update-vendor-gtc-clause-sheet.tsx
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader, Info, AlertCircle } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Label } from "@/components/ui/label"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+import { updateVendorGtcClauseSchema, type UpdateVendorGtcClauseSchema } from "@/lib/gtc-contract/gtc-clauses/validations"
+import { updateVendorGtcClause } from "@/lib/gtc-contract/gtc-clauses/service"
+import { useSession } from "next-auth/react"
+import { MarkdownImageEditor } from "./markdown-image-editor"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface ClauseImage {
+  id: string
+  url: string
+  fileName: string
+  size: number
+  savedName?: string
+  mimeType?: string
+  width?: number
+  height?: number
+  hash?: string
+}
+
+export interface UpdateVendorGtcClauseSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  gtcClause: GtcClauseTreeView | null
+  vendorInfo?: any // 벤더 조항 정보
+  documentId: number
+  vendorId: number
+  vendorName?: string
+}
+
+export function UpdateGtcClauseSheet ({ 
+  gtcClause, 
+  vendorInfo,
+  documentId, 
+  vendorId,
+  vendorName,
+  ...props 
+}: UpdateVendorGtcClauseSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+  const { data: session } = useSession()
+  const [images, setImages] = React.useState<ClauseImage[]>([])
+
+  console.log(vendorInfo,"vendorInfo")
+  
+  const currentUserId = React.useMemo(() => {
+    return session?.user?.id ? Number(session.user.id) : null
+  }, [session])
+  
+  const form = useForm<UpdateVendorGtcClauseSchema>({
+    resolver: zodResolver(updateVendorGtcClauseSchema),
+    defaultValues: {
+      modifiedItemNumber: "",
+      modifiedCategory: "",
+      modifiedSubtitle: "",
+      modifiedContent: "",
+      isNumberModified: false,
+      isCategoryModified: false,
+      isSubtitleModified: false,
+      isContentModified: false,
+      reviewStatus: "draft",
+      negotiationNote: "",
+      isExcluded: false,
+    },
+  })
+
+  // 벤더 정보가 있으면 초기값 세팅
+  React.useEffect(() => {
+    if (vendorInfo) {
+      form.reset({
+        modifiedItemNumber: vendorInfo.modifiedItemNumber || "",
+        modifiedCategory: vendorInfo.modifiedCategory || "",
+        modifiedSubtitle: vendorInfo.modifiedSubtitle || "",
+        modifiedContent: vendorInfo.modifiedContent || "",
+        isNumberModified: vendorInfo.isNumberModified || false,
+        isCategoryModified: vendorInfo.isCategoryModified || false,
+        isSubtitleModified: vendorInfo.isSubtitleModified || false,
+        isContentModified: vendorInfo.isContentModified || false,
+        reviewStatus: vendorInfo.reviewStatus || "draft",
+        negotiationNote: vendorInfo.negotiationNote || "",
+        isExcluded: vendorInfo.isExcluded || false,
+      })
+      setImages((vendorInfo.images as any[]) || [])
+    }
+  }, [vendorInfo, form])
+
+  async function onSubmit(input: UpdateVendorGtcClauseSchema) {
+    startUpdateTransition(async () => {
+      if (!gtcClause || !currentUserId) {
+        toast.error("조항 정보를 찾을 수 없습니다.")
+        return
+      }
+
+      try {
+        const result = await updateVendorGtcClause({
+          baseClauseId: gtcClause.id,
+          documentId,
+          vendorId,
+          ...input,
+          images,
+          updatedById: currentUserId,
+        })
+
+        if (result.error) {
+          toast.error(result.error)
+          return
+        }
+
+        form.reset()
+        props.onOpenChange?.(false)
+        toast.success("벤더 협의 내용이 저장되었습니다!")
+      } catch (error) {
+        toast.error("벤더 협의 저장 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  const getDepthBadge = (depth: number) => {
+    const levels = ["1단계", "2단계", "3단계", "4단계", "5단계+"]
+    return levels[depth] || levels[4]
+  }
+
+  const handleContentImageChange = (content: string, newImages: ClauseImage[]) => {
+    form.setValue("modifiedContent", content)
+    setImages(newImages)
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col sm:max-w-2xl h-full">
+        <SheetHeader className="text-left flex-shrink-0">
+          <SheetTitle>벤더 GTC 조항 협의</SheetTitle>
+          <SheetDescription>
+            {vendorName ? `${vendorName}과(와)의 조항 협의 내용을 입력하세요` : '벤더별 조항 수정사항을 입력하세요'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          {/* 기존 조항 정보 (읽기 전용) */}
+          <div className="space-y-4 p-4 bg-muted/30 rounded-lg mb-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold">표준 조항 내용</h3>
+              <Badge variant="outline">
+                {getDepthBadge(gtcClause?.depth || 0)}
+              </Badge>
+            </div>
+            
+            <div className="space-y-3">
+              <div>
+                <Label className="text-xs text-muted-foreground">채번</Label>
+                <div className="text-sm font-mono mt-1">{gtcClause?.itemNumber}</div>
+              </div>
+              
+              {gtcClause?.category && (
+                <div>
+                  <Label className="text-xs text-muted-foreground">분류</Label>
+                  <div className="text-sm mt-1">{gtcClause.category}</div>
+                </div>
+              )}
+              
+              <div>
+                <Label className="text-xs text-muted-foreground">소제목</Label>
+                <div className="text-sm font-medium mt-1">{gtcClause?.subtitle}</div>
+              </div>
+              
+              {gtcClause?.content && (
+                <div>
+                  <Label className="text-xs text-muted-foreground">상세항목</Label>
+                  <div className="text-sm mt-1 p-2 bg-background rounded border">
+                    <pre className="whitespace-pre-wrap font-sans">{gtcClause.content}</pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <Separator className="my-4" />
+
+          {/* 벤더별 수정 폼 */}
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 p-4">
+              <div className="flex items-center gap-2 mb-4">
+                <AlertCircle className="h-4 w-4 text-blue-500" />
+                <p className="text-sm text-muted-foreground">
+                  수정할 항목에 체크하고 내용을 입력하세요. 체크하지 않은 항목은 표준 조항의 내용을 그대로 사용합니다.
+                </p>
+              </div>
+
+              {/* 협의 상태 */}
+              <FormField
+                control={form.control}
+                name="reviewStatus"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>협의 상태</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="협의 상태를 선택하세요" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="draft">초안</SelectItem>
+                        <SelectItem value="pending">협의 대기</SelectItem>
+                        <SelectItem value="reviewing">협의 중</SelectItem>
+                        <SelectItem value="approved">승인됨</SelectItem>
+                        <SelectItem value="rejected">거부됨</SelectItem>
+                        <SelectItem value="revised">수정됨</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* 제외 여부 */}
+              <FormField
+                control={form.control}
+                name="isExcluded"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <div className="space-y-1 leading-none">
+                      <FormLabel>
+                        이 조항을 벤더 계약에서 제외
+                      </FormLabel>
+                      <FormDescription>
+                        체크하면 최종 계약서에서 이 조항이 제외됩니다
+                      </FormDescription>
+                    </div>
+                  </FormItem>
+                )}
+              />
+
+              {/* 채번 수정 */}
+              <div className="space-y-2 border rounded-lg p-3">
+                <FormField
+                  control={form.control}
+                  name="isNumberModified"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal cursor-pointer">
+                        채번 수정
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+                
+                {form.watch("isNumberModified") && (
+                  <FormField
+                    control={form.control}
+                    name="modifiedItemNumber"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input 
+                            placeholder="수정할 채번 입력"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+              </div>
+
+              {/* 분류 수정 */}
+              <div className="space-y-2 border rounded-lg p-3">
+                <FormField
+                  control={form.control}
+                  name="isCategoryModified"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal cursor-pointer">
+                        분류 수정
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+                
+                {form.watch("isCategoryModified") && (
+                  <FormField
+                    control={form.control}
+                    name="modifiedCategory"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input 
+                            placeholder="수정할 분류 입력"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+              </div>
+
+              {/* 소제목 수정 */}
+              <div className="space-y-2 border rounded-lg p-3">
+                <FormField
+                  control={form.control}
+                  name="isSubtitleModified"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal cursor-pointer">
+                        소제목 수정
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+                
+                {form.watch("isSubtitleModified") && (
+                  <FormField
+                    control={form.control}
+                    name="modifiedSubtitle"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input 
+                            placeholder="수정할 소제목 입력"
+                            {...field} 
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+              </div>
+
+              {/* 내용 수정 */}
+              <div className="space-y-2 border rounded-lg p-3">
+                <FormField
+                  control={form.control}
+                  name="isContentModified"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal cursor-pointer">
+                        상세항목 수정
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+                
+                {form.watch("isContentModified") && (
+                  <FormField
+                    control={form.control}
+                    name="modifiedContent"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <MarkdownImageEditor
+                            content={field.value || ""}
+                            images={images}
+                            onChange={handleContentImageChange}
+                            placeholder="수정할 내용을 입력하세요..."
+                            rows={6}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+              </div>
+
+              {/* 협의 이력 표시 섹션 */}
+{vendorInfo?.negotiationHistory && vendorInfo.negotiationHistory.length > 0 && (
+  <div className="space-y-3 mb-4">
+    <h3 className="text-sm font-semibold">협의 이력</h3>
+    <div className="border rounded-lg p-3 max-h-64 overflow-y-auto space-y-3">
+      {vendorInfo.negotiationHistory.map((history, index) => (
+        <div key={index} className="border-b pb-3 last:border-b-0 last:pb-0">
+          <div className="flex justify-between text-xs text-muted-foreground mb-1">
+            <div className="font-medium">
+              {history.actorName || "시스템"}
+              {history.previousStatus && history.newStatus && (
+                <span className="ml-2 text-xs">
+                  ({history.previousStatus} → {history.newStatus})
+                </span>
+              )}
+            </div>
+            <div>
+              {new Date(history.createdAt).toLocaleString('ko-KR', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit'
+              })}
+            </div>
+          </div>
+          {history.comment && (
+            <div className="text-sm p-2 bg-muted/30 rounded">
+              {history.comment}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  </div>
+)}
+
+              {/* 협의 노트 */}
+              <FormField
+                control={form.control}
+                name="negotiationNote"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>협의 메모</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="협의 과정에서의 메모나 특이사항을 기록하세요..."
+                        {...field}
+                        rows={3}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      벤더와의 협의 내용이나 변경 사유를 기록합니다
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </div>
+
+        <SheetFooter className="gap-2 pt-2 sm:space-x-0 flex-shrink-0">
+          <SheetClose asChild>
+            <Button type="button" variant="outline">
+              취소
+            </Button>
+          </SheetClose>
+
+          <Button 
+            onClick={form.handleSubmit(onSubmit)} 
+            disabled={isUpdatePending}
+          >
+            {isUpdatePending && (
+              <Loader
+                className="mr-2 size-4 animate-spin"
+                aria-hidden="true"
+              />
+            )}
+            저장
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx b/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx
new file mode 100644
index 00000000..e500c069
--- /dev/null
+++ b/lib/basic-contract/gtc-vendor/view-clause-variables-dialog.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+
+import { Eye, Copy, Check, Settings2 } from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+import { type GtcClauseTreeView } from "@/db/schema/gtc"
+
+interface ViewClauseVariablesDialogProps
+  extends React.ComponentPropsWithRef<typeof Dialog> {
+  clause: GtcClauseTreeView | null
+  onEditVariables?: () => void
+}
+
+export function ViewClauseVariablesDialog({ 
+  clause, 
+  onEditVariables,
+  ...props 
+}: ViewClauseVariablesDialogProps) {
+  const [copiedField, setCopiedField] = React.useState<string | null>(null)
+
+  const copyToClipboard = async (text: string, fieldName: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopiedField(fieldName)
+      toast.success(`${fieldName} 변수명이 복사되었습니다.`)
+      
+      // 2초 후 복사 상태 초기화
+      setTimeout(() => {
+        setCopiedField(null)
+      }, 2000)
+    } catch (error) {
+      toast.error("복사 중 오류가 발생했습니다.")
+    }
+  }
+
+  const copyAllVariables = async () => {
+    if (!clause) return
+    
+    const allVariables = [
+      clause.autoNumberVariable,
+      clause.autoSubtitleVariable, 
+      clause.autoContentVariable
+    ].filter(Boolean).join('\n')
+    
+    try {
+      await navigator.clipboard.writeText(allVariables)
+      toast.success("모든 변수명이 복사되었습니다.")
+    } catch (error) {
+      toast.error("복사 중 오류가 발생했습니다.")
+    }
+  }
+
+  if (!clause) {
+    return null
+  }
+
+  const variables = [
+    {
+      label: "채번 변수명",
+      value: clause.autoNumberVariable,
+      fieldName: "채번",
+      description: "조항 번호를 표시하는 변수"
+    },
+    {
+      label: "소제목 변수명", 
+      value: clause.autoSubtitleVariable,
+      fieldName: "소제목",
+      description: "조항 제목을 표시하는 변수"
+    },
+    {
+      label: "상세항목 변수명",
+      value: clause.autoContentVariable, 
+      fieldName: "상세항목",
+      description: "조항 내용을 표시하는 변수"
+    }
+  ]
+
+  return (
+    <Dialog {...props}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Eye className="h-5 w-5" />
+            PDFTron 변수명 보기
+          </DialogTitle>
+          <DialogDescription>
+            현재 조항에 설정된 PDFTron 변수명을 확인하고 복사할 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 조항 정보 */}
+        <div className="p-3 bg-muted/50 rounded-lg">
+          <div className="font-medium mb-2">조항 정보</div>
+          <div className="space-y-1 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">{clause.itemNumber}</Badge>
+              <span>{clause.subtitle}</span>
+              <Badge variant={clause.hasAllVariableNames ? "default" : "destructive"}>
+                {clause.hasAllVariableNames ? "설정됨" : "미설정"}
+              </Badge>
+            </div>
+            {clause.fullPath && (
+              <div>경로: {clause.fullPath}</div>
+            )}
+            {clause.category && (
+              <div>분류: {clause.category}</div>
+            )}
+          </div>
+        </div>
+
+        {/* 변수명 목록 */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium">설정된 변수명</h3>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={copyAllVariables}
+              className="h-8"
+            >
+              <Copy className="mr-2 h-3 w-3" />
+              전체 복사
+            </Button>
+          </div>
+
+          <div className="space-y-3">
+            {variables.map((variable, index) => (
+              <div key={index} className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-sm font-medium">{variable.label}</div>
+                    <div className="text-xs text-muted-foreground">{variable.description}</div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => copyToClipboard(variable.value, variable.fieldName)}
+                    className="h-8 px-2"
+                  >
+                    {copiedField === variable.fieldName ? (
+                      <Check className="h-3 w-3 text-green-500" />
+                    ) : (
+                      <Copy className="h-3 w-3" />
+                    )}
+                  </Button>
+                </div>
+                <div className="relative">
+                  <Input
+                    value={variable.value}
+                    readOnly
+                    className="font-mono text-xs bg-muted/30"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* PDFTron 템플릿 미리보기 */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">PDFTron 템플릿 미리보기</h3>
+          <div className="p-3 bg-gray-50 border rounded-lg">
+            <div className="space-y-2 text-xs font-mono">
+              <div className="text-blue-600">
+                {"{{" + clause.autoNumberVariable + "}}"}. {"{{" + clause.autoSubtitleVariable + "}}"}
+              </div>
+              <div className="text-gray-600 ml-4">
+                {"{{" + clause.autoContentVariable + "}}"}
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground mt-2">
+              실제 문서에서 위와 같은 형태로 표시됩니다.
+            </div>
+          </div>
+        </div>
+
+        {/* 실제 값 미리보기 */}
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium">실제 값 미리보기</h3>
+          <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+            <div className="space-y-2 text-sm">
+              <div className="font-medium text-blue-900">
+                {clause.itemNumber}. {clause.subtitle}
+              </div>
+              {clause.content && (
+                <div className="text-blue-800 ml-4">
+                  {clause.content.length > 150 
+                    ? `${clause.content.substring(0, 150)}...`
+                    : clause.content
+                  }
+                </div>
+              )}
+              {!clause.content && (
+                <div className="text-blue-600 ml-4 italic">
+                  (그룹핑 조항 - 상세내용 없음)
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          {onEditVariables && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                props.onOpenChange?.(false)
+                onEditVariables()
+              }}
+            >
+              <Settings2 className="mr-2 h-4 w-4" />
+              변수 설정 수정
+            </Button>
+          )}
+          <Button
+            onClick={() => props.onOpenChange?.(false)}
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/service.ts b/lib/basic-contract/service.ts
index 194d27eb..8189381b 100644
--- a/lib/basic-contract/service.ts
+++ b/lib/basic-contract/service.ts
@@ -31,7 +31,8 @@ import {
   type GtcVendorClause,

   type GtcClause,

   projects,

-  legalWorks

+  legalWorks,

+  BasicContractView, users

 } from "@/db/schema";

 import path from "path";

 

@@ -39,6 +40,9 @@ import {
   GetBasicContractTemplatesSchema,

   CreateBasicContractTemplateSchema,

   GetBasciContractsSchema,

+  GetBasciContractsVendorSchema,

+  GetBasciContractsByIdSchema,

+  updateStatusSchema,

 } from "./validations";

 import { readFile } from "fs/promises"

 

@@ -689,8 +693,8 @@ export async function getBasicContractsByVendorId(
   input: GetBasciContractsVendorSchema,

   vendorId: number

 ) {

-  // return unstable_cache(

-  //   async () => {

+  return unstable_cache(

+    async () => {

       try {

         const offset = (input.page - 1) * input.perPage;

 

@@ -757,13 +761,13 @@ export async function getBasicContractsByVendorId(
         // 에러 발생 시 디폴트

         return { data: [], pageCount: 0 };

       }

-  //   },

-  //   [JSON.stringify(input), String(vendorId)], // 캐싱 키에 vendorId 추가

-  //   {

-  //     revalidate: 3600,

-  //     tags: ["basicContractView-vendor"], // revalidateTag("basicContractView") 호출 시 무효화

-  //   }

-  // )();

+    },

+    [JSON.stringify(input), String(vendorId)], // 캐싱 키에 vendorId 추가

+    {

+      revalidate: 3600,

+      tags: ["basicContractView-vendor"], // revalidateTag("basicContractView") 호출 시 무효화

+    }

+  )();

 }

 

 

@@ -2115,10 +2119,10 @@ export async function getVendorGtcData(contractId?: number): Promise<GtcVendorDa
         isSubtitleModified: gtcVendorClauses.isSubtitleModified,

         isContentModified: gtcVendorClauses.isContentModified,

       })

-      .from(gtcClauses)

+       .from(gtcClauses)

       .leftJoin(gtcVendorClauses, and(

         eq(gtcVendorClauses.baseClauseId, gtcClauses.id),

-        vendorDocument.id ? eq(gtcVendorClauses.vendorDocumentId, vendorDocument.id) : sql`false`, // 벤더 문서가 없으면 조인하지 않음

+        vendorDocument.id ? eq(gtcVendorClauses.vendorDocumentId, vendorDocument.id) : sql`false`,

         eq(gtcVendorClauses.isActive, true)

       ))

       .where(

@@ -2129,23 +2133,57 @@ export async function getVendorGtcData(contractId?: number): Promise<GtcVendorDa
       )

       .orderBy(gtcClauses.sortOrder);

 

+          let negotiationHistoryMap = new Map();

+    

+    if (vendorDocument.id) {

+      const vendorClauseIds = clausesResult

+        .filter(c => c.vendorClauseId)

+        .map(c => c.vendorClauseId);

+

+      if (vendorClauseIds.length > 0) {

+        const histories = await db

+          .select({

+            vendorClauseId: gtcNegotiationHistory.vendorClauseId,

+            action: gtcNegotiationHistory.action,

+            previousStatus: gtcNegotiationHistory.previousStatus,

+            newStatus: gtcNegotiationHistory.newStatus,

+            comment: gtcNegotiationHistory.comment,

+            actorType: gtcNegotiationHistory.actorType,

+            actorId: gtcNegotiationHistory.actorId,

+            actorName: gtcNegotiationHistory.actorName,

+            actorEmail: gtcNegotiationHistory.actorEmail,

+            createdAt: gtcNegotiationHistory.createdAt,

+            changedFields: gtcNegotiationHistory.changedFields,

+          })

+          .from(gtcNegotiationHistory)

+          .leftJoin(users, eq(gtcNegotiationHistory.actorId, users.id))

+          .where(inArray(gtcNegotiationHistory.vendorClauseId, vendorClauseIds))

+          .orderBy(desc(gtcNegotiationHistory.createdAt));

+

+        // 벤더 조항별로 이력 그룹화

+        histories.forEach(history => {

+          if (!negotiationHistoryMap.has(history.vendorClauseId)) {

+            negotiationHistoryMap.set(history.vendorClauseId, []);

+          }

+          negotiationHistoryMap.get(history.vendorClauseId).push(history);

+        });

+      }

+    }

+

+

+

     // 6. 데이터 변환 및 추가 정보 계산

-    const clauses = clausesResult.map(clause => {

-      // 벤더별 수정사항이 있는지 확인

+       const clauses = clausesResult.map(clause => {

       const hasVendorData = !!clause.vendorClauseId;

+      const negotiationHistory = hasVendorData ? 

+        (negotiationHistoryMap.get(clause.vendorClauseId) || []) : [];

       

-      const hasModifications = hasVendorData && (

-        clause.isNumberModified || 

-        clause.isCategoryModified || 

-        clause.isSubtitleModified || 

-        clause.isContentModified

-      );

-      

-      const hasComment = hasVendorData && !!clause.negotiationNote;

+      // 코멘트가 있는 이력들만 필터링

+      const commentHistory = negotiationHistory.filter(h => h.comment);

+      const latestComment = commentHistory[0]?.comment || null;

+      const hasComment = commentHistory.length > 0;

       

       return {

-        // 벤더 조항 ID (있는 경우만, 없으면 null)

-        // id: clause.vendorClauseId,

         id: clause.baseClauseId,

         vendorClauseId: clause.vendorClauseId,

         vendorDocumentId: hasVendorData ? clause.vendorDocumentId : null,

@@ -2174,15 +2212,16 @@ export async function getVendorGtcData(contractId?: number): Promise<GtcVendorDa
         baseContent: clause.baseContent,

         

         // 수정 여부

-        hasModifications,

+        // hasModifications,

         isNumberModified: clause.isNumberModified || false,

         isCategoryModified: clause.isCategoryModified || false,

         isSubtitleModified: clause.isSubtitleModified || false,

         isContentModified: clause.isContentModified || false,

         

-        // 코멘트 관련

-        hasComment,

-        pendingComment: null, // 클라이언트에서 관리

+           hasComment,

+        latestComment,

+        commentHistory, // 전체 코멘트 이력

+        negotiationHistory, // 전체 협의 이력

       };

     });

 

@@ -2218,8 +2257,8 @@ interface VendorDocument {
 export async function updateVendorClause(

   baseClauseId: number,

   vendorClauseId: number | null,

-  clauseData: ClauseUpdateData,

-  vendorDocument?: VendorDocument

+  clauseData: any,

+  vendorDocument: any

 ): Promise<{ success: boolean; error?: string; vendorClauseId?: number; vendorDocumentId?: number }> {

   try {

     const session = await getServerSession(authOptions);

@@ -2228,10 +2267,10 @@ export async function updateVendorClause(
     }

 

     const companyId = session.user.companyId;

-    const vendorId = companyId; // companyId를 vendorId로 사용

+    const vendorId = companyId;

     const userId = Number(session.user.id);

 

-    // 1. 기본 조항 정보 가져오기 (비교용)

+    // 1. 기본 조항 정보 가져오기

     const baseClause = await db.query.gtcClauses.findFirst({

       where: eq(gtcClauses.id, baseClauseId),

     });

@@ -2240,11 +2279,22 @@ export async function updateVendorClause(
       return { success: false, error: "기본 조항을 찾을 수 없습니다." };

     }

 

-    // 2. 벤더 문서 ID 확보 (없으면 생성)

+    // 2. 이전 코멘트 가져오기 (vendorClauseId가 있는 경우)

+    let previousComment = null;

+    if (vendorClauseId) {

+      const previousData = await db

+        .select({ comment: gtcVendorClauses.negotiationNote })

+        .from(gtcVendorClauses)

+        .where(eq(gtcVendorClauses.id, vendorClauseId))

+        .limit(1);

+      

+      previousComment = previousData?.[0]?.comment || null;

+    }

+

+    // 3. 벤더 문서 ID 확보 (없으면 생성)

     let finalVendorDocumentId = vendorDocument?.id;

 

     if (!finalVendorDocumentId && vendorDocument) {

-      // 벤더 문서 생성

       const newVendorDoc = await db.insert(gtcVendorDocuments).values({

         vendorId: vendorId,

         baseDocumentId: vendorDocument.baseDocumentId,

@@ -2268,7 +2318,7 @@ export async function updateVendorClause(
       return { success: false, error: "벤더 문서 ID를 확보할 수 없습니다." };

     }

 

-    // 3. 수정 여부 확인

+    // 4. 수정 여부 확인

     const isNumberModified = clauseData.itemNumber !== baseClause.itemNumber;

     const isCategoryModified = clauseData.category !== baseClause.category;

     const isSubtitleModified = clauseData.subtitle !== baseClause.subtitle;

@@ -2277,7 +2327,7 @@ export async function updateVendorClause(
     const hasAnyModifications = isNumberModified || isCategoryModified || isSubtitleModified || isContentModified;

     const hasComment = !!(clauseData.comment?.trim());

 

-    // 4. 벤더 조항 데이터 준비

+    // 5. 벤더 조항 데이터 준비

     const vendorClauseData = {

       vendorDocumentId: finalVendorDocumentId,

       baseClauseId: baseClauseId,

@@ -2286,22 +2336,19 @@ export async function updateVendorClause(
       sortOrder: baseClause.sortOrder,

       fullPath: baseClause.fullPath,

       

-      // 수정된 값들 (수정되지 않았으면 null로 저장)

       modifiedItemNumber: isNumberModified ? clauseData.itemNumber : null,

       modifiedCategory: isCategoryModified ? clauseData.category : null,

       modifiedSubtitle: isSubtitleModified ? clauseData.subtitle : null,

       modifiedContent: isContentModified ? clauseData.content : null,

       

-      // 수정 여부 플래그

       isNumberModified,

       isCategoryModified,

       isSubtitleModified,

       isContentModified,

       

-      // 상태 정보

       reviewStatus: (hasAnyModifications || hasComment) ? 'reviewing' : 'draft',

       negotiationNote: clauseData.comment?.trim() || null,

-      editReason: clauseData.comment?.trim() || null, // 수정 이유도 동일하게 저장

+      editReason: clauseData.comment?.trim() || null,

       

       updatedAt: new Date(),

       updatedById: userId,

@@ -2309,9 +2356,8 @@ export async function updateVendorClause(
 

     let finalVendorClauseId = vendorClauseId;

 

-    // 5. 벤더 조항 생성 또는 업데이트

+    // 6. 벤더 조항 생성 또는 업데이트

     if (vendorClauseId) {

-      // 기존 벤더 조항 업데이트

       await db

         .update(gtcVendorClauses)

         .set(vendorClauseData)

@@ -2319,7 +2365,6 @@ export async function updateVendorClause(
 

       console.log(`벤더 조항 업데이트: ${vendorClauseId}`);

     } else {

-      // 새 벤더 조항 생성

       const newVendorClause = await db.insert(gtcVendorClauses).values({

         ...vendorClauseData,

         createdById: userId,

@@ -2333,21 +2378,24 @@ export async function updateVendorClause(
       console.log(`새 벤더 조항 생성: ${finalVendorClauseId}`);

     }

 

-    // 6. 협의 이력에 기록

-    if (hasAnyModifications || hasComment) {

-      const historyAction = hasAnyModifications ? 'modified' : 'commented';

-      const historyComment = hasAnyModifications 

-        ? `조항 수정: ${clauseData.comment || '수정 이유 없음'}`

-        : clauseData.comment;

-

+    // 7. 협의 이력에 기록 (코멘트가 변경된 경우만)

+    if (clauseData.comment !== previousComment) {

       await db.insert(gtcNegotiationHistory).values({

         vendorClauseId: finalVendorClauseId,

-        action: historyAction,

-        comment: historyComment?.trim(),

-        actorType: 'vendor',

-        actorId: session.user.id,

+        action: previousComment ? "modified" : "commented",

+        comment: clauseData.comment || null,

+        previousStatus: null,

+        newStatus: 'reviewing',

+        actorType: "vendor",

+        actorId: userId,

         actorName: session.user.name,

         actorEmail: session.user.email,

+        changedFields: {

+          comment: {

+            from: previousComment,

+            to: clauseData.comment || null

+          }

+        }

       });

     }

 

@@ -2365,7 +2413,6 @@ export async function updateVendorClause(
     };

   }

 }

-

 // 기존 함수는 호환성을 위해 유지하되, 새 함수를 호출하도록 변경

 export async function updateVendorClauseComment(   

   clauseId: number,   

@@ -2635,6 +2682,140 @@ export async function requestLegalReviewAction(
   }

 }

 

+export async function resendContractsAction(contractIds: number[]) {

+  try {

+    // 세션 확인

+    const session = await getServerSession(authOptions)

+    if (!session?.user?.id) {

+      throw new Error('인증이 필요합니다.')

+    }

+

+    // 계약서 정보 조회

+    const contracts = await db

+      .select({

+        id: basicContract.id,

+        vendorId: basicContract.vendorId,

+        fileName: basicContract.fileName,

+        deadline: basicContract.deadline,

+        status: basicContract.status,

+        createdAt: basicContract.createdAt,

+      })

+      .from(basicContract)

+      .where(inArray(basicContract.id, contractIds))

+

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

+      throw new Error('발송할 계약서를 찾을 수 없습니다.')

+    }

+

+    // 각 계약서에 대해 이메일 발송

+    const emailPromises = contracts.map(async (contract) => {

+      // 벤더 정보 조회

+      const vendor = await db

+        .select({

+          id: vendors.id,

+          vendorName: vendors.vendorName,

+          vendorCode: vendors.vendorCode,

+          country: vendors.country,

+          email: vendors.email,

+        })

+        .from(vendors)

+        .where(eq(vendors.id, contract.vendorId!))

+        .limit(1)

+

+      if (!vendor[0]) {

+        console.error(`벤더를 찾을 수 없습니다: vendorId ${contract.vendorId}`)

+        return null

+      }

+

+      // 벤더 연락처 조회 (Primary 연락처 우선, 없으면 첫 번째 연락처)

+      const contacts = await db

+        .select({

+          contactName: vendorContacts.contactName,

+          contactEmail: vendorContacts.contactEmail,

+          isPrimary: vendorContacts.isPrimary,

+        })

+        .from(vendorContacts)

+        .where(eq(vendorContacts.vendorId, vendor[0].id))

+        .orderBy(vendorContacts.isPrimary)

+

+      // 이메일 수신자 결정 (Primary 연락처 > 첫 번째 연락처 > 벤더 기본 이메일)

+      const primaryContact = contacts.find(c => c.isPrimary)

+      const recipientEmail = primaryContact?.contactEmail || contacts[0]?.contactEmail || vendor[0].email

+      const recipientName = primaryContact?.contactName || contacts[0]?.contactName || vendor[0].vendorName

+

+      if (!recipientEmail) {

+        console.error(`이메일 주소를 찾을 수 없습니다: vendorId ${vendor[0].id}`)

+        return null

+      }

+

+      // 언어 결정 (한국 = 한글, 그 외 = 영어)

+      const isKorean = vendor[0].country === 'KR'

+      const template = isKorean ? 'contract-reminder-kr' : 'contract-reminder-en'

+      const subject = isKorean 

+        ? '[eVCP] 계약서 서명 요청 리마인더' 

+        : '[eVCP] Contract Signature Reminder'

+

+      // 마감일 포맷팅

+      const deadlineDate = new Date(contract.deadline)

+      const formattedDeadline = isKorean

+        ? `${deadlineDate.getFullYear()}년 ${deadlineDate.getMonth() + 1}월 ${deadlineDate.getDate()}일`

+        : deadlineDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })

+

+      // 남은 일수 계산

+      const today = new Date()

+      today.setHours(0, 0, 0, 0)

+      const deadline = new Date(contract.deadline)

+      deadline.setHours(0, 0, 0, 0)

+      const daysRemaining = Math.ceil((deadline.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))

+

+      // 이메일 발송

+      await sendEmail({

+        from: session.user.email,

+        to: recipientEmail,

+        subject,

+        template,

+        context: {

+          recipientName,

+          vendorName: vendor[0].vendorName,

+          vendorCode: vendor[0].vendorCode,

+          contractFileName: contract.fileName,

+          deadline: formattedDeadline,

+          daysRemaining,

+          senderName: session.user.name || session.user.email,

+          senderEmail: session.user.email,

+          // 계약서 링크 (실제 환경에 맞게 수정 필요)

+          contractLink: `${process.env.NEXT_PUBLIC_APP_URL}/contracts/${contract.id}`,

+        },

+      })

+

+      console.log(`리마인더 이메일 발송 완료: ${recipientEmail} (계약서 ID: ${contract.id})`)

+      return { contractId: contract.id, email: recipientEmail }

+    })

+

+    const results = await Promise.allSettled(emailPromises)

+    

+    // 성공/실패 카운트

+    const successful = results.filter(r => r.status === 'fulfilled' && r.value !== null).length

+    const failed = results.filter(r => r.status === 'rejected' || (r.status === 'fulfilled' && r.value === null)).length

+

+    if (failed > 0) {

+      console.warn(`${failed}건의 이메일 발송 실패`)

+    }

+

+    return {

+      success: true,

+      message: `${successful}건의 리마인더 이메일을 발송했습니다.`,

+      successful,

+      failed,

+    }

+

+  } catch (error) {

+    console.error('계약서 재발송 중 오류:', error)

+    throw new Error('계약서 재발송 중 오류가 발생했습니다.')

+  }

+}

+

+

 export async function processBuyerSignatureAction(

   contractId: number,

   signedFileData: ArrayBuffer,

@@ -2962,4 +3143,267 @@ export async function getVendorSignatureFile() {
       error: error instanceof Error ? error.message : "파일을 읽는 중 오류가 발생했습니다."

     }

   }

-}
\ No newline at end of file
+}

+

+

+

+

+// templateName에서 project code 추출

+function extractProjectCodeFromTemplateName(templateName: string): string | null {

+  if (!templateName.includes('GTC')) return null;

+  if (templateName.toLowerCase().includes('general')) return null;

+  

+  // GTC 앞의 문자열을 추출

+  const gtcIndex = templateName.indexOf('GTC');

+  if (gtcIndex > 0) {

+    const beforeGTC = templateName.substring(0, gtcIndex).trim();

+    // 마지막 단어를 project code로 간주

+    const words = beforeGTC.split(/\s+/);

+    return words[words.length - 1];

+  }

+  

+  return null;

+}

+

+// 단일 contract에 대한 GTC 정보 확인

+async function checkGTCCommentsForContract(

+  templateName: string,

+  vendorId: number

+): Promise<{ gtcDocumentId: number | null; hasComments: boolean }> {

+  try {

+    const projectCode = extractProjectCodeFromTemplateName(templateName);

+    let gtcDocumentId: number | null = null;

+

+    console.log(projectCode,"projectCode")

+

+    // 1. GTC Document ID 찾기

+    if (projectCode && projectCode.trim() !== '') {

+      // Project GTC인 경우

+      const project = await db

+        .select({ id: projects.id })

+        .from(projects)

+        .where(eq(projects.code, projectCode.trim()))

+        .limit(1)

+

+      if (project.length > 0) {

+        const projectGtcDoc = await db

+          .select({ id: gtcDocuments.id })

+          .from(gtcDocuments)

+          .where(

+            and(

+              eq(gtcDocuments.projectId, project[0].id),

+              eq(gtcDocuments.isActive, true)

+            )

+          )

+          .orderBy(desc(gtcDocuments.revision))

+          .limit(1)

+

+        if (projectGtcDoc.length > 0) {

+          gtcDocumentId = projectGtcDoc[0].id

+        }

+      }

+    } else {

+      // Standard GTC인 경우 (general 포함하거나 project code가 없는 경우)

+      const standardGtcDoc = await db

+        .select({ id: gtcDocuments.id })

+        .from(gtcDocuments)

+        .where(

+          and(

+            eq(gtcDocuments.type, "standard"),

+            eq(gtcDocuments.isActive, true),

+            isNull(gtcDocuments.projectId)

+          )

+        )

+        .orderBy(desc(gtcDocuments.revision))

+        .limit(1)

+

+      if (standardGtcDoc.length > 0) {

+        gtcDocumentId = standardGtcDoc[0].id

+      }

+    }

+

+    console.log(gtcDocumentId,"gtcDocumentId")

+

+    // GTC Document를 찾지 못한 경우

+    if (!gtcDocumentId) {

+      return { gtcDocumentId: null, hasComments: false };

+    }

+

+    // 2. 코멘트 존재 여부 확인

+    // gtcDocumentId로 해당 벤더의 vendor documents 찾기

+    const vendorDocuments = await db

+      .select({ id: gtcVendorDocuments.id })

+      .from(gtcVendorDocuments)

+      .where(

+        and(

+          eq(gtcVendorDocuments.baseDocumentId, gtcDocumentId),

+          eq(gtcVendorDocuments.vendorId, vendorId),

+          eq(gtcVendorDocuments.isActive, true)

+        )

+      )

+      .limit(1)

+

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

+      return { gtcDocumentId, hasComments: false };

+    }

+

+    // vendor document에 연결된 clauses에서 negotiation history 확인

+    const commentsExist = await db

+      .select({ count: gtcNegotiationHistory.id })

+      .from(gtcNegotiationHistory)

+      .innerJoin(

+        gtcVendorClauses,

+        eq(gtcNegotiationHistory.vendorClauseId, gtcVendorClauses.id)

+      )

+      .where(

+        and(

+          eq(gtcVendorClauses.vendorDocumentId, vendorDocuments[0].id),

+          eq(gtcVendorClauses.isActive, true),

+          isNotNull(gtcNegotiationHistory.comment),

+          ne(gtcNegotiationHistory.comment, '')

+        )

+      )

+      .limit(1)

+

+    return {

+      gtcDocumentId,

+      hasComments: commentsExist.length > 0

+    };

+

+  } catch (error) {

+    console.error('Error checking GTC comments for contract:', error);

+    return { gtcDocumentId: null, hasComments: false };

+  }

+}

+

+// 전체 contract 리스트에 대해 GTC document ID와 comment 정보 수집

+export async function checkGTCCommentsForContracts(

+  contracts: BasicContractView[]

+): Promise<Record<number, { gtcDocumentId: number | null; hasComments: boolean }>> {

+  const gtcData: Record<number, { gtcDocumentId: number | null; hasComments: boolean }> = {};

+  

+  // GTC가 포함된 contract만 필터링

+  const gtcContracts = contracts.filter(contract => 

+    contract.templateName?.includes('GTC')

+  );

+  

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

+    return gtcData;

+  }

+  

+  // Promise.all을 사용해서 병렬 처리

+  const checkPromises = gtcContracts.map(async (contract) => {

+    try {

+      const result = await checkGTCCommentsForContract(

+        contract.templateName!,

+        contract.vendorId!

+      );

+      

+      return { 

+        contractId: contract.id, 

+        gtcDocumentId: result.gtcDocumentId,

+        hasComments: result.hasComments 

+      };

+    } catch (error) {

+      console.error(`Error checking GTC for contract ${contract.id}:`, error);

+      return { 

+        contractId: contract.id, 

+        gtcDocumentId: null,

+        hasComments: false 

+      };

+    }

+  });

+  

+  const results = await Promise.all(checkPromises);

+  

+  // 결과를 Record 형태로 변환

+  results.forEach(({ contractId, gtcDocumentId, hasComments }) => {

+    gtcData[contractId] = { gtcDocumentId, hasComments };

+  });

+  

+  return gtcData;

+}

+

+

+

+export async function updateVendorDocumentStatus(

+  formData: FormData | { 

+    status: string;

+    vendorDocumentId: number;

+    documentId: number;

+    vendorId: number;

+  }

+) {

+  try {

+    // 세션 확인

+    const session = await getServerSession(authOptions)

+    if (!session?.user) {

+      return { success: false, error: "인증되지 않은 사용자입니다." }

+    }

+

+    // 데이터 파싱

+    const rawData = formData instanceof FormData

+      ? {

+          status: formData.get("status") as string,

+          vendorDocumentId: Number(formData.get("vendorDocumentId")),

+          documentId: Number(formData.get("documentId")),

+          vendorId: Number(formData.get("vendorId")),

+        }

+      : formData

+

+    // 유효성 검사

+    const validatedData = updateStatusSchema.safeParse(rawData)

+    if (!validatedData.success) {

+      return { success: false, error: "유효하지 않은 데이터입니다." }

+    }

+

+    const { status, vendorDocumentId, documentId, vendorId } = validatedData.data

+

+    // 완료 상태로 변경 시, 모든 조항이 approved 상태인지 확인

+    if (status === "complete") {

+      // 승인되지 않은 조항 확인

+      const pendingClauses = await db

+        .select({ id: gtcVendorClauses.id })

+        .from(gtcVendorClauses)

+        .where(

+          and(

+            eq(gtcVendorClauses.vendorDocumentId, vendorDocumentId),

+            eq(gtcVendorClauses.isActive, true),

+            not(eq(gtcVendorClauses.reviewStatus, "approved")),

+            not(eq(gtcVendorClauses.isExcluded, true)) // 제외된 조항은 검사에서 제외

+          )

+        )

+        .limit(1)

+

+      if (pendingClauses.length > 0) {

+        return { 

+          success: false, 

+          error: "모든 조항이 승인되어야 협의 완료 처리가 가능합니다." 

+        }

+      }

+    }

+

+    // 업데이트 실행

+    await db

+      .update(gtcVendorDocuments)

+      .set({

+        reviewStatus: status,

+        updatedAt: new Date(),

+        updatedById: Number(session.user.id),

+        // 완료 처리 시 협의 종료일 설정

+        ...(status === "complete" ? { 

+          negotiationEndDate: new Date(),

+          approvalDate: new Date()

+        } : {})

+      })

+      .where(eq(gtcVendorDocuments.id, vendorDocumentId))

+

+    // 캐시 무효화

+    // revalidatePath(`/evcp/gtc/${documentId}?vendorId=${vendorId}`)

+

+    return { success: true }

+  } catch (error) {

+    console.error("Error updating vendor document status:", error)

+    return { success: false, error: "상태 업데이트 중 오류가 발생했습니다." }

+  }

+}

diff --git a/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
index 3b5cdd21..37ae135c 100644
--- a/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
+++ b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
@@ -21,7 +21,7 @@ import { Badge } from "@/components/ui/badge"
 import { Textarea } from "@/components/ui/textarea"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
-import { prepareFinalApprovalAction, quickFinalApprovalAction, requestLegalReviewAction } from "../service"
+import { prepareFinalApprovalAction, quickFinalApprovalAction, requestLegalReviewAction, resendContractsAction } from "../service"
 import { BasicContractSignDialog } from "../vendor-table/basic-contract-sign-dialog"
 
 interface BasicContractDetailTableToolbarActionsProps {
@@ -222,12 +222,12 @@ export function BasicContractDetailTableToolbarActions({ table }: BasicContractD
         setFinalApproveDialog(true)
     }
 
-    // 재발송 확인
+    // 재요청 확인
     const confirmResend = async () => {
         setLoading(true)
         try {
             // TODO: 서버액션 호출
-            // await resendContractsAction(resendContracts.map(c => c.id))
+            await resendContractsAction(resendContracts.map(c => c.id))
 
             console.log("대량 재발송:", resendContracts)
             toast.success(`${resendContracts.length}건의 계약서 재발송을 완료했습니다`)
@@ -339,7 +339,7 @@ export function BasicContractDetailTableToolbarActions({ table }: BasicContractD
                     </span>
                 </Button>
 
-                {/* 재발송 버튼 */}
+                {/* 재요청 버튼 */}
                 <Button
                     variant="outline"
                     size="sm"
@@ -350,7 +350,7 @@ export function BasicContractDetailTableToolbarActions({ table }: BasicContractD
                 >
                     <Mail className="size-4" aria-hidden="true" />
                     <span className="hidden sm:inline">
-                        재발송 {hasSelectedRows ? `(${selectedRows.length})` : ''}
+                        재요청 {hasSelectedRows ? `(${selectedRows.length})` : ''}
                     </span>
                 </Button>
 
diff --git a/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx b/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx
index 80c39d1e..9a140b27 100644
--- a/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx
+++ b/lib/basic-contract/status-detail/basic-contracts-detail-columns.tsx
@@ -1,4 +1,4 @@
-// basic-contracts-detail-columns.tsx
+// simple-basic-contracts-detail-columns.tsx
 "use client"
 
 import * as React from "react"
@@ -10,7 +10,16 @@ import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
 import { Button } from "@/components/ui/button"
-import { MoreHorizontal, Download, Eye, Mail, FileText, Clock } from "lucide-react"
+import { 
+    MoreHorizontal, 
+    Download, 
+    Eye, 
+    Mail, 
+    FileText, 
+    Clock, 
+    MessageCircle,
+    Loader2
+} from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,11 +29,18 @@ import {
 import { BasicContractView } from "@/db/schema"
 import { downloadFile, quickPreview } from "@/lib/file-download"
 import { toast } from "sonner"
+import { useRouter } from "next/navigation"
 
 interface GetColumnsProps {
   setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<BasicContractView> | null>>
+  gtcData: Record<number, { gtcDocumentId: number | null; hasComments: boolean }>
+  isLoadingGtcData: boolean
+  router: NextRouter;
 }
 
+type NextRouter = ReturnType<typeof useRouter>;
+
+
 const CONTRACT_STATUS_CONFIG = {
   PENDING: { label: "발송완료", color: "gray" },
   VENDOR_SIGNED: { label: "협력업체 서명완료", color: "blue" },
@@ -35,7 +51,12 @@ const CONTRACT_STATUS_CONFIG = {
   REJECTED: { label: "거절됨", color: "red" },
 } as const
 
-export function getDetailColumns({ setRowAction }: GetColumnsProps): ColumnDef<BasicContractView>[] {
+export function getDetailColumns({ 
+  setRowAction, 
+  gtcData, 
+  isLoadingGtcData,
+  router 
+}: GetColumnsProps): ColumnDef<BasicContractView>[] {
   
   const selectColumn: ColumnDef<BasicContractView> = {
     id: "select",
@@ -163,7 +184,7 @@ export function getDetailColumns({ setRowAction }: GetColumnsProps): ColumnDef<B
       minSize: 120,
     },
     
-    // 업체명
+    // 업체명 (GTC 정보 포함)
     {
       accessorKey: "vendorName",
       header: ({ column }) => (
@@ -171,11 +192,51 @@ export function getDetailColumns({ setRowAction }: GetColumnsProps): ColumnDef<B
       ),
       cell: ({ row }) => {
         const name = row.getValue("vendorName") as string | null
+        const contract = row.original
+        const isGTCTemplate = contract.templateName?.includes('GTC')
+        const contractGtcData = gtcData[contract.id]
+
+        const handleOpenGTC = (e: React.MouseEvent) => {
+          e.stopPropagation()
+          if (contractGtcData?.gtcDocumentId) {
+            const gtcUrl = `/evcp/basic-contract/vendor-gtc/${contractGtcData.gtcDocumentId}?vendorId=${contract.vendorId}&vendorName=${encodeURIComponent(contract.vendorName || '')}&contractId=${contract.id}&templateId=${contract.templateId}`
+            window.open(gtcUrl, '_blank')
+          }
+        }
+
         return (
+          <div className="flex items-center gap-2">
             <div className="font-medium">{name || "-"}</div>
+            {isGTCTemplate && (
+              <div className="flex items-center gap-1">
+                {isLoadingGtcData ? (
+                  <Loader2 className="h-3 w-3 animate-spin text-gray-400" />
+                ) : contractGtcData ? (
+                  <div className="flex items-center gap-1">
+                    {contractGtcData.hasComments && (
+                      <Badge 
+                        variant="secondary" 
+                        className="text-xs bg-orange-100 text-orange-700 cursor-pointer hover:bg-orange-200"
+                        title={`GTC Document ID: ${contractGtcData.gtcDocumentId} - 클릭하여 협의이력 보기`}
+                        onClick={handleOpenGTC}
+                      >
+                        <MessageCircle className="h-3 w-3 mr-1" />
+                        협의이력
+                      </Badge>
+                    )}
+                    
+                  </div>
+                ) : (
+                  <Badge variant="secondary" className="text-xs">
+                    GTC
+                  </Badge>
+                )}
+              </div>
+            )}
+          </div>
         )
       },
-      minSize: 180,
+      minSize: 250,
     },
     
     // 진행상태
@@ -349,7 +410,6 @@ export function getDetailColumns({ setRowAction }: GetColumnsProps): ColumnDef<B
       minSize: 120,
     },
 
-
     // 서명된 파일
     {
         accessorKey: "signedFileName",
diff --git a/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx b/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx
index 2698842e..f18359de 100644
--- a/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx
+++ b/lib/basic-contract/status-detail/basic-contracts-detail-table.tsx
@@ -9,9 +9,11 @@ import type {
     DataTableRowAction,
 } from "@/types/table"
 import { getDetailColumns } from "./basic-contracts-detail-columns"
-import { getBasicContractsByTemplateId } from "@/lib/basic-contract/service"
+import { getBasicContractsByTemplateId, checkGTCCommentsForContracts } from "@/lib/basic-contract/service"
 import { BasicContractView } from "@/db/schema"
 import { BasicContractDetailTableToolbarActions } from "./basic-contract-detail-table-toolbar-actions"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
 
 interface BasicContractsDetailTableProps {
     templateId: number
@@ -25,14 +27,52 @@ interface BasicContractsDetailTableProps {
 export function BasicContractsDetailTable({ templateId, promises }: BasicContractsDetailTableProps) {
     const [rowAction, setRowAction] =
         React.useState<DataTableRowAction<BasicContractView> | null>(null)
+    
+    // GTC data 상태 관리
+    const [gtcData, setGtcData] = React.useState<Record<number, { gtcDocumentId: number | null; hasComments: boolean }>>({})
+    const [isLoadingGtcData, setIsLoadingGtcData] = React.useState(false)
 
     const [{ data, pageCount }] = React.use(promises)
+    const router = useRouter()
 
-    console.log(data,"data")
+    console.log(gtcData, "gtcData")
+    console.log(data, "data")
+
+    // GTC data 로딩
+    React.useEffect(() => {
+        const loadGtcData = async () => {
+            if (!data || data.length === 0) return;
+            
+            // GTC가 포함된 template이 있는지 확인
+            const hasGtcTemplates = data.some(contract => 
+                contract.templateName?.includes('GTC')
+            );
+            
+            if (!hasGtcTemplates) return;
+            
+            setIsLoadingGtcData(true);
+            try {
+                const gtcResults = await checkGTCCommentsForContracts(data);
+                setGtcData(gtcResults);
+            } catch (error) {
+                console.error('Error checking GTC data:', error);
+                toast.error("GTC 데이터를 불러오는데 실패했습니다.");
+            } finally {
+                setIsLoadingGtcData(false);
+            }
+        };
+
+        loadGtcData();
+    }, [data]);
 
     const columns = React.useMemo(
-        () => getDetailColumns({ setRowAction }),
-        [setRowAction]
+        () => getDetailColumns({ 
+            setRowAction, 
+            gtcData, 
+            isLoadingGtcData ,
+            router
+        }),
+        [setRowAction, gtcData, isLoadingGtcData, router]
     )
 
     const advancedFilterFields: DataTableAdvancedFilterField<BasicContractView>[] = [
@@ -76,15 +116,13 @@ export function BasicContractsDetailTable({ templateId, promises }: BasicContrac
     })
 
     return (
-        <>
-            <DataTable table={table}>
-                <DataTableAdvancedToolbar
-                    table={table}
-                    filterFields={advancedFilterFields}
-                >
-                    <BasicContractDetailTableToolbarActions table={table} />
-                </DataTableAdvancedToolbar>
-            </DataTable>
-        </>
+        <DataTable table={table}>
+            <DataTableAdvancedToolbar
+                table={table}
+                filterFields={advancedFilterFields}
+            >
+                <BasicContractDetailTableToolbarActions table={table} />
+            </DataTableAdvancedToolbar>
+        </DataTable>
     )
 }
\ No newline at end of file
diff --git a/lib/basic-contract/validations.ts b/lib/basic-contract/validations.ts
index 53738dfc..d558ed84 100644
--- a/lib/basic-contract/validations.ts
+++ b/lib/basic-contract/validations.ts
@@ -146,3 +146,13 @@ export const searchParamsCacheByTemplateId = createSearchParamsCache({
 

 export type GetBasciContractsByIdSchema = Awaited<ReturnType<typeof searchParamsCacheByTemplateId.parse>>;

 

+

+// 상태 업데이트를 위한 스키마

+export const updateStatusSchema = z.object({

+  status: z.enum(["draft", "reviewing", "approved"]),

+  vendorDocumentId: z.number(),

+  documentId: z.number(),

+  vendorId: z.number(),

+})

+

+

diff --git a/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx b/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx
index f70bed94..fa68c9c8 100644
--- a/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx
+++ b/lib/basic-contract/vendor-table/basic-contract-sign-dialog.tsx
@@ -51,9 +51,9 @@ interface BasicContractSignDialogProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-export function BasicContractSignDialog({ 
-  contracts, 
-  onSuccess, 
+export function BasicContractSignDialog({
+  contracts,
+  onSuccess,
   hasSelectedRows = false,
   mode = 'vendor',
   onBuyerSignComplete,
@@ -68,19 +68,26 @@ export function BasicContractSignDialog({
   const [instance, setInstance] = React.useState<null | WebViewerInstance>(null);
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  
+
   // 추가된 state들
   const [additionalFiles, setAdditionalFiles] = React.useState<any[]>([]);
   const [isLoadingAttachments, setIsLoadingAttachments] = React.useState(false);
-  
+
   // 계약서 상태 관리
   const [contractStatuses, setContractStatuses] = React.useState<ContractStatus[]>([]);
-  
+
   // 서명/설문/GTC 코멘트 완료 상태 관리
   const [surveyCompletionStatus, setSurveyCompletionStatus] = React.useState<Record<number, boolean>>({});
   const [signatureStatus, setSignatureStatus] = React.useState<Record<number, boolean>>({});
-  const [gtcCommentStatus, setGtcCommentStatus] = React.useState<Record<number, { hasComments: boolean; commentCount: number }>>({});
-  
+  const [gtcCommentStatus, setGtcCommentStatus] = React.useState<Record<number, {
+    hasComments: boolean;
+    commentCount: number;
+    reviewStatus?: string;
+    isComplete?: boolean;
+  }>>({});
+
+  console.log(gtcCommentStatus, "gtcCommentStatus")
+
   const router = useRouter()
 
   // 실제 사용할 open 상태 (외부 제어가 있으면 외부 상태 사용, 없으면 내부 상태 사용)
@@ -91,7 +98,7 @@ export function BasicContractSignDialog({
   const isBuyerMode = mode === 'buyer';
   const dialogTitle = isBuyerMode ? "구매자 최종승인 서명" : t("basicContracts.dialog.title");
   const signButtonText = isBuyerMode ? "최종승인 완료" : "서명 완료 및 저장";
-  
+
   // 버튼 비활성화 조건
   const isButtonDisabled = !hasSelectedRows || contracts.length === 0;
 
@@ -107,27 +114,31 @@ export function BasicContractSignDialog({
   };
 
   // 현재 선택된 계약서의 서명 완료 가능 여부 확인
-  const canCompleteCurrentContract = React.useMemo(() => {
-    if (!selectedContract) return false;
-    
-    const contractId = selectedContract.id;
-    
-    // 구매자 모드에서는 설문조사나 GTC 체크 불필요
-    if (isBuyerMode) {
-      const signatureCompleted = signatureStatus[contractId] === true;
-      return signatureCompleted;
-    }
-    
-    // 협력업체 모드의 기존 로직
-    const isComplianceTemplate = selectedContract.templateName?.includes('준법');
-    const isGTCTemplate = selectedContract.templateName?.includes('GTC');
-    
-    const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true;
-    const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.hasComments !== true) : true;
+const canCompleteCurrentContract = React.useMemo(() => {
+  if (!selectedContract) return false;
+  
+  const contractId = selectedContract.id;
+  
+  if (isBuyerMode) {
     const signatureCompleted = signatureStatus[contractId] === true;
-    
-    return surveyCompleted && gtcCompleted && signatureCompleted;
-  }, [selectedContract, surveyCompletionStatus, signatureStatus, gtcCommentStatus, isBuyerMode]);
+    return signatureCompleted;
+  }
+  
+  const isComplianceTemplate = selectedContract.templateName?.includes('준법');
+  const isGTCTemplate = selectedContract.templateName?.includes('GTC');
+  
+  const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true;
+  
+  // GTC 체크 수정
+  const gtcStatus = gtcCommentStatus[contractId];
+  const gtcCompleted = isGTCTemplate ? 
+    (!gtcStatus?.hasComments || gtcStatus?.isComplete === true) : true;
+  
+  const signatureCompleted = signatureStatus[contractId] === true;
+  
+  return surveyCompleted && gtcCompleted && signatureCompleted;
+}, [selectedContract, surveyCompletionStatus, signatureStatus, gtcCommentStatus, isBuyerMode]);
+
 
   // 계약서별 상태 초기화
   React.useEffect(() => {
@@ -147,7 +158,7 @@ export function BasicContractSignDialog({
   const allCompleted = completedCount === totalCount && totalCount > 0;
 
   // 현재 선택된 계약서의 상태
-  const currentContractStatus = selectedContract 
+  const currentContractStatus = selectedContract
     ? contractStatuses.find(status => status.id === selectedContract.id)
     : null;
 
@@ -155,7 +166,7 @@ export function BasicContractSignDialog({
   const getNextPendingContract = () => {
     const pendingStatuses = contractStatuses.filter(status => status.status === 'pending');
     if (pendingStatuses.length === 0) return null;
-    
+
     const nextPendingId = pendingStatuses[0].id;
     return contracts.find(contract => contract.id === nextPendingId) || null;
   };
@@ -169,14 +180,14 @@ export function BasicContractSignDialog({
       );
       if (!confirmClose) return;
     }
-    
+
     // 외부 제어가 있으면 외부 콜백 호출, 없으면 내부 상태 업데이트
     if (isControlledExternally && externalOnOpenChange) {
       externalOnOpenChange(isOpen);
     } else {
       setInternalOpen(isOpen);
     }
-    
+
     if (!isOpen) {
       // 다이얼로그 닫을 때 상태 초기화
       setSelectedContract(null);
@@ -226,7 +237,7 @@ export function BasicContractSignDialog({
       }
     }
   }, [open, contracts, selectedContract, contractStatuses]);
-  
+
   // 추가 파일 가져오기 useEffect (구매자 모드에서는 스킵)
   React.useEffect(() => {
     if (isBuyerMode) {
@@ -285,11 +296,17 @@ export function BasicContractSignDialog({
   }, []);
 
   // GTC 코멘트 상태 변경 콜백 함수
-  const handleGtcCommentStatusChange = React.useCallback((contractId: number, hasComments: boolean, commentCount: number) => {
-    console.log(`📋 GTC 코멘트 상태 변경: 계약서 ${contractId}, 코멘트 ${commentCount}개`);
+  const handleGtcCommentStatusChange = React.useCallback((
+    contractId: number,
+    hasComments: boolean,
+    commentCount: number,
+    reviewStatus?: string,
+    isComplete?: boolean
+  ) => {
+    console.log(`📋 GTC 상태 변경: 계약서 ${contractId}, 코멘트 ${commentCount}개, 상태: ${reviewStatus}, 완료: ${isComplete}`);
     setGtcCommentStatus(prev => ({
       ...prev,
-      [contractId]: { hasComments, commentCount }
+      [contractId]: { hasComments, commentCount, reviewStatus, isComplete }
     }));
   }, []);
 
@@ -300,10 +317,10 @@ export function BasicContractSignDialog({
     // 서명 완료 가능 여부 재확인
     if (!canCompleteCurrentContract) {
       const contractId = selectedContract.id;
-      
+
       if (isBuyerMode) {
         const signatureCompleted = signatureStatus[contractId] === true;
-        
+
         if (!signatureCompleted) {
           toast.error("계약서에 서명을 먼저 완료해주세요.", {
             description: "문서의 서명 필드에 서명해주세요.",
@@ -316,9 +333,9 @@ export function BasicContractSignDialog({
         const isComplianceTemplate = selectedContract.templateName?.includes('준법');
         const isGTCTemplate = selectedContract.templateName?.includes('GTC');
         const surveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contractId] === true : true;
-        const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.hasComments !== true) : true;
+        const gtcCompleted = isGTCTemplate ? (gtcCommentStatus[contractId]?.isComplete !== true) : true;
         const signatureCompleted = signatureStatus[contractId] === true;
-        
+
         if (!surveyCompleted) {
           toast.error("준법 설문조사를 먼저 완료해주세요.", {
             description: "설문조사 탭에서 모든 필수 항목을 완료해주세요.",
@@ -326,7 +343,7 @@ export function BasicContractSignDialog({
           });
           return;
         }
-        
+
         if (!gtcCompleted) {
           toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다.", {
             description: "조항 검토 탭에서 모든 코멘트를 삭제하거나 협의를 완료해주세요.",
@@ -334,7 +351,7 @@ export function BasicContractSignDialog({
           });
           return;
         }
-        
+
         if (!signatureCompleted) {
           toast.error("계약서에 서명을 먼저 완료해주세요.", {
             description: "문서의 서명 필드에 서명해주세요.",
@@ -343,7 +360,7 @@ export function BasicContractSignDialog({
           return;
         }
       }
-      
+
       return;
     }
 
@@ -376,9 +393,9 @@ export function BasicContractSignDialog({
 
         if (result.success) {
           // 성공시 해당 계약서 상태를 완료로 업데이트
-          setContractStatuses(prev => 
-            prev.map(status => 
-              status.id === selectedContract.id 
+          setContractStatuses(prev =>
+            prev.map(status =>
+              status.id === selectedContract.id
                 ? { ...status, status: 'completed' as const }
                 : status
             )
@@ -413,9 +430,9 @@ export function BasicContractSignDialog({
           router.refresh();
         } else {
           // 실패시 에러 상태 업데이트
-          setContractStatuses(prev => 
-            prev.map(status => 
-              status.id === selectedContract.id 
+          setContractStatuses(prev =>
+            prev.map(status =>
+              status.id === selectedContract.id
                 ? { ...status, status: 'error' as const, errorMessage: result.message }
                 : status
             )
@@ -432,26 +449,26 @@ export function BasicContractSignDialog({
         submitFormData.append('file', new Blob([data], { type: 'application/pdf' }));
         submitFormData.append('tableRowId', selectedContract.id.toString());
         submitFormData.append('templateName', selectedContract.signedFileName || '');
-        
+
         // 폼 필드 데이터 추가
         if (Object.keys(formData).length > 0) {
           submitFormData.append('formData', JSON.stringify(formData));
         }
-        
+
         // API 호출
         const response = await fetch('/api/upload/signed-contract', {
           method: 'POST',
           body: submitFormData,
           next: { tags: ["basicContractView-vendor"] },
         });
-        
+
         const result = await response.json();
 
         if (result.result) {
           // 성공시 해당 계약서 상태를 완료로 업데이트
-          setContractStatuses(prev => 
-            prev.map(status => 
-              status.id === selectedContract.id 
+          setContractStatuses(prev =>
+            prev.map(status =>
+              status.id === selectedContract.id
                 ? { ...status, status: 'completed' as const }
                 : status
             )
@@ -481,9 +498,9 @@ export function BasicContractSignDialog({
           router.refresh();
         } else {
           // 실패시 에러 상태 업데이트
-          setContractStatuses(prev => 
-            prev.map(status => 
-              status.id === selectedContract.id 
+          setContractStatuses(prev =>
+            prev.map(status =>
+              status.id === selectedContract.id
                 ? { ...status, status: 'error' as const, errorMessage: result.error }
                 : status
             )
@@ -497,11 +514,11 @@ export function BasicContractSignDialog({
       }
     } catch (error) {
       console.error("서명 완료 중 오류:", error);
-      
+
       // 에러 상태 업데이트
-      setContractStatuses(prev => 
-        prev.map(status => 
-          status.id === selectedContract.id 
+      setContractStatuses(prev =>
+        prev.map(status =>
+          status.id === selectedContract.id
             ? { ...status, status: 'error' as const, errorMessage: '서명 처리 중 오류가 발생했습니다' }
             : status
         )
@@ -519,10 +536,10 @@ export function BasicContractSignDialog({
     if (onSuccess) {
       onSuccess();
     }
-    const successMessage = isBuyerMode 
-      ? "모든 계약서 최종승인이 완료되었습니다!" 
+    const successMessage = isBuyerMode
+      ? "모든 계약서 최종승인이 완료되었습니다!"
       : "모든 계약서 서명이 완료되었습니다!";
-      
+
     toast.success(successMessage, {
       description: "계약서 관리 페이지가 새고침됩니다.",
       icon: <Trophy className="h-5 w-5 text-yellow-500" />
@@ -540,33 +557,33 @@ export function BasicContractSignDialog({
           disabled={isButtonDisabled}
           className={cn(
             "gap-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
-            isBuyerMode 
-              ? "hover:bg-green-50 hover:text-green-600 hover:border-green-200" 
+            isBuyerMode
+              ? "hover:bg-green-50 hover:text-green-600 hover:border-green-200"
               : "hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200"
           )}
         >
           {isBuyerMode ? (
-            <Shield 
-              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-green-500'}`} 
-              aria-hidden="true" 
+            <Shield
+              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-green-500'}`}
+              aria-hidden="true"
             />
           ) : (
-            <Upload 
-              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-blue-500'}`} 
-              aria-hidden="true" 
+            <Upload
+              className={`size-4 ${isButtonDisabled ? 'text-gray-400' : 'text-blue-500'}`}
+              aria-hidden="true"
             />
           )}
           <span className="hidden sm:inline flex items-center">
-            {isBuyerMode ? "구매자 승인" : t("basicContracts.toolbar.sign")}
+            {isBuyerMode ? "구매자 서명" : t("basicContracts.toolbar.sign")}
             {contracts.length > 0 && !isButtonDisabled && (
-              <Badge 
-                variant="secondary" 
+              <Badge
+                variant="secondary"
                 className={cn(
                   "ml-2",
-                  isBuyerMode 
-                    ? "bg-green-100 text-green-700 hover:bg-green-200" 
+                  isBuyerMode
+                    ? "bg-green-100 text-green-700 hover:bg-green-200"
                     : "bg-blue-100 text-blue-700 hover:bg-blue-200"
-                )}최
+                )}
               >
                 {contracts.length}
               </Badge>
@@ -582,12 +599,12 @@ export function BasicContractSignDialog({
 
       {/* 서명 다이얼로그 */}
       <Dialog open={open} onOpenChange={handleOpenChange}>
-        <DialogContent className="max-w-7xl w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden" style={{width:'95vw', maxWidth:'95vw'}}>
+        <DialogContent className="max-w-7xl w-[95vw] h-[90vh] p-0 flex flex-col overflow-hidden" style={{ width: '95vw', maxWidth: '95vw' }}>
           {/* 고정 헤더 - 진행 상황 표시 */}
           <DialogHeader className={cn(
             "px-6 py-4 border-b flex-shrink-0",
-            isBuyerMode 
-              ? "bg-gradient-to-r from-green-50 to-emerald-50" 
+            isBuyerMode
+              ? "bg-gradient-to-r from-green-50 to-emerald-50"
               : "bg-gradient-to-r from-blue-50 to-purple-50"
           )}>
             <DialogTitle className="text-xl font-bold flex items-center justify-between text-gray-800">
@@ -599,12 +616,12 @@ export function BasicContractSignDialog({
                 )}
                 {dialogTitle}
                 {/* 진행 상황 표시 */}
-                <Badge 
-                  variant="outline" 
+                <Badge
+                  variant="outline"
                   className={cn(
                     "ml-3",
-                    isBuyerMode 
-                      ? "bg-green-50 text-green-700 border-green-200" 
+                    isBuyerMode
+                      ? "bg-green-50 text-green-700 border-green-200"
                       : "bg-blue-50 text-blue-700 border-blue-200"
                   )}
                 >
@@ -615,7 +632,7 @@ export function BasicContractSignDialog({
                   <Loader2 className="ml-2 h-4 w-4 animate-spin text-blue-500" />
                 )}
               </div>
-              
+
               {allCompleted && (
                 <Badge variant="default" className="bg-green-100 text-green-700 border-green-200">
                   <Trophy className="h-4 w-4 mr-1" />
@@ -635,8 +652,8 @@ export function BasicContractSignDialog({
                   <div
                     className={cn(
                       "h-2 rounded-full transition-all duration-500",
-                      isBuyerMode 
-                        ? "bg-gradient-to-r from-green-500 to-emerald-500" 
+                      isBuyerMode
+                        ? "bg-gradient-to-r from-green-500 to-emerald-500"
                         : "bg-gradient-to-r from-blue-500 to-green-500"
                     )}
                     style={{ width: `${(completedCount / totalCount) * 100}%` }}
@@ -677,14 +694,14 @@ export function BasicContractSignDialog({
                         const contractStatus = contractStatuses.find(status => status.id === contract.id);
                         const isCompleted = contractStatus?.status === 'completed';
                         const hasError = contractStatus?.status === 'error';
-                        
+
                         // 계약서별 완료 상태 확인
                         const isComplianceTemplate = contract.templateName?.includes('준법');
                         const isGTCTemplate = contract.templateName?.includes('GTC');
                         const hasSurveyCompleted = isComplianceTemplate ? surveyCompletionStatus[contract.id] === true : true;
                         const hasGtcCompleted = isGTCTemplate ? (gtcCommentStatus[contract.id]?.hasComments !== true) : true;
                         const hasSignatureCompleted = signatureStatus[contract.id] === true;
-                        
+
                         return (
                           <Button
                             key={contract.id}
@@ -723,7 +740,7 @@ export function BasicContractSignDialog({
                                     </Badge>
                                   )}
                                 </span>
-                                
+
                                 {/* 상태 표시 */}
                                 {isCompleted ? (
                                   <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 text-xs ml-2 flex-shrink-0">
@@ -741,7 +758,7 @@ export function BasicContractSignDialog({
                                   </Badge>
                                 )}
                               </div>
-                              
+
                               {/* 완료 상태 표시 (구매자 모드에서는 간소화) */}
                               {!isCompleted && !hasError && !isBuyerMode && (
                                 <div className="flex items-center space-x-2 text-xs">
@@ -763,7 +780,7 @@ export function BasicContractSignDialog({
                                   </span>
                                 </div>
                               )}
-                              
+
                               {/* 구매자 모드의 간소화된 상태 표시 */}
                               {!isCompleted && !hasError && isBuyerMode && (
                                 <div className="flex items-center space-x-2 text-xs">
@@ -773,7 +790,7 @@ export function BasicContractSignDialog({
                                   </span>
                                 </div>
                               )}
-                              
+
                               {/* 두 번째 줄: 사용자 + 날짜 */}
                               <div className="flex items-center justify-between text-xs text-gray-500">
                                 <div className="flex items-center min-w-0">
@@ -815,7 +832,7 @@ export function BasicContractSignDialog({
                         <FileText className="h-4 w-4 mr-2 text-blue-500" />
                       )}
                       {selectedContract.templateName || t("basicContracts.dialog.document")}
-                      
+
                       {/* 현재 계약서 상태 표시 */}
                       {currentContractStatus?.status === 'completed' ? (
                         <Badge variant="outline" className="ml-2 bg-green-50 text-green-700 border-green-200">
@@ -852,7 +869,7 @@ export function BasicContractSignDialog({
                           GTC 계약서
                         </Badge>
                       )}
-                      
+
                       {/* 비밀유지 계약서인 경우 추가 파일 수 표시 (구매자 모드가 아닐 때만) */}
                       {!isBuyerMode && selectedContract.templateName === "비밀유지 계약서" && additionalFiles.length > 0 && (
                         <Badge variant="outline" className="ml-2 bg-blue-50 text-blue-700 border-blue-200">
@@ -871,7 +888,7 @@ export function BasicContractSignDialog({
                       </span>
                     </div>
                   </div>
-                  
+
                   {/* 뷰어 영역 - 남은 공간 모두 사용 */}
                   <div className="flex-1 min-h-0 overflow-hidden">
                     <BasicContractSignViewer
@@ -884,8 +901,8 @@ export function BasicContractSignDialog({
                       setInstance={setInstance}
                       onSurveyComplete={() => handleSurveyComplete(selectedContract.id)}
                       onSignatureComplete={() => handleSignatureComplete(selectedContract.id)}
-                      onGtcCommentStatusChange={(hasComments, commentCount) => 
-                        handleGtcCommentStatusChange(selectedContract.id, hasComments, commentCount)
+                      onGtcCommentStatusChange={(hasComments, commentCount, reviewStatus, isComplete) =>
+                        handleGtcCommentStatusChange(selectedContract.id, hasComments, commentCount, reviewStatus, isComplete)
                       }
                       mode={mode}
                       t={t}
@@ -912,12 +929,12 @@ export function BasicContractSignDialog({
                           <div className="flex flex-col space-y-1">
                             <p className="text-sm text-gray-600 flex items-center">
                               <AlertCircle className="h-4 w-4 text-yellow-500 mr-1" />
-                              {isBuyerMode 
+                              {isBuyerMode
                                 ? "계약서에 구매자 서명을 완료해주세요."
                                 : t("basicContracts.dialog.signWarning")
                               }
                             </p>
-                            
+
                             {/* 완료 상태 체크리스트 */}
                             {!isBuyerMode && (
                               <div className="flex items-center space-x-4 text-xs">
@@ -928,9 +945,9 @@ export function BasicContractSignDialog({
                                   </span>
                                 )}
                                 {selectedContract.templateName?.includes('GTC') && (
-                                  <span className={`flex items-center ${(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? 'text-green-600' : 'text-red-600'}`}>
-                                    <CheckCircle2 className={`h-3 w-3 mr-1 ${(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? 'text-green-500' : 'text-red-500'}`} />
-                                    조항검토 {(gtcCommentStatus[selectedContract.id]?.hasComments !== true) ? '완료' : 
+                                  <span className={`flex items-center ${(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? 'text-green-600' : 'text-red-600'}`}>
+                                    <CheckCircle2 className={`h-3 w-3 mr-1 ${(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? 'text-green-500' : 'text-red-500'}`} />
+                                    조항검토 {(gtcCommentStatus[selectedContract.id]?.isComplete === true) ? '완료' :
                                       `미완료 (코멘트 ${gtcCommentStatus[selectedContract.id]?.commentCount || 0}개)`}
                                   </span>
                                 )}
@@ -962,8 +979,8 @@ export function BasicContractSignDialog({
                         <Button
                           className={cn(
                             "gap-2 transition-colors",
-                            isBuyerMode 
-                              ? "bg-green-600 hover:bg-green-700" 
+                            isBuyerMode
+                              ? "bg-green-600 hover:bg-green-700"
                               : "bg-green-600 hover:bg-green-700"
                           )}
                           onClick={completeAllSigns}
@@ -992,7 +1009,7 @@ export function BasicContractSignDialog({
                         <Button
                           className={cn(
                             "gap-2 transition-colors",
-                            canCompleteCurrentContract 
+                            canCompleteCurrentContract
                               ? isBuyerMode
                                 ? "bg-green-600 hover:bg-green-700"
                                 : "bg-blue-600 hover:bg-blue-700"
@@ -1043,7 +1060,7 @@ export function BasicContractSignDialog({
                   </div>
                   <h3 className="text-xl font-medium text-gray-800 mb-2">{t("basicContracts.dialog.selectDocument")}</h3>
                   <p className="text-gray-500 max-w-md">
-                    {isBuyerMode 
+                    {isBuyerMode
                       ? "승인할 계약서를 선택해주세요."
                       : t("basicContracts.dialog.selectDocumentDescription")
                     }
diff --git a/lib/basic-contract/vendor-table/update-vendor-document-status-button.tsx b/lib/basic-contract/vendor-table/update-vendor-document-status-button.tsx
new file mode 100644
index 00000000..e6e22fda
--- /dev/null
+++ b/lib/basic-contract/vendor-table/update-vendor-document-status-button.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { CheckCircle, FileText, Loader, AlertTriangle } from "lucide-react"
+import { updateVendorDocumentStatus } from "../service"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+interface UpdateVendorDocumentStatusButtonProps {
+  vendorDocumentId: number
+  documentId: number
+  vendorId: number
+  currentStatus: "draft" | "approved" | "reviewing" // reviewing 상태 추가
+}
+
+export function UpdateVendorDocumentStatusButton({
+  vendorDocumentId,
+  documentId,
+  vendorId,
+  currentStatus
+}: UpdateVendorDocumentStatusButtonProps) {
+
+  console.log(currentStatus)
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
+
+  // 토글할 새로운 상태 결정
+  const newStatus = currentStatus === "approved" ? "draft" : "approved"
+  
+  // 상태에 따른 버튼 텍스트
+  const buttonText = currentStatus === "approved" 
+    ? "협의 취소" 
+    : "협의 완료 처리"
+  
+  // 상태에 따른 다이얼로그 제목
+  const dialogTitle = newStatus === "approved"
+    ? "협의를 완료 처리하시겠습니까?"
+    : "협의 완료를 취소하시겠습니까?"
+  
+  // 상태에 따른 다이얼로그 설명
+  const dialogDescription = newStatus === "approved"
+    ? "협의가 완료 처리되면 협력업체가 계약서에 서명할 수 있게 됩니다. 모든 조항 검토가 완료되었는지 확인해주세요."
+    : "협의 완료를 취소하면 협력업체가 계약서에 서명할 수 없게 됩니다. 추가 수정이 필요한 경우에만 취소해주세요."
+  
+  // 상태에 따른 토스트 메시지
+  const successMessage = newStatus === "approved"
+    ? "협의가 완료 처리되었습니다. 협력업체가 서명할 수 있습니다."
+    : "협의 완료가 취소되었습니다. 협력업체가 서명할 수 없습니다."
+
+  const handleUpdateStatus = async () => {
+    try {
+      setIsLoading(true)
+      setIsOpen(false)
+      
+      // 서버 액션 호출 - 새로운 상태로 업데이트
+      const result = await updateVendorDocumentStatus({
+        status: newStatus,
+        vendorDocumentId,
+        documentId,
+        vendorId
+      })
+
+      if (!result.success) {
+        throw new Error(result.error || "상태 업데이트 실패")
+      }
+
+      toast.success(successMessage)
+      router.refresh() // 페이지 새로고침
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "상태 업데이트 중 오류가 발생했습니다")
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant={currentStatus === "approved" ? "secondary" : "outline"}
+          size="sm"
+          disabled={isLoading}
+          className={currentStatus === "approved" ? "bg-green-50 hover:bg-green-100 text-green-700" : ""}
+        >
+          {isLoading ? (
+            <Loader className="h-4 w-4 mr-2 animate-spin" />
+          ) : currentStatus === "approved" ? (
+            <FileText className="h-4 w-4 mr-2" />
+          ) : (
+            <CheckCircle className="h-4 w-4 mr-2" />
+          )}
+          {buttonText}
+        </Button>
+      </AlertDialogTrigger>
+      
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-amber-500" />
+            {dialogTitle}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="space-y-2">
+            <p>{dialogDescription}</p>
+            {newStatus === "approved" && (
+              <div className="bg-blue-50 border border-blue-200 rounded-md p-3 mt-3">
+                <p className="text-sm text-blue-800">
+                  <strong>확인사항:</strong>
+                </p>
+                <ul className="text-sm text-blue-700 mt-1 ml-4 list-disc">
+                  <li>모든 필수 조항이 검토되었습니까?</li>
+                  <li>협력업체와의 협의 내용이 모두 반영되었습니까?</li>
+                  <li>법무팀 검토가 완료되었습니까?</li>
+                </ul>
+              </div>
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>취소</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleUpdateStatus}
+            className={newStatus === "approved" ? "bg-green-600 hover:bg-green-700" : "bg-amber-600 hover:bg-amber-700"}
+          >
+            {newStatus === "approved" ? "완료 처리" : "완료 취소"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
\ No newline at end of file
diff --git a/lib/basic-contract/viewer/GtcClausesComponent.tsx b/lib/basic-contract/viewer/GtcClausesComponent.tsx
index 8f565971..381e69dc 100644
--- a/lib/basic-contract/viewer/GtcClausesComponent.tsx
+++ b/lib/basic-contract/viewer/GtcClausesComponent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback,useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -25,17 +25,23 @@ import {
   Minimize2,
   Maximize2,
 } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { 
-  getVendorGtcData, 
+import { cn, formatDateTime } from "@/lib/utils";
+import {
+  getVendorGtcData,
   updateVendorClause,
   checkVendorClausesCommentStatus,
-  type GtcVendorData 
+  type GtcVendorData
 } from "../service";
+import { useSession } from "next-auth/react"
 
 interface GtcClausesComponentProps {
   contractId?: number;
-  onCommentStatusChange?: (hasComments: boolean, commentCount: number) => void;
+  onCommentStatusChange?: (
+    hasComments: boolean, 
+    commentCount: number, 
+    reviewStatus?: string,
+    isComplete?: boolean
+  ) => void;
   t?: (key: string) => string;
 }
 
@@ -52,26 +58,26 @@ type GtcVendorClause = {
   reviewStatus: string;
   negotiationNote: string | null;
   isExcluded: boolean;
-  
+
   // 실제 표시될 값들 (기본 조항 값)
   effectiveItemNumber: string;
   effectiveCategory: string | null;
   effectiveSubtitle: string;
   effectiveContent: string | null;
-  
+
   // 기본 조항 정보 (동일)
   baseItemNumber: string;
   baseCategory: string | null;
   baseSubtitle: string;
   baseContent: string | null;
-  
+
   // 수정 여부 (코멘트만 있으면 false)
   hasModifications: boolean;
   isNumberModified: boolean;
   isCategoryModified: boolean;
   isSubtitleModified: boolean;
   isContentModified: boolean;
-  
+
   // 코멘트 관련
   hasComment: boolean;
   pendingComment: string | null;
@@ -82,14 +88,24 @@ interface ClauseState extends GtcVendorClause {
   isEditing?: boolean;
   tempComment?: string;
   isSaving?: boolean;
-  // 고유 식별자를 위한 헬퍼 속성
   uniqueId: number;
+  commentHistory?: CommentHistory[]; // 추가
+  showHistory?: boolean; // 이력 표시 여부
 }
 
-export function GtcClausesComponent({ 
-  contractId, 
+interface CommentHistory {
+  vendorClauseId: number;
+  comment: string;
+  actorName?: string;
+  actorEmail?: string;
+  createdAt: Date;
+  action: string;
+}
+
+export function GtcClausesComponent({
+  contractId,
   onCommentStatusChange,
-  t = (key: string) => key 
+  t = (key: string) => key
 }: GtcClausesComponentProps) {
   const [gtcData, setGtcData] = useState<GtcVendorData | null>(null);
   const [clauses, setClauses] = useState<ClauseState[]>([]);
@@ -98,6 +114,7 @@ export function GtcClausesComponent({
   const [searchTerm, setSearchTerm] = useState("");
   const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
   const [compactMode, setCompactMode] = useState(true); // 컴팩트 모드 상태 추가
+  const { data: session } = useSession();
 
   const onCommentStatusChangeRef = useRef(onCommentStatusChange);
   onCommentStatusChangeRef.current = onCommentStatusChange;
@@ -109,14 +126,14 @@ export function GtcClausesComponent({
       setError(null);
 
       const data = await getVendorGtcData(contractId);
-      
+
       if (!data) {
         setError("GTC 데이터를 찾을 수 없습니다.");
         return;
       }
 
       setGtcData(data);
-      
+
       const initialClauses: ClauseState[] = data.clauses.map(clause => ({
         ...clause,
         uniqueId: clause.id,
@@ -125,7 +142,7 @@ export function GtcClausesComponent({
         tempComment: clause.negotiationNote || "",
         isSaving: false,
       }));
-      
+
       setClauses(initialClauses);
 
     } catch (err) {
@@ -136,26 +153,33 @@ export function GtcClausesComponent({
     }
   }, [contractId]);
 
-  const lastCommentStatusRef = useRef<{ hasComments: boolean; commentCount: number } | null>(null);
+  const lastCommentStatusRef = useRef<{ hasComments: boolean; commentCount: number , reviewStatus:string} | null>(null);
 
   // 코멘트 상태 변경을 별도 useEffect로 처리
   useEffect(() => {
-    if (clauses.length > 0) {
+    if (clauses.length > 0 && gtcData) {
       const commentCount = clauses.filter(c => c.hasComment).length;
       const hasComments = commentCount > 0;
+      const reviewStatus = gtcData.vendorDocument?.reviewStatus || 'draft';
+      
+      // reviewStatus가 complete이면 코멘트가 있어도 완료된 것으로 처리
+      const isComplete = reviewStatus === 'complete' || reviewStatus === 'approved';
+      
+      const currentStatus = { hasComments, commentCount, reviewStatus, isComplete };
       
-      // Only call callback if status actually changed
-      const currentStatus = { hasComments, commentCount };
       if (!lastCommentStatusRef.current || 
           lastCommentStatusRef.current.hasComments !== hasComments ||
-          lastCommentStatusRef.current.commentCount !== commentCount) {
+          lastCommentStatusRef.current.commentCount !== commentCount ||
+          lastCommentStatusRef.current.reviewStatus !== reviewStatus) {
         
         lastCommentStatusRef.current = currentStatus;
-        onCommentStatusChangeRef.current?.(hasComments, commentCount);
+        // isComplete 정보도 전달
+        onCommentStatusChangeRef.current?.(hasComments, commentCount, reviewStatus, isComplete);
       }
     }
-  }, [clauses]);
-  
+  }, [clauses, gtcData]);
+
+
   useEffect(() => {
     loadGtcData();
   }, [loadGtcData]);
@@ -176,11 +200,11 @@ export function GtcClausesComponent({
   // 계층 구조로 조항 그룹화
   const groupedClauses = React.useMemo(() => {
     const grouped: { [key: number]: ClauseState[] } = { 0: [] }; // 최상위는 0
-    
+
     filteredClauses.forEach(clause => {
       // parentId를 baseClauseId와 매핑 (parentId는 실제 baseClauseId를 가리킴)
       let parentKey = 0; // 기본값은 최상위
-      
+
       if (clause.parentId !== null) {
         // parentId에 해당하는 조항을 찾아서 그 조항의 uniqueId를 사용
         const parentClause = filteredClauses.find(c => c.baseClauseId === clause.parentId);
@@ -188,7 +212,7 @@ export function GtcClausesComponent({
           parentKey = parentClause.uniqueId;
         }
       }
-      
+
       if (!grouped[parentKey]) {
         grouped[parentKey] = [];
       }
@@ -223,7 +247,7 @@ export function GtcClausesComponent({
         return {
           ...clause,
           isEditing: !clause.isEditing,
-          tempComment: clause.negotiationNote || "",
+          tempComment:  "",
         };
       }
       return clause;
@@ -240,17 +264,32 @@ export function GtcClausesComponent({
     }));
   }, []);
 
+  // toggleCommentHistory 함수 추가
+  const toggleCommentHistory = useCallback((uniqueId: number) => {
+    setClauses(prev => prev.map(clause => {
+      if (clause.uniqueId === uniqueId) {
+        return { ...clause, showHistory: !clause.showHistory };
+      }
+      return clause;
+    }));
+  }, []);
+
   // 코멘트 저장
   const saveComment = useCallback(async (uniqueId: number) => {
     const clause = clauses.find(c => c.uniqueId === uniqueId);
     if (!clause) return;
 
-    setClauses(prev => prev.map(c => 
+     // 빈 코멘트 체크 - 신규 입력 시에만
+    if (!clause.hasComment && (!clause.tempComment || clause.tempComment.trim() === "")) {
+      toast.error("코멘트를 입력해주세요.");
+      return;
+    }
+
+    setClauses(prev => prev.map(c =>
       c.uniqueId === uniqueId ? { ...c, isSaving: true } : c
     ));
 
     try {
-      // 기본 조항 정보를 그대로 사용하고 코멘트만 처리
       const clauseData = {
         itemNumber: clause.effectiveItemNumber,
         category: clause.effectiveCategory,
@@ -260,22 +299,38 @@ export function GtcClausesComponent({
       };
 
       const result = await updateVendorClause(
-        clause.id, 
+        clause.id,
         clause.vendorClauseId,
         clauseData,
         gtcData?.vendorDocument
       );
-      
+
       if (result.success) {
-        const hasComment = !!(clause.tempComment?.trim());
+
+              if (!session?.user?.id) {
+                toast.error("로그인이 필요합니다.");
+                return;
+              }
+
+        // 새 코멘트를 이력에 추가
+        const newHistory = {
+          vendorClauseId: result.vendorClauseId,
+          comment: clause.tempComment || "",
+          actorName: session.user.name ||"현재 사용자", // 실제로는 세션에서 가져와야 함
+          createdAt: new Date(),
+          action: "commented"
+        };
 
         setClauses(prev => prev.map(c => {
           if (c.uniqueId === uniqueId) {
+            const updatedHistory = [newHistory, ...(c.commentHistory || [])];
             return {
               ...c,
               vendorClauseId: result.vendorClauseId || c.vendorClauseId,
               negotiationNote: clause.tempComment?.trim() || null,
-              hasComment,
+              latestComment: clause.tempComment?.trim() || null,
+              commentHistory: updatedHistory,
+              hasComment: true,
               isEditing: false,
               isSaving: false,
             };
@@ -284,22 +339,20 @@ export function GtcClausesComponent({
         }));
 
         toast.success("코멘트가 저장되었습니다.");
-
       } else {
         toast.error(result.error || "코멘트 저장에 실패했습니다.");
-        setClauses(prev => prev.map(c => 
+        setClauses(prev => prev.map(c =>
           c.uniqueId === uniqueId ? { ...c, isSaving: false } : c
         ));
       }
     } catch (error) {
       console.error('코멘트 저장 실패:', error);
       toast.error("코멘트 저장 중 오류가 발생했습니다.");
-      setClauses(prev => prev.map(c => 
+      setClauses(prev => prev.map(c =>
         c.uniqueId === uniqueId ? { ...c, isSaving: false } : c
       ));
     }
   }, [clauses, gtcData]);
-
   // 편집 취소
   const cancelEdit = useCallback((uniqueId: number) => {
     setClauses(prev => prev.map(clause => {
@@ -319,7 +372,7 @@ export function GtcClausesComponent({
     const isExpanded = expandedItems.has(clause.uniqueId);
     const children = groupedClauses[clause.uniqueId] || [];
     const hasChildren = children.length > 0;
-    
+
     return (
       <div key={clause.uniqueId} className={`${depth > 0 ? 'ml-4' : ''}`}>
         <div className={cn(
@@ -401,8 +454,8 @@ export function GtcClausesComponent({
                 onClick={() => toggleEdit(clause.uniqueId)}
                 className={cn(
                   "h-6 w-6 p-0 transition-colors",
-                  clause.hasComment 
-                    ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50" 
+                  clause.hasComment
+                    ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50"
                     : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
                 )}
               >
@@ -426,7 +479,7 @@ export function GtcClausesComponent({
                 <span className="text-sm text-gray-700">{clause.effectiveCategory}</span>
               </div>
             )}
-            
+
             {/* 내용 */}
             {clause.effectiveContent && (
               <p className="text-sm text-gray-700 leading-relaxed mb-3 whitespace-pre-wrap">
@@ -455,17 +508,72 @@ export function GtcClausesComponent({
             )}
 
             {/* 기존 코멘트 표시 */}
-            {!clause.isEditing && clause.hasComment && clause.negotiationNote && (
+            {!clause.isEditing && clause.hasComment && (
               <div className="mb-2 p-2.5 bg-amber-50 rounded border border-amber-200">
-                <div className="flex items-center text-sm font-medium text-amber-800 mb-2">
-                  <MessageSquare className="h-4 w-4 mr-2" />
-                  협의 코멘트
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center text-sm font-medium text-amber-800">
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    협의 코멘트
+                    {clause.commentHistory && clause.commentHistory.length > 1 && (
+                      <Badge variant="outline" className="ml-2 text-xs">
+                        {clause.commentHistory.length}개 이력
+                      </Badge>
+                    )}
+                  </div>
+                  {clause.commentHistory && clause.commentHistory.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => toggleCommentHistory(clause.uniqueId)}
+                      className="h-6 px-2 text-xs text-amber-600 hover:text-amber-700"
+                    >
+                      {clause.showHistory ? "이력 숨기기" : "이력 보기"}
+                    </Button>
+                  )}
+                </div>
+
+                {/* 최신 코멘트 */}
+                <div className="space-y-2">
+                  <div className="bg-white p-2 rounded border border-amber-100">
+                    <p className="text-sm text-amber-700 whitespace-pre-wrap">
+                      {clause.latestComment || clause.negotiationNote}
+                    </p>
+                    {clause.commentHistory?.[0] && (
+                      <div className="flex items-center justify-between mt-1 pt-1 border-t border-amber-100">
+                        <span className="text-xs text-amber-600">
+                          {clause.commentHistory[0].actorName || "SHI"}
+                        </span>
+                        <span className="text-xs text-amber-500">
+                          {formatDateTime(clause.commentHistory[0].createdAt, "KR")}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 이전 코멘트 이력 */}
+                  {clause.showHistory && clause.commentHistory && clause.commentHistory.length > 1 && (
+                    <div className="space-y-1.5 max-h-60 overflow-y-auto">
+                      {clause.commentHistory.slice(1).map((history, idx) => (
+                        <div key={idx} className="bg-white/50 p-2 rounded border border-amber-100/50">
+                          <p className="text-xs text-amber-600 whitespace-pre-wrap">
+                            {history.comment}
+                          </p>
+                          <div className="flex items-center justify-between mt-1 pt-1 border-t border-amber-100/50">
+                            <span className="text-xs text-amber-500">
+                              {history.actorName || "SHI"}
+                            </span>
+                            <span className="text-xs text-amber-400">
+                              {formatDateTime(history.createdAt, "KR")}
+                            </span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </div>
-                <p className="text-sm text-amber-700 whitespace-pre-wrap">
-                  {clause.negotiationNote}
-                </p>
               </div>
             )}
+
           </div>
         )}
 
@@ -484,7 +592,7 @@ export function GtcClausesComponent({
     const isExpanded = expandedItems.has(clause.uniqueId);
     const children = groupedClauses[clause.uniqueId] || [];
     const hasChildren = children.length > 0;
-    
+
     return (
       <div key={clause.uniqueId} className={`mb-1 ${depth > 0 ? 'ml-4' : ''}`}>
         <Card className={cn(
@@ -564,8 +672,8 @@ export function GtcClausesComponent({
                       onClick={() => toggleEdit(clause.uniqueId)}
                       className={cn(
                         "h-6 px-2 transition-colors",
-                        clause.hasComment 
-                          ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50" 
+                        clause.hasComment
+                          ? "text-amber-600 hover:text-amber-700 hover:bg-amber-50"
                           : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
                       )}
                     >
@@ -722,6 +830,27 @@ export function GtcClausesComponent({
                 compactMode ? "h-4 w-4" : "h-5 w-5"
               )} />
               {gtcData.vendorDocument.name}
+              
+              {/* reviewStatus 배지 추가 */}
+              {gtcData.vendorDocument.reviewStatus && (
+                <Badge 
+                  variant="outline" 
+                  className={cn(
+                    "ml-2",
+                    gtcData.vendorDocument.reviewStatus === 'complete' || gtcData.vendorDocument.reviewStatus === 'approved'
+                      ? "bg-green-50 text-green-700 border-green-200"
+                      : gtcData.vendorDocument.reviewStatus === 'reviewing'
+                      ? "bg-blue-50 text-blue-700 border-blue-200"
+                      : "bg-gray-50 text-gray-700 border-gray-200"
+                  )}
+                >
+                  {gtcData.vendorDocument.reviewStatus === 'complete' ? '협의 완료' :
+                   gtcData.vendorDocument.reviewStatus === 'approved' ? '승인됨' :
+                   gtcData.vendorDocument.reviewStatus === 'reviewing' ? '협의 중' :
+                   gtcData.vendorDocument.reviewStatus === 'draft' ? '초안' :
+                   gtcData.vendorDocument.reviewStatus}
+                </Badge>
+              )}
             </h3>
             {!compactMode && (
               <p className="text-sm text-gray-500 mt-0.5">
@@ -747,7 +876,7 @@ export function GtcClausesComponent({
                 <Minimize2 className="h-3 w-3" />
               )}
             </Button>
-            
+
             <Badge variant="outline" className={cn(
               "bg-blue-50 text-blue-700 border-blue-200",
               compactMode ? "text-xs px-1.5 py-0.5" : "text-xs"
@@ -788,8 +917,8 @@ export function GtcClausesComponent({
           />
         </div>
 
-        {/* 안내 메시지 */}
-        {totalComments > 0 && (
+        {/* 안내 메시지 수정 - reviewStatus 체크 */}
+        {totalComments > 0 && gtcData.vendorDocument.reviewStatus !== 'complete' && gtcData.vendorDocument.reviewStatus !== 'approved' && (
           <div className={cn(
             "bg-amber-50 rounded border border-amber-200",
             compactMode ? "mt-2 p-2" : "mt-2 p-2"
@@ -811,6 +940,25 @@ export function GtcClausesComponent({
             )}
           </div>
         )}
+        
+        {/* 협의 완료 메시지 */}
+        {totalComments > 0 && (gtcData.vendorDocument.reviewStatus === 'complete' || gtcData.vendorDocument.reviewStatus === 'approved') && (
+          <div className={cn(
+            "bg-green-50 rounded border border-green-200",
+            compactMode ? "mt-2 p-2" : "mt-2 p-2"
+          )}>
+            <div className={cn(
+              "flex items-center text-green-800",
+              compactMode ? "text-sm" : "text-sm"
+            )}>
+              <CheckCircle2 className={cn(
+                "mr-2",
+                compactMode ? "h-4 w-4" : "h-4 w-4"
+              )} />
+              <span className="font-medium">협의가 완료되어 서명 가능합니다.</span>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* 조항 목록 */}
@@ -825,7 +973,7 @@ export function GtcClausesComponent({
             </div>
           ) : (
             <div className={compactMode ? "space-y-0.5" : "space-y-1"}>
-              {(groupedClauses[0] || []).map(clause => 
+              {(groupedClauses[0] || []).map(clause =>
                 compactMode ? renderCompactClause(clause) : renderNormalClause(clause)
               )}
             </div>
diff --git a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
index 943878da..e52f0d79 100644
--- a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
+++ b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
@@ -44,7 +44,12 @@ interface BasicContractSignViewerProps {
   setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>;
   onSurveyComplete?: () => void;
   onSignatureComplete?: () => void;
-  onGtcCommentStatusChange?: (hasComments: boolean, commentCount: number) => void;
+  onGtcCommentStatusChange?: (
+    hasComments: boolean,
+    commentCount: number,
+    reviewStatus?: string,
+    isComplete?: boolean
+  ) => void;
   mode?: 'vendor' | 'buyer'; // 추가된 mode prop
   t?: (key: string) => string;
 }
@@ -63,58 +68,15 @@ interface SignaturePattern {
 // 초간단 안전한 서명 필드 감지 클래스
 class AutoSignatureFieldDetector {
   private instance: WebViewerInstance;
-  private signaturePatterns: SignaturePattern[];
-  private mode: 'vendor' | 'buyer'; // mode 추가
+  private mode: 'vendor' | 'buyer';
 
   constructor(instance: WebViewerInstance, mode: 'vendor' | 'buyer' = 'vendor') {
     this.instance = instance;
     this.mode = mode;
-    this.signaturePatterns = this.initializePatterns();
-  }
-
-  private initializePatterns(): SignaturePattern[] {
-    return [
-      {
-        regex: /서명\s*[:：]\s*[_\-\s]{3,}/gi,
-        name: "한국어_서명_콜론",
-        priority: 10,
-        offsetX: 80,
-        offsetY: -5,
-        width: 150,
-        height: 40
-      },
-      {
-        regex: /서명란\s*[_\-\s]{0,}/gi,
-        name: "한국어_서명란",
-        priority: 9,
-        offsetX: 60,
-        offsetY: -5,
-        width: 150,
-        height: 40
-      },
-      {
-        regex: /signature\s*[:：]\s*[_\-\s]{3,}/gi,
-        name: "영어_signature_콜론",
-        priority: 8,
-        offsetX: 120,
-        offsetY: -5,
-        width: 150,
-        height: 40
-      },
-      {
-        regex: /sign\s+here\s*[:：]?\s*[_\-\s]{0,}/gi,
-        name: "영어_sign_here",
-        priority: 9,
-        offsetX: 100,
-        offsetY: -5,
-        width: 150,
-        height: 40
-      }
-    ];
   }
 
   async detectAndCreateSignatureFields(): Promise<string[]> {
-    console.log(`🔍 안전한 서명 필드 감지 시작... (모드: ${this.mode})`);
+    console.log(`🔍 텍스트 기반 서명 필드 감지 시작... (모드: ${this.mode})`);
 
     try {
       if (!this.instance?.Core?.documentViewer) {
@@ -129,25 +91,122 @@ class AutoSignatureFieldDetector {
         throw new Error("PDF 문서가 로드되지 않았습니다.");
       }
 
-      console.log("📄 문서 확인 완료, 기본 서명 필드 생성...");
-      const defaultField = await this.createSimpleSignatureField();
+      // 모드에 따라 검색할 텍스트 결정
+      const searchText = this.mode === 'buyer'
+        ? '삼성중공업_서명란'
+        : '협력업체_서명란';
+
+      console.log(`📄 "${searchText}" 텍스트 검색 중...`);
 
-      console.log("✅ 서명 필드 생성 완료");
-      return [defaultField];
+      // 텍스트 검색 및 서명 필드 생성
+      const fieldName = await this.createSignatureFieldAtText(searchText);
+
+      if (fieldName) {
+        console.log(`✅ 텍스트 위치에 서명 필드 생성 완료: ${searchText}`);
+        return [fieldName];
+      } else {
+        // 텍스트를 찾지 못한 경우 기본 위치에 생성
+        console.log(`⚠️ "${searchText}" 텍스트를 찾지 못해 기본 위치에 생성`);
+        const defaultField = await this.createSimpleSignatureField();
+        return [defaultField];
+      }
 
     } catch (error) {
       console.error("📛 서명 필드 생성 실패:", error);
 
-      let errorMessage = "서명 필드 생성에 실패했습니다.";
-      if (error instanceof Error) {
-        if (error.message.includes("인스턴스")) {
-          errorMessage = "뷰어가 준비되지 않았습니다.";
-        } else if (error.message.includes("문서")) {
-          errorMessage = "문서를 불러오는 중입니다.";
+      // 오류 발생 시 기본 위치에 생성
+      try {
+        const defaultField = await this.createSimpleSignatureField();
+        return [defaultField];
+      } catch (fallbackError) {
+        throw new Error("서명 필드 생성에 실패했습니다.");
+      }
+    }
+  }
+
+  private async createSignatureFieldAtText(searchText: string): Promise<string | null> {
+    const { Core } = this.instance;
+    const { documentViewer, annotationManager } = Core;
+    const document = documentViewer.getDocument();
+
+    if (!document) return null;
+
+    try {
+      // 모든 페이지에서 텍스트 검색
+      const searchMode = Core.Search.Mode.PAGE_STOP | Core.Search.Mode.HIGHLIGHT;
+      const searchOptions = {
+        fullSearch: true,
+        onResult: null,
+      };
+
+      // 텍스트 검색 시작
+      const textSearchIterator = await document.getTextSearchIterator();
+      textSearchIterator.begin(searchText, searchMode);
+
+      let searchResult = await textSearchIterator.next();
+
+      // 검색 결과가 있는 경우
+      if (searchResult && searchResult.resultCode === Core.Search.ResultCode.FOUND) {
+        const pageNumber = searchResult.pageNum;
+        const quads = searchResult.quads;
+
+        if (quads && quads.length > 0) {
+          // 첫 번째 검색 결과의 위치 가져오기
+          const quad = quads[0];
+
+          // 쿼드의 좌표를 기반으로 서명 필드 위치 계산
+          const x = Math.min(quad.x1, quad.x2, quad.x3, quad.x4);
+          const y = Math.min(quad.y1, quad.y2, quad.y3, quad.y4);
+          const textWidth = Math.abs(quad.x2 - quad.x1);
+          const textHeight = Math.abs(quad.y3 - quad.y1);
+
+          // 서명 필드 생성
+          const fieldName = `signature_at_text_${Date.now()}`;
+          const flags = new Core.Annotations.WidgetFlags();
+          flags.set('Required', true);
+
+          const field = new Core.Annotations.Forms.Field(fieldName, {
+            type: 'Sig',
+            flags
+          });
+
+          const widget = new Core.Annotations.SignatureWidgetAnnotation(field, {
+            Width: 150,
+            Height: 50
+          });
+
+          widget.setPageNumber(pageNumber);
+
+          // 텍스트 바로 아래 또는 오른쪽에 서명 필드 배치
+          // 옵션 1: 텍스트 바로 아래
+          widget.setX(x);
+          widget.setY(y + textHeight + 5); // 텍스트 아래 5픽셀 간격
+
+          // 옵션 2: 텍스트 오른쪽 (필요시 아래 주석 해제)
+          // widget.setX(x + textWidth + 10); // 텍스트 오른쪽 10픽셀 간격
+          // widget.setY(y);
+
+          widget.setWidth(150);
+          widget.setHeight(50);
+
+          // 필드 매니저에 추가
+          const fm = annotationManager.getFieldManager();
+          fm.addField(field);
+          annotationManager.addAnnotation(widget);
+          annotationManager.drawAnnotationsFromList([widget]);
+
+          console.log(`📌 서명 필드를 페이지 ${pageNumber}의 "${searchText}" 위치에 생성`);
+
+          return fieldName;
         }
       }
 
-      throw new Error(errorMessage);
+      console.log(`⚠️ "${searchText}" 텍스트를 찾을 수 없음`);
+      return null;
+
+    } catch (error) {
+      console.error(`📛 텍스트 검색 중 오류: ${error}`);
+      return null;
     }
   }
 
@@ -163,11 +222,18 @@ class AutoSignatureFieldDetector {
     const flags = new Annotations.WidgetFlags();
     flags.set('Required', true);
 
-    const field = new Core.Annotations.Forms.Field(fieldName, { type: 'Sig', flags });
+    const field = new Core.Annotations.Forms.Field(fieldName, {
+      type: 'Sig',
+      flags
+    });
+
+    const widget = new Annotations.SignatureWidgetAnnotation(field, {
+      Width: 150,
+      Height: 50
+    });
 
-    const widget = new Annotations.SignatureWidgetAnnotation(field, { Width: 150, Height: 50 });
     widget.setPageNumber(page);
-    
+
     // 구매자 모드일 때는 왼쪽 하단으로 위치 설정
     if (this.mode === 'buyer') {
       widget.setX(w * 0.1); // 왼쪽 (10%)
@@ -177,7 +243,7 @@ class AutoSignatureFieldDetector {
       widget.setX(w * 0.7); // 오른쪽 (70%)
       widget.setY(h * 0.85); // 하단 (85%)
     }
-    
+
     widget.setWidth(150);
     widget.setHeight(50);
 
@@ -190,6 +256,7 @@ class AutoSignatureFieldDetector {
   }
 }
 
+
 function useAutoSignatureFields(instance: WebViewerInstance | null, mode: 'vendor' | 'buyer' = 'vendor') {
   const [signatureFields, setSignatureFields] = useState<string[]>([]);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -280,15 +347,23 @@ function useAutoSignatureFields(instance: WebViewerInstance | null, mode: 'vendo
           }
 
           if (fields.length > 0) {
+            const hasTextBasedField = fields.some(field => field.startsWith('signature_at_text_'));
             const hasSimpleField = fields.some(field => field.startsWith('simple_signature_'));
 
-            if (hasSimpleField) {
-              const positionMessage = mode === 'buyer' 
+            if (hasTextBasedField) {
+              const searchText = mode === 'buyer' ? '삼성중공업_서명란' : '협력업체_서명란';
+              toast.success(`📝 "${searchText}" 위치에 서명 필드가 생성되었습니다.`, {
+                description: "해당 텍스트 근처의 파란색 영역에서 서명해주세요.",
+                icon: <FileSignature className="h-4 w-4 text-blue-500" />,
+                duration: 5000
+              });
+            } else if (hasSimpleField) {
+              const positionMessage = mode === 'buyer'
                 ? "마지막 페이지 왼쪽 하단의 파란색 영역에서 서명해주세요."
                 : "마지막 페이지 하단의 파란색 영역에서 서명해주세요.";
 
-              toast.success("📝 서명 필드가 생성되었습니다.", {
-                description: positionMessage,
+              toast.info("📝 기본 위치에 서명 필드가 생성되었습니다.", {
+                description: `검색 텍스트를 찾을 수 없어 ${positionMessage}`,
                 icon: <FileSignature className="h-4 w-4 text-blue-500" />,
                 duration: 5000
               });
@@ -508,7 +583,16 @@ export function BasicContractSignViewer({
   const [isInitialLoaded, setIsInitialLoaded] = useState<boolean>(false);
   const [surveyTemplate, setSurveyTemplate] = useState<SurveyTemplateWithQuestions | null>(null);
   const [surveyLoading, setSurveyLoading] = useState<boolean>(false);
-  const [gtcCommentStatus, setGtcCommentStatus] = useState<{ hasComments: boolean; commentCount: number }>({ hasComments: false, commentCount: 0 });
+  const [gtcCommentStatus, setGtcCommentStatus] = useState<{
+    hasComments: boolean;
+    commentCount: number;
+    reviewStatus?: string;
+    isComplete?: boolean;
+  }>({
+    hasComments: false,
+    commentCount: 0,
+    isComplete: false
+  });
 
   console.log(surveyTemplate, "surveyTemplate")
 
@@ -739,9 +823,12 @@ export function BasicContractSignViewer({
                     stamp.Width = Width;
                     stamp.Height = Height;
 
-                    await stamp.setImageData(signatureImage.data.dataUrl);
-                    annot.sign(stamp);
-                    annot.setFieldFlag(WidgetFlags.READ_ONLY, true);
+                    if (signatureImage) {
+                      await stamp.setImageData(signatureImage.data.dataUrl);
+                      annot.sign(stamp);
+                      annot.setFieldFlag(WidgetFlags.READ_ONLY, true);
+                    }
+
                   }
                 }
               });
@@ -994,8 +1081,8 @@ export function BasicContractSignViewer({
           return;
         }
 
-        if (isGTCTemplate && gtcCommentStatus.hasComments) {
-          toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다.");
+        if (isGTCTemplate && gtcCommentStatus.hasComments && !gtcCommentStatus.isComplete) {
+          toast.error("GTC 조항에 미해결 코멘트가 있어 서명할 수 없습니다.");
           toast.info("모든 코멘트를 삭제하거나 협의를 완료한 후 서명해주세요.");
           setActiveTab('clauses');
           return;
@@ -1130,9 +1217,9 @@ export function BasicContractSignViewer({
                 {/* GTC 조항 컴포넌트 */}
                 <GtcClausesComponent
                   contractId={contractId}
-                  onCommentStatusChange={(hasComments, commentCount) => {
-                    setGtcCommentStatus({ hasComments, commentCount });
-                    onGtcCommentStatusChange?.(hasComments, commentCount);
+                  onCommentStatusChange={(hasComments, commentCount, reviewStatus, isComplete) => {
+                    setGtcCommentStatus({ hasComments, commentCount, reviewStatus, isComplete });
+                    onGtcCommentStatusChange?.(hasComments, commentCount, reviewStatus, isComplete);
                   }}
                   t={t}
                 />
@@ -1193,9 +1280,14 @@ export function BasicContractSignViewer({
     );
   }
 
-  const handleGtcCommentStatusChange = React.useCallback((hasComments: boolean, commentCount: number) => {
-    setGtcCommentStatus({ hasComments, commentCount });
-    onGtcCommentStatusChange?.(hasComments, commentCount);
+  const handleGtcCommentStatusChange = React.useCallback((
+    hasComments: boolean,
+    commentCount: number,
+    reviewStatus?: string,
+    isComplete?: boolean
+  ) => {
+    setGtcCommentStatus({ hasComments, commentCount, reviewStatus, isComplete });
+    onGtcCommentStatusChange?.(hasComments, commentCount, reviewStatus, isComplete);
   }, [onGtcCommentStatusChange]);
 
   // 다이얼로그 뷰어 렌더링
@@ -1230,6 +1322,16 @@ export function BasicContractSignViewer({
                 ⚠️ GTC 조항에 {gtcCommentStatus.commentCount}개의 코멘트가 있어 서명할 수 없습니다.
               </span>
             )}
+            {mode !== 'buyer' && isGTCTemplate && gtcCommentStatus.hasComments && !gtcCommentStatus.isComplete && (
+              <span className="block mt-1 text-red-600">
+                ⚠️ GTC 조항에 {gtcCommentStatus.commentCount}개의 미해결 코멘트가 있어 서명할 수 없습니다.
+              </span>
+            )}
+            {mode !== 'buyer' && isGTCTemplate && gtcCommentStatus.hasComments && gtcCommentStatus.isComplete && (
+              <span className="block mt-1 text-green-600">
+                ✅ GTC 조항 협의가 완료되어 서명 가능합니다.
+              </span>
+            )}
           </DialogDescription>
         </DialogHeader>
 
diff --git a/lib/file-stroage.ts b/lib/file-stroage.ts
index 7bc9ef1c..4063aa40 100644
--- a/lib/file-stroage.ts
+++ b/lib/file-stroage.ts
@@ -28,7 +28,7 @@ const SECURITY_CONFIG = {
     'exe', 'bat', 'cmd', 'scr', 'vbs', 'js', 'jar', 'com', 'pif',
     'msi', 'reg', 'ps1', 'sh', 'php', 'asp', 'jsp', 'py', 'pl',
     // XSS 방지를 위한 추가 확장자
-    'html', 'htm', 'xhtml', 'xml', 'xsl', 'xslt'
+    'html', 'htm', 'xhtml', 'xml', 'xsl', 'xslt','svg'
   ]),
   
   // 허용된 MIME 타입
@@ -66,9 +66,9 @@ class FileSecurityValidator {
       return { valid: false, error: `금지된 파일 형식입니다: .${extension}` };
     }
     
-    if (!SECURITY_CONFIG.ALLOWED_EXTENSIONS.has(extension)) {
-      return { valid: false, error: `허용되지 않은 파일 형식입니다: .${extension}` };
-    }
+    // if (!SECURITY_CONFIG.ALLOWED_EXTENSIONS.has(extension)) {
+    //   return { valid: false, error: `허용되지 않은 파일 형식입니다: .${extension}` };
+    // }
     
     return { valid: true };
   }
@@ -135,9 +135,9 @@ class FileSecurityValidator {
     // 기본 MIME 타입 체크
     const baseMimeType = mimeType.split(';')[0].toLowerCase();
     
-    if (!SECURITY_CONFIG.ALLOWED_MIME_TYPES.has(baseMimeType)) {
-      return { valid: false, error: `허용되지 않은 파일 형식입니다: ${baseMimeType}` };
-    }
+    // if (!SECURITY_CONFIG.ALLOWED_MIME_TYPES.has(baseMimeType)) {
+    //   return { valid: false, error: `허용되지 않은 파일 형식입니다: ${baseMimeType}` };
+    // }
     
     // 확장자와 MIME 타입 일치성 체크
     const extension = path.extname(fileName).toLowerCase().substring(1);
diff --git a/lib/gtc-contract/gtc-clauses/gtc-clauses-page-header.tsx b/lib/gtc-contract/gtc-clauses/gtc-clauses-page-header.tsx
index 52faea3c..4cf29362 100644
--- a/lib/gtc-contract/gtc-clauses/gtc-clauses-page-header.tsx
+++ b/lib/gtc-contract/gtc-clauses/gtc-clauses-page-header.tsx
@@ -15,23 +15,9 @@ export function GtcClausesPageHeader({ document }: GtcClausesPageHeaderProps) {
   const router = useRouter()
 
   const handleBack = () => {
-    router.push('/evcp/basic-contract-template/gtc')
+    router.push('/evcp/gtc')
   }
 
-  const handlePreview = () => {
-    // PDFTron 미리보기 기능
-    console.log("PDF Preview for document:", document.id)
-  }
-
-  const handleDownload = () => {
-    // 문서 다운로드 기능
-    console.log("Download document:", document.id)
-  }
-
-  const handleSettings = () => {
-    // 문서 설정 (템플릿 관리 등)
-    console.log("Document settings:", document.id)
-  }
 
   return (
     <div className="flex items-center justify-between">
diff --git a/lib/gtc-contract/gtc-clauses/service.ts b/lib/gtc-contract/gtc-clauses/service.ts
index b6f620bc..2660dcdd 100644
--- a/lib/gtc-contract/gtc-clauses/service.ts
+++ b/lib/gtc-contract/gtc-clauses/service.ts
@@ -4,9 +4,15 @@ import db  from "@/db/db"
 import { 
   gtcClauses, 
   gtcClausesTreeView,
+  gtcVendorClausesView,
+  gtcClausesWithVendorView,
   type GtcClause, 
   type GtcClauseTreeView,
-  type NewGtcClause 
+  type NewGtcClause, 
+  gtcNegotiationHistory,
+  gtcVendorClauses,
+  gtcVendorDocuments,
+  GtcVendorClause
 } from "@/db/schema/gtc"
 import { users } from "@/db/schema/users"
 import { and, asc, count, desc, eq, ilike, or, sql, gt, lt, inArray, like  } from "drizzle-orm"
@@ -19,9 +25,12 @@ import type {
   ReorderGtcClausesSchema,
   BulkUpdateGtcClausesSchema,
   GenerateVariableNamesSchema,
+  GetGtcVendorClausesSchema,
+  UpdateVendorGtcClauseSchema,
 } from "@/lib/gtc-contract/gtc-clauses/validations"
 import { decryptWithServerAction } from "@/components/drm/drmUtils"
 import { saveDRMFile } from "@/lib/file-stroage"
+import { vendors } from "@/db/schema"
 
 interface ClauseImage {
   id: string
@@ -97,12 +106,14 @@ export async function getGtcClauses(input: GetGtcClausesSchema & { documentId: n
 
         // 정렬
         const orderBy =
-          input.sort.length > 0
-            ? input.sort.map((item) => {
-                const column = gtcClausesTreeView[item.id as keyof typeof gtcClausesTreeView]
-                return item.desc ? desc(column) : asc(column)
-              })
-            : [asc(gtcClausesTreeView.sortOrder), asc(gtcClausesTreeView.depth)]
+        input.sort.length > 0
+          ? input.sort.map((item) => {
+              const column = gtcClausesTreeView[item.id as keyof typeof gtcClausesTreeView]
+              const result = item.desc ? desc(column) : asc(column)
+              return result
+            })
+          : [asc(gtcClausesTreeView.itemNumber)]
+      
 
         // 데이터 조회
         const { data, total } = await db.transaction(async (tx) => {
@@ -442,6 +453,81 @@ export async function createGtcClause(
   }
 }
 
+export async function createVendorGtcClause(
+  input: CreateVendorGtcClauseSchema & { createdById: number }
+) {
+  try {
+    // Calculate depth if parent is specified
+    let depth = 0
+    
+    if (input.parentId) {
+      const parent = await db.query.gtcVendorClauses.findFirst({
+        where: eq(gtcVendorClauses.id, input.parentId),
+      })
+      if (parent) {
+        depth = parent.depth + 1
+      }
+    }
+    
+    // Create the new vendor clause
+    const newVendorClause = {
+      vendorDocumentId: input.vendorDocumentId,
+      baseClauseId: input.baseClauseId,
+      parentId: input.parentId,
+      
+      // Modified fields
+      modifiedItemNumber: input.isNumberModified ? input.modifiedItemNumber : null,
+      modifiedCategory: input.isCategoryModified ? input.modifiedCategory : null,
+      modifiedSubtitle: input.isSubtitleModified ? input.modifiedSubtitle : null,
+      modifiedContent: input.isContentModified ? input.modifiedContent?.trim() : null,
+      
+      // Modification flags
+      isNumberModified: input.isNumberModified,
+      isCategoryModified: input.isCategoryModified,
+      isSubtitleModified: input.isSubtitleModified,
+      isContentModified: input.isContentModified,
+      
+      // Additional fields
+      sortOrder: input.sortOrder.toString(),
+      depth,
+      reviewStatus: input.reviewStatus,
+      negotiationNote: input.negotiationNote || null,
+      isExcluded: input.isExcluded,
+      
+      // Audit fields
+      createdById: input.createdById,
+      updatedById: input.createdById,
+      editReason: input.editReason,
+      images: input.images || null,
+      isActive: true,
+    }
+    
+    const [result] = await db.insert(gtcVendorClauses).values(newVendorClause).returning()
+    
+    // Create negotiation history entry
+    if (input.negotiationNote) {
+      await db.insert(gtcNegotiationHistory).values({
+        vendorClauseId: result.id,
+        action: "created",
+        comment: input.negotiationNote,
+        actorName: input.actorName, // You'll need to pass this from the form
+        actorEmail: input.actorEmail, // You'll need to pass this from the form
+        previousStatus: null,
+        newStatus: input.reviewStatus,
+        createdById: input.createdById,
+      })
+    }
+    
+    // Revalidate cache
+    // await revalidatePath(`/evcp/gtc/${input.documentId}?vendorId=${input.vendorId}`)
+    
+    return { data: result, error: null }
+  } catch (error) {
+    console.error("Error creating vendor GTC clause:", error)
+    return { data: null, error: "벤더 조항 생성 중 오류가 발생했습니다." }
+  }
+}
+
 /**
  * GTC 조항 수정
  */
@@ -751,6 +837,15 @@ async function countGtcClauses(tx: any, where: any) {
   return total
 }
 
+async function countGtcVendorClauses(tx: any, where: any) {
+  const [{ count: total }] = await tx
+    .select({ count: count() })
+    .from(gtcClausesWithVendorView)
+    .where(where)
+  return total
+}
+
+
 function buildClausesTree(clauses: GtcClauseTreeView[]): GtcClauseTreeView[] {
   const clauseMap = new Map<number, GtcClauseTreeView & { children: GtcClauseTreeView[] }>()
   const rootClauses: (GtcClauseTreeView & { children: GtcClauseTreeView[] })[] = []
@@ -781,6 +876,8 @@ async function revalidateGtcClausesCaches(documentId: number) {
   const { revalidateTag } = await import("next/cache")
   revalidateTag(`gtc-clauses-${documentId}`)
   revalidateTag(`gtc-clauses-tree-${documentId}`)
+  revalidateTag( "basicContractView-vendor")
+ 
 }
 
 /**
@@ -933,4 +1030,316 @@ export async function moveGtcClauseDown(clauseId: number, updatedById: number) {
     console.error("Error moving clause down:", error)
     return { error: "조항 이동 중 오류가 발생했습니다." }
   }
+}
+
+
+// 벤더별 조항 정보를 조회하는 함수 추가
+export async function getVendorClausesForDocument({
+  documentId,
+  vendorId,
+}: {
+  documentId: number
+  vendorId?: number
+}) {
+  try {
+    // vendorId가 없으면 빈 객체 반환
+    if (!vendorId) {
+      return {}
+    }
+
+    // 1. 해당 문서와 벤더에 대한 벤더 문서 찾기
+    const vendorDocument = await db
+      .select()
+      .from(gtcVendorDocuments)
+      .where(
+        and(
+          eq(gtcVendorDocuments.baseDocumentId, documentId),
+          eq(gtcVendorDocuments.vendorId, vendorId),
+          eq(gtcVendorDocuments.isActive, true)
+        )
+      )
+      .limit(1)
+
+    if (!vendorDocument[0]) {
+      return {}
+    }
+
+    // 2. 벤더 조항들 조회 (협의 이력 포함)
+    const vendorClauses = await db
+      .select({
+        // 벤더 조항 정보
+        id: gtcVendorClauses.id,
+        baseClauseId: gtcVendorClauses.baseClauseId,
+        vendorDocumentId: gtcVendorClauses.vendorDocumentId,
+        
+        // 수정된 내용
+        modifiedItemNumber: gtcVendorClauses.modifiedItemNumber,
+        modifiedCategory: gtcVendorClauses.modifiedCategory,
+        modifiedSubtitle: gtcVendorClauses.modifiedSubtitle,
+        modifiedContent: gtcVendorClauses.modifiedContent,
+        
+        // 수정 플래그
+        isNumberModified: gtcVendorClauses.isNumberModified,
+        isCategoryModified: gtcVendorClauses.isCategoryModified,
+        isSubtitleModified: gtcVendorClauses.isSubtitleModified,
+        isContentModified: gtcVendorClauses.isContentModified,
+        
+        // 협의 상태
+        reviewStatus: gtcVendorClauses.reviewStatus,
+        negotiationNote: gtcVendorClauses.negotiationNote,
+        isExcluded: gtcVendorClauses.isExcluded,
+        
+        // 날짜
+        createdAt: gtcVendorClauses.createdAt,
+        updatedAt: gtcVendorClauses.updatedAt,
+      })
+      .from(gtcVendorClauses)
+      .where(
+        and(
+          eq(gtcVendorClauses.vendorDocumentId, vendorDocument[0].id),
+          eq(gtcVendorClauses.isActive, true)
+        )
+      )
+
+    // 3. 각 벤더 조항에 대한 협의 이력 조회
+    const clauseIds = vendorClauses.map(c => c.id)
+    const negotiationHistories = clauseIds.length > 0
+      ? await db
+          .select({
+            vendorClauseId: gtcNegotiationHistory.vendorClauseId,
+            action: gtcNegotiationHistory.action,
+            previousStatus: gtcNegotiationHistory.previousStatus,
+            newStatus: gtcNegotiationHistory.newStatus,
+            comment: gtcNegotiationHistory.comment,
+            actorName: gtcNegotiationHistory.actorName,
+            actorEmail: gtcNegotiationHistory.actorEmail,
+            createdAt: gtcNegotiationHistory.createdAt,
+          })
+          .from(gtcNegotiationHistory)
+          .where(inArray(gtcNegotiationHistory.vendorClauseId, clauseIds))
+          .orderBy(desc(gtcNegotiationHistory.createdAt))
+      : []
+
+    // 4. baseClauseId를 키로 하는 맵 생성
+    const vendorClauseMap = new Map()
+    
+    vendorClauses.forEach(vc => {
+      // 해당 조항의 협의 이력 필터링
+      const history = negotiationHistories
+        .filter(h => h.vendorClauseId === vc.id)
+        .map(h => ({
+          action: h.action,
+          comment: h.comment,
+          actorName: h.actorName,
+          actorEmail: h.actorEmail,
+          createdAt: h.createdAt,
+          previousStatus: h.previousStatus,
+          newStatus: h.newStatus,
+        }))
+
+      // 가장 최근 코멘트 찾기
+      const latestComment = history.find(h => h.comment)?.comment || null
+      
+      vendorClauseMap.set(vc.baseClauseId, {
+        ...vc,
+        negotiationHistory: history,
+        latestComment,
+        hasModifications: 
+          vc.isNumberModified || 
+          vc.isCategoryModified || 
+          vc.isSubtitleModified || 
+          vc.isContentModified,
+      })
+    })
+
+    return {
+      vendorDocument: vendorDocument[0],
+      vendorClauseMap,
+      totalModified: vendorClauses.filter(vc => 
+        vc.isNumberModified || 
+        vc.isCategoryModified || 
+        vc.isSubtitleModified || 
+        vc.isContentModified
+      ).length,
+      totalExcluded: vendorClauses.filter(vc => vc.isExcluded).length,
+    }
+  } catch (error) {
+    console.error("Failed to fetch vendor clauses:", error)
+    return {}
+  }
+}
+
+// service.ts에 추가
+/**
+ * 벤더별 GTC 조항 수정
+ */
+export async function updateVendorGtcClause(
+  input: UpdateVendorGtcClauseSchema & { 
+    baseClauseId: number
+    documentId: number
+    vendorId: number
+    updatedById: number 
+    images?: any[]
+  }
+) {
+  try {
+    // 1. 먼저 벤더 문서 찾기 또는 생성
+    let vendorDocument = await db
+      .select()
+      .from(gtcVendorDocuments)
+      .where(
+        and(
+          eq(gtcVendorDocuments.baseDocumentId, input.documentId),
+          eq(gtcVendorDocuments.vendorId, input.vendorId),
+          eq(gtcVendorDocuments.isActive, true)
+        )
+      )
+      .limit(1)
+
+      console.log(vendorDocument,"vendorDocument", input.vendorId, input.documentId)
+
+    // 벤더 문서가 없으면 생성
+    if (!vendorDocument[0]) {
+      const vendor = await db
+        .select()
+        .from(vendors)
+        .where(eq(vendors.id, input.vendorId))
+        .limit(1)
+
+      if (!vendor[0]) {
+        return { data: null, error: "벤더 정보를 찾을 수 없습니다." }
+      }
+
+      [vendorDocument[0]] = await db
+        .insert(gtcVendorDocuments)
+        .values({
+          baseDocumentId: input.documentId,
+          vendorId: input.vendorId,
+          name: `${vendor[0].vendorName} GTC Agreement`,
+          description: `GTC negotiation with ${vendor[0].vendorName}`,
+          version: "1.0",
+          reviewStatus: "draft",
+          createdById: input.updatedById,
+          updatedById: input.updatedById,
+        })
+        .returning()
+    }
+
+    // 2. 벤더 조항 찾기 또는 생성
+    let vendorClause = await db
+      .select()
+      .from(gtcVendorClauses)
+      .where(
+        and(
+          eq(gtcVendorClauses.vendorDocumentId, vendorDocument[0].id),
+          eq(gtcVendorClauses.baseClauseId, input.baseClauseId)
+        )
+      )
+      .limit(1)
+
+    const updateData: Partial<GtcVendorClause> = {
+      updatedById: input.updatedById,
+      updatedAt: new Date(),
+      
+      // 수정 플래그
+      isNumberModified: input.isNumberModified,
+      isCategoryModified: input.isCategoryModified,
+      isSubtitleModified: input.isSubtitleModified,
+      isContentModified: input.isContentModified,
+      
+      // 협의 정보
+      reviewStatus: input.reviewStatus,
+      negotiationNote: input.negotiationNote,
+      isExcluded: input.isExcluded,
+    }
+
+    // 수정된 내용만 업데이트
+    if (input.isNumberModified) {
+      updateData.modifiedItemNumber = input.modifiedItemNumber
+    } else {
+      updateData.modifiedItemNumber = null
+    }
+
+    if (input.isCategoryModified) {
+      updateData.modifiedCategory = input.modifiedCategory
+    } else {
+      updateData.modifiedCategory = null
+    }
+
+    if (input.isSubtitleModified) {
+      updateData.modifiedSubtitle = input.modifiedSubtitle
+    } else {
+      updateData.modifiedSubtitle = null
+    }
+
+    if (input.isContentModified) {
+      updateData.modifiedContent = input.modifiedContent
+    } else {
+      updateData.modifiedContent = null
+    }
+
+    console.log("updateData",updateData)
+
+    let result
+    if (vendorClause[0]) {
+      // 업데이트
+      [result] = await db
+        .update(gtcVendorClauses)
+        .set(updateData)
+        .where(eq(gtcVendorClauses.id, vendorClause[0].id))
+        .returning()
+    } else {
+      // 새로 생성
+      const baseClause = await db
+        .select()
+        .from(gtcClauses)
+        .where(eq(gtcClauses.id, input.baseClauseId))
+        .limit(1)
+
+      if (!baseClause[0]) {
+        return { data: null, error: "기본 조항을 찾을 수 없습니다." }
+      }
+
+      [result] = await db
+        .insert(gtcVendorClauses)
+        .values({
+          vendorDocumentId: vendorDocument[0].id,
+          baseClauseId: input.baseClauseId,
+          parentId: baseClause[0].parentId,
+          sortOrder: baseClause[0].sortOrder,
+          depth: baseClause[0].depth,
+          fullPath: baseClause[0].fullPath,
+          createdById: input.updatedById,
+          ...updateData,
+        })
+        .returning()
+    }
+
+    // 3. 협의 이력 추가
+    if (input.negotiationNote) {
+      await db.insert(gtcNegotiationHistory).values({
+        vendorClauseId: result.id,
+        action: vendorClause[0] ? "modified" : "created",
+        previousStatus: vendorClause[0]?.reviewStatus || null,
+        newStatus: input.reviewStatus,
+        comment: input.negotiationNote,
+        actorType: "internal",
+        actorId: input.updatedById,
+        changedFields: {
+          isNumberModified: input.isNumberModified,
+          isCategoryModified: input.isCategoryModified,
+          isSubtitleModified: input.isSubtitleModified,
+          isContentModified: input.isContentModified,
+        },
+      })
+    }
+
+    // 캐시 무효화
+    await revalidateGtcClausesCaches(input.documentId)
+
+    return { data: result, error: null }
+  } catch (error) {
+    console.error("Error updating vendor GTC clause:", error)
+    return { data: null, error: "벤더 조항 수정 중 오류가 발생했습니다." }
+  }
 }
\ No newline at end of file
diff --git a/lib/gtc-contract/gtc-clauses/table/clause-table.tsx b/lib/gtc-contract/gtc-clauses/table/clause-table.tsx
index 89674db9..32550299 100644
--- a/lib/gtc-contract/gtc-clauses/table/clause-table.tsx
+++ b/lib/gtc-contract/gtc-clauses/table/clause-table.tsx
@@ -43,8 +43,6 @@ interface GtcClausesTableProps {
 export function GtcClausesTable({ promises, documentId, document }: GtcClausesTableProps) {
   const [{ data, pageCount }, users] = React.use(promises)
 
-  console.log(data)
-
   const [rowAction, setRowAction] =
     React.useState<DataTableRowAction<GtcClauseTreeView> | null>(null)
 
diff --git a/lib/gtc-contract/gtc-clauses/validations.ts b/lib/gtc-contract/gtc-clauses/validations.ts
index edbcf612..f60255ba 100644
--- a/lib/gtc-contract/gtc-clauses/validations.ts
+++ b/lib/gtc-contract/gtc-clauses/validations.ts
@@ -1,4 +1,4 @@
-import { type GtcClause } from "@/db/schema/gtc"
+import { GtcClauseTreeView, GtcClauseWithVendorView, GtcVendorClauseView, type GtcClause } from "@/db/schema/gtc"
 import {
   createSearchParamsCache,
   parseAsArrayOf,
@@ -15,13 +15,24 @@ export const searchParamsCache = createSearchParamsCache({
   ),
   page: parseAsInteger.withDefault(1),
   perPage: parseAsInteger.withDefault(20),
-  sort: getSortingStateParser<GtcClause>().withDefault([
-    { id: "sortOrder", desc: false },
+  sort: getSortingStateParser<GtcClauseTreeView>().withDefault([
+    { id: "itemNumber", desc: false },
+  ]),
+  // advanced filter
+  filters: getFiltersStateParser().withDefault([]),
+  joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+  search: parseAsString.withDefault(""),
+})
+
+export const searchParamsVendorCache = createSearchParamsCache({
+  flags: parseAsArrayOf(z.enum(["advancedTable", "floatingBar"])).withDefault(
+    []
+  ),
+  page: parseAsInteger.withDefault(1),
+  perPage: parseAsInteger.withDefault(20),
+  sort: getSortingStateParser<GtcClauseWithVendorView>().withDefault([
+    { id: "effectiveItemNumber", desc: false },
   ]),
-  // 검색 필터들
-  category: parseAsString.withDefault(""),
-  depth: parseAsInteger.withDefault(0),
-  parentId: parseAsInteger.withDefault(0),
   // advanced filter
   filters: getFiltersStateParser().withDefault([]),
   joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
@@ -117,8 +128,79 @@ export const generateVariableNamesSchema = z.object({
 })
 
 export type GetGtcClausesSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>
+export type GetGtcVendorClausesSchema = Awaited<ReturnType<typeof searchParamsVendorCache.parse>>
 export type CreateGtcClauseSchema = z.infer<typeof createGtcClauseSchema>
 export type UpdateGtcClauseSchema = z.infer<typeof updateGtcClauseSchema>
 export type ReorderGtcClausesSchema = z.infer<typeof reorderGtcClausesSchema>
 export type BulkUpdateGtcClausesSchema = z.infer<typeof bulkUpdateGtcClausesSchema>
-export type GenerateVariableNamesSchema = z.infer<typeof generateVariableNamesSchema>
\ No newline at end of file
+export type GenerateVariableNamesSchema = z.infer<typeof generateVariableNamesSchema>
+
+
+// validations.ts에 추가
+export const updateVendorGtcClauseSchema = z.object({
+  modifiedItemNumber: z.string().optional(),
+  modifiedCategory: z.string().optional(),
+  modifiedSubtitle: z.string().optional(),
+  modifiedContent: z.string().optional(),
+  
+  isNumberModified: z.boolean().default(false),
+  isCategoryModified: z.boolean().default(false),
+  isSubtitleModified: z.boolean().default(false),
+  isContentModified: z.boolean().default(false),
+  
+  reviewStatus: z.enum([
+    "draft",
+    "pending",
+    "reviewing",
+    "approved",
+    "rejected",
+    "revised"
+  ]).default("draft"),
+  
+  negotiationNote: z.string().optional(),
+  isExcluded: z.boolean().default(false),
+})
+
+export type UpdateVendorGtcClauseSchema = z.infer<typeof updateVendorGtcClauseSchema>
+
+// validations.ts
+export const createVendorGtcClauseSchema = z.object({
+  vendorDocumentId: z.number({
+    required_error: "벤더 문서 ID는 필수입니다.",
+  }),
+  baseClauseId: z.number({
+    required_error: "기본 조항 ID는 필수입니다.",
+  }),
+  documentId: z.number({
+    required_error: "문서 ID는 필수입니다.",
+  }),
+  parentId: z.number().nullable().optional(),
+  modifiedItemNumber: z.string().optional().nullable(),
+  modifiedCategory: z.string().optional().nullable(),
+  modifiedSubtitle: z.string().optional().nullable(),
+  modifiedContent: z.string().optional().nullable(),
+  sortOrder: z.number().default(0),
+  reviewStatus: z.enum(["draft", "pending", "reviewing", "approved", "rejected", "revised"]).default("draft"),
+  negotiationNote: z.string().optional().nullable(),
+  isExcluded: z.boolean().default(false),
+  isNumberModified: z.boolean().default(false),
+  isCategoryModified: z.boolean().default(false),
+  isSubtitleModified: z.boolean().default(false),
+  isContentModified: z.boolean().default(false),
+  editReason: z.string().optional().nullable(),
+  images: z.array(
+    z.object({
+      id: z.string(),
+      url: z.string(),
+      fileName: z.string(),
+      size: z.number(),
+      savedName: z.string().optional(),
+      mimeType: z.string().optional(),
+      width: z.number().optional(),
+      height: z.number().optional(),
+      hash: z.string().optional(),
+    })
+  ).optional().nullable(),
+})
+
+export type CreateVendorGtcClauseSchema = z.infer<typeof createVendorGtcClauseSchema>
\ No newline at end of file
diff --git a/lib/mail/templates/contract-reminder-en.hbs b/lib/mail/templates/contract-reminder-en.hbs
new file mode 100644
index 00000000..ffaadb4b
--- /dev/null
+++ b/lib/mail/templates/contract-reminder-en.hbs
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contract Signature Reminder</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; padding: 40px 0;">
+        <tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                    <!-- Header -->
+                    <tr>
+                        <td style="background-color: #2563eb; padding: 30px; border-radius: 8px 8px 0 0;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 24px; text-align: center;">
+                                SHI Contract Signature Reminder
+                            </h1>
+                        </td>
+                    </tr>
+                    
+                    <!-- Body -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
+                                Dear {{recipientName}},
+                            </p>
+                            
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
+                                We would like to remind you that the contract sent to <strong>{{vendorName}}</strong> (Vendor Code: {{vendorCode}}) is still pending your signature.
+                            </p>
+                            
+                            <!-- Contract Info Box -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; border-radius: 6px; padding: 20px; margin: 20px 0;">
+                                <tr>
+                                    <td>
+                                        <h3 style="color: #2563eb; margin: 0 0 15px 0; font-size: 18px;">Contract Details</h3>
+                                        <p style="color: #666666; margin: 8px 0; font-size: 14px;">
+                                            <strong>Contract Name:</strong> {{contractFileName}}
+                                        </p>
+                                        <p style="color: #666666; margin: 8px 0; font-size: 14px;">
+                                            <strong>Deadline:</strong> {{deadline}}
+                                        </p>
+                                        {{#if daysRemaining}}
+                                        <p style="margin: 15px 0 0 0;">
+                                            {{#if (eq daysRemaining 0)}}
+                                            <span style="color: #dc2626; font-weight: bold; font-size: 16px;">
+                                                ⚠️ Today is the deadline!
+                                            </span>
+                                            {{else if (lt daysRemaining 0)}}
+                                            <span style="color: #dc2626; font-weight: bold; font-size: 16px;">
+                                                ⚠️ The deadline has passed by {{Math.abs daysRemaining}} day(s)!
+                                            </span>
+                                            {{else if (lte daysRemaining 3)}}
+                                            <span style="color: #f59e0b; font-weight: bold; font-size: 16px;">
+                                                ⏰ {{daysRemaining}} day(s) remaining until deadline
+                                            </span>
+                                            {{else}}
+                                            <span style="color: #059669; font-weight: bold; font-size: 16px;">
+                                                {{daysRemaining}} day(s) remaining until deadline
+                                            </span>
+                                            {{/if}}
+                                        </p>
+                                        {{/if}}
+                                    </td>
+                                </tr>
+                            </table>
+                            
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 20px 0;">
+                                Please click the button below to review and sign the contract.
+                            </p>
+                            
+                            <!-- CTA Button -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 30px 0;">
+                                <tr>
+                                    <td align="center">
+                                        <a href="{{contractLink}}" style="display: inline-block; padding: 14px 32px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: bold;">
+                                            Review and Sign Contract
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6; margin-top: 30px;">
+                                If the button doesn't work, please copy and paste the following link into your browser:<br>
+                                <a href="{{contractLink}}" style="color: #2563eb; word-break: break-all;">{{contractLink}}</a>
+                            </p>
+                            
+                            <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 30px 0;">
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6;">
+                                If you have any questions or concerns, please don't hesitate to contact us.
+                            </p>
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6; margin-top: 20px;">
+                                Best regards,<br><br>
+                                {{senderName}}<br>
+                                {{senderEmail}}<br>
+                                SHI Procurement Team
+                            </p>
+                        </td>
+                    </tr>
+                    
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 20px 30px; border-radius: 0 0 8px 8px; text-align: center;">
+                            <p style="color: #999999; font-size: 12px; margin: 0;">
+                                This email was automatically sent from the EVCP Contract Management System.<br>
+                                © 2024 EVCP. All rights reserved.
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/lib/mail/templates/contract-reminder-kr.hbs b/lib/mail/templates/contract-reminder-kr.hbs
new file mode 100644
index 00000000..acd704a9
--- /dev/null
+++ b/lib/mail/templates/contract-reminder-kr.hbs
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>계약서 서명 요청 리마인더</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; background-color: #f5f5f5;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; padding: 40px 0;">
+        <tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                    <!-- 헤더 -->
+                    <tr>
+                        <td style="background-color: #2563eb; padding: 30px; border-radius: 8px 8px 0 0;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 24px; text-align: center;">
+                                삼성중공업 계약서 서명 요청 리마인더
+                            </h1>
+                        </td>
+                    </tr>
+                    
+                    <!-- 본문 -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
+                                안녕하세요, {{recipientName}}님
+                            </p>
+                            
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
+                                <strong>{{vendorName}}</strong> (업체코드: {{vendorCode}})로 발송된 계약서의 서명이 아직 완료되지 않았습니다.
+                            </p>
+                            
+                            <!-- 계약서 정보 박스 -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; border-radius: 6px; padding: 20px; margin: 20px 0;">
+                                <tr>
+                                    <td>
+                                        <h3 style="color: #2563eb; margin: 0 0 15px 0; font-size: 18px;">계약서 정보</h3>
+                                        <p style="color: #666666; margin: 8px 0; font-size: 14px;">
+                                            <strong>계약서명:</strong> {{contractFileName}}
+                                        </p>
+                                        <p style="color: #666666; margin: 8px 0; font-size: 14px;">
+                                            <strong>마감일:</strong> {{deadline}}
+                                        </p>
+                                        {{#if daysRemaining}}
+                                        <p style="margin: 15px 0 0 0;">
+                                            {{#if (eq daysRemaining 0)}}
+                                            <span style="color: #dc2626; font-weight: bold; font-size: 16px;">
+                                                ⚠️ 오늘이 마감일입니다!
+                                            </span>
+                                            {{else if (lt daysRemaining 0)}}
+                                            <span style="color: #dc2626; font-weight: bold; font-size: 16px;">
+                                                ⚠️ 마감일이 {{Math.abs daysRemaining}}일 지났습니다!
+                                            </span>
+                                            {{else if (lte daysRemaining 3)}}
+                                            <span style="color: #f59e0b; font-weight: bold; font-size: 16px;">
+                                                ⏰ 마감까지 {{daysRemaining}}일 남았습니다
+                                            </span>
+                                            {{else}}
+                                            <span style="color: #059669; font-weight: bold; font-size: 16px;">
+                                                마감까지 {{daysRemaining}}일 남았습니다
+                                            </span>
+                                            {{/if}}
+                                        </p>
+                                        {{/if}}
+                                    </td>
+                                </tr>
+                            </table>
+                            
+                            <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 20px 0;">
+                                계약서 검토 및 서명을 위해 아래 버튼을 클릭해 주시기 바랍니다.
+                            </p>
+                            
+                            <!-- CTA 버튼 -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 30px 0;">
+                                <tr>
+                                    <td align="center">
+                                        <a href="{{contractLink}}" style="display: inline-block; padding: 14px 32px; background-color: #2563eb; color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: bold;">
+                                            계약서 확인 및 서명하기
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6; margin-top: 30px;">
+                                버튼이 작동하지 않는 경우, 아래 링크를 복사하여 브라우저에 붙여넣기 해주세요:<br>
+                                <a href="{{contractLink}}" style="color: #2563eb; word-break: break-all;">{{contractLink}}</a>
+                            </p>
+                            
+                            <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 30px 0;">
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6;">
+                                궁금하신 사항이 있으시면 언제든지 문의해 주시기 바랍니다.
+                            </p>
+                            
+                            <p style="color: #666666; font-size: 14px; line-height: 1.6; margin-top: 20px;">
+                                감사합니다.<br><br>
+                                {{senderName}}<br>
+                                {{senderEmail}}<br>
+                                SHI 구매팀
+                            </p>
+                        </td>
+                    </tr>
+                    
+                    <!-- 푸터 -->
+                    <tr>
+                        <td style="background-color: #f8f9fa; padding: 20px 30px; border-radius: 0 0 8px 8px; text-align: center;">
+                            <p style="color: #999999; font-size: 12px; margin: 0;">
+                                이 이메일은 EVCP 계약 관리 시스템에서 자동으로 발송되었습니다.<br>
+                                © 2024 EVCP. All rights reserved.
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file