원수취수 작업 완료

apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx

@@ -1,13 +1,16 @@
 "use client";
 import { useWrStore } from "@/app/store";
 import type { customPbnst, fcBizType, fcOrgwtType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { tableData } from "@/components/lib/func/commom";
+import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 import { Title, UiTable } from "@common/business_components/ui";
 import { Label } from "@common/business_components/ui/form/lib/label";
 import { Button } from "@common/business_components/ui/table/lib/button";
 import { Input } from "@common/components/ui";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useFieldArray } from "react-hook-form";
 
 export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) {
   const { code, pbnst } = useWrStore((state) => state);
@@ -15,12 +18,12 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) {
   const [bdstTable, setbdstTable] = useState<customPbnst[]>();
   const [isFcOrgwtsData, setIsFcOrgwtsData] = useState<boolean>(false);
   const [pkTable, setPkTable] = useState<customPbnst[]>();
+  const rightRef = useRef<fcOrgwtType[] | null>([] as fcOrgwtType[]);
+  const leftRef = useRef<fcOrgwtType[] | null>([] as fcOrgwtType[]);
+  const [rightData, setRightData] = useState<customPbnst[]>();
 
   useEffect(() => {
-    console.log("isFcOrgwtsData", isFcOrgwtsData);
-  }, [isFcOrgwtsData]);
-  useEffect(() => {
-    // console.log("어휴", pbnstHasuRes);
+    // console.log("머지", pbnstHasuRes);
     if (code.sggCd.length > 0 && pbnstHasuRes.length > 0) {
       setbdstTable(tableData(pbnstHasuRes, { code }));
     }
@@ -29,62 +32,105 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) {
   useEffect(() => {
     if (!data) return;
     const findPk = data.map(element => {
-      const pk = pbnstHasuRes.find((item)=> String(item.bscFctCd) === element.swtrmtFcltFk)
+      const pk = pbnstHasuRes.find((item) => String(item.bscFctCd) === element.swtrmtFcltFk)
       return pk;
     });
-    
     setPkTable(findPk);
   }, [data]);
 
-  useEffect(()=>{
-
-  })
-
   return (
     <>
       <div className="flex flex-col h-full">
         <div>
           <Title title={"취수하수처리장 추가"} />
-          <Button className="m-2" size={"sm"} onClick={()=>{}}>저장</Button>
+          <Button className="m-2" size={"sm"} onClick={() => { }}>저장</Button>
         </div>
-        
+
         <div className="flex flex-row flex-grow gap-4 mt-4">
           <div className="w-3/7">
-          <Label className="w-full text-2xl text-gray-600 text-right">공공하수처리시설 목록</Label>
-          <div className="flex items-center">
-          <Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
-          <Input className="w-1/3 !text-xl ml-2" type="text" value={""} onChange={(e) => {}}/> 
-          <Button className="m-2" size={"sm"} onClick={()=>{}}>조회</Button>
-          </div>
-          <div className="border-t border-gray-300 my-4"></div>
-          <UiTable
+            <Label className="w-full text-2xl text-gray-600 text-right">공공하수처리시설 목록</Label>
+            <div className="flex items-center">
+              <Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
+              <Input className="w-1/3 !text-xl ml-2" type="text" value={""} onChange={(e) => { }} />
+              <Button className="m-2" size={"sm"} onClick={() => { }}>조회</Button>
+            </div>
+            <div className="border-t border-gray-300 my-4"></div>
+            <RuseMngTable
+              tableData={bdstTable || []}
+              headList={fcOrgwtsHeadList}
+              upHeadList={[]} // TODO: Replace with actual upHeadList data if available
+              ref={leftRef}
+            />
+            {/* <UiTable
             headName={""}
             tableData={bdstTable || []}
             headlist={fcOrgwtsHeadList}
             pageSize={0}
             total={0}
-            cellClick={undefined}
+            cellClick={cellClick}
             onPageChange={function (page: number): void {
               throw new Error("Function not implemented.");
             }}
-          ></UiTable>
-        </div>
+          ></UiTable> */}
+          </div>
           <div className="flex flex-col items-center justify-center w-1/7 gap-2">
             <ArrowRight
-            type="button"
-            onClick={() => {
-              setIsFcOrgwtsData(!isFcOrgwtsData);
-            }}
-            className="w-12 h-12 text-gray-500"
-          />
-          <ArrowLeft
-          type="button"
-          onClick={() => {}}
-          className="w-12 h-12 text-gray-500" />
-        </div>
+              type="button"
+              onClick={() => {
+                if (leftRef && typeof leftRef === "object" && "current" in leftRef) {
+                  const checked = leftRef.current?.filter((item) => ((item as unknown as customPbnst)?.choose))
+                  const unchecked = leftRef.current?.filter((item) => !(item as unknown as customPbnst)?.choose)
+                  if (checked && checked.length > 0) {
+                    checked.forEach(item=>(item as unknown as customPbnst).choose = false)
+                    setRightData([...(checked as unknown as customPbnst[]),
+                  ...((rightRef.current ?? []) as unknown as customPbnst[])
+                  ])
+                    
+                  }
+                  if (unchecked && unchecked.length > 0) {
+                    setbdstTable([...(unchecked as unknown as customPbnst[])])
+                  }else{
+                    setbdstTable([])
+                  }
+                }
+              }
+            }
+              className="w-12 h-12 text-gray-500 cursor-pointer"
+            />
+            <ArrowLeft
+              type="button"
+              onClick={() => {
+                if (rightRef && typeof rightRef === "object" && "current" in rightRef) {
+                  const checked = rightRef.current?.filter((item) => ((item as unknown as customPbnst)?.choose))
+                  const unchecked = rightRef.current?.filter((item) => !(item as unknown as customPbnst)?.choose)
+                  if (checked && checked.length > 0) {
+                    checked.forEach(item=>(item as unknown as customPbnst).choose = false)
+                    setbdstTable([
+                      ...(checked as unknown as customPbnst[]),
+                      ...((leftRef.current ?? []) as unknown as customPbnst[])
+                    ])
+                  }
+                  console.log("ㅇㅇ", unchecked);
+                  if (unchecked && unchecked.length > 0) {
+                    setRightData([...(unchecked as unknown as customPbnst[])])
+                  }else{
+                    setRightData([])
+                  }
+                }
+              }}
+              className="w-12 h-12 text-gray-500" />
+          </div>
           {/* Right Table container: Takes 2/5 of the width */}
           <div className="w-3/7">
-          <UiTable
+            <Label className="w-full text-2xl text-gray-600 text-right">취수하수처리장 목록</Label>
+            <div className="border-t border-gray-300 my-4"></div>
+            <RuseMngTable
+              tableData={rightData || []}
+              headList={fcOrgwtsHeadList}
+              upHeadList={[]} // TODO: Replace with actual upHeadList data if available
+              ref={rightRef}
+            />
+            {/* <UiTable
             headName={"취수하수처리장 목록"}
             tableData={pkTable || []}
             headlist={fcOrgwtsHeadList}
@@ -94,10 +140,10 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) {
             onPageChange={function (page: number): void {
               throw new Error("Function not implemented.");
             }}
-          ></UiTable>
+          ></UiTable> */}
+          </div>
         </div>
       </div>
-      </div>
     </>
   );
 }

apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx

@@ -1,5 +1,7 @@
 import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
+import type { customPbnst as OriginalCustomPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+
 import { selectClass, type TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { DatePicker, SelectBox, type SelectDataType } from "@common/business_components/ui";
 import {
@@ -21,12 +23,12 @@ type RuseMngTableProps = {
   code?: { name: string, val: SelectDataType[] }[];
 };
 
-const RuseMngTable = React.forwardRef<any[], RuseMngTableProps>(
+const RuseMngTable = React.forwardRef<any, RuseMngTableProps>(
   ({
     tableData,
     headList,
     upHeadList,
-    code = []
+    code
   }, ref) => {
     const [tableState, setTableState] = useState([...tableData]);
     useEffect(() => {