From 96e0df4e0bed2fa8f37338bd77f9aa7c24fa0d21 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 16 Apr 2025 11:04:13 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=AC=EC=9D=B4=EC=9A=A9=EC=8B=9C=EC=84=A4?= =?UTF-8?q?=20=ED=98=84=ED=99=A9=20=EC=A1=B0=ED=9A=8C=EC=A1=B0=EA=B1=B4=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/loading.jsx | 10 -- apps/wr/app/loading.tsx | 4 + .../app/ruseFcltMng/fcltReg/rainReg/page.tsx | 111 +++++++++--------- .../ruseFcltMng/fcltSttn/pbnstSttn/page.tsx | 16 ++- .../ruseFcltMng/fcltSttn/pbnstSttn/index.tsx | 8 +- .../ui/modal/headChModal/headChModal.tsx | 95 +++++++++++++++ 6 files changed, 170 insertions(+), 74 deletions(-) delete mode 100644 apps/wr/app/loading.jsx create mode 100644 apps/wr/app/loading.tsx create mode 100644 apps/wr/components/ui/modal/headChModal/headChModal.tsx diff --git a/apps/wr/app/loading.jsx b/apps/wr/app/loading.jsx deleted file mode 100644 index 5d639b857..000000000 --- a/apps/wr/app/loading.jsx +++ /dev/null @@ -1,10 +0,0 @@ -export default function loading (){ - - return( - <> -
- 'test' -
- - ) -} \ No newline at end of file diff --git a/apps/wr/app/loading.tsx b/apps/wr/app/loading.tsx new file mode 100644 index 000000000..80b268890 --- /dev/null +++ b/apps/wr/app/loading.tsx @@ -0,0 +1,4 @@ +export default function Loading() { + return
페이지 불러오는 중입니다...
; + } + \ No newline at end of file diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx index 4dedd354f..df5d2c285 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx @@ -59,12 +59,14 @@ export default function Home() { }); const { rainRes } = rain; const [rainForm, setRainForm] = useState(); - const [issNewReg,setIsNewReg] = useState( false); + const [issNewReg, setIsNewReg] = useState(false); const [bdstTable, setbdstTable] = useState(); const [searchTxt, setSearchTxt] = useState(); - 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 ( <> - +
@@ -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> </> ); diff --git a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx b/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx index b0ce1a124..1e11470a0 100644 --- a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx +++ b/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> </> ); diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx index 2a9c00b05..b3cd56fe5 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx +++ b/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()]) - )) - ); - + diff --git a/apps/wr/components/ui/modal/headChModal/headChModal.tsx b/apps/wr/components/ui/modal/headChModal/headChModal.tsx new file mode 100644 index 000000000..da4e090ae --- /dev/null +++ b/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> + </> + ); +}