재이용시설 현황 조회조건 작업중

apps/wr/app/loading.jsx

@@ -1,10 +0,0 @@
-export default function loading (){
-
-    return(
-        <>
-            <div>
-                    'test'
-            </div>
-        </>
-    )
-}

apps/wr/app/loading.tsx

@@ -0,0 +1,4 @@
+export default function Loading() {
+    return <div>페이지 불러오는 중입니다...</div>;
+  }
+  

apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx

@@ -59,12 +59,14 @@ export default function Home() {
   });
   const { rainRes } = rain;
   const [rainForm, setRainForm] = useState<customRainBdst>();
-  const [issNewReg,setIsNewReg] = useState<boolean>( false);
+  const [issNewReg, setIsNewReg] = useState<boolean>(false);
 
   const [bdstTable, setbdstTable] = useState<customRainBdst[]>();
   const [searchTxt, setSearchTxt] = useState<string>();
-  const [bdstChgProps, setBdstChgProps] = useState<{isOpen:boolean,chgBuilding:chgBuilding[]}>({isOpen:false,chgBuilding:[] });
-
+  const [bdstChgProps, setBdstChgProps] = useState<{
+    isOpen: boolean;
+    chgBuilding: chgBuilding[];
+  }>({ isOpen: false, chgBuilding: [] });
 
   const nodeList = headMakeColSpan(rain.upHeadList);
   useEffect(() => {
@@ -82,32 +84,31 @@ export default function Home() {
     val,
     headId
   ) => {
-    if ( val !== undefined) {
-        setRainForm(rainRes[val]);
+    if (val !== undefined) {
+      setRainForm(rainRes[val]);
     }
 
     if (headId === "bdstChgYn" && val !== undefined) {
-
-      if (rainRes[val]?.bdstInfoPk != null && rainRes[val]?.chgBuilding.length > 0) {
+      if (
+        rainRes[val]?.bdstInfoPk != null &&
+        rainRes[val]?.chgBuilding.length > 0
+      ) {
         bdstChgModal(rainRes[val].chgBuilding);
-
       }
     }
   };
 
-  const bdstChgModal = (chgBuilding:chgBuilding[] ) => {
-    setBdstChgProps( {isOpen:true,  chgBuilding:chgBuilding } );
-    
+  const bdstChgModal = (chgBuilding: chgBuilding[]) => {
+    setBdstChgProps({ isOpen: true, chgBuilding: chgBuilding });
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log("rainForm", rainForm);
-  },[rainForm])
-  
+  }, [rainForm]);
 
   return (
     <>
-      <ContentsDiv >
+      <ContentsDiv>
         <div className="grid grid-cols-4 gap-4 ">
           <div className="col-span-4">
             <Title title={"빗물이용시설 등록"} />
@@ -137,59 +138,57 @@ export default function Home() {
                 >
                   신규등록
                 </Button>
-                
               </SearchFormRight>
             </SearchDiv>
           </div>
         </div>
-        <div className="grid grid-cols-6 gap-4  ">
-          <div className="col-span-4 max-h-full ovreflow-y-scroll">
-            <ListDiv>
-            <ScrollArea  className="h-full">
-               <UiTable
-                tableData={bdstTable || []}
-                headlist={rain.upHeadList}
-                pageSize={100}
-                total={10}
-                headName={"○건축물 목록"}
-                cellClick={(val, headId) => {
-                  cellClick(val, headId);
-                }}
-              >
-                {nodeList}
-              </UiTable> 
+        <div className="h-screen grid grid-cols-6 gap-4 !overflow-y-scroll">
+          <div className="col-span-4 h-full min-h-0">
+           <ListDiv className="h-full min-h-0">
+              <ScrollArea className="h-[60vh]">
+                <UiTable
+                  tableData={bdstTable || []}
+                  headlist={rain.upHeadList}
+                  pageSize={100}
+                  total={10}
+                  headName={"○건축물 목록"}
+                  cellClick={(val, headId) => {
+                    cellClick(val, headId);
+                  }}
+                >
+                  {nodeList}
+                </UiTable>
               </ScrollArea>
             </ListDiv>
           </div>
-          <div className="col-span-2  max-h-full ovreflow-y-scroll">
-            <ListDiv>
-              <ScrollArea>
-                <RainRegForm
-                  rainForm={rainForm ?? {} as customRainBdst}
-                  isModal={false}
-                ></RainRegForm>
-              </ScrollArea>
+          <div className="col-span-2  max-h-full overflow-y-scroll">
+            <ListDiv className="">
+              <RainRegForm
+                rainForm={rainForm ?? ({} as customRainBdst)}
+                isModal={false}
+              ></RainRegForm>
             </ListDiv>
           </div>
         </div>
         <UiModal
-                  body={<BdstReg moType="RNB"></BdstReg>}
-                  bodyClass="w-[90vw] max-w-none"
-                  open={issNewReg}
-                  onOpenChange={(open) => {
-                    setIsNewReg(open);
-                  }}
-                />
-       
+          body={<BdstReg moType="RNB"></BdstReg>}
+          bodyClass="w-[90vw] max-w-none"
+          open={issNewReg}
+          onOpenChange={(open) => {
+            setIsNewReg(open);
+          }}
+        />
+
         <UiModal
-        bodyClass={""}
-        open={bdstChgProps.isOpen}
-        body={<BdstChgModal   chgBuilding={bdstChgProps.chgBuilding}></BdstChgModal>}
-        onOpenChange={(open) => {
-          setBdstChgProps({ ...bdstChgProps, isOpen: open });
-        }
-        }
-      />
+          bodyClass={""}
+          open={bdstChgProps.isOpen}
+          body={
+            <BdstChgModal chgBuilding={bdstChgProps.chgBuilding}></BdstChgModal>
+          }
+          onOpenChange={(open) => {
+            setBdstChgProps({ ...bdstChgProps, isOpen: open });
+          }}
+        />
       </ContentsDiv>
     </>
   );

apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx

@@ -7,15 +7,20 @@ import {
   SearchFormRight,
   SelectBox,
   Title,
+  UiModal,
   UiTable,
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components/ui";
 import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/page";
+import HeadChModal from "@/components/ui/modal/headChModal/headChModal";
+import { useState } from "react";
 
 export default function PbnstSttn() {
   const { code,pbnStt } = useWrStore((state) => state);
 
+
+  const [isChHead, setIsChHead] = useState(false);
   const nodeList = headMakeprfmnc(pbnStt.pbnSttHeadList, pbnStt.pbnSttHeadNm);
 
   return (
@@ -82,7 +87,9 @@ export default function PbnstSttn() {
                 <Button className="mr-4 rounded-lg" onClick={() => {}}>
                   다운로드
                 </Button>
-                <Button className="mr-4 rounded-lg" onClick={() => {}}>
+                <Button className="mr-4 rounded-lg" onClick={() => {
+                  // setIsChHead(true)
+                  }}>
                   조회항목설정
                 </Button>
               </SearchFormRight>
@@ -108,6 +115,13 @@ export default function PbnstSttn() {
             </ListDiv>
           </div>
         </div>
+        <UiModal open ={isChHead} onOpenChange ={()=>{setIsChHead(!isChHead)}}  bodyClass={""} body={<HeadChModal/>}/>
+
+
+          
+
+
+
       </ContentsDiv>
     </>
   );

apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx

@@ -42,13 +42,7 @@ export const pbnSttHeadList:TableUpperProps[] = [
     ];
 
 
-    export const headVisibleSchema = z.array( 
-        z.object(
-        Object.fromEntries(
-          pbnSttHeadList.map(col => [col.id, z.boolean()])
-        ))
-      );
-
+    
 
 
 

apps/wr/components/ui/modal/headChModal/headChModal.tsx

@@ -0,0 +1,95 @@
+import { useWrStore } from "@/app/store";
+import {  pbnSttHeadList } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui";
+import { Button, Checkbox } from "@common/components/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+export default function HeadChModal() {
+  const { pbnStt } = useWrStore((state) => state);
+
+    
+
+   const items = pbnSttHeadList.map(item => ({id:item.id, label:item.title}));
+  
+   
+    
+
+  const FormSchema = z.object({
+    items: z.array(z.string()).refine((value) => value.some((item) => item), {
+      message: "You have to select at least one item.",
+    }),
+  })
+   
+    const form = useForm<z.infer<typeof FormSchema>>({
+      resolver: zodResolver(FormSchema),
+    })
+
+ 
+
+  const onSubmit = (val : z.infer<typeof FormSchema>) =>{
+
+    console.log(val)
+  }
+
+  return (
+    <>
+      <div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="items"
+              render={() => (
+                <FormItem>
+                  <div className="mb-4">
+                    <FormLabel className="text-base">Sidebar</FormLabel>
+                    <FormDescription>
+                      Select the items you want to display in the sidebar.
+                    </FormDescription>
+                  </div>
+                  {items.map((item) => (
+                    <FormField
+                      key={item.id}
+                      control={form.control}
+                      name="items"
+                      render={({ field }) => {
+                        return (
+                          <FormItem
+                            key={item.id}
+                            className="flex flex-row items-start space-x-3 space-y-0"
+                          >
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value?.includes(item.id)}
+                                onCheckedChange={(checked) => {
+                                  return checked
+                                    ? field.onChange([...field.value, item.id])
+                                    : field.onChange(
+                                        field.value?.filter(
+                                          (value) => value !== item.id
+                                        )
+                                      );
+                                }}
+                              />
+                            </FormControl>
+                            <FormLabel className="text-sm font-normal">
+                              {item.label}
+                            </FormLabel>
+                          </FormItem>
+                        );
+                      }}
+                    />
+                  ))}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
+      </div>
+    </>
+  );
+}