1 files changed, 400 insertions, 1115 deletions

diff --git a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
index fbf36738..943878da 100644
--- a/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
+++ b/lib/basic-contract/viewer/basic-contract-sign-viewer.tsx
@@ -6,16 +6,13 @@ import React, {
   useRef,
   SetStateAction,
   Dispatch,
-  useMemo,
-  useCallback,
 } from "react";
 import { WebViewerInstance } from "@pdftron/webviewer";
-import { Loader2, FileText, ClipboardList, AlertTriangle, FileSignature, Target, CheckCircle2 } from "lucide-react";
+import { Loader2, FileText, ClipboardList, AlertTriangle, FileSignature, Target, CheckCircle2, BookOpen } from "lucide-react";
 import { toast } from "sonner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -24,20 +21,15 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Upload } from "lucide-react";
-import { CompleteSurveyRequest, SurveyAnswerData, completeSurvey, getActiveSurveyTemplate, type SurveyTemplateWithQuestions } from '../service';
-import { ConditionalSurveyHandler, useConditionalSurvey } from '../vendor-table/survey-conditional';
-import { useForm, useWatch, Controller } from "react-hook-form";
+import { getActiveSurveyTemplate, getVendorSignatureFile, type SurveyTemplateWithQuestions } from '../service';
+import { useConditionalSurvey } from '../vendor-table/survey-conditional';
+import { SurveyComponent } from './SurveyComponent';
+import { GtcClausesComponent } from './GtcClausesComponent';
 
 interface FileInfo {
   path: string;
   name: string;
-  type: 'main' | 'attachment' | 'survey';
+  type: 'main' | 'attachment' | 'survey' | 'clauses';
 }
 
 interface BasicContractSignViewerProps {
@@ -50,21 +42,13 @@ interface BasicContractSignViewerProps {
   onSign?: (documentData: ArrayBuffer, surveyData?: any) => Promise<void>;
   instance: WebViewerInstance | null;
   setInstance: Dispatch<SetStateAction<WebViewerInstance | null>>;
-  onSurveyComplete?: () => void; // 🔥 새로 추가
-  onSignatureComplete?: () => void; // 🔥 새로 추가
+  onSurveyComplete?: () => void;
+  onSignatureComplete?: () => void;
+  onGtcCommentStatusChange?: (hasComments: boolean, commentCount: number) => void;
+  mode?: 'vendor' | 'buyer'; // 추가된 mode prop
   t?: (key: string) => string;
 }
 
-// 폼 데이터 타입 정의
-interface SurveyFormData {
-  [key: string]: {
-    answerValue?: string;
-    detailText?: string;
-    otherText?: string;
-    files?: File[];
-  };
-}
-
 // 자동 서명 필드 생성을 위한 타입 정의
 interface SignaturePattern {
   regex: RegExp;
@@ -80,9 +64,11 @@ interface SignaturePattern {
 class AutoSignatureFieldDetector {
   private instance: WebViewerInstance;
   private signaturePatterns: SignaturePattern[];
+  private mode: 'vendor' | 'buyer'; // mode 추가
 
-  constructor(instance: WebViewerInstance) {
+  constructor(instance: WebViewerInstance, mode: 'vendor' | 'buyer' = 'vendor') {
     this.instance = instance;
+    this.mode = mode;
     this.signaturePatterns = this.initializePatterns();
   }
 
@@ -128,7 +114,7 @@ class AutoSignatureFieldDetector {
   }
 
   async detectAndCreateSignatureFields(): Promise<string[]> {
-    console.log("🔍 안전한 서명 필드 감지 시작...");
+    console.log(`🔍 안전한 서명 필드 감지 시작... (모드: ${this.mode})`);
 
     try {
       if (!this.instance?.Core?.documentViewer) {
@@ -166,77 +152,87 @@ class AutoSignatureFieldDetector {
   }
 
   private async createSimpleSignatureField(): Promise<string> {
-    try {
-      const { Core } = this.instance;
-      const { documentViewer, annotationManager, Annotations } = Core;
+    const { Core } = this.instance;
+    const { documentViewer, annotationManager, Annotations } = Core;
 
-      const pageCount = documentViewer.getPageCount();
-      const pageWidth = documentViewer.getPageWidth(pageCount) || 612;
-      const pageHeight = documentViewer.getPageHeight(pageCount) || 792;
+    const page = documentViewer.getPageCount();
+    const w = documentViewer.getPageWidth(page) || 612;
+    const h = documentViewer.getPageHeight(page) || 792;
 
-      console.log(`📏 페이지 정보: ${pageCount}페이지, 크기 ${pageWidth}x${pageHeight}`);
-
-      const fieldName = `simple_signature_${Date.now()}`;
-      const flags = new Annotations.WidgetFlags();
-
-      const formField = new Core.Annotations.Forms.Field(
-        `SignatureFormField`,
-        {
-          type: "Sig",
-          flags,
-        }
-      );
-
-      const signatureWidget = new Annotations.SignatureWidgetAnnotation(formField, {
-        Width: 150,
-        Height: 50
-      });
+    const fieldName = `simple_signature_${Date.now()}`;
+    const flags = new Annotations.WidgetFlags();
+    flags.set('Required', true);
 
-      signatureWidget.setPageNumber(pageCount);
-      signatureWidget.setX(pageWidth * 0.7);
-      signatureWidget.setY(pageHeight * 0.85);
-      signatureWidget.setWidth(150);
-      signatureWidget.setHeight(50);
+    const field = new Core.Annotations.Forms.Field(fieldName, { type: 'Sig', flags });
 
-      annotationManager.addAnnotation(signatureWidget);
-      annotationManager.redrawAnnotation(signatureWidget);
+    const widget = new Annotations.SignatureWidgetAnnotation(field, { Width: 150, Height: 50 });
+    widget.setPageNumber(page);
+    
+    // 구매자 모드일 때는 왼쪽 하단으로 위치 설정
+    if (this.mode === 'buyer') {
+      widget.setX(w * 0.1); // 왼쪽 (10%)
+      widget.setY(h * 0.85); // 하단 (85%)
+    } else {
+      // 협력업체 모드일 때는 기존처럼 오른쪽
+      widget.setX(w * 0.7); // 오른쪽 (70%)
+      widget.setY(h * 0.85); // 하단 (85%)
+    }
+    
+    widget.setWidth(150);
+    widget.setHeight(50);
 
-      console.log(`✅ 서명 필드 생성: ${fieldName}`);
-      return fieldName;
+    const fm = annotationManager.getFieldManager();
+    fm.addField(field);
+    annotationManager.addAnnotation(widget);
+    annotationManager.drawAnnotationsFromList([widget]);
 
-    } catch (error) {
-      console.error("📛 서명 필드 생성 실패:", error);
-      return "manual_signature_required";
-    }
+    return fieldName;
   }
 }
 
-function useAutoSignatureFields(instance: WebViewerInstance | null) {
+function useAutoSignatureFields(instance: WebViewerInstance | null, mode: 'vendor' | 'buyer' = 'vendor') {
   const [signatureFields, setSignatureFields] = useState<string[]>([]);
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // 한 번만 실행되도록 보장하는 플래그들
   const processingRef = useRef(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const processedDocumentRef = useRef<string | null>(null); // 처리된 문서 추적
+  const handlerRef = useRef<(() => void) | null>(null); // 핸들러 참조 저장
 
   useEffect(() => {
     if (!instance) return;
 
     const { documentViewer } = instance.Core;
 
+    // 새로운 핸들러 생성 (참조가 변하지 않도록)
     const handleDocumentLoaded = () => {
+      // 현재 문서의 고유 식별자 생성
+      const currentDoc = documentViewer.getDocument();
+      const documentId = currentDoc ? `${currentDoc.getFilename()}_${Date.now()}` : null;
+
+      // 같은 문서를 이미 처리했다면 스킵
+      if (documentId && processedDocumentRef.current === documentId) {
+        console.log("📛 이미 처리된 문서이므로 스킵:", documentId);
+        return;
+      }
+
       if (processingRef.current) {
         console.log("📛 이미 처리 중이므로 스킵");
         return;
       }
 
+      // 이전 타이머 클리어
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
 
       timeoutRef.current = setTimeout(async () => {
+        // 다시 한번 중복 체크
         if (processingRef.current) return;
+        if (documentId && processedDocumentRef.current === documentId) return;
 
         processingRef.current = true;
         setIsProcessing(true);
@@ -249,32 +245,58 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) {
             throw new Error("문서가 준비되지 않았습니다.");
           }
 
-          const detector = new AutoSignatureFieldDetector(instance);
+          // 기존 서명 필드 확인
+          const { annotationManager } = instance.Core;
+          const existingAnnotations = annotationManager.getAnnotationsList();
+          const existingSignatureFields = existingAnnotations.filter(
+            annot => annot instanceof instance.Core.Annotations.SignatureWidgetAnnotation
+          );
+
+          // 이미 서명 필드가 있으면 생성하지 않음
+          if (existingSignatureFields.length > 0) {
+            console.log("📋 기존 서명 필드 발견:", existingSignatureFields.length);
+            const fieldNames = existingSignatureFields.map((field, idx) =>
+              field.getField()?.name || `existing_signature_${idx}`
+            );
+            setSignatureFields(fieldNames);
+
+            // 처리 완료 표시
+            if (documentId) {
+              processedDocumentRef.current = documentId;
+            }
+
+            toast.success(`📋 ${fieldNames.length}개의 기존 서명 필드를 확인했습니다.`);
+            return;
+          }
+
+          const detector = new AutoSignatureFieldDetector(instance, mode); // mode 전달
           const fields = await detector.detectAndCreateSignatureFields();
 
           setSignatureFields(fields);
 
+          // 처리 완료 표시
+          if (documentId) {
+            processedDocumentRef.current = documentId;
+          }
+
           if (fields.length > 0) {
             const hasSimpleField = fields.some(field => field.startsWith('simple_signature_'));
 
             if (hasSimpleField) {
+              const positionMessage = mode === 'buyer' 
+                ? "마지막 페이지 왼쪽 하단의 파란색 영역에서 서명해주세요."
+                : "마지막 페이지 하단의 파란색 영역에서 서명해주세요.";
+
               toast.success("📝 서명 필드가 생성되었습니다.", {
-                description: "마지막 페이지 하단의 파란색 영역에서 서명해주세요.",
+                description: positionMessage,
                 icon: <FileSignature className="h-4 w-4 text-blue-500" />,
                 duration: 5000
               });
-            } else {
-              toast.success(`📋 ${fields.length}개의 서명 필드를 확인했습니다.`, {
-                description: "기존 서명 필드가 발견되었습니다.",
-                icon: <CheckCircle2 className="h-4 w-4 text-green-500" />,
-                duration: 4000
-              });
             }
           }
 
         } catch (error) {
           console.error("📛 서명 필드 처리 실패:", error);
-
           const errorMessage = error instanceof Error ? error.message : "서명 필드 처리에 실패했습니다.";
           setError(errorMessage);
 
@@ -289,27 +311,53 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) {
       }, 3000);
     };
 
-    documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded);
+    // 핸들러 참조 저장
+    handlerRef.current = handleDocumentLoaded;
+
+    // 이전 리스너 제거 (저장된 참조 사용)
+    if (handlerRef.current) {
+      documentViewer.removeEventListener('documentLoaded', handlerRef.current);
+    }
+
+    // 새 리스너 등록
     documentViewer.addEventListener('documentLoaded', handleDocumentLoaded);
 
+    // 이미 문서가 로드되어 있다면 즉시 실행
+    if (documentViewer.getDocument()) {
+      // 짧은 지연 후 실행 (WebViewer 초기화 완료 보장)
+      setTimeout(() => {
+        if (!processingRef.current) {
+          handleDocumentLoaded();
+        }
+      }, 1000);
+    }
+
     return () => {
-      documentViewer.removeEventListener('documentLoaded', handleDocumentLoaded);
+      // 클리어 시 저장된 참조 사용
+      if (handlerRef.current) {
+        documentViewer.removeEventListener('documentLoaded', handlerRef.current);
+      }
 
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
 
+      // 상태 리셋
       processingRef.current = false;
+      processedDocumentRef.current = null;
+      handlerRef.current = null;
     };
-  }, [instance]);
+  }, [instance, mode]); // mode 의존성 추가
 
+  // 컴포넌트 언마운트 시 정리
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
       processingRef.current = false;
+      processedDocumentRef.current = null;
     };
   }, []);
 
@@ -320,198 +368,121 @@ function useAutoSignatureFields(instance: WebViewerInstance | null) {
     error
   };
 }
-
-// 🔥 서명 감지를 위한 커스텀 훅 수정
+// XFDF 기반 서명 감지
 function useSignatureDetection(instance: WebViewerInstance | null, onSignatureComplete?: () => void) {
   const [hasValidSignature, setHasValidSignature] = useState(false);
-  const checkIntervalRef = useRef<NodeJS.Timeout | null>(null);
-  const lastSignatureStateRef = useRef(false);
-  const onSignatureCompleteRef = useRef(onSignatureComplete);
+  const onCompleteRef = useRef(onSignatureComplete);
 
-  // 콜백 레퍼런스 업데이트
   useEffect(() => {
-    onSignatureCompleteRef.current = onSignatureComplete;
+    onCompleteRef.current = onSignatureComplete
   }, [onSignatureComplete]);
 
-  const checkSignatureFields = useCallback(async () => {
-    if (!instance?.Core?.annotationManager) {
-      console.log('🔍 서명 체크: annotationManager 없음');
-      return false;
-    }
-
-    try {
-      const { annotationManager, documentViewer } = instance.Core;
-      
-      // 문서가 로드되지 않았으면 false 반환
-      if (!documentViewer.getDocument()) {
-        console.log('🔍 서명 체크: 문서 미로드');
-        return false;
-      }
+  useEffect(() => {
+    if (!instance?.Core) return;
 
-      let hasSignature = false;
+    const { annotationManager, documentViewer } = instance.Core;
+    const checkSignedByAppearance = () => {
+      try {
+        const annotations = annotationManager.getAnnotationsList();
+        const signatureWidgets = annotations.filter(
+          annot => annot instanceof instance.Core.Annotations.SignatureWidgetAnnotation
+        );
 
-      // 1. Form Fields 확인 (더 정확한 방법)
-      const fieldManager = annotationManager.getFieldManager();
-      const fields = fieldManager.getFields();
-      
-      console.log('🔍 폼 필드 확인:', fields.map(field => ({
-        name: field.name,
-        type: field.type,
-        value: field.value,
-        hasValue: !!field.value
-      })));
-
-      // 서명 필드 확인
-      for (const field of fields) {
-        // PDFTron에서 서명 필드는 보통 'Sig' 타입이지만, 값이 있는지 정확히 확인
-        if (field.type === 'Sig' || field.name?.toLowerCase().includes('signature')) {
-          if (field.value && (
-            typeof field.value === 'string' && field.value.length > 0 ||
-            typeof field.value === 'object' && field.value !== null
-          )) {
-            hasSignature = true;
-            console.log('🔍 서명 필드에서 서명 발견:', field.name, field.value);
-            break;
-          }
+        if (signatureWidgets.length === 0) {
+          return false;
         }
-      }
 
-      // 2. Signature Widget Annotations 확인
-      if (!hasSignature) {
-        const annotations = annotationManager.getAnnotationsList();
-        console.log('🔍 주석 확인:', annotations.length, '개');
-        
-        for (const annotation of annotations) {
-          // SignatureWidgetAnnotation 타입 확인
-          if (annotation.elementName === 'signatureWidget' || 
-              annotation.constructor.name === 'SignatureWidgetAnnotation' ||
-              annotation.Subject === 'Signature') {
-            
-            // 서명 데이터가 있는지 확인
-            const hasSignatureData = annotation.getImageData && annotation.getImageData() ||
-                                   annotation.getPath && annotation.getPath() ||
-                                   annotation.getCustomData && annotation.getCustomData('signature-data');
-            
-            if (hasSignatureData) {
-              hasSignature = true;
-              console.log('🔍 서명 위젯에서 서명 발견:', annotation);
-              break;
-            }
+        for (const widget of signatureWidgets) {
+          const isSignedByAppearance = widget.isSignedByAppearance();
+
+          if (isSignedByAppearance) {
+            return true;
           }
         }
+        return false;
+
+      } catch (error) {
+        console.error('서명 위젯 확인 중 오류:', error);
+        return false;
       }
+    };
 
-      // 3. Ink/FreeHand Annotations 확인 (직접 그린 서명)
-      if (!hasSignature) {
-        const annotations = annotationManager.getAnnotationsList();
-        
-        for (const annotation of annotations) {
-          if (annotation.elementName === 'freeHand' || 
-              annotation.elementName === 'ink' ||
-              annotation.constructor.name === 'FreeHandAnnotation') {
-            
-            // 경로 데이터가 있으면 서명으로 간주
-            const hasPath = annotation.getPath && annotation.getPath().length > 0;
-            if (hasPath) {
-              hasSignature = true;
-              console.log('🔍 자유 그리기에서 서명 발견:', annotation);
-              break;
-            }
+    const checkSigned = async () => {
+      try {
+        const hasSignature = await checkSignedByAppearance();
+
+        if (hasSignature !== hasValidSignature) {
+          setHasValidSignature(hasSignature);
+
+          if (hasSignature && onCompleteRef.current) {
+            onCompleteRef.current();
           }
         }
+
+      } catch (error) {
+        console.error('서명 확인 중 오류:', error);
       }
+    };
 
-      console.log('🔍 최종 서명 감지 결과:', { 
-        hasSignature, 
-        fieldsCount: fields.length,
-        annotationsCount: annotationManager.getAnnotationsList().length 
-      });
-      
-      return hasSignature;
-    } catch (error) {
-      console.error('📛 서명 확인 중 에러:', error);
-      return false;
-    }
-  }, [instance]);
+    const onAnnotationChanged = (annotations: any[], action: string) => {
+      console.log("서명 변경")
+      // if (action === 'delete') return;
 
-  // 실시간 서명 감지 (무한 렌더링 방지)
-  useEffect(() => {
-    if (!instance?.Core) return;
+      setTimeout(checkSigned, 800);
+    };
 
-    const startMonitoring = () => {
-      // 기존 인터벌 정리
-      if (checkIntervalRef.current) {
-        clearInterval(checkIntervalRef.current);
-        checkIntervalRef.current = null;
-      }
 
-      console.log('🔍 서명 모니터링 시작');
 
-      // 2초마다 서명 상태 확인 (1초보다 간격을 늘려 성능 개선)
-      checkIntervalRef.current = setInterval(async () => {
-        try {
-          const hasSignature = await checkSignatureFields();
-          
-          // 상태가 실제로 변경되었을 때만 업데이트
-          if (hasSignature !== lastSignatureStateRef.current) {
-            console.log('🔍 서명 상태 변경:', lastSignatureStateRef.current, '->', hasSignature);
-            
-            lastSignatureStateRef.current = hasSignature;
-            setHasValidSignature(hasSignature);
-            
-            // 서명이 완료되었을 때 콜백 실행
-            if (hasSignature && onSignatureCompleteRef.current) {
-              console.log('✍️ 서명 완료 콜백 실행!');
-              onSignatureCompleteRef.current();
-            }
-          }
-        } catch (error) {
-          console.error('📛 서명 모니터링 에러:', error);
-        }
-      }, 2000);
+    const onDocumentLoaded = () => {
+      setTimeout(checkSigned, 2000);
     };
 
-    // 문서 로드 후 모니터링 시작
-    const { documentViewer } = instance.Core;
-    
-    const handleDocumentLoaded = () => {
-      console.log('📄 문서 로드 완료, 서명 모니터링 준비');
-      // 문서 로드 후 3초 뒤에 모니터링 시작 (안정성 확보)
-      setTimeout(startMonitoring, 3000);
+    const onPageUpdated = () => {
+      setTimeout(checkSigned, 1000);
     };
 
-    if (documentViewer?.getDocument()) {
-      // 이미 문서가 로드되어 있다면 바로 시작
-      setTimeout(startMonitoring, 1000);
-    } else {
-      // 문서 로드 대기
-      documentViewer?.addEventListener('documentLoaded', handleDocumentLoaded);
+    const onAnnotationSelected = () => {
+      setTimeout(checkSigned, 500);
+    };
+
+    const onAnnotationUnselected = () => {
+      setTimeout(checkSigned, 1000);
+    };
+
+    try {
+      annotationManager.addEventListener('annotationChanged', onAnnotationChanged);
+      annotationManager.addEventListener('annotationSelected', onAnnotationSelected);
+      annotationManager.addEventListener('annotationUnselected', onAnnotationUnselected);
+      documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
+      documentViewer.addEventListener('pageNumberUpdated', onPageUpdated);
+
+    } catch (error) {
+      console.error('이벤트 리스너 등록 실패:', error);
     }
 
-    // 클리너 함수
+    if (documentViewer.getDocument()) {
+      setTimeout(checkSigned, 1000);
+    }
+
+    const pollInterval = setInterval(() => {
+      checkSigned();
+    }, 5000);
+
     return () => {
-      console.log('🧹 서명 모니터링 정리');
-      if (checkIntervalRef.current) {
-        clearInterval(checkIntervalRef.current);
-        checkIntervalRef.current = null;
+      try {
+        annotationManager.removeEventListener('annotationChanged', onAnnotationChanged);
+        annotationManager.removeEventListener('annotationSelected', onAnnotationSelected);
+        annotationManager.removeEventListener('annotationUnselected', onAnnotationUnselected);
+        documentViewer.removeEventListener('documentLoaded', onDocumentLoaded);
+        documentViewer.removeEventListener('pageNumberUpdated', onPageUpdated);
+        clearInterval(pollInterval);
+      } catch (error) {
+        console.error('클린업 중 오류:', error);
       }
-      documentViewer?.removeEventListener('documentLoaded', handleDocumentLoaded);
     };
-  }, [instance]); // onSignatureComplete 제거하여 무한 렌더링 방지
+  }, [instance, hasValidSignature]);
 
-  // 수동 서명 확인 함수
-  const manualCheckSignature = useCallback(async () => {
-    console.log('🔍 수동 서명 확인 요청');
-    const hasSignature = await checkSignatureFields();
-    setHasValidSignature(hasSignature);
-    lastSignatureStateRef.current = hasSignature;
-    return hasSignature;
-  }, [checkSignatureFields]);
-
-  return {
-    hasValidSignature,
-    checkSignature: manualCheckSignature
-  };
+  return { hasValidSignature };
 }
 
 export function BasicContractSignViewer({
@@ -524,8 +495,10 @@ export function BasicContractSignViewer({
   onSign,
   instance,
   setInstance,
-  onSurveyComplete, // 🔥 추가
-  onSignatureComplete, // 🔥 추가
+  onSurveyComplete,
+  onSignatureComplete,
+  onGtcCommentStatusChange,
+  mode = 'vendor', // 기본값 vendor
   t = (key: string) => key,
 }: BasicContractSignViewerProps) {
 
@@ -535,7 +508,9 @@ export function BasicContractSignViewer({
   const [isInitialLoaded, setIsInitialLoaded] = useState<boolean>(false);
   const [surveyTemplate, setSurveyTemplate] = useState<SurveyTemplateWithQuestions | null>(null);
   const [surveyLoading, setSurveyLoading] = useState<boolean>(false);
-  const [isSubmitting, setIsSubmitting] = useState(false); // 제출 상태 추가
+  const [gtcCommentStatus, setGtcCommentStatus] = useState<{ hasComments: boolean; commentCount: number }>({ hasComments: false, commentCount: 0 });
+
+  console.log(surveyTemplate, "surveyTemplate")
 
   const conditionalHandler = useConditionalSurvey(surveyTemplate);
 
@@ -546,13 +521,15 @@ export function BasicContractSignViewer({
   const [showDialog, setShowDialog] = useState(isOpen);
   const webViewerInstance = useRef<WebViewerInstance | null>(null);
 
-  const { signatureFields, isProcessing: isAutoSignProcessing, hasSignatureFields, error: autoSignError } = useAutoSignatureFields(webViewerInstance.current || instance);
-  
-  // 🔥 서명 감지 훅 사용
+  // mode 전달
+  const { signatureFields, isProcessing: isAutoSignProcessing, hasSignatureFields, error: autoSignError } = useAutoSignatureFields(webViewerInstance.current || instance, mode);
+
   const { hasValidSignature } = useSignatureDetection(webViewerInstance.current || instance, onSignatureComplete);
 
-  const isComplianceTemplate = templateName.includes('준법');
-  const isNDATemplate = templateName.includes('비밀유지') || templateName.includes('NDA');
+  // 구매자 모드일 때는 템플릿 관련 로직 비활성화
+  const isComplianceTemplate = mode === 'buyer' ? false : templateName.includes('준법');
+  const isNDATemplate = mode === 'buyer' ? false : (templateName.includes('비밀유지') || templateName.includes('NDA'));
+  const isGTCTemplate = mode === 'buyer' ? false : templateName.includes('GTC');
 
   const allFiles: FileInfo[] = React.useMemo(() => {
     const files: FileInfo[] = [];
@@ -565,6 +542,11 @@ export function BasicContractSignViewer({
       });
     }
 
+    // 구매자 모드일 때는 추가 파일, 설문조사, 조항 검토 탭 제외
+    if (mode === 'buyer') {
+      return files; // 메인 계약서 파일만 반환
+    }
+
     const normalizedAttachments: FileInfo[] = (additionalFiles || [])
       .map((f: any, idx: number) => ({
         path: f.path ?? f.filePath ?? "",
@@ -583,8 +565,16 @@ export function BasicContractSignViewer({
       });
     }
 
+    if (isGTCTemplate) {
+      files.push({
+        path: "",
+        name: "조항 검토",
+        type: "clauses",
+      });
+    }
+
     return files;
-  }, [filePath, additionalFiles, templateName, isComplianceTemplate]);
+  }, [filePath, additionalFiles, templateName, isComplianceTemplate, isGTCTemplate, mode]);
 
   const cleanupHtmlStyle = () => {
     const elements = document.querySelectorAll('.Document_container');
@@ -623,7 +613,8 @@ export function BasicContractSignViewer({
   useEffect(() => {
     setShowDialog(isOpen);
 
-    if (isOpen && isComplianceTemplate && !surveyTemplate) {
+    // 구매자 모드가 아닐 때만 설문조사 템플릿 로드
+    if (isOpen && isComplianceTemplate && !surveyTemplate && mode !== 'buyer') {
       loadSurveyTemplate();
     }
 
@@ -631,7 +622,7 @@ export function BasicContractSignViewer({
       setIsInitialLoaded(false);
       currentDocumentPath.current = "";
     }
-  }, [isOpen, isComplianceTemplate]);
+  }, [isOpen, isComplianceTemplate, mode]);
 
   useEffect(() => {
     if (!filePath) return;
@@ -709,7 +700,9 @@ export function BasicContractSignViewer({
             setInstance(newInstance);
             setFileLoading(false);
 
-            const { documentViewer } = newInstance.Core;
+            const { documentViewer, annotationManager, Annotations } = newInstance.Core;
+
+            const { WidgetFlags } = Annotations;
             const FitMode = newInstance.UI.FitMode;
 
             const handleDocumentLoaded = () => {
@@ -730,6 +723,30 @@ export function BasicContractSignViewer({
 
             documentViewer.addEventListener('documentLoaded', handleDocumentLoaded);
 
+            // 구매자 모드가 아닐 때만 자동 서명 적용
+            if (mode !== 'buyer') {
+              annotationManager.addEventListener('annotationChanged', async (annotList, type) => {
+                for (const annot of annotList) {
+                  const { fieldName, X, Y, Width, Height, PageNumber } = annot;
+
+                  if (type === "add" && annot.Subject === "Widget") {
+                    const signatureImage = await getVendorSignatureFile()
+
+                    const stamp = new Annotations.StampAnnotation();
+                    stamp.PageNumber = PageNumber;
+                    stamp.X = X;
+                    stamp.Y = Y;
+                    stamp.Width = Width;
+                    stamp.Height = Height;
+
+                    await stamp.setImageData(signatureImage.data.dataUrl);
+                    annot.sign(stamp);
+                    annot.setFieldFlag(WidgetFlags.READ_ONLY, true);
+                  }
+                }
+              });
+            }
+
             newInstance.UI.setMinZoomLevel('25%');
             newInstance.UI.setMaxZoomLevel('400%');
 
@@ -789,7 +806,7 @@ export function BasicContractSignViewer({
       isCancelled.current = true;
       cleanupWebViewer();
     };
-  }, [setInstance]);
+  }, [setInstance, mode]);
 
   const getExtFromPath = (p: string) => {
     const m = p.toLowerCase().match(/\.([a-z0-9]+)(?:\?.*)?$/);
@@ -873,17 +890,21 @@ export function BasicContractSignViewer({
 
   const handleTabChange = async (newTab: string) => {
     setActiveTab(newTab);
-    if (newTab === "survey") return;
+    if (newTab === "survey" || newTab === "clauses") return;
 
     const currentInstance = webViewerInstance.current || instance;
     if (!currentInstance || fileLoading) return;
 
+    if (newTab === 'survey' && !surveyTemplate && !surveyLoading && mode !== 'buyer') {
+      loadSurveyTemplate();
+    }
+
     let targetFile: FileInfo | undefined;
     if (newTab === "main") {
       targetFile = allFiles.find(f => f.type === "main");
     } else if (newTab.startsWith("file-")) {
       const fileIndex = parseInt(newTab.replace("file-", ""), 10);
-      targetFile = allFiles.filter(f => f.type !== 'survey')[fileIndex];
+      targetFile = allFiles.filter(f => f.type !== 'survey' && f.type !== 'clauses')[fileIndex];
     }
 
     if (!targetFile?.path) {
@@ -909,7 +930,7 @@ export function BasicContractSignViewer({
           documentViewer.updateView();
           window.dispatchEvent(new Event("resize"));
         } catch (e) {
-          console.warn("탭 변경 후 레이아웃 새로고침 스킵:", e);
+          console.warn("탭 변경 후 레이아웃 새고침 스킵:", e);
         }
       });
     } catch (e) {
@@ -965,22 +986,34 @@ export function BasicContractSignViewer({
         downloadType: "pdf",
       });
 
-      if (isComplianceTemplate && !surveyData.completed) {
-        toast.error("준법 설문조사를 먼저 완료해주세요.");
-        setActiveTab('survey');
-        return;
+      // 구매자 모드일 때는 설문조사와 GTC 검증 건너뛰기
+      if (mode !== 'buyer') {
+        if (isComplianceTemplate && !surveyData.completed) {
+          toast.error("준법 설문조사를 먼저 완료해주세요.");
+          setActiveTab('survey');
+          return;
+        }
+
+        if (isGTCTemplate && gtcCommentStatus.hasComments) {
+          toast.error("GTC 조항에 코멘트가 있어 서명할 수 없습니다.");
+          toast.info("모든 코멘트를 삭제하거나 협의를 완료한 후 서명해주세요.");
+          setActiveTab('clauses');
+          return;
+        }
       }
 
       if (onSign) {
         await onSign(documentData, { formData, surveyData, signatureFields });
       } else {
-        toast.success("계약서가 성공적으로 서명되었습니다.");
+        const actionText = mode === 'buyer' ? "최종승인" : "서명";
+        toast.success(`계약서가 성공적으로 ${actionText}되었습니다.`);
       }
 
       handleClose();
     } catch (error) {
-      console.error("📛 서명 저장 실패:", error);
-      toast.error("서명을 저장하는데 실패했습니다.");
+      console.error(`📛 ${mode === 'buyer' ? '최종승인' : '서명'} 저장 실패:`, error);
+      const actionText = mode === 'buyer' ? "최종승인" : "서명";
+      toast.error(`${actionText}을 저장하는데 실패했습니다.`);
     }
   };
 
@@ -992,842 +1025,7 @@ export function BasicContractSignViewer({
     }
   };
 
-  // 개선된 SurveyComponent
-  const SurveyComponent = () => {
-    const {
-      control,
-      watch,
-      setValue,
-      getValues,
-      formState: { errors },
-      trigger,
-    } = useForm<SurveyFormData>({
-      defaultValues: {},
-      mode: 'onChange'
-    });
-
-    const watchedValues = watch();
-    const [uploadedFiles, setUploadedFiles] = useState<Record<number, File[]>>({});
-
-    // 📊 실시간 진행 상태 계산
-    const progressStatus = useMemo(() => {
-      if (!conditionalHandler || !surveyTemplate) {
-        return {
-          visibleQuestions: [],
-          totalRequired: 0,
-          completedRequired: 0,
-          completedQuestionIds: [],
-          incompleteQuestionIds: [],
-          progressPercentage: 0,
-          debugInfo: {}
-        };
-      }
-
-      console.log('🔄 실시간 프로그레스 재계산 중...');
-      console.log('📝 원본 watchedValues:', watchedValues);
-
-      // 현재 답변을 조건부 핸들러가 인식할 수 있는 형태로 변환
-      const convertedAnswers: Record<number, any> = {};
-      Object.entries(watchedValues).forEach(([questionId, value]) => {
-        const id = parseInt(questionId);
-        const convertedValue = {
-          questionId: id,
-          answerValue: value?.answerValue || '',
-          detailText: value?.detailText || '',
-          otherText: value?.otherText || '',
-          files: value?.files || []
-        };
-
-        convertedAnswers[id] = convertedValue;
-
-        // 각 질문의 변환 과정 로그
-        if (value?.answerValue) {
-          console.log(`📝 질문 ${id} 변환:`, {
-            원본: value,
-            변환후: convertedValue
-          });
-        }
-      });
-
-      console.log('📝 변환된 답변들 최종:', convertedAnswers);
-
-      const result = conditionalHandler.getSimpleProgressStatus(convertedAnswers);
-
-      console.log('📊 실시간 진행 상태 최종 결과:', {
-        전체표시질문: result.visibleQuestions.length,
-        필수질문수: result.totalRequired,
-        완료된필수질문: result.completedRequired,
-        진행률: result.progressPercentage,
-        완료된질문들: result.completedQuestionIds,
-        미완료질문들: result.incompleteQuestionIds,
-        기본질문: result.visibleQuestions.filter(q => !q.parentQuestionId).length,
-        조건부질문: result.visibleQuestions.filter(q => q.parentQuestionId).length,
-        완료된기본질문: result.completedQuestionIds.filter(id => !result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length,
-        완료된조건부질문: result.completedQuestionIds.filter(id => !!result.visibleQuestions.find(q => q.id === id)?.parentQuestionId).length
-      });
-
-      // 🚨 조건부 질문들의 답변 상태 특별 점검
-      const conditionalQuestions = result.visibleQuestions.filter(q => q.parentQuestionId);
-      if (conditionalQuestions.length > 0) {
-        console.log('🚨 조건부 질문들 답변 상태 점검:', conditionalQuestions.map(q => ({
-          id: q.id,
-          questionNumber: q.questionNumber,
-          isRequired: q.isRequired,
-          parentId: q.parentQuestionId,
-          watchedValue: watchedValues[q.id],
-          convertedAnswer: convertedAnswers[q.id],
-          hasWatchedAnswer: !!watchedValues[q.id]?.answerValue,
-          hasConvertedAnswer: !!convertedAnswers[q.id]?.answerValue,
-          isInRequiredList: result.totalRequired,
-          isCompleted: result.completedQuestionIds.includes(q.id)
-        })));
-      }
-
-      return result;
-    }, [conditionalHandler, watchedValues, surveyTemplate]);
-
-    // 🎯 동적 상태 정보
-    const visibleQuestions = progressStatus.visibleQuestions;
-    const totalVisibleQuestions = visibleQuestions.length;
-    const baseQuestionCount = surveyTemplate?.questions.length || 0;
-    const conditionalQuestionCount = totalVisibleQuestions - baseQuestionCount;
-    const hasConditionalQuestions = conditionalQuestionCount > 0;
-
-    // ✅ 완료 가능 여부
-    const canComplete = progressStatus.totalRequired > 0 &&
-      progressStatus.completedRequired === progressStatus.totalRequired;
-
-    if (surveyLoading) {
-      return (
-        <div className="h-full w-full">
-          <Card className="h-full">
-            <CardContent className="flex flex-col items-center justify-center h-full py-12">
-              <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-4" />
-              <p className="text-sm text-muted-foreground">설문조사를 불러오는 중...</p>
-            </CardContent>
-          </Card>
-        </div>
-      );
-    }
-
-    if (!surveyTemplate) {
-      return (
-        <div className="h-full w-full">
-          <Card className="h-full">
-            <CardContent className="flex flex-col items-center justify-center h-full py-12">
-              <AlertTriangle className="h-8 w-8 text-red-500 mb-4" />
-              <p className="text-sm text-muted-foreground">설문조사 템플릿을 불러올 수 없습니다.</p>
-              <Button
-                variant="outline"
-                onClick={loadSurveyTemplate}
-                className="mt-2"
-              >
-                다시 시도
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      );
-    }
-
-    // 🚨 템플릿이 로드되면 모든 질문들의 isRequired 속성 확인
-    React.useEffect(() => {
-      if (surveyTemplate && surveyTemplate.questions) {
-        console.log('🚨 설문 템플릿의 모든 질문들 isRequired 속성 확인:', surveyTemplate.questions.map(q => ({
-          id: q.id,
-          questionNumber: q.questionNumber,
-          questionText: q.questionText?.substring(0, 30) + '...',
-          isRequired: q.isRequired,
-          parentQuestionId: q.parentQuestionId,
-          conditionalValue: q.conditionalValue,
-          isConditional: !!q.parentQuestionId
-        })));
-
-        const allQuestions = surveyTemplate.questions.length;
-        const requiredQuestions = surveyTemplate.questions.filter(q => q.isRequired).length;
-        const conditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId).length;
-        const requiredConditionalQuestions = surveyTemplate.questions.filter(q => q.parentQuestionId && q.isRequired).length;
-
-        console.log('📊 템플릿 질문 통계:', {
-          전체질문수: allQuestions,
-          전체필수질문수: requiredQuestions,
-          조건부질문수: conditionalQuestions,
-          필수조건부질문수: requiredConditionalQuestions,
-          기본질문수: allQuestions - conditionalQuestions,
-          필수기본질문수: requiredQuestions - requiredConditionalQuestions
-        });
-
-        // 🚨 만약 조건부 질문들이 필수가 아니라면 경고
-        if (conditionalQuestions > 0 && requiredConditionalQuestions === 0) {
-          console.warn('⚠️ 경고: 조건부 질문들이 모두 필수가 아닙니다! 데이터베이스 확인 필요');
-          console.warn('조건부 질문들:', surveyTemplate.questions.filter(q => q.parentQuestionId));
-        }
-      }
-    }, [surveyTemplate]);
-
-    const handleFileUpload = useCallback((questionId: number, files: FileList | null) => {
-      if (!files) return;
-
-      const fileArray = Array.from(files);
-      setUploadedFiles(prev => ({
-        ...prev,
-        [questionId]: fileArray
-      }));
-
-      setValue(`${questionId}.files`, fileArray);
-    }, [setValue]);
-
-    const handleAnswerChange = useCallback((questionId: number, field: string, value: any) => {
-      console.log(`📝 답변 변경: 질문 ${questionId}, 필드 ${field}, 값:`, value);
-
-      // 해당 질문이 조건부 질문인지 확인
-      const question = visibleQuestions.find(q => q.id === questionId);
-      if (question) {
-        console.log(`📋 질문 ${questionId} 상세 정보:`, {
-          id: question.id,
-          questionNumber: question.questionNumber,
-          isRequired: question.isRequired,
-          parentQuestionId: question.parentQuestionId,
-          conditionalValue: question.conditionalValue,
-          isConditional: !!question.parentQuestionId
-        });
-      }
-
-      setValue(`${questionId}.${field}`, value);
-
-      // setValue 후 현재 값 확인
-      setTimeout(() => {
-        const currentFormValues = getValues();
-        console.log(`✅ setValue 후 확인 - 질문 ${questionId}:`, {
-          설정한값: value,
-          저장된전체값: currentFormValues[questionId],
-          전체폼값: currentFormValues
-        });
-      }, 0);
-
-      // 부모 질문의 답변이 변경되면 조건부 자식 질문들 처리
-      if (field === 'answerValue' && conditionalHandler) {
-        const currentValues = getValues();
-        const convertedAnswers: Record<number, any> = {};
-
-        Object.entries(currentValues).forEach(([qId, qValue]) => {
-          const id = parseInt(qId);
-          convertedAnswers[id] = {
-            questionId: id,
-            answerValue: qValue?.answerValue || '',
-            detailText: qValue?.detailText || '',
-            otherText: qValue?.otherText || '',
-            files: qValue?.files || []
-          };
-        });
-
-        // 새로운 답변 반영
-        convertedAnswers[questionId] = {
-          ...convertedAnswers[questionId],
-          questionId,
-          [field]: value
-        };
-
-        console.log(`🔄 질문 ${questionId}의 답변 변경으로 인한 조건부 질문 처리...`);
-        console.log(`🔄 변경 후 전체 답변:`, convertedAnswers);
-
-        // 영향받는 자식 질문들의 답변 초기화
-        const clearedAnswers = conditionalHandler.clearAffectedChildAnswers(questionId, value, convertedAnswers);
-
-        console.log(`🧹 정리된 답변들:`, clearedAnswers);
-
-        // 삭제된 답변들을 폼에서도 제거
-        Object.keys(convertedAnswers).forEach(qId => {
-          const id = parseInt(qId);
-          if (id !== questionId && !clearedAnswers[id]) {
-            console.log(`🗑️ 질문 ${id} 답변 초기화`);
-            setValue(`${id}`, {
-              answerValue: '',
-              detailText: '',
-              otherText: '',
-              files: []
-            });
-
-            // 업로드된 파일도 초기화
-            setUploadedFiles(prev => {
-              const updated = { ...prev };
-              delete updated[id];
-              return updated;
-            });
-          }
-        });
-      }
-    }, [setValue, getValues, conditionalHandler, visibleQuestions]);
-
-    // 🔥 설문조사 완료 핸들러 수정
-    const handleSurveyComplete = useCallback(async () => {
-      console.log('🎯 설문조사 완료 시도');
-
-      // 이미 제출 중이면 중복 실행 방지
-      if (isSubmitting) {
-        console.log('⚠️ 이미 제출 중...');
-        return;
-      }
-
-      setIsSubmitting(true);
-
-      try {
-        const currentValues = getValues();
-        console.log('📝 현재 폼 값들:', currentValues);
-
-        // 폼 검증
-        const isValid = await trigger();
-        console.log('🔍 폼 검증 결과:', isValid);
-
-        // 진행 상태 최종 확인
-        console.log('📊 최종 진행 상태:', {
-          totalRequired: progressStatus.totalRequired,
-          completedRequired: progressStatus.completedRequired,
-          canComplete,
-          완료된질문들: progressStatus.completedQuestionIds,
-          미완료질문들: progressStatus.incompleteQuestionIds
-        });
-
-        if (!canComplete) {
-          let errorMessage = '모든 필수 항목을 완료해주세요.';
-          let errorDescription = `${progressStatus.completedRequired}/${progressStatus.totalRequired} 완료됨`;
-
-          // 구체적인 미완료 이유 표시
-          if (progressStatus.incompleteQuestionIds.length > 0) {
-            const incompleteReasons = progressStatus.incompleteQuestionIds.map(id => {
-              const debug = progressStatus.debugInfo?.[id];
-              const question = visibleQuestions.find(q => q.id === id);
-              return `• Q${question?.questionNumber}: ${question?.questionText?.substring(0, 40)}...\n  → ${debug?.incompleteReason || '답변 필요'}`;
-            }).slice(0, 3);
-
-            errorDescription = incompleteReasons.join('\n\n');
-
-            if (progressStatus.incompleteQuestionIds.length > 3) {
-              errorDescription += `\n\n... 외 ${progressStatus.incompleteQuestionIds.length - 3}개 항목`;
-            }
-          }
-
-          toast.error(errorMessage, {
-            description: errorDescription,
-            icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
-            duration: 12000
-          });
-
-          // 첫 번째 미완료 질문으로 스크롤
-          if (progressStatus.incompleteQuestionIds.length > 0) {
-            const firstIncompleteId = progressStatus.incompleteQuestionIds[0];
-            const element = document.getElementById(`question-${firstIncompleteId}`);
-            if (element) {
-              element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-          }
-
-          return;
-        }
-
-        // 필수 데이터 확인
-        if (!contractId || !surveyTemplate?.id) {
-          toast.error('계약서 정보 또는 설문 템플릿 정보가 없습니다.');
-          return;
-        }
-
-        // 서버 액션에 전달할 데이터 준비
-        const surveyAnswers: SurveyAnswerData[] = Object.entries(currentValues)
-          .map(([questionId, value]) => ({
-            questionId: parseInt(questionId),
-            answerValue: value?.answerValue || '',
-            detailText: value?.detailText || '',
-            otherText: value?.otherText || '',
-            files: value?.files || []
-          }))
-          .filter(answer =>
-            // 빈 답변 필터링 (하지만 필수 질문의 답변이 완료되었음을 이미 확인했음)
-            answer.answerValue || answer.detailText || (answer.files && answer.files.length > 0)
-          );
-
-        const requestData: CompleteSurveyRequest = {
-          contractId: contractId,
-          templateId: surveyTemplate.id,
-          answers: surveyAnswers,
-          progressStatus: progressStatus // 디버깅용 추가 정보
-        };
-
-        console.log('📤 서버로 전송할 데이터:', {
-          contractId: requestData.contractId,
-          templateId: requestData.templateId,
-          answersCount: requestData.answers.length,
-          answers: requestData.answers.map(a => ({
-            questionId: a.questionId,
-            hasAnswer: !!a.answerValue,
-            hasDetail: !!a.detailText,
-            hasOther: !!a.otherText,
-            filesCount: a.files?.length || 0
-          }))
-        });
-
-        // 제출 중 토스트 표시
-        const submitToast = toast.loading('설문조사를 저장하는 중...', {
-          description: '잠시만 기다려주세요.',
-          duration: Infinity
-        });
-
-        // 서버 액션 호출
-        const result = await completeSurvey(requestData);
-
-        // 로딩 토스트 제거
-        toast.dismiss(submitToast);
-
-        if (result.success) {
-          // 클라이언트 상태 업데이트 (기존 로직 유지)
-          setSurveyData({
-            completed: true,
-            answers: surveyAnswers,
-            timestamp: new Date().toISOString(),
-            progressStatus: progressStatus,
-            totalQuestions: totalVisibleQuestions,
-            conditionalQuestions: conditionalQuestionCount,
-            responseId: result.data?.responseId // 서버에서 반환된 응답 ID 저장
-          });
-
-          // 🔥 부모 컴포넌트에 설문조사 완료 알림
-          if (onSurveyComplete) {
-            onSurveyComplete();
-          }
-
-          toast.success("🎉 설문조사가 완료되었습니다!", {
-            description: `총 ${progressStatus.totalRequired}개 필수 질문 완료${hasConditionalQuestions ? ` (조건부 ${conditionalQuestionCount}개 포함)` : ''}`,
-            icon: <CheckCircle2 className="h-5 w-5 text-green-500" />,
-            duration: 5000
-          });
-
-          console.log('✅ 설문조사 완료:', {
-            totalAnswered: surveyAnswers.length,
-            totalRequired: progressStatus.totalRequired,
-            conditionalQuestions: conditionalQuestionCount,
-            responseId: result.data?.responseId
-          });
-
-          // 자동으로 메인 탭으로 이동 (선택사항)
-          setTimeout(() => {
-            setActiveTab('main');
-          }, 2000);
-
-        } else {
-          // 서버 에러 처리
-          console.error('❌ 서버 응답 에러:', result.message);
-          toast.error('설문조사 저장 실패', {
-            description: result.message || '서버에서 오류가 발생했습니다.',
-            icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
-            duration: 8000
-          });
-        }
-
-      } catch (error) {
-        console.error('❌ 설문조사 저장 중 예외 발생:', error);
-
-        let errorMessage = '설문조사 저장에 실패했습니다.';
-        let errorDescription = '네트워크 연결을 확인하고 다시 시도해주세요.';
-
-        if (error instanceof Error) {
-          errorDescription = error.message;
-        }
-
-        toast.error(errorMessage, {
-          description: errorDescription,
-          icon: <AlertTriangle className="h-5 w-5 text-red-500" />,
-          duration: 10000
-        });
-      } finally {
-        setIsSubmitting(false);
-      }
-    }, [
-      getValues,
-      trigger,
-      progressStatus,
-      visibleQuestions,
-      canComplete,
-      contractId,
-      surveyTemplate?.id,
-      totalVisibleQuestions,
-      conditionalQuestionCount,
-      hasConditionalQuestions,
-      isSubmitting,
-      setActiveTab,
-      onSurveyComplete // 🔥 추가
-    ]);
-
-    // OTHER 텍스트 입력 컴포넌트
-    const OtherTextInput = ({ questionId, fieldName }: { questionId: number; fieldName: string }) => {
-      const answerValue = useWatch({
-        control,
-        name: `${fieldName}.answerValue`
-      });
-
-      if (answerValue !== 'OTHER') return null;
-
-      return (
-        <Controller
-          name={`${fieldName}.otherText`}
-          control={control}
-          render={({ field }) => (
-            <Input
-              {...field}
-              placeholder="기타 내용을 입력해주세요"
-              className="mt-2"
-            />
-          )}
-        />
-      );
-    };
-
-    return (
-      <div className="h-full w-full flex flex-col">
-        <Card className="h-full flex flex-col">
-          <CardHeader className="flex-shrink-0">
-            <CardTitle className="flex items-center justify-between">
-              <div className="flex items-center">
-                <ClipboardList className="h-5 w-5 mr-2 text-amber-500" />
-                {surveyTemplate.name}
-                {conditionalHandler && (
-                  <Badge variant="outline" className="ml-2 text-xs">
-                    조건부 질문 지원
-                  </Badge>
-                )}
-              </div>
-              <div className="text-sm text-gray-600">
-                {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료
-              </div>
-            </CardTitle>
-
-            <CardDescription>
-              {surveyTemplate.description}
-
-              {/* 🎯 동적 질문 수 표시 */}
-              <div className="mt-2 space-y-1">
-                <div className="flex items-center text-sm">
-                  <span className="text-gray-600">
-                    📋 총 {totalVisibleQuestions}개 질문
-                    {hasConditionalQuestions && (
-                      <span className="text-blue-600 ml-1">
-                        (기본 {baseQuestionCount}개 + 조건부 {conditionalQuestionCount}개)
-                      </span>
-                    )}
-                  </span>
-                </div>
-
-                {hasConditionalQuestions && (
-                  <div className="text-blue-600 text-sm">
-                    ⚡ 답변에 따라 {conditionalQuestionCount}개 추가 질문이 나타났습니다
-                  </div>
-                )}
-              </div>
-            </CardDescription>
-
-            {/* 📊 동적 프로그레스 바 */}
-            <div className="space-y-2">
-              <div className="flex justify-between text-xs text-gray-600">
-                <span>필수 질문 진행률</span>
-                <span>
-                  {Math.round(progressStatus.progressPercentage)}%
-                  {hasConditionalQuestions && (
-                    <span className="ml-1 text-blue-600">
-                      (조건부 포함)
-                    </span>
-                  )}
-                </span>
-              </div>
-              <div className="w-full bg-gray-200 rounded-full h-2">
-                <div
-                  className="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500 ease-out"
-                  style={{ width: `${progressStatus.progressPercentage}%` }}
-                />
-              </div>
-
-              {/* 세부 진행 상황 */}
-              {progressStatus.totalRequired > 0 && (
-                <div className="text-xs text-gray-500 flex justify-between">
-                  <span>완료: {progressStatus.completedRequired}개</span>
-                  <span>남은 필수: {progressStatus.totalRequired - progressStatus.completedRequired}개</span>
-                </div>
-              )}
-            </div>
-          </CardHeader>
-
-          <CardContent className="flex-1 min-h-0 overflow-y-auto">
-            <form onSubmit={(e) => e.preventDefault()} className="space-y-6">
-              <div className="p-4 border rounded-lg bg-yellow-50">
-                <div className="flex items-start">
-                  <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5 mr-2" />
-                  <div>
-                    <p className="font-medium text-yellow-800">중요 안내</p>
-                    <p className="text-sm text-yellow-700 mt-1">
-                      본 설문조사는 준법 의무 확인을 위한 필수 절차입니다. 모든 항목을 정확히 작성해주세요.
-                      {conditionalHandler && (
-                        <span className="block mt-1">
-                          ⚡ 답변에 따라 추가 질문이 나타날 수 있으며, 이 경우 모든 추가 질문도 완료해야 합니다.
-                        </span>
-                      )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                {visibleQuestions.map((question: any) => {
-                  const fieldName = `${question.id}`;
-                  const isComplete = progressStatus.completedQuestionIds.includes(question.id);
-                  const isConditional = !!question.parentQuestionId;
-
-                  return (
-                    <div
-                      key={question.id}
-                      id={`question-${question.id}`}
-                      className={`mb-6 p-4 border rounded-lg transition-colors duration-200 ${isConditional
-                          ? 'bg-blue-50 border-blue-200'
-                          : 'bg-gray-50 border-gray-200'
-                        } ${!isComplete && question.isRequired ? 'ring-2 ring-red-100' : ''}`}
-                    >
-                      <div className="flex items-start justify-between mb-3">
-                        <div className="flex-1">
-                          <Label className="text-sm font-medium text-gray-900 flex items-center flex-wrap gap-2">
-                            <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
-                              Q{question.questionNumber}
-                            </span>
-
-                            {isConditional && (
-                              <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">
-                                ⚡ 조건부 질문
-                              </span>
-                            )}
-
-                            {question.questionType === 'FILE' && (
-                              <span className="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">
-                                📎 파일 업로드
-                              </span>
-                            )}
-
-                            <div className="w-full mt-1">
-                              {question.questionText}
-                              {question.isRequired && <span className="text-red-500 ml-1">*</span>}
-                            </div>
-                          </Label>
-                        </div>
-
-                        {isComplete && (
-                          <CheckCircle2 className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
-                        )}
-                      </div>
-
-                      {/* 질문 타입별 렌더링 (기존 코드와 동일) */}
-                      {/* RADIO 타입 */}
-                      {question.questionType === 'RADIO' && (
-                        <Controller
-                          name={`${fieldName}.answerValue`}
-                          control={control}
-                          rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
-                          render={({ field }) => (
-                            <RadioGroup
-                              value={field.value || ''}
-                              onValueChange={(value) => {
-                                field.onChange(value);
-                                handleAnswerChange(question.id, 'answerValue', value);
-                              }}
-                              className="space-y-2"
-                            >
-                              {question.options?.map((option: any) => (
-                                <div key={option.id} className="flex items-center space-x-2">
-                                  <RadioGroupItem value={option.optionValue} id={`${question.id}-${option.id}`} />
-                                  <Label htmlFor={`${question.id}-${option.id}`} className="text-sm">
-                                    {option.optionText}
-                                  </Label>
-                                </div>
-                              ))}
-                            </RadioGroup>
-                          )}
-                        />
-                      )}
-
-                      {/* DROPDOWN 타입 */}
-                      {question.questionType === 'DROPDOWN' && (
-                        <div className="space-y-2">
-                          <Controller
-                            name={`${fieldName}.answerValue`}
-                            control={control}
-                            rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
-                            render={({ field }) => (
-                              <Select
-                                value={field.value || ''}
-                                onValueChange={(value) => {
-                                  field.onChange(value);
-                                  handleAnswerChange(question.id, 'answerValue', value);
-                                }}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="선택해주세요" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {question.options?.map((option: any) => (
-                                    <SelectItem key={option.id} value={option.optionValue}>
-                                      {option.optionText}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            )}
-                          />
-
-                          <OtherTextInput questionId={question.id} fieldName={fieldName} />
-                        </div>
-                      )}
-
-                      {/* TEXTAREA 타입 */}
-                      {question.questionType === 'TEXTAREA' && (
-                        <Controller
-                          name={`${fieldName}.detailText`}
-                          control={control}
-                          rules={{ required: question.isRequired ? '필수 항목입니다.' : false }}
-                          render={({ field }) => (
-                            <Textarea
-                              {...field}
-                              placeholder="상세한 내용을 입력해주세요"
-                              rows={4}
-                            />
-                          )}
-                        />
-                      )}
-
-                      {/* 상세 텍스트 입력 */}
-                      {question.hasDetailText && (
-                        <div className="mt-3">
-                          <Label className="text-sm text-gray-700 mb-2 block">상세 내용을 기술해주세요:</Label>
-                          <Controller
-                            name={`${fieldName}.detailText`}
-                            control={control}
-                            rules={{ required: question.isRequired ? '상세 내용을 입력해주세요.' : false }}
-                            render={({ field }) => (
-                              <Textarea
-                                {...field}
-                                placeholder="상세한 내용을 입력해주세요"
-                                rows={3}
-                                className="w-full"
-                              />
-                            )}
-                          />
-                        </div>
-                      )}
-
-                      {/* 파일 업로드 */}
-                      {(question.hasFileUpload || question.questionType === 'FILE') && (
-                        <div className="mt-3">
-                          <Label className="text-sm text-gray-700 mb-2 block">첨부파일:</Label>
-                          <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
-                            <input
-                              type="file"
-                              multiple
-                              onChange={(e) => handleFileUpload(question.id, e.target.files)}
-                              className="hidden"
-                              id={`file-${question.id}`}
-                            />
-                            <label htmlFor={`file-${question.id}`} className="cursor-pointer">
-                              <div className="flex flex-col items-center">
-                                <Upload className="h-8 w-8 text-gray-400 mb-2" />
-                                <span className="text-sm text-gray-500">파일을 선택하거나 여기에 드래그하세요</span>
-                              </div>
-                            </label>
-
-                            {uploadedFiles[question.id] && uploadedFiles[question.id].length > 0 && (
-                              <div className="mt-3 space-y-1">
-                                {uploadedFiles[question.id].map((file, index) => (
-                                  <div key={index} className="flex items-center space-x-2 text-sm">
-                                    <FileText className="h-4 w-4 text-blue-500" />
-                                    <span>{file.name}</span>
-                                    <span className="text-gray-500">({(file.size / 1024).toFixed(1)} KB)</span>
-                                  </div>
-                                ))}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      )}
-
-                      {/* 에러 메시지 */}
-                      {errors[fieldName] && (
-                        <p className="mt-2 text-sm text-red-600 flex items-center">
-                          <AlertTriangle className="h-4 w-4 mr-1" />
-                          {errors[fieldName]?.answerValue?.message ||
-                            errors[fieldName]?.detailText?.message ||
-                            '필수 항목을 완료해주세요.'}
-                        </p>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* ✅ 향상된 완료 버튼 */}
-              <div className="flex justify-end pt-6 border-t">
-                <div className="flex items-center space-x-4">
-                  {/* 진행 상황 요약 */}
-                  <div className="text-sm">
-                    {canComplete ? (
-                      <div className="text-green-600 font-medium flex items-center">
-                        <CheckCircle2 className="h-4 w-4 mr-1" />
-                        모든 필수 항목 완료됨
-                        {hasConditionalQuestions && (
-                          <span className="ml-2 text-xs text-blue-600">
-                            (조건부 {conditionalQuestionCount}개 포함)
-                          </span>
-                        )}
-                      </div>
-                    ) : (
-                      <div className="space-y-1">
-                        <div className="flex items-center text-gray-600">
-                          <AlertTriangle className="h-4 w-4 mr-1 text-red-500" />
-                          {progressStatus.completedRequired}/{progressStatus.totalRequired} 완료
-                        </div>
-                        {hasConditionalQuestions && (
-                          <div className="text-xs text-blue-600">
-                            기본 + 조건부 {conditionalQuestionCount}개 포함
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  <Button
-                    type="button"
-                    onClick={handleSurveyComplete}
-                    disabled={!canComplete || isSubmitting}
-                    className={`transition-all duration-200 ${canComplete && !isSubmitting
-                        ? 'bg-green-600 hover:bg-green-700 shadow-lg'
-                        : 'bg-gray-400 cursor-not-allowed'
-                      }`}
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                        저장 중...
-                      </>
-                    ) : (
-                      <>
-                        <CheckCircle2 className="h-4 w-4 mr-2" />
-                        설문조사 완료
-                      </>
-                    )}
-                    <span className="ml-1 text-xs">
-                      ({progressStatus.completedRequired}/{progressStatus.totalRequired})
-                    </span>
-                  </Button>
-                </div>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  };
-  
-  // 🔥 서명 상태 표시 컴포넌트 개선
+  // 서명 상태 표시 컴포넌트
   const SignatureFieldsStatus = () => {
     if (!hasSignatureFields && !isAutoSignProcessing && !autoSignError && !hasValidSignature) return null;
 
@@ -1846,11 +1044,10 @@ export function BasicContractSignViewer({
         ) : hasSignatureFields ? (
           <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
             <Target className="h-3 w-3 mr-1" />
-            {signatureFields.length}개 서명 필드 자동 생성됨
+            {signatureFields.length}개 서명 필드 자동 생성됨 {mode === 'buyer' ? '(왼쪽 하단)' : ''}
           </Badge>
         ) : null}
-        
-        {/* 🔥 서명 완료 상태 표시 */}
+
         {hasValidSignature && (
           <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-200">
             <CheckCircle2 className="h-3 w-3 mr-1" />
@@ -1865,7 +1062,8 @@ export function BasicContractSignViewer({
   if (!isOpen && !onClose) {
     return (
       <div className="h-full w-full flex flex-col overflow-hidden">
-        {allFiles.length > 1 ? (
+        {/* 구매자 모드에서는 탭 없이 단일 뷰어만 표시 */}
+        {allFiles.length > 1 && mode !== 'buyer' ? (
           <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col">
             <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0">
               <SignatureFieldsStatus />
@@ -1876,8 +1074,10 @@ export function BasicContractSignViewer({
                     tabId = 'main';
                   } else if (file.type === 'survey') {
                     tabId = 'survey';
+                  } else if (file.type === 'clauses') {
+                    tabId = 'clauses';
                   } else {
-                    const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey').length;
+                    const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey' && f.type !== 'clauses').length;
                     tabId = `file-${fileOnlyIndex}`;
                   }
 
@@ -1886,6 +1086,8 @@ export function BasicContractSignViewer({
                       <div className="flex items-center space-x-1">
                         {file.type === 'survey' ? (
                           <ClipboardList className="h-3 w-3" />
+                        ) : file.type === 'clauses' ? (
+                          <BookOpen className="h-3 w-3" />
                         ) : (
                           <FileText className="h-3 w-3" />
                         )}
@@ -1893,6 +1095,11 @@ export function BasicContractSignViewer({
                         {file.type === 'survey' && surveyData.completed && (
                           <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge>
                         )}
+                        {file.type === 'clauses' && gtcCommentStatus.hasComments && (
+                          <Badge variant="destructive" className="ml-1 h-4 px-1 text-xs">
+                            코멘트 {gtcCommentStatus.commentCount}
+                          </Badge>
+                        )}
                       </div>
                     </TabsTrigger>
                   );
@@ -1904,11 +1111,35 @@ export function BasicContractSignViewer({
               <div
                 className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`}
               >
-                <SurveyComponent />
+                {/* 분리된 SurveyComponent 사용 */}
+                <SurveyComponent
+                  contractId={contractId}
+                  surveyTemplate={surveyTemplate}
+                  surveyLoading={surveyLoading}
+                  conditionalHandler={conditionalHandler}
+                  onSurveyComplete={onSurveyComplete}
+                  onSurveyDataUpdate={setSurveyData}
+                  onLoadSurveyTemplate={loadSurveyTemplate}
+                  setActiveTab={setActiveTab}
+                />
+              </div>
+
+              <div
+                className={`absolute inset-0 p-3 ${activeTab === 'clauses' ? 'block' : 'hidden'}`}
+              >
+                {/* GTC 조항 컴포넌트 */}
+                <GtcClausesComponent
+                  contractId={contractId}
+                  onCommentStatusChange={(hasComments, commentCount) => {
+                    setGtcCommentStatus({ hasComments, commentCount });
+                    onGtcCommentStatusChange?.(hasComments, commentCount);
+                  }}
+                  t={t}
+                />
               </div>
 
               <div
-                className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`}
+                className={`absolute inset-0 ${activeTab !== 'survey' && activeTab !== 'clauses' ? 'block' : 'hidden'}`}
               >
                 <div className="w-full h-full overflow-auto">
                   <div
@@ -1962,49 +1193,84 @@ export function BasicContractSignViewer({
     );
   }
 
+  const handleGtcCommentStatusChange = React.useCallback((hasComments: boolean, commentCount: number) => {
+    setGtcCommentStatus({ hasComments, commentCount });
+    onGtcCommentStatusChange?.(hasComments, commentCount);
+  }, [onGtcCommentStatusChange]);
+
   // 다이얼로그 뷰어 렌더링
   return (
     <Dialog open={showDialog} onOpenChange={handleClose}>
       <DialogContent className="w-[90vw] max-w-6xl h-[90vh] flex flex-col p-0">
         <DialogHeader className="px-6 py-4 border-b flex-shrink-0">
           <DialogTitle className="flex items-center justify-between">
-            <span>기본계약서 서명</span>
+            <span>{mode === 'buyer' ? '구매자 최종승인' : '기본계약서 서명'}</span>
             <SignatureFieldsStatus />
           </DialogTitle>
           <DialogDescription>
-            계약서를 확인하고 서명을 진행해주세요.
-            {isComplianceTemplate && (
+            계약서를 확인하고 {mode === 'buyer' ? '최종승인을' : '서명을'} 진행해주세요.
+            {mode !== 'buyer' && isComplianceTemplate && (
               <span className="block mt-1 text-amber-600">📋 준법 설문조사를 먼저 완료해주세요.</span>
             )}
+            {mode !== 'buyer' && isGTCTemplate && (
+              <span className="block mt-1 text-blue-600">📋 GTC 조항을 검토하고 코멘트가 없는지 확인해주세요.</span>
+            )}
             {hasSignatureFields && (
               <span className="block mt-1 text-green-600">
-                🎯 서명 위치가 자동으로 감지되었습니다.
+                🎯 서명 위치가 자동으로 감지되었습니다{mode === 'buyer' ? ' (왼쪽 하단)' : ''}.
               </span>
             )}
-            {/* 🔥 서명 완료 상태 안내 */}
             {hasValidSignature && (
               <span className="block mt-1 text-green-600">
-                ✅ 서명이 완료되었습니다.
+                ✅ {mode === 'buyer' ? '승인이' : '서명이'} 완료되었습니다.
+              </span>
+            )}
+            {mode !== 'buyer' && isGTCTemplate && gtcCommentStatus.hasComments && (
+              <span className="block mt-1 text-red-600">
+                ⚠️ GTC 조항에 {gtcCommentStatus.commentCount}개의 코멘트가 있어 서명할 수 없습니다.
               </span>
             )}
           </DialogDescription>
         </DialogHeader>
 
         <div className="flex-1 min-h-0 overflow-hidden">
-          {allFiles.length > 1 ? (
+          {/* 구매자 모드에서는 탭 없이 단일 뷰어만 표시 */}
+          {allFiles.length > 1 && mode !== 'buyer' ? (
             <Tabs value={activeTab} onValueChange={handleTabChange} className="h-full flex flex-col">
               <div className="border-b bg-gray-50 px-3 py-2 flex-shrink-0">
                 <TabsList className="grid w-full h-8" style={{ gridTemplateColumns: `repeat(${allFiles.length}, 1fr)` }}>
                   {allFiles.map((file, index) => {
-                    const tabId = index === 0 ? 'main' : file.type === 'survey' ? 'survey' : `file-${index}`;
+                    let tabId: string;
+                    if (index === 0) {
+                      tabId = 'main';
+                    } else if (file.type === 'survey') {
+                      tabId = 'survey';
+                    } else if (file.type === 'clauses') {
+                      tabId = 'clauses';
+                    } else {
+                      const fileOnlyIndex = allFiles.slice(0, index).filter(f => f.type !== 'survey' && f.type !== 'clauses').length;
+                      tabId = `file-${fileOnlyIndex}`;
+                    }
+
                     return (
                       <TabsTrigger key={tabId} value={tabId} className="text-xs">
                         <div className="flex items-center space-x-1">
-                          {file.type === 'survey' ? <ClipboardList className="h-3 w-3" /> : <FileText className="h-3 w-3" />}
+                          {file.type === 'survey' ? (
+                            <ClipboardList className="h-3 w-3" />
+                          ) : file.type === 'clauses' ? (
+                            <BookOpen className="h-3 w-3" />
+                          ) : (
+                            <FileText className="h-3 w-3" />
+                          )}
                           <span className="truncate">{file.name}</span>
                           {file.type === 'survey' && surveyData.completed && (
                             <Badge variant="secondary" className="ml-1 h-4 px-1 text-xs">완료</Badge>
                           )}
+                          {file.type === 'clauses' && gtcCommentStatus.hasComments && (
+                            <Badge variant="destructive" className="ml-1 h-4 px-1 text-xs">
+                              코멘트 {gtcCommentStatus.commentCount}
+                            </Badge>
+                          )}
                         </div>
                       </TabsTrigger>
                     );
@@ -2014,10 +1280,29 @@ export function BasicContractSignViewer({
 
               <div className="flex-1 min-h-0 overflow-hidden relative">
                 <div className={`absolute inset-0 p-3 ${activeTab === 'survey' ? 'block' : 'hidden'}`}>
-                  <SurveyComponent />
+                  {/* 분리된 SurveyComponent 사용 */}
+                  <SurveyComponent
+                    contractId={contractId}
+                    surveyTemplate={surveyTemplate}
+                    surveyLoading={surveyLoading}
+                    conditionalHandler={conditionalHandler}
+                    onSurveyComplete={onSurveyComplete}
+                    onSurveyDataUpdate={setSurveyData}
+                    onLoadSurveyTemplate={loadSurveyTemplate}
+                    setActiveTab={setActiveTab}
+                  />
+                </div>
+
+                <div className={`absolute inset-0 p-3 ${activeTab === 'clauses' ? 'block' : 'hidden'}`}>
+                  {/* GTC 조항 컴포넌트 */}
+                  <GtcClausesComponent
+                    contractId={contractId}
+                    onCommentStatusChange={handleGtcCommentStatusChange}  // 메모이제이션된 콜백 사용
+                    t={t}
+                  />
                 </div>
 
-                <div className={`absolute inset-0 ${activeTab !== 'survey' ? 'block' : 'hidden'}`}>
+                <div className={`absolute inset-0 ${activeTab !== 'survey' && activeTab !== 'clauses' ? 'block' : 'hidden'}`}>
                   <div className="w-full h-full overflow-auto">
                     <div
                       ref={viewer}
@@ -2069,7 +1354,7 @@ export function BasicContractSignViewer({
           <Button variant="outline" onClick={handleClose} disabled={fileLoading}>취소</Button>
           <Button onClick={handleSave} disabled={fileLoading || isAutoSignProcessing}>
             <FileSignature className="h-4 w-4 mr-2" />
-            서명 완료
+            {mode === 'buyer' ? '최종승인 완료' : '서명 완료'}
           </Button>
         </DialogFooter>
       </DialogContent>