물재이용 서치바 수정중.

apps/wr/app/reuseFaciltyManage/reuseFacilityInsert/publicReuseFaciltyInsert/page.tsx

@@ -9,66 +9,70 @@ import type { TableUpperProps } from '../../../store/publicReuseFaciltyInsert';
 
 
 
-  const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
-    return  ( <>
+const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
+
+  return (<>
     <TableRow>{
-    upHeadList.map((head: TableUpperProps) => 
-      (!head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
-        head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:null))}
+      upHeadList.map((head: TableUpperProps) =>
+      (!head.upSequnce ? <TableHead rowSpan={2} key={head.id}>{head.title}</TableHead> :
+        head.upName === 'upChangeRe' && head.upSequnce === 1 ? <TableHead key={head.id} rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead> : null))}
     </TableRow>
     <TableRow>
       {upHeadList.map((head: TableUpperProps) =>
-        (head.upName === 'upChangeRe'?<TableHead key={head.id}>{head.title}</TableHead>:null))}
+        (head.upName === 'upChangeRe' ? <TableHead key={head.id}>{head.title}</TableHead> : null))}
     </TableRow>
-    </> )
-  }
+  </>)
+}
 
-  
-
-
-  export  default function PublicReuseFaciltyInsert() {
-  const {building} = useWrStore((state) => state);
-  const {  upHeadList, publicReuseFacilityUper} = building;
-  const nodeList= headMakeColSpan(upHeadList);
+export default function PublicReuseFaciltyInsert() {
+  const { pubFac } = useWrStore((state) => state);
+  const { upHeadList, publicReuseFacilityUper } = pubFac;
+  const nodeList = headMakeColSpan(upHeadList);
   const total = 100;
- 
- 
-  const searchDiv ='시군구'
-  const selectBox = [{text:'한양', value:1}]
-  const headName= ()=>{
-        return(
-          <h1 className="pl-3 text-xl">○공공 허수처리시설 등록</h1>
-        )
-  }
-  return (  <>
-  <div className="grid grid-cols-2 gap-4 h-full">
-  <div className='col-span-2'>
-    <h1 className="pl-3 text-2xl" > 하수재이용시설 등록</h1>
-    <SearchDiv   >
-        <div className='flex'> 
-          <SelectBox label={searchDiv} selectArray={selectBox} /> 
-            <Button className ='mr-4' size='sm'>조회</Button>
-           <Button className ='mr-4' size='sm'>신규추가</Button>
-        </div>
-    </SearchDiv>
-  </div>
 
+
+  const searchDiv = '시군구'
+  const selectBox = [{ text: '한양', val: "1" }, { text: '서울', val: "2" }, { text: '부산', val: "3" }]
+  const headName = () => {
+    return (
+      <h1 className="pl-3 text-xl">○공공 허수처리시설 등록</h1>
+    )
+  }
+  const onSelectValue = (val: string) => {
+    console.log(val)
+  }
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4 h-full">
+        <div className='col-span-2'>
+          <h1 className="pl-3 text-2xl" > 하수재이용시설 등록</h1>
+          <div className="m-8">
+            <SearchDiv>
+              <div className='w-4/5 grid grid-cols-12 gap-1 mx-4'>
+                <SelectBox className='col-span-2' label={searchDiv} selectArray={selectBox} onSelectValue={onSelectValue} />
+              </div>
+              <div className='w-1/5 flex items-center justify-end'>
+                <Button className='mr-4 rounded-md'>조회</Button>
+                <Button className='mr-4 rounded-md'>신규추가</Button>
+              </div>
+            </SearchDiv>
+            {/* </div> */}
+          </div>
+        </div>
         <div className="col-span-1">
-          <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total}  headName={headName()}>
+          <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} headName={headName()}>
             {nodeList}
-           </UiTable>
+          </UiTable>
         </div>
         <div className="col-span-1 max-h-full overflow-y-scroll">
           <ScrollArea>
-          <PublicReuseFaciltyFormInsert></PublicReuseFaciltyFormInsert>
-          {/* <ScrollBar orientation="vertical"></ScrollBar> */}
+            <PublicReuseFaciltyFormInsert />
+            {/* <ScrollBar orientation="vertical"></ScrollBar> */}
           </ScrollArea>
         </div>
-        
-</div>     
-          
-          </>
-  )}
-
 
+      </div>
 
+    </>
+    )
+}

apps/wr/app/store/store.tsx

@@ -1,13 +1,15 @@
 import { createStore } from 'zustand/vanilla';
 import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';
-import { buildingTableActionsExport, buildingtableStateExport, type buildingTableType } from './rainReuseFacilityInsert';
+import { buildingTableActionsExport, buildingtableStateExport, type buildingTableState, type buildingTableType } from './rainReuseFacilityInsert';
 export type WrStore = tableType & buildingTableType;
-export const StoreZus = (initState: tableState = tableStateExport) => {
+export const StoreZus = (initState: buildingTableState& tableState = {
+  ...tableStateExport, 
+  ...buildingtableStateExport 
+}) => {
   return createStore<WrStore>()((set) => {
     return {
       ...initState,
       ...tableActionsExport(set),
-      ...buildingtableStateExport,
       ...buildingTableActionsExport(set)
     }
   })

apps/wr/components/ui/publicReuseInsertForm.tsx

@@ -1,15 +1,14 @@
 "use client";
 
+import { SelectBox } from "@common/business_components";
 import { FileUpload, UiTable } from "@common/business_components/ui";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui/form";
-import { Button, FileSearch, Input } from "@common/components";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui/form";
+import { Button, DatePicker, Input } from "@common/components";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { useWrStore } from "../../app/store/index";
-import { SelectBox } from "@common/business_components";
-import { DatePicker } from "@common/components";
 
 const formSchema = z.object({
   username: z.string().min(2).max(50),
@@ -17,13 +16,14 @@ const formSchema = z.object({
 });
 
 
-type typeOfForm = {
-  labelName: string;
-  type: string;
-  selectvlaue?: { text: string; val: string }[];
-}
+// type typeOfForm = {
+//   labelName: string;
+//   type: string;
+//   selectvlaue?: { text: string; val: string }[];
+// }
 export function PublicReuseFaciltyFormInsert() {
-  const { upHeadList, publicReuseFacilityUper } = useWrStore((state) => state);
+  const { pubFac } = useWrStore((state) => state);
+  const { upHeadList, publicReuseFacilityUper } = pubFac;
   const total = 100;
 
   const form = useForm<z.infer<typeof formSchema>>({