(대표님) 설계측 오류 및 스타일 등 수정

1 files changed, 256 insertions, 0 deletions

diff --git a/components/vendor-data/sidebar copy.tsx b/components/vendor-data/sidebar copy.tsx
new file mode 100644
index 00000000..a6b35a9d
--- /dev/null
+++ b/components/vendor-data/sidebar copy.tsx
@@ -0,0 +1,256 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip"
+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"
+
+interface PackageData {
+  itemId: number
+  itemName: string
+}
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  isCollapsed: boolean
+  packages: PackageData[]
+  selectedPackageId: number | null
+  selectedProjectId: number | null
+  selectedContractId: number | null
+  onSelectPackage: (itemId: number) => void
+  forms?: FormInfo[]  // 선택적 속성으로 변경
+  onSelectForm: (formName: string) => void
+  isLoadingForms?: boolean
+  mode: "IM" | "ENG" // 새로 추가: 현재 선택된 모드
+}
+
+export function Sidebar({
+  className,
+  isCollapsed,
+  packages,
+  selectedPackageId,
+  selectedProjectId,
+  selectedContractId,
+  onSelectPackage,
+  forms,
+  // selectedForm, // 사용되지 않음
+  onSelectForm,
+  isLoadingForms = false,
+  mode = "IM", // 기본값 설정
+}: SidebarProps) {
+  const router = useRouter()
+  const rawPathname = usePathname()
+  const pathname = rawPathname ?? ""
+
+ 
+  /**
+   * ---------------------------
+   * 1) URL에서 현재 패키지 / 폼 코드 추출
+   * ---------------------------
+   */
+  const segments = pathname.split("/").filter(Boolean) 
+  // 예) "/partners/vendor-data/tag/123" => ["partners","vendor-data","tag","123"]
+
+  let currentItemId: number | null = null
+  let currentFormCode: string | null = null
+
+  const tagIndex = segments.indexOf("tag")
+  if (tagIndex !== -1 && segments[tagIndex + 1]) {
+    // tag 뒤에 오는 값이 패키지 itemId
+    currentItemId = parseInt(segments[tagIndex + 1], 10)
+  }
+
+  const formIndex = segments.indexOf("form")
+  if (formIndex !== -1) {
+    // form 뒤 첫 파라미터 => itemId, 그 다음 파라미터 => formCode
+    const itemSegment = segments[formIndex + 1]
+    const codeSegment = segments[formIndex + 2]
+
+    if (itemSegment) {
+      currentItemId = parseInt(itemSegment, 10)
+    }
+    if (codeSegment) {
+      currentFormCode = codeSegment
+    }
+  }
+
+  /**
+   * ---------------------------
+   * 2) 패키지 클릭 핸들러
+   * ---------------------------
+   */
+  const handlePackageClick = (itemId: number) => {
+    // 상위 컴포넌트 상태 업데이트만 수행
+    // 라우팅은 하지 않음 (프로젝트 선택 상태 유지)
+    onSelectPackage(itemId)
+  }
+
+  /**
+   * ---------------------------
+   * 3) 폼 클릭 핸들러 (mode 추가)
+   * ---------------------------
+   */
+  const handleFormClick = (form: FormInfo) => {
+    // 패키지 ID 선택 전략
+    let packageId: number;
+
+    if (mode === "ENG") {
+      // ENG 모드에서는 첫 번째 패키지 ID 또는 현재 URL에서 추출한 ID 사용
+      packageId = 0;
+    } else {
+      // IM 모드에서는 반드시 선택된 패키지 ID 필요
+      if (selectedPackageId === null) return;
+      packageId = selectedPackageId;
+    }
+
+    // 상위 컴포넌트 상태 업데이트
+    onSelectForm(form.formName)
+
+    // 해당 폼 페이지로 라우팅
+    // 예: /vendor-data/form/[packageId]/[formCode]
+    const baseSegments = segments.slice(0, segments.indexOf("vendor-data") + 1).join("/")
+    // 모드 정보를 쿼리 파라미터로 추가
+    router.push(`/${baseSegments}/form/${packageId}/${form.formCode}/${selectedProjectId}/${selectedContractId}?mode=${mode}`)
+  }
+
+  return (
+    <div className={cn("pb-12", className)}>
+      <div className="space-y-4 py-4">
+        {/* ---------- 패키지(Items) 목록 - IM 모드에서만 표시 ---------- */}
+        {mode === "IM" && (
+          <>
+            <div className="py-1">
+              <h2 className="relative px-7 text-lg font-semibold tracking-tight">
+                {isCollapsed ? "P" : "Package Lists"}
+              </h2>
+              <ScrollArea className="h-[150px] px-1">
+                <div className="space-y-1 p-2">
+                  {packages.map((pkg) => {
+                    // URL 기준으로 active 여부 판단
+                    const isActive = pkg.itemId === currentItemId
+
+                    return (
+                      <div key={pkg.itemId}>
+                        {isCollapsed ? (
+                          <Tooltip delayDuration={0}>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                className={cn(
+                                  "w-full justify-start font-normal",
+                                  isActive && "bg-accent text-accent-foreground"
+                                )}
+                                onClick={() => handlePackageClick(pkg.itemId)}
+                              >
+                                <Package2 className="mr-2 h-4 w-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">
+                              {pkg.itemName}
+                            </TooltipContent>
+                          </Tooltip>
+                        ) : (
+                          <Button
+                            variant="ghost"
+                            className={cn(
+                              "w-full justify-start font-normal",
+                              isActive && "bg-accent text-accent-foreground"
+                            )}
+                            onClick={() => handlePackageClick(pkg.itemId)}
+                          >
+                            <Package2 className="mr-2 h-4 w-4" />
+                            {pkg.itemName}
+                          </Button>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+            <Separator />
+          </>
+        )}
+
+        {/* ---------- 폼 목록 ---------- */}
+        <div className="py-1">
+          <h2 className="relative px-7 text-lg font-semibold tracking-tight">
+            {isCollapsed ? "F" : "Form Lists"}
+          </h2>
+          <ScrollArea className={cn(
+            "px-1",
+            // IM 모드는 더 작은 높이, ENG 모드는 더 큰 높이 
+            mode === "IM" ? "h-[300px]" : "h-[450px]"
+          )}>
+            <div className="space-y-1 p-2">
+              {isLoadingForms ? (
+                // 로딩 중 스켈레톤 UI 표시
+                Array.from({ length: 3 }).map((_, index) => (
+                  <div key={`form-skeleton-${index}`} className="px-2 py-1.5">
+                    <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) => {
+                  // URL 기준으로 active 여부 판단
+                  const isActive = form.formCode === currentFormCode
+
+                  // IM 모드에서만 패키지 선택 여부에 따라 비활성화
+                  const isDisabled = mode === "IM" && currentItemId === null;
+
+                  return isCollapsed ? (
+                    <Tooltip key={form.formCode} delayDuration={0}>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          className={cn(
+                            "w-full justify-start font-normal",
+                            isActive && "bg-accent text-accent-foreground"
+                          )}
+                          onClick={() => handleFormClick(form)}
+                          disabled={isDisabled}
+                        >
+                          <FormInput className="mr-2 h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="right">
+                        {form.formName}
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    <Button
+                      key={form.formCode}
+                      variant="ghost"
+                      className={cn(
+                        "w-full justify-start font-normal",
+                        isActive && "bg-accent text-accent-foreground"
+                      )}
+                      onClick={() => handleFormClick(form)}
+                      disabled={isDisabled}
+                    >
+                      <FormInput className="mr-2 h-4 w-4" />
+                      {form.formName}
+                    </Button>
+                  )
+                })
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file