(대표님) 컴포넌트 파트 커밋

1 files changed, 59 insertions, 21 deletions

diff --git a/components/vendor-data/vendor-data-container.tsx b/components/vendor-data/vendor-data-container.tsx
index fcecae43..47397c72 100644
--- a/components/vendor-data/vendor-data-container.tsx
+++ b/components/vendor-data/vendor-data-container.tsx
@@ -14,6 +14,8 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Button } from "@/components/ui/button"
 import { FormInput } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
+import { selectedModeAtom } from '@/atoms'
+import { useAtom } from 'jotai'
 
 interface PackageData {
   itemId: number
@@ -88,15 +90,19 @@ export function VendorDataContainer({
   // 프로젝트 타입 확인 - ship인 경우 항상 ENG 모드
   const isShipProject = currentProject?.projectType === "ship"
   
+  const [selectedMode, setSelectedMode] = useAtom(selectedModeAtom)
+  
   // URL에서 모드 추출 (ship 프로젝트면 무조건 ENG로, 아니면 URL 또는 기본값)
   const modeFromUrl = searchParams?.get('mode')
   const initialMode = isShipProject 
     ? "ENG" 
     : (modeFromUrl === "ENG" || modeFromUrl === "IM") ? modeFromUrl : "IM"
-
-  // 모드 선택 상태 - 프로젝트 타입에 따라 초기값 결정
-  const [selectedMode, setSelectedMode] = React.useState<"IM" | "ENG">(initialMode)
-
+  
+  // 모드 초기화 (기존의 useState 초기값 대신)
+  React.useEffect(() => {
+    setSelectedMode(initialMode as "IM" | "ENG")
+  }, [initialMode, setSelectedMode])
+  
   const isTagOrFormRoute = pathname ? (pathname.includes("/tag/") || pathname.includes("/form/")) : false
   const currentPackageName = isTagOrFormRoute
     ? currentContract?.packages.find((pkg) => pkg.itemId === selectedPackageId)?.itemName || "None"
@@ -218,25 +224,57 @@ export function VendorDataContainer({
   }
 
   // 모드 변경 핸들러
-  const handleModeChange = (mode: "IM" | "ENG") => {
-    // ship 프로젝트인 경우 모드 변경 금지
-    if (isShipProject && mode !== "ENG") return;
-    
-    setSelectedMode(mode);
+// 모드 변경 핸들러
+const handleModeChange = async (mode: "IM" | "ENG") => {
+  // ship 프로젝트인 경우 모드 변경 금지
+  if (isShipProject && mode !== "ENG") return;
+  
+  setSelectedMode(mode);
+  
+  // 모드가 변경될 때 자동 네비게이션
+  if (currentContract?.packages?.length) {
+    const firstPackageId = currentContract.packages[0].itemId;
     
-    // 현재 URL에서 mode 파라미터 업데이트 (현재 경로 유지)
+    if (mode === "IM") {
+      // IM 모드: 첫 번째 패키지로 이동
+      const baseSegments = pathname?.split("/").filter(Boolean).slice(0, pathname.split("/").filter(Boolean).indexOf("vendor-data") + 1).join("/");
+      router.push(`/${baseSegments}/tag/${firstPackageId}?mode=${mode}`);
+    } else {
+      // ENG 모드: 폼 목록을 먼저 로드
+      setIsLoadingForms(true);
+      try {
+        const result = await getFormsByContractItemId(firstPackageId, mode);
+        setFormList(result.forms || []);
+        
+        // 폼이 있으면 첫 번째 폼으로 이동
+        if (result.forms && result.forms.length > 0) {
+          const firstForm = result.forms[0];
+          setSelectedFormCode(firstForm.formCode);
+          
+          const baseSegments = pathname?.split("/").filter(Boolean).slice(0, pathname.split("/").filter(Boolean).indexOf("vendor-data") + 1).join("/");
+          router.push(`/${baseSegments}/form/0/${firstForm.formCode}/${selectedProjectId}/${selectedContractId}?mode=${mode}`);
+        } else {
+          // 폼이 없으면 모드만 변경
+          const baseSegments = pathname?.split("/").filter(Boolean).slice(0, pathname.split("/").filter(Boolean).indexOf("vendor-data") + 1).join("/");
+          router.push(`/${baseSegments}/form/0/0/${selectedProjectId}/${selectedContractId}?mode=${mode}`);
+        }
+      } catch (error) {
+        console.error(`폼 로딩 오류 (${mode} 모드):`, error);
+        // 오류 발생 시 모드만 변경
+        const url = new URL(window.location.href);
+        url.searchParams.set('mode', mode);
+        router.replace(url.pathname + url.search);
+      } finally {
+        setIsLoadingForms(false);
+      }
+    }
+  } else {
+    // 패키지가 없는 경우, 모드만 변경
     const url = new URL(window.location.href);
     url.searchParams.set('mode', mode);
     router.replace(url.pathname + url.search);
-    
-    // 모드가 변경되면 현재 패키지의 폼 다시 로드
-    if (selectedPackageId) {
-      loadFormsList(selectedPackageId, mode);
-    } else if (currentContract?.packages?.length) {
-      const firstPackageId = currentContract.packages[0].itemId;
-      loadFormsList(firstPackageId, mode);
-    }
-  };
+  }
+};
 
   return (
     <TooltipProvider delayDuration={0}>
@@ -298,7 +336,7 @@ export function VendorDataContainer({
                 className="w-full"
               >
                 <TabsList className="w-full">
-                  <TabsTrigger value="IM" className="flex-1">IM</TabsTrigger>
+                  <TabsTrigger value="IM" className="flex-1">H/O</TabsTrigger>
                   <TabsTrigger value="ENG" className="flex-1">ENG</TabsTrigger>
                 </TabsList>
                 
@@ -357,7 +395,7 @@ export function VendorDataContainer({
                     className="h-8 px-2"
                     onClick={() => handleModeChange("IM")}
                   >
-                    IM
+                    H/O
                   </Button>
                   <Button 
                     variant={selectedMode === "ENG" ? "default" : "ghost"}