(대표님) EDP 해양 관련 개발 사항들

1 files changed, 80 insertions, 95 deletions

diff --git a/components/vendor-data/sidebar.tsx b/components/vendor-data/sidebar.tsx
index 2e633442..edaf2e25 100644
--- a/components/vendor-data/sidebar.tsx
+++ b/components/vendor-data/sidebar.tsx
@@ -10,7 +10,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip"
-import { Package2, FormInput, ChevronRight, ChevronDown } from "lucide-react"
+import { Package2, FormInput } from "lucide-react"
 import { useRouter, usePathname } from "next/navigation"
 import { Skeleton } from "@/components/ui/skeleton"
 import { type FormInfo } from "@/lib/forms/services"
@@ -49,9 +49,6 @@ export function Sidebar({
   const router = useRouter()
   const rawPathname = usePathname()
   const pathname = rawPathname ?? ""
-  
-  // ENG 모드에서 각 폼의 확장/축소 상태 관리
-  const [expandedForms, setExpandedForms] = React.useState<Set<string>>(new Set())
 
   /**
    * ---------------------------
@@ -87,33 +84,28 @@ export function Sidebar({
    * ---------------------------
    */
   const handlePackageClick = (itemId: number) => {
+    // 상위 컴포넌트 상태 업데이트
     onSelectPackage(itemId)
+
+    // 해당 태그 페이지로 라우팅
+    // 예: /vendor-data/tag/123
+    const baseSegments = segments.slice(0, segments.indexOf("vendor-data") + 1).join("/")
+    router.push(`/${baseSegments}/tag/${itemId}`)
   }
 
   /**
    * ---------------------------
-   * 3) 폼 클릭 핸들러 (IM 모드)
+   * 3) 폼 클릭 핸들러 (IM 모드만 사용)
    * ---------------------------
    */
   const handleFormClick = (form: FormInfo) => {
-    if (mode === "IM") {
-      // IM 모드에서는 반드시 선택된 패키지 ID 필요
-      if (selectedPackageId === null) return;
-      
-      onSelectForm(form.formName)
-      
-      const baseSegments = segments.slice(0, segments.indexOf("vendor-data") + 1).join("/")
-      router.push(`/${baseSegments}/form/${selectedPackageId}/${form.formCode}/${selectedProjectId}/${selectedContractId}?mode=${mode}`)
-    } else {
-      // ENG 모드에서는 폼을 클릭하면 확장/축소만 토글
-      const newExpanded = new Set(expandedForms)
-      if (newExpanded.has(form.formCode)) {
-        newExpanded.delete(form.formCode)
-      } else {
-        newExpanded.add(form.formCode)
-      }
-      setExpandedForms(newExpanded)
-    }
+    // IM 모드에서만 사용
+    if (selectedPackageId === null) return;
+    
+    onSelectForm(form.formName)
+    
+    const baseSegments = segments.slice(0, segments.indexOf("vendor-data") + 1).join("/")
+    router.push(`/${baseSegments}/form/${selectedPackageId}/${form.formCode}/${selectedProjectId}/${selectedContractId}?mode=${mode}`)
   }
 
   /**
@@ -187,10 +179,13 @@ export function Sidebar({
           </>
         )}
 
-        {/* ---------- 폼 목록 (IM 모드) / 폼과 패키지 목록 (ENG 모드) ---------- */}
+        {/* ---------- 폼 목록 (IM 모드) / 패키지와 폼 목록 (ENG 모드) ---------- */}
         <div className="py-1">
           <h2 className="relative px-7 text-lg font-semibold tracking-tight">
-            {isCollapsed ? "F" : "Form Lists"}
+            {isCollapsed 
+              ? (mode === "IM" ? "F" : "P") 
+              : (mode === "IM" ? "Form Lists" : "Package Lists")
+            }
           </h2>
           <ScrollArea className={cn(
             "px-1",
@@ -203,17 +198,15 @@ export function Sidebar({
                     <Skeleton className="h-8 w-full" />
                   </div>
                 ))
-              ) : !forms || forms.length === 0 ? (
-                <p className="text-sm text-muted-foreground px-2">
-                  (No forms loaded)
-                </p>
-              ) : (
-                forms.map((form) => {
-                  const isFormActive = form.formCode === currentFormCode
-                  const isExpanded = expandedForms.has(form.formCode)
-                  
-                  // IM 모드
-                  if (mode === "IM") {
+              ) : mode === "IM" ? (
+                // =========== IM 모드: 폼만 표시 ===========
+                !forms || forms.length === 0 ? (
+                  <p className="text-sm text-muted-foreground px-2">
+                    (No forms loaded)
+                  </p>
+                ) : (
+                  forms.map((form) => {
+                    const isFormActive = form.formCode === currentFormCode
                     const isDisabled = currentItemId === null
 
                     return isCollapsed ? (
@@ -250,79 +243,71 @@ export function Sidebar({
                         {form.formName}
                       </Button>
                     )
-                  }
-                  
-                  // ENG 모드 - 폼과 그 아래 패키지들 표시
-                  return (
-                    <div key={form.formCode}>
+                  })
+                )
+              ) : (
+                // =========== ENG 모드: 패키지 > 폼 계층 구조 ===========
+                packages.length === 0 ? (
+                  <p className="text-sm text-muted-foreground px-2">
+                    (No packages loaded)
+                  </p>
+                ) : (
+                  packages.map((pkg) => (
+                    <div key={pkg.itemId} className="space-y-1">
                       {isCollapsed ? (
                         <Tooltip delayDuration={0}>
                           <TooltipTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              className="w-full justify-start font-normal"
-                              // onClick={() => handleFormClick(form)}
-                            >
-                              <FormInput className="mr-2 h-4 w-4" />
-                            </Button>
+                            <div className="px-2 py-1">
+                              <Package2 className="h-4 w-4" />
+                            </div>
                           </TooltipTrigger>
                           <TooltipContent side="right">
-                            {form.formName}
+                            {pkg.itemName}
                           </TooltipContent>
                         </Tooltip>
                       ) : (
                         <>
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start font-normal"
-                            // onClick={() => handleFormClick(form)}
-                          >
-                            {isExpanded ? (
-                              <ChevronDown className="mr-2 h-4 w-4" />
-                            ) : (
-                              <ChevronRight className="mr-2 h-4 w-4" />
-                            )}
-                            <FormInput className="mr-2 h-4 w-4" />
-                            {form.formName}
-                          </Button>
+                          {/* 패키지 이름 (클릭 불가능한 라벨) */}
+                          <div className="flex items-center px-2 py-1 text-sm font-medium">
+                            <Package2 className="mr-2 h-4 w-4" />
+                            {pkg.itemName}
+                          </div>
                           
-                          {/* 확장된 경우 패키지 목록 표시 */}
-                          {isExpanded && (
-                            <div className="ml-4 space-y-1">
-                              {packages.length === 0 ? (
-                                <p className="text-xs text-muted-foreground px-4 py-1">
-                                  No packages available
-                                </p>
-                              ) : (
-                                packages.map((pkg) => {
-                                  const isPackageActive = 
-                                    pkg.itemId === currentItemId && 
-                                    form.formCode === currentFormCode
+                          {/* 폼 목록 바로 표시 */}
+                          <div className="ml-6 space-y-1">
+                            {!forms || forms.length === 0 ? (
+                              <p className="text-xs text-muted-foreground px-2 py-1">
+                                No forms available
+                              </p>
+                            ) : (
+                              forms.map((form) => {
+                                const isFormPackageActive = 
+                                  pkg.itemId === currentItemId && 
+                                  form.formCode === currentFormCode
 
-                                  return (
-                                    <Button
-                                      key={`${form.formCode}-${pkg.itemId}`}
-                                      variant="ghost"
-                                      size="sm"
-                                      className={cn(
-                                        "w-full justify-start font-normal text-sm",
-                                        isPackageActive && "bg-accent text-accent-foreground"
-                                      )}
-                                      onClick={() => handlePackageUnderFormClick(form, pkg)}
-                                    >
-                                      <Package2 className="mr-2 h-3 w-3" />
-                                      {pkg.itemName}
-                                    </Button>
-                                  )
-                                })
-                              )}
-                            </div>
-                          )}
+                                return (
+                                  <Button
+                                    key={`${pkg.itemId}-${form.formCode}`}
+                                    variant="ghost"
+                                    size="sm"
+                                    className={cn(
+                                      "w-full justify-start font-normal text-sm",
+                                      isFormPackageActive && "bg-accent text-accent-foreground"
+                                    )}
+                                    onClick={() => handlePackageUnderFormClick(form, pkg)}
+                                  >
+                                    <FormInput className="mr-2 h-3 w-3" />
+                                    {form.formName}
+                                  </Button>
+                                )
+                              })
+                            )}
+                          </div>
                         </>
                       )}
                     </div>
-                  )
-                })
+                  ))
+                )
               )}
             </div>
           </ScrollArea>