diff options
Diffstat (limited to 'components/vendor-data/sidebar.tsx')
| -rw-r--r-- | components/vendor-data/sidebar.tsx | 121 |
1 files changed, 71 insertions, 50 deletions
diff --git a/components/vendor-data/sidebar.tsx b/components/vendor-data/sidebar.tsx index b9e14b65..2dff6bc1 100644 --- a/components/vendor-data/sidebar.tsx +++ b/components/vendor-data/sidebar.tsx @@ -29,6 +29,7 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> { selectedForm: string | null onSelectForm: (formName: string) => void isLoadingForms?: boolean + mode: "IM" | "ENG" // 새로 추가: 현재 선택된 모드 } export function Sidebar({ @@ -41,9 +42,11 @@ export function Sidebar({ selectedForm, onSelectForm, isLoadingForms = false, + mode = "IM", // 기본값 설정 }: SidebarProps) { const router = useRouter() - const pathname = usePathname() + const rawPathname = usePathname() + const pathname = rawPathname ?? "" /** * --------------------------- @@ -93,43 +96,69 @@ export function Sidebar({ /** * --------------------------- - * 3) 폼 클릭 핸들러 + * 3) 폼 클릭 핸들러 (mode 추가) * --------------------------- */ const handleFormClick = (form: FormInfo) => { - // 패키지가 선택되어 있을 때만 동작 - if (selectedPackageId === null) return + // 패키지 ID 선택 전략 + let packageId: number; + + if (mode === "ENG") { + // ENG 모드에서는 첫 번째 패키지 ID 또는 현재 URL에서 추출한 ID 사용 + packageId = currentItemId || (packages[0]?.itemId || 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/${selectedPackageId}/${form.formCode}`) + // 모드 정보를 쿼리 파라미터로 추가 + router.push(`/${baseSegments}/form/${packageId}/${form.formCode}?mode=${mode}`) } return ( <div className={cn("pb-12", className)}> <div className="space-y-4 py-4"> - {/* ---------- 패키지(Items) 목록 ---------- */} - <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> + {/* ---------- 패키지(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( @@ -139,40 +168,29 @@ export function Sidebar({ onClick={() => handlePackageClick(pkg.itemId)} > <Package2 className="mr-2 h-4 w-4" /> + {pkg.itemName} </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> + ) + })} + </div> + </ScrollArea> </div> - </ScrollArea> - </div> - - <Separator /> + <Separator /> + </> + )} {/* ---------- 폼 목록 ---------- */} <div className="py-1"> <h2 className="relative px-7 text-lg font-semibold tracking-tight"> {isCollapsed ? "F" : "Form Lists"} </h2> - <ScrollArea className="h-[300px] px-1"> + <ScrollArea className={cn( + "px-1", + // IM 모드는 더 작은 높이, ENG 모드는 더 큰 높이 + mode === "IM" ? "h-[300px]" : "h-[450px]" + )}> <div className="space-y-1 p-2"> {isLoadingForms ? ( // 로딩 중 스켈레톤 UI 표시 @@ -190,6 +208,9 @@ export function Sidebar({ // URL 기준으로 active 여부 판단 const isActive = form.formCode === currentFormCode + // IM 모드에서만 패키지 선택 여부에 따라 비활성화 + const isDisabled = mode === "IM" && currentItemId === null; + return isCollapsed ? ( <Tooltip key={form.formCode} delayDuration={0}> <TooltipTrigger asChild> @@ -200,7 +221,7 @@ export function Sidebar({ isActive && "bg-accent text-accent-foreground" )} onClick={() => handleFormClick(form)} - disabled={currentItemId === null} + disabled={isDisabled} > <FormInput className="mr-2 h-4 w-4" /> </Button> @@ -218,7 +239,7 @@ export function Sidebar({ isActive && "bg-accent text-accent-foreground" )} onClick={() => handleFormClick(form)} - disabled={currentItemId === null} + disabled={isDisabled} > <FormInput className="mr-2 h-4 w-4" /> {form.formName} |