1 files changed, 141 insertions, 0 deletions
diff --git a/components/docu-list-rule/docu-list-rule-client.tsx b/components/docu-list-rule/docu-list-rule-client.tsx
new file mode 100644
index 00000000..7e6c2bb1
--- /dev/null
+++ b/components/docu-list-rule/docu-list-rule-client.tsx
@@ -0,0 +1,141 @@
+"use client"
+import * as React from "react"
+import { useRouter, useParams } from "next/navigation"
+
+import { getProjectLists } from "@/lib/projects/service"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface DocuListRuleClientProps {
+    children: React.ReactNode
+}
+
+export default function DocuListRuleClient({
+    children,
+}: DocuListRuleClientProps) {
+    const router = useRouter()
+    const params = useParams()
+    const lng = (params?.lng as string) || "ko"
+    
+    // Get the projectId from route parameters
+    const projectIdFromUrl = React.useMemo(() => {
+        if (params?.projectId) {
+            const projectId = Array.isArray(params.projectId) 
+                ? params.projectId[0] 
+                : params.projectId
+            return Number(projectId)
+        }
+        return null
+    }, [params])
+    
+    // Use the URL projectId as the selected project
+    const [selectedProjectId, setSelectedProjectId] = React.useState<number | null>(
+        projectIdFromUrl
+    )
+    
+    // 프로젝트 목록 상태
+    const [projects, setProjects] = React.useState<Array<{ id: number; code: string; name: string; type: string }>>([])
+    const [isLoading, setIsLoading] = React.useState(true)
+    
+    // Update selectedProjectId when URL changes
+    React.useEffect(() => {
+        if (projectIdFromUrl) {
+            setSelectedProjectId(projectIdFromUrl)
+        }
+    }, [projectIdFromUrl])
+
+    // 프로젝트 목록 로드
+    React.useEffect(() => {
+        const loadProjects = async () => {
+            try {
+                setIsLoading(true)
+                console.log("Loading projects...")
+                const result = await getProjectLists({ 
+                    page: 1, 
+                    perPage: 1000,
+                    search: "",
+                    sort: [],
+                    filters: [],
+                    joinOperator: "and",
+                    flags: [],
+                    code: "",
+                    name: "",
+                    type: ""
+                })
+                console.log("Projects result:", result)
+                if (result.data) {
+                    // plant 타입의 프로젝트만 필터링
+                    const plantProjects = result.data.filter(project => project.type === 'plant')
+                    console.log("Plant projects:", plantProjects)
+                    setProjects(plantProjects)
+                }
+            } catch (error) {
+                console.error("Failed to load projects:", error)
+            } finally {
+                setIsLoading(false)
+            }
+        }
+        loadProjects()
+    }, [])
+
+    // Handle project selection
+    function handleSelectProject(projectId: number) {
+        console.log("Selecting project:", projectId)
+        setSelectedProjectId(projectId)
+        
+        // Navigate to the project's document-class page
+        router.push(`/${lng}/evcp/docu-list-rule/${projectId}`)
+    }
+    
+    return (
+        <>
+            {/* 상단 영역: 제목 왼쪽 / ProjectSwitcher 오른쪽 */}
+            <div className="flex items-center justify-between">
+                {/* 왼쪽: 타이틀 & 설명 */}
+                <div>
+                    <div className="flex items-center gap-2">
+                        <h2 className="text-2xl font-bold tracking-tight">Document Numbering Rule (해양)</h2>
+                    </div>
+                    <p className="text-muted-foreground">
+                        벤더 제출 문서 리스트 작성 시에 사용되는 넘버링
+                    </p>
+                </div>
+                
+                {/* 오른쪽: ProjectSwitcher */}
+                <div className="flex items-center space-x-2">
+                    <Select 
+                        value={selectedProjectId ? String(selectedProjectId) : ""} 
+                        onValueChange={(value) => {
+                            const projectId = Number(value)
+                            if (projectId) {
+                                handleSelectProject(projectId)
+                            }
+                        }}
+                        disabled={isLoading}
+                    >
+                        <SelectTrigger className="max-w-[300px] whitespace-nowrap overflow-hidden text-ellipsis">
+                            <SelectValue placeholder={isLoading ? "프로젝트 로딩 중..." : "프로젝트를 선택하세요"} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {projects.map((project) => (
+                                <SelectItem key={project.id} value={String(project.id)}>
+                                    {project.code} - {project.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+            
+            {/* 문서 목록/테이블 영역 */}
+            <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow p-5">
+                {children}
+            </section>
+        </>
+    )
+}