From a4350c9788fbdfd24486a1bea2daafbd9be32828 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Fri, 28 Mar 2025 09:40:44 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8B=A0=EA=B7=9C=EB=93=B1=EB=A1=9D=20ui=20?= =?UTF-8?q?=EC=99=84=EC=84=B1=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=ED=95=84=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/layout.tsx | 3 + .../app/ruseFcltMng/fcltReg/rainReg/page.tsx | 91 ++++-- .../ui/form/fcltReg/bdstReg/component.tsx | 298 +++++++++--------- .../ui/form/fcltReg/rainReg/component.tsx | 85 +++-- .../components/ui/modal/bdstReg/component.tsx | 146 +++++---- 5 files changed, 357 insertions(+), 266 deletions(-) diff --git a/apps/wr/app/layout.tsx b/apps/wr/app/layout.tsx index 8c99c9fec..cb930d6f7 100644 --- a/apps/wr/app/layout.tsx +++ b/apps/wr/app/layout.tsx @@ -2,6 +2,7 @@ import { BaseLayout } from "@common/components"; import "./globals.css"; import { StoreProvider } from "./store"; +import { MainDiv } from "@common/business_components"; export default function RootLayout({ children, @@ -13,7 +14,9 @@ export default function RootLayout({ + {children} + diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx index b0bcb9708..47c09d40c 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx @@ -3,7 +3,8 @@ import { useWrStore } from "@/app/store"; import type { bdstType, rainRuseBd, TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg" import { RainRegForm } from "@/components/ui/form/fcltReg/rainReg/component"; import { BdstReg } from "@/components/ui/modal/bdstReg/component"; -import { ScrollArea, SearchDiv, SearchInput, Title, UiModal, UiTable } from "@common/business_components"; +import { ContentsDiv, ScrollArea, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiModal, UiTable } from "@common/business_components"; +import ListDiv from "@common/business_components/ui/list_div"; import { Button, TableHead, TableRow } from "@common/components"; import { useEffect, useState } from "react"; @@ -28,11 +29,7 @@ export default function Home() { const [rinBdstForm, setRinBdstForm] = useState (); const [bdstTable, setbdstTable] = useState (); const nodeList = headMakeColSpan(rain.upHeadList); - const headName = () => { - return ( -

○건축물 목록

- ) - } + useEffect(() => { if (!rain.isInit) { @@ -67,37 +64,63 @@ export default function Home() { return ( <> -
-
- - <div className="m-8"> - <SearchDiv > - <div className='w-4/5 grid grid-cols-12 gap-1 mx-4'> - <SearchInput className='col-span-3 my-7' label="건물명" textValue={""} setText={function (val: string): void { - throw new Error("Function not implemented."); - } } /> + <ContentsDiv> + <div className="grid grid-cols-2 gap-4 "> + <div className="col-span-2"> + <Title title={"빗물이용시설 등록"} /> + <SearchDiv> + <SearchFormLeft> + <SearchInput + className="col-span-3 my-7" + label="건물명" + textValue={""} + setText={function (val: string): void { + throw new Error("Function not implemented."); + }} + /> + {/* <div className='w-4/5 grid grid-cols-12 gap-1 mx-4'> + </div> */} + </SearchFormLeft> + <SearchFormRight> + <Button className="mr-4 rounded-lg">조회</Button> + <UiModal + butNm="신규등록" + title="건축물 시설 등록(빗물이용시설)" + body={<BdstReg></BdstReg>} + bodyClass="sm:max-w-7xl" + /> + {/* <Button className='mr-4 rounded-lg' onClick={()=>bdstRegModal('ㅁ',divTest())}>신규등록</Button> */} + </SearchFormRight> + {/* <div className='w-1/5 flex items-center justify-end'> + </div> */} + </SearchDiv> </div> - <div className='w-1/5 flex items-center justify-end'> - <Button className='mr-4 rounded-lg'>조회</Button> - <UiModal butNm="신규등록" title='건축물 시설 등록(빗물이용시설)' body={<BdstReg></BdstReg>} bodyClass="sm:max-w-7xl" /> - {/* <Button className='mr-4 rounded-lg' onClick={()=>bdstRegModal('ㅁ',divTest())}>신규등록</Button> */} + <div className="colsapn-1"> + <ListDiv> + <UiTable + tableData={bdstTable || []} + headlist={rain.upHeadList} + pageSize={100} + total={10} + headName={"○건축물 목록"} + cellClick={cellClick} + > + {nodeList} + </UiTable> + </ListDiv> + </div> + <div className="colsapn-1 max-h-full ovreflow-y-scroll"> + <ListDiv> + <ScrollArea> + <RainRegForm + data={rinBdstForm || []} + isModal={false} + ></RainRegForm> + </ScrollArea> + </ListDiv> </div> - </SearchDiv> </div> - </div> - - <div className="colsapn-1 pl-11"> - <UiTable tableData={bdstTable || []} headlist={rain.upHeadList} pageSize={100} total={10} headName={headName()} cellClick={cellClick}> - {nodeList} - </UiTable> - </div> - <div className="colsapn-1 pr-11 max-h-full ovreflow-y-scroll"> - <ScrollArea> - <RainRegForm data={rinBdstForm || []} isModal={false} ></RainRegForm> - </ScrollArea> - </div> - - </div> + </ContentsDiv> </> ); } diff --git a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx b/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx index 3dafc0878..0a13b41fa 100644 --- a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx @@ -1,7 +1,7 @@ import { useWrStore } from "@/app/store"; import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { FormField, FormUi, SelectBox } from "@common/business_components"; -import { Input } from "@common/components"; +import { Button, Input } from "@common/components"; export default function BdstReg(form: any) { const { code } = useWrStore((state) => { @@ -10,157 +10,165 @@ export default function BdstReg(form: any) { return ( <> - <div className="grid grid-cols-6 gap-2 mt-4 pl-6"> - <div className="col-span-3"> - <FormField - control={form.control} - name="ctpvCd" - render={({ field }) => ( - <FormUi label="시도"> - <SelectBox - className={""} - selectClass={selectClass} - label={""} - selectArray={code.cityCd} - onSelectValue={(val) => { - field.onChange(val); - }} - value={field.value} - /> - </FormUi> - )} - /> + + <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6"> + 건축물 시설 정보 + </h1> + <div className="grid grid-cols-6 gap-2 mt-4 pl-6"> + <div className="col-span-3"> + <FormField + control={form.control} + name="ctpvCd" + render={({ field }) => ( + <FormUi label="시도"> + <SelectBox + className={""} + selectClass={selectClass} + label={""} + selectArray={code.cityCd} + onSelectValue={(val) => { + field.onChange(val); + }} + value={field.value} + /> + </FormUi> + )} + /> + </div> + <div className="col-span-3"> + <FormField + control={form.control} + name="sggCd" + render={({ field }) => ( + <FormUi label="시군구"> + <SelectBox + className={""} + selectClass={selectClass} + label={""} + selectArray={code.cityCd} + onSelectValue={(val) => { + field.onChange(val); + }} + value={field.value} + /> + </FormUi> + )} + /> + </div> </div> - <div className="col-span-3"> - <FormField - control={form.control} - name="sggCd" - render={({ field }) => ( - <FormUi label="시군구"> - <SelectBox - className={""} - selectClass={selectClass} - label={""} - selectArray={code.cityCd} - onSelectValue={(val) => { - field.onChange(val); - }} - value={field.value} - /> - </FormUi> - )} - /> - </div> - <div className="col-span-2"> - <FormField - control={form.control} - name="bdstNm" - render={({ field }) => ( - <FormUi label="건축물명"> - <Input - className="" - placeholder="1,000,000" - type="text" - {...field} - /> - </FormUi> - )} - /> - - - </div> - <div className="col-span-2"> - - <FormField - control={form.control} - name="daddr" - render={({ field }) => ( - <FormUi label="위치"> - <Input - className="" - placeholder="1,000,000" - type="search" - {...field} - /> - </FormUi> - )} - /> - - + <div className="grid grid-cols-6 gap-2 mt-4 "> <div className="col-span-2"> - <FormField - control={form.control} - name="bdstUsgCd" - render={({ field }) => ( - <FormUi label="건축물용도"> - <SelectBox - className={""} - selectClass={selectClass} - label={""} - selectArray={code.cityCd} - onSelectValue={(val) => { - field.onChange(val); - }} - value={field.value} - /> - </FormUi> - )} - /> - </div> - <div className="col-span-2"> - <FormField - control={form.control} - name="frstArchPrmsnDt" - render={({ field }) => ( - <FormUi label="최초건축허가일"> - <Input - className="" - placeholder="1,000,000" - type="date" - {...field} - /> - </FormUi> - )} - /> + <FormField + control={form.control} + name="bdstNm" + render={({ field }) => ( + <FormUi label="건축물명"> + <Input + className="" + placeholder="1,000,000" + type="text" + {...field} + /> + </FormUi> + )} + /> </div> <div className="col-span-2"> - <FormField - control={form.control} - name="archArea" - render={({ field }) => ( - <FormUi label="건축면적(m³)"> - <Input - className="" - placeholder="1,000,000" - type="number" - {...field} - /> - </FormUi> - )} - /> + <FormField + control={form.control} + name="daddr" + render={({ field }) => ( + <FormUi label="위치"> + <Input + className="" + placeholder="1,000,000" + type="search" + {...field} + /> + </FormUi> + )} + /> </div> <div className="col-span-2"> - <FormField - control={form.control} - name="" - render={({ field }) => ( - <FormUi label="법정의무대상여부"> - <SelectBox - className={""} - selectClass={selectClass} - label={""} - selectArray={code.cityCd} - onSelectValue={(val) => { - field.onChange(val); - }} - value={field.value} - /> - </FormUi> - )} - /> + <FormField + control={form.control} + name="bdstUsgCd" + render={({ field }) => ( + <FormUi label="건축물용도"> + <SelectBox + className={""} + selectClass={selectClass} + label={""} + selectArray={code.cityCd} + onSelectValue={(val) => { + field.onChange(val); + }} + value={field.value} + /> + </FormUi> + )} + /> + </div> + <div className="col-span-2"> + <FormField + control={form.control} + name="frstArchPrmsnDt" + render={({ field }) => ( + <FormUi label="최초건축허가일"> + <Input + className="" + placeholder="1,000,000" + type="date" + {...field} + /> + </FormUi> + )} + /> + </div> + <div className="col-span-2"> + <FormField + control={form.control} + name="archArea" + render={({ field }) => ( + <FormUi label="건축면적(m³)"> + <Input + className="" + placeholder="1,000,000" + type="number" + {...field} + /> + </FormUi> + )} + /> + </div> + <div className="col-span-2"> + <FormField + control={form.control} + name="" + render={({ field }) => ( + <FormUi label="법정의무대상여부"> + <SelectBox + className={""} + selectClass={selectClass} + label={""} + selectArray={code.cityCd} + onSelectValue={(val) => { + field.onChange(val); + }} + value={field.value} + /> + </FormUi> + )} + /> + </div> </div> - </div> - </div> + <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4"> + 중축, 개축, 증축 + </h1> + <div className="flex justify-end"> + <Button className="mr-4 rounded-lg ">이력추가</Button> + </div> + <div className="border-b border-gray-300 my-4"> </div> </> ); } diff --git a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx index 6139ab5b5..98d0e28a9 100644 --- a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx @@ -7,37 +7,55 @@ import { useForm } from "react-hook-form"; import { z } from "zod"; import { FormUi } from "@common/business_components"; import { useWrStore } from "@/app/store"; -import { selectClass, type rainRuseBd, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { + selectClass, + type rainRuseBd, +} from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { useEffect } from "react"; -import { bdstDefZod, bdstZod, rainDefZod, rainZod } from "@/components/lib/type/zod/fcltReg/controlZod"; +import { + bdstDefZod, + bdstZod, + rainDefZod, + rainZod, +} from "@/components/lib/type/zod/fcltReg/controlZod"; import BdstReg from "../bdstReg/component"; -export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean} ) { - - console.log(isModal) +export function RainRegForm({ + data, + isModal, +}: { + data: rainRuseBd[]; + isModal: boolean; +}) { + console.log(isModal); const formSchema = isModal - ? z.object({ ...rainZod, ...bdstZod }) - : z.object(rainZod) + ? z.object({ ...rainZod, ...bdstZod }) + : z.object(rainZod); - const { rain ,code} = useWrStore((state) => state); - const {rainFcltCd } = code + const { rain, code } = useWrStore((state) => state); + const { rainFcltCd } = code; useEffect(() => { - if (data && data.length > 0) { - console.log(data) - const selectedOption = rainFcltCd.find(item => item.val === String(data[0]?.pntfColKnd ?? "")); - const formData = { - ...data[0], - pntfColKnd: selectedOption ? selectedOption.val : "", - instlCmptnDt: data[0]?.instlCmptnDt ? new Date(data[0].instlCmptnDt) : undefined - }; - form.reset(formData); - } - }, [data, rainFcltCd]); + if (data && data.length > 0) { + console.log(data); + const selectedOption = rainFcltCd.find( + (item) => item.val === String(data[0]?.pntfColKnd ?? "") + ); + const formData = { + ...data[0], + pntfColKnd: selectedOption ? selectedOption.val : "", + instlCmptnDt: data[0]?.instlCmptnDt + ? new Date(data[0].instlCmptnDt) + : undefined, + }; + form.reset(formData); + } + }, [data, rainFcltCd]); const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), - defaultValues: isModal ? {...rainDefZod, ...bdstDefZod} : {...rainDefZod} - + defaultValues: isModal + ? { ...rainDefZod, ...bdstDefZod } + : { ...rainDefZod }, }); // form 값이 변경될 때마다 로그 출력 @@ -65,13 +83,18 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean} {/* <div className="flex justify-between items-center mx-3"> */} <div> <div className="grid grid-cols-12"> - <h1 className="pl-3 text-xl col-span-10">○ 빗물이용시설 운영정보</h1> - <Button className='mr-4 rounded-lg col-span-2'>저장</Button> + <h1 className="pl-3 text-xl col-span-10"> + {isModal ? "○건축물 운영정보" : "○ 빗물이용시설 운영정보"} + </h1> + <Button className="mr-4 rounded-lg col-span-2">저장</Button> </div> </div> + {isModal ? <BdstReg form={form}></BdstReg> : <></>} + {isModal ? <h1 className="pl-3 text-xl col-span-10 mt-4 ">○ 빗물이용시설 운영정보 </h1> : <></>} <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 "> 기본정보 </h1> + <div className="grid grid-cols-4 gap-2 mt-4 pl-6"> <div className="col-span-2"> <FormField @@ -82,8 +105,14 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean} <Input className="" type="date" - onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : undefined)} - value={field.value ? field?.value.toString().split('T')[0] : ""} + onChange={(e) => + field.onChange( + e.target.value ? new Date(e.target.value) : undefined + ) + } + value={ + field.value ? field?.value.toString().split("T")[0] : "" + } /> </FormUi> )} @@ -106,9 +135,7 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean} )} /> </div> - </div> - - {isModal?<BdstReg></BdstReg> :<></>} + </div> <div className=" my-4"> <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6"> 빗물이용시설 정보 diff --git a/apps/wr/components/ui/modal/bdstReg/component.tsx b/apps/wr/components/ui/modal/bdstReg/component.tsx index e505242ae..d2693cd35 100644 --- a/apps/wr/components/ui/modal/bdstReg/component.tsx +++ b/apps/wr/components/ui/modal/bdstReg/component.tsx @@ -1,70 +1,100 @@ -'use client' +"use client"; import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page"; import { useWrStore } from "@/app/store"; -import { selectClass, type bdstType } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -import { ScrollArea, SelectBox, UiTable } from "@common/business_components"; +import { + selectClass, + type bdstType, +} from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components"; import { Button, Input } from "@common/components"; import { useEffect, useState } from "react"; import { RainRegForm } from "../../form/fcltReg/rainReg/component"; -export function BdstReg(){ +export function BdstReg() { + const { rain, code, init } = useWrStore((state) => { + return state; + }); - const { rain, code,init } = useWrStore((state) => { - return state - }); + const [bdstTable, setbdstTable] = useState<bdstType[]>(); + const [rainBdstForm, setRainBdstForm] = useState<[]>(); + const { bdstObj, rainRuseObj } = rain; + const getCity = (val: string | number) => { + console.log(val); + }; - const[bdstTable, setbdstTable] = useState <bdstType[]> (); - const [rainBdstForm, setRainBdstForm] = useState<[]>() - const {bdstObj, rainRuseObj } =rain - const getCity =(val:string|number)=>{ + const getSgg = (val: string | number) => { + console.log(val); + }; - console.log(val) - } + useEffect(() => { + if (code.sggCd.length > 0) { + const table = bdstObj.map((item) => { + const sggText = code.sggCd.find( + (cd) => cd.val.toString() === item.sggCd + )?.text; + const cityText = code.cityCd.find( + (cd) => cd.val.toString() === item.ctpvCd + )?.text; + return { ...item, sggText: sggText, cityText: cityText }; + }); + setbdstTable(table); + } + }, [code, bdstObj]); - const getSgg =(val:string|number)=>{ + const cellClick = () => {}; + const nodeList = headMakeColSpan(rain.upHeadList); + return ( + <> + <div className="grid grid-cols-12 gap-4 pb-4"> + <SelectBox + className="col-span-3 col-start-4" + label={"시도"} + selectClass={selectClass} + selectArray={code.cityCd} + onSelectValue={getCity} + > + {" "} + </SelectBox> + <SelectBox + className="col-span-3" + label={"시군구"} + selectClass={selectClass} + selectArray={code.sggCd} + onSelectValue={getSgg} + > + {" "} + </SelectBox> + <SearchInput + className="col-span-3 col-start-10" + label="건물명" + textValue={""} + setText={function (val: string): void { + throw new Error("Function not implemented."); + }} + /> + </div> + <div className="h-auto"> + <div> + <UiTable + tableData={bdstTable || []} + headlist={rain.upHeadList} + pageSize={-10} + total={-1} + headName={undefined} + cellClick={cellClick} + > + {nodeList} + </UiTable> + </div> + <div > - console.log(val) - } - - useEffect ( () => { - if(code.sggCd.length>0){ - const table= bdstObj.map((item) => { - const sggText= code.sggCd.find((cd)=>cd.val.toString() === item.sggCd )?.text; - const cityText= code.cityCd.find((cd)=>cd.val.toString() === item.ctpvCd )?.text; - return( - {...item, - sggText:sggText, - cityText:cityText - }) - }) - setbdstTable(table) - } - }, [code,bdstObj]); - - const cellClick = ()=>{ - - } - const nodeList = headMakeColSpan(rain.upHeadList) - return( - <> - <h2>건축물조회</h2> < h2/> - <div className="grid grid-cols-12 gap-2"> - - <SelectBox className='col-span-3' label={''} selectClass={selectClass} selectArray={code.cityCd} onSelectValue={getCity } > </SelectBox> - <SelectBox className='col-span-3' label={""} selectClass={selectClass} selectArray={code.sggCd} onSelectValue={getSgg }> </SelectBox> - <Input className='col-span-3'></Input> - <Button className='col-span-1'> 조회</Button> + <ScrollArea className="h-[60vh]"> + <div> + <RainRegForm data={rainBdstForm || []} isModal={true}></RainRegForm> + </div> + </ScrollArea> </div> - <div> - <UiTable tableData={bdstTable || []} headlist={rain.upHeadList} pageSize={-10} total={-1} headName={undefined} cellClick={cellClick}> - {nodeList} - </UiTable> - </div> - <div> - <ScrollArea> - <RainRegForm data={rainBdstForm || []} isModal={true} ></RainRegForm> - </ScrollArea> - </div> - </> - ) -} \ No newline at end of file + </div> + </> + ); +}