1 files changed, 81 insertions, 0 deletions
diff --git a/components/document-lists/vendor-doc-list-client.tsx b/components/document-lists/vendor-doc-list-client.tsx
new file mode 100644
index 00000000..17137650
--- /dev/null
+++ b/components/document-lists/vendor-doc-list-client.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { useRouter, useParams } from "next/navigation"
+
+import DocumentContainer from "@/components/documents/document-container"
+import { ProjectInfo, ProjectSwitcher } from "@/components/documents/project-swicher"
+
+interface VendorDocumentsClientProps {
+    projects: ProjectInfo[]
+    children: React.ReactNode
+}
+
+export default function VendorDocumentListClient({
+    projects,
+    children,
+}: VendorDocumentsClientProps) {
+    const router = useRouter()
+    const params = useParams()
+    
+    // Get the contractId from route parameters
+    const contractIdFromUrl = React.useMemo(() => {
+        if (params?.contractId) {
+            const contractId = Array.isArray(params.contractId) 
+                ? params.contractId[0] 
+                : params.contractId
+            return Number(contractId)
+        }
+        return null
+    }, [params])
+    
+    // Use the URL contractId as the selected contract
+    const [selectedContractId, setSelectedContractId] = React.useState<number | null>(
+        contractIdFromUrl
+    )
+    
+    // Update selectedContractId when URL changes
+    React.useEffect(() => {
+        if (contractIdFromUrl) {
+            setSelectedContractId(contractIdFromUrl)
+        }
+    }, [contractIdFromUrl])
+
+
+    // Handle contract selection
+    function handleSelectContract(projectId: number, contractId: number) {
+        const projectType = projects.find(v=>v.projectId === projectId)?.projectType || "ship"
+        setSelectedContractId(contractId)
+        
+        // Navigate to the contract's documents page
+        router.push(`/partners/document-list/${contractId}?projectType=${projectType}`)
+    }
+    
+    return (
+        <>
+            {/* 상단 영역: 제목 왼쪽 / ProjectSwitcher 오른쪽 */}
+            <div className="flex items-center justify-between">
+                {/* 왼쪽: 타이틀 & 설명 */}
+                <div>
+                    <h2 className="text-2xl font-bold tracking-tight">Vendor Document List</h2>
+                    <p className="text-muted-foreground">
+                        문서리스트와 이슈스테이지를 생성하고 관리할 수 있으며 삼성중공업으로 전달할 수 있습니다.
+                    </p>
+                </div>
+                
+                {/* 오른쪽: ProjectSwitcher */}
+                <ProjectSwitcher
+                    isCollapsed={false}
+                    projects={projects}
+                    selectedContractId={selectedContractId}
+                    onSelectContract={handleSelectContract}
+                />
+            </div>
+            
+            {/* 문서 목록/테이블 영역 */}
+            <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow p-5">
+                {children}
+            </section>
+        </>
+    )
+}
+\ No newline at end of file