From ef4c533ebacc2cdc97e518f30e9a9350004fcdfb Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 28 Apr 2025 02:13:30 +0000
Subject: ~20250428 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/vendor-data/sidebar.tsx | 121 ++++++++++++++++++++++---------------
 1 file changed, 71 insertions(+), 50 deletions(-)

(limited to 'components/vendor-data/sidebar.tsx')

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}
-- 
cgit v1.2.3