diff options
Diffstat (limited to 'components/vendor-data/sidebar.tsx')
| -rw-r--r-- | components/vendor-data/sidebar.tsx | 175 |
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> |