diff --git a/apps/wr/app/globals.css b/apps/wr/app/globals.css index 68ce2f396..a439708d4 100644 --- a/apps/wr/app/globals.css +++ b/apps/wr/app/globals.css @@ -3,7 +3,6 @@ @tailwind base; @tailwind utilities; - html, body { font-family: "Noto Sans KR", sans-serif; diff --git a/apps/wr/app/loading.jsx b/apps/wr/app/loading.jsx new file mode 100644 index 000000000..5d639b857 --- /dev/null +++ b/apps/wr/app/loading.jsx @@ -0,0 +1,10 @@ +export default function loading (){ + + return( + <> +
+ 'test' +
+ + ) +} \ No newline at end of file diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index f46ccea25..b18914cdc 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -19,9 +19,9 @@ export default function Home() { - {/* */} + ); diff --git a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx deleted file mode 100644 index aa3c521d8..000000000 --- a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; - -import { useWrStore } from "@/app/store"; -import { - ScrollArea, - SearchDiv, - SearchInput, - UiTable, -} from "@common/business_components"; -import { Button } from "@common/components"; -import { headMakeColSpan } from "../rainReg/page"; -import { HtdflRegForm } from "@/components/ui/form/fcltReg/htdflReg/component"; - -export default function Home() { - const { htdfl } = useWrStore((state) => state); - const nodeList = headMakeColSpan(htdfl.upHeadList); - - const headName = () => { - return ( - <> -

○건축물 목록

- - ); - }; - - return ( - <> -
-
-

온배수시설 등록

-
- -
- -
-
- - - -
- -
-
- -
- - {nodeList} - -
-
- - - -
-
- - ); -} diff --git a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx new file mode 100644 index 000000000..ba5a691d1 --- /dev/null +++ b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { useWrStore } from "@/app/store"; +import { + ContentsDiv, + ScrollArea, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + Title, + UiTable, +} from "@common/business_components"; +import { Button } from "@common/components"; +import { headMakeColSpan } from "../rainReg/page"; +import ListDiv from "@common/business_components/ui/list_div"; +import { useEffect, useState } from "react"; +import { tableData } from "@/components/lib/func/commom"; +import { HtdflRegForm } from "@/components/ui/form/fcltReg/htdflReg/component"; +import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; + +export default function Home() { + const { code, htdfl, initHtdfl } = useWrStore((state) => state); + const nodeList = headMakeColSpan(htdfl.upHeadList); + const [searchTxt, setSearchTxt] = useState(""); + const [rswtForm, setRswtForm] = useState(); + const [bdstTable, setbdstTable] = useState(); + const { htdflRes } = htdfl; + + useEffect(() => { + if (!htdfl.isInit) { + initHtdfl(undefined); + } + }, [htdfl.isInit, initHtdfl]); + + useEffect(() => { + if (code.sggCd.length > 0) { + setbdstTable(tableData(htdflRes, { code })); + } + }, [code, htdflRes]); + + const cellClick: (val: number | undefined) => void = (val) => { + if ((bdstTable ?? []).length > 0 && val !== undefined) { + { + setRswtForm(htdflRes[val]); + } + } + }; + return ( + <> + +
+
+ + <SearchDiv> + <SearchFormLeft> + <SearchInput + className="col-span-3 my-7" + label="건물명:" + textValue={searchTxt || ""} + setText={(e) => { + setSearchTxt(e); + }} + /> + </SearchFormLeft> + <SearchFormRight> + <Button className="mr-4 rounded-lg">조회</Button> + <Button className="mr-4 rounded-lg">신규등록</Button> + </SearchFormRight> + </SearchDiv> + </div> + </div> + + <div className="grid grid-cols-6 gap-4 "> + <div className="col-span-4"> + <ListDiv> + <UiTable + tableData={bdstTable || []} + headlist={htdfl.upHeadList} + pageSize={100} + total={10} + headName={"○건축물 목록"} + cellClick={cellClick} + > + {nodeList} + </UiTable> + </ListDiv> + </div> + <div className="col-span-2 max-h-full ovreflow-y-scroll"> + <ListDiv> + <ScrollArea> + <HtdflRegForm + htdflForm={rswtForm ?? ({} as customRswtBdst)} + isModal={false} + /> + </ScrollArea> + </ListDiv> + </div> + </div> + </ContentsDiv> + </> + ); +} diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx index fc6463844..ef0281819 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx @@ -1,7 +1,7 @@ "use client"; import { useWrStore } from "@/app/store"; import type { - RainyBuilding, + customRainBdst, TableUpperProps, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { tableData } from "@/components/lib/func/commom"; @@ -59,8 +59,8 @@ export default function Home() { return state; }); const { rainRes } = rain; - const [rainForm, setRainForm] = useState<RainyBuilding>(); - const [bdstTable, setbdstTable] = useState<RainyBuilding[]>(); + const [rainForm, setRainForm] = useState<customRainBdst>(); + const [bdstTable, setbdstTable] = useState<customRainBdst[]>(); const [searchTxt , setSearchTxt] = useState<string>() const nodeList = headMakeColSpan(rain.upHeadList); @@ -104,7 +104,7 @@ export default function Home() { <UiModal butNm="신규등록" title="건축물 시설 등록(빗물이용시설)" - body={<BdstReg moType="rain"></BdstReg>} + body={<BdstReg moType="RNB"></BdstReg>} bodyClass="sm:max-w-7xl" /> </SearchFormRight> diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx index 05336a773..30b92fd4a 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx @@ -1,7 +1,5 @@ "use client"; import { useWrStore } from "@/app/store"; -import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -import { RswtrRegForm } from "@/components/ui/form/fcltReg/rswtrReg/component"; import { BdstReg } from "@/components/ui/modal/bdstReg/component"; import { ContentsDiv, @@ -18,16 +16,18 @@ import ListDiv from "@common/business_components/ui/list_div"; import { Button} from "@common/components"; import { headMakeColSpan } from "../rainReg/page"; import { useEffect, useState } from "react"; -import type { RswtBuilding } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import { tableData } from "@/components/lib/func/commom"; +import { RswtrRegForm } from "@/components/ui/form/fcltReg/rswtrReg/RswtrRegForm"; export default function Home() { const { code,rswt,initRswt } = useWrStore((state) => state); const nodeList = headMakeColSpan(rswt.upHeadList); - const [rswtForm, setRswtForm] = useState<RswtBuilding>(); - - const [bdstTable, setbdstTable] = useState<RswtBuilding[]>(); + const [rswtForm, setRswtForm] = useState<customRswtBdst>(); + const [searchTxt , setSearchTxt] = useState<string>() + + const [bdstTable, setbdstTable] = useState<customRswtBdst[]>(); const {rswtRes} = rswt; @@ -45,8 +45,10 @@ export default function Home() { } }, [code, rswtRes]); const cellClick: (val: number | undefined) => void = (val) => { + console.log(" val ", val) if ((bdstTable ?? []).length > 0 && val !== undefined) { { + console.log(" val ", val) setRswtForm(rswtRes[val]); } } @@ -64,18 +66,16 @@ export default function Home() { <SearchInput className="col-span-3 my-7" label="건물명:" - textValue={""} - setText={function (val: string): void { - throw new Error("Function not implemented."); - }} + textValue={searchTxt||""} + setText={(e)=>{setSearchTxt(e)}} /> </SearchFormLeft> <SearchFormRight> - <Button className="mr-4 rounded-lg">조회</Button> + <Button className="mr-4 rounded-lg" onClick={(e)=>{initRswt(searchTxt||"")} }>조회</Button> <UiModal butNm="신규등록" title="건축물 시설 등록(중수도시설)" - body={<BdstReg moType={"rswt"}></BdstReg>} + body={<BdstReg moType={"RST"}></BdstReg>} bodyClass="sm:max-w-7xl" /> </SearchFormRight> @@ -102,7 +102,7 @@ export default function Home() { <ListDiv> <ScrollArea> <RswtrRegForm - rswtForm={rswtForm || undefined} + rswtForm={rswtForm ?? {} as customRswtBdst} isModal={false} /> diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx index f7b990dba..375382e9c 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx @@ -1,5 +1,5 @@ import { getFectch } from "@/components/lib/api"; -import type { RainyBuilding } from "../rainReg"; +import type { bdstAll } from "../rainReg"; type TableUpperProps = { id: string; @@ -19,7 +19,7 @@ type TableUpperProps = { { id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 }, ]; -const bdstBase: RainyBuilding[] = []; +const bdstBase: bdstAll[] = []; @@ -28,7 +28,7 @@ export type bdstFulType = bdstState & bdstActions; export type bdstState = { bdst: { - bdstBase: RainyBuilding[]; + bdstBase: any[]; moUpHeadList:TableUpperProps[] }; }; @@ -59,11 +59,17 @@ export const bdstActionsExport: (set: any) => bdstActions = ( try{ const bdst = await findBdstInfo(sggCd, searchTxt, flg); + const makeBdst = bdst.map((item:any) => { + return { + ...item, + reuseBuilding:[] + }; + }) return set((state:bdstState) =>({ ...state, bdst:{ ...state.bdst, - bdstBase:bdst + bdstBase:makeBdst } })) diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx index 890505198..cbbc62163 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx @@ -1,89 +1,191 @@ +import { getFectch } from "@/components/lib/api"; import { upHeadList, - type bdstType, type TableUpperProps, } from "../rainReg"; -const htdflOfObject: bdstType[] = [ - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, -]; + +import { z } from "zod"; + +export const hdtflZod = z.object({ + bdstInfoPk: z.number().nullish().default(0), + ctpvCd: z.number().default(0), + sggCd: z.number().default(0), + daddr: z.string().default(""), + bdstNm: z.string().default(""), + frstArchPrmsnDt: z.date().default(() => new Date()), + archChgPrmsnDt: z.coerce.date().nullish().default(null), + archArea: z.number().default(0), + archChgArea: z.number().nullish().default(0), + + reuseBuilding: z.array( + z.object({ + bdstRuseFcltPk: z.number().nullish().default(0), + bdstInfoFk: z.number().nullish().default(0), + instlCmptnDt: z.coerce.date().default(() => new Date()), + instlCst: z.number().nullish().default(0), + operMngCd: z.string().nullish().default(""), + anlOperCst: z.number().default(0), + instlCstSprtYn: z.string().default(""), + instlCstSprtAmt: z.number().nullish().default(0), + grntchBdstCertYn: z.string().default(""), + grntchBdstCertYr: z.string() + .max(4, "4자리 연도를 입력하세요") + .regex(/^\d{4}$/, "4자리 연도를 입력하세요") + .nullish() + .default(""), + grntchBdstCertNo: z.string().nullish().default(""), + grntchBdstCertGrd: z.string().nullish().default(""), + crgRdctYn: z.string().default(""), + crgRdctBss: z.string().nullish().default(""), + crgRdctAmt: z.number().nullish().default(0), + ruseFcltFlg: z.string().nullish().default(""), + bdstUsgCd: z.number().default(0), + lawTrgtYn: z.string().default(""), + + // htdflObj 매핑 + htdfObj: z.object({ + htdflFcltPk: z.number().nullish().default(0), + bdstRuseFcltFk: z.number().nullish().default(0), + etgtType: z.string().default(""), + fclCpct: z.number().default(0), + plwtYn: z.string().default(""), + orgwtWtritSpt: z.number().default(0), + orgwtOcrnProcs: z.string().default(""), + wtritEntrcTp: z.number().default(0), + amtgnr: z.number().default(0), + prcsProcsYn: z.string().default(""), + prcsFcltCpct: z.number().default(0), + fmYn: z.string().default(""), + utztnCpct: z.number().default(0), + utztnUsg: z.string().default(""), + grssClfg: z.number().default(0), + combResdch: z.number().default(0), + trbt: z.number().default(0), + bod: z.number().default(0), + smll: z.number().default(0), + crmty: z.number().default(0), + tn: z.number().default(0), + tph: z.number().default(0), + ph: z.number().default(0), + clIonQnt: z.number().default(0), + cdtnv: z.number().default(0), + emsnExitTp: z.number().default(0) + }).default({}) + }) + ).default([]) +}); + +// export type customHtdfBdst = Omit<bdstAll, 'reuseBuilding'> & { +// reuseBuilding: htdfReuseBuilding[]; +// }; + +export type customHtdflBdst =z.infer<typeof hdtflZod>; + +// 타입을 조드로 만들어가 하는ㅓㄹ로 테트 +export type htdflReuseBuilding={ + bdstRuseFcltPk: number|undefined + bdstInfoFk: number|undefined + instlCmptnDt: Date| undefined; + instlCst: number|undefined + operMngCd: string, + anlOperCst: number|undefined + instlCstSprtYn:string| undefined; + instlCstSprtAmt: number|undefined + grntchBdstCertYn:string| undefined; + grntchBdstCertYr: string| undefined; + grntchBdstCertNo:string| undefined; + grntchBdstCertGrd:string| undefined; + crgRdctYn:string + crgRdctBss:string| undefined; + crgRdctAmt: number|undefined + ruseFcltFlg:string + bdstUsgCd: number|undefined + lawTrgtYn:string + htdflObj:htdflObj +} + +export type htdflObj = { + htdflFcltPk: number + bdstRuseFcltFk: number + etgtType: string + fclCpct: number|undefined + plwtYn: string + orgwtWtritSpt: number | undefined + orgwtOcrnProcs: string + wtritEntrcTp: number | undefined + amtgnr: number | undefined + prcsProcsYn: string + prcsFcltCpct: number | undefined + fmYn: string + utztnCpct: number | undefined + utztnUsg: string + grssClfg: number | undefined + combResdch: number | undefined + trbt: number| undefined + bod: number| undefined + smll: number| undefined + crmty: number| undefined + tn: number| undefined + tph: number| undefined + ph: number| undefined + clIonQnt: number| undefined + cdtnv: number| undefined + emsnExitTp:number| undefined + } export type htdflFacState = { htdfl: { isInit: boolean; upHeadList: TableUpperProps[]; - htdflOfObject: bdstType[]; + htdflRes: customHtdflBdst[]; }; }; type htdflFacSActions = { - decrementList: () => void; + initHtdfl: (txt:string|undefined) => void; }; +const htdflRes: customHtdflBdst[] = []; + + export type htdflFacType = htdflFacState & htdflFacSActions; export const htdflFacStateExport: htdflFacState = { htdfl: { isInit: false, upHeadList: upHeadList, - htdflOfObject: htdflOfObject, + htdflRes: htdflRes, }, }; + +const initFetch = async (txt: string | undefined) => { + return await getFectch( + "wr", + `/drain/facilityList/1/20/0` //+ (txt ? `/${txt}` : "") + ); +}; export const htdflFacActionsExport: (set: any) => htdflFacSActions = ( set: any ) => { return { - decrementList: () => - set((state: htdflFacState) => { - return { - htdfl: { - upHeadList: state.htdfl.upHeadList, - rainOfObject: state.htdfl.htdflOfObject.slice( - 0, - state.htdfl.htdflOfObject.length - 1 - ), - }, - }; - }), + initHtdfl: async (txt: string|undefined) =>{ + + try { + const res = await initFetch(txt); + set((state: htdflFacState) => { + return { + ...state, + htdfl: { + ...state.htdfl, + htdflRes: res, + isInit: false, + + }, + }; + }) + } catch (error) { + console.log(error); + } + }, }; }; diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx index 568eb6a2e..bb2d5b482 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx @@ -91,7 +91,7 @@ export type chgBuilding={ } -export type RainyBuilding = { +export type bdstAll = { bdstInfoPk: number|null; ctpvCd: number; sggCd: number; @@ -100,11 +100,16 @@ export type RainyBuilding = { frstArchPrmsnDt: Date; archArea: string; archChgArea: number; - reuseBuilding: reuseBuilding[]; + reuseBuilding: rainReuseBuilding[]; chgBuilding:chgBuilding[] }; -export type reuseBuilding = { +export type customRainBdst = Omit<bdstAll, 'reuseBuilding'> & { + reuseBuilding: rainReuseBuilding[]; +}; + + +export type rainReuseBuilding = { lawTrgtYn: string|undefined; bdstUsgCd: number|undefined; bdstRuseFcltPk: number; @@ -156,10 +161,10 @@ export const upHeadList: TableUpperProps[] = [ { id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 }, ]; -const rainRes: RainyBuilding[] = []; +const rainRes: customRainBdst[] = []; - const regRainForm:RainyBuilding = { + const regRainForm:customRainBdst = { ctpvCd: 0, sggCd: 0, bdstNm: "", @@ -218,16 +223,16 @@ export type rainFacState = { isInit: boolean; upHeadList: TableUpperProps[]; selectYN: selectArray[]; - rainRes: RainyBuilding[]; - regRainForm:RainyBuilding, + rainRes: customRainBdst[]; + regRainForm:customRainBdst, }; }; type rainFacSActions = { init: (txt:string|undefined) => void; rainSearTxt: (txt:string) => void; - rainReg: (data: RainyBuilding) => void; - rainUpdate: (data: RainyBuilding) => void; + rainReg: (data: customRainBdst) => void; + rainUpdate: (data: customRainBdst) => void; }; export type rainFacType = rainFacState & rainFacSActions; @@ -288,7 +293,7 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = ( console.log("error", erTxt) } }, - rainReg: async (data: RainyBuilding) => { + rainReg: async (data: customRainBdst) => { try { const res = await postFectch("/reuseFc/rainyInfo", data); if(res.ok){ @@ -309,7 +314,7 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = ( } finally { } }, - rainUpdate: async (data: RainyBuilding) => { + rainUpdate: async (data: customRainBdst) => { try { console.log("data ", data) const res = await putFectch("/reuseFc/rainyInfo", data); diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx index 3aec87699..0694fcd2c 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx @@ -1,5 +1,5 @@ -import { getFectch } from "@/components/lib/api"; -import { upHeadList, type chgBuilding, type TableUpperProps } from "../rainReg"; +import { getFectch, postFectch, putFectch } from "@/components/lib/api"; +import { upHeadList, type bdstAll, type chgBuilding, type TableUpperProps } from "../rainReg"; import { rswtBdstType } from "@/app/store/common/code"; import { z } from "zod"; @@ -10,7 +10,7 @@ export const rswtZod = z.object({ sggCd: z.number().default(0), daddr: z.string().default(""), bdstNm: z.string().default(""), - frstArchPrmsnDt: z.coerce.date().default(() => new Date()), + frstArchPrmsnDt: z.date().default(() => new Date()), archChgPrmsnDt: z.coerce.date().nullish().default(null), archArea: z.number().default(0), @@ -29,7 +29,7 @@ export const rswtZod = z.object({ instlCstSprtAmt: z.number().default(0), grntchBdstCertYn: z.string().default(""), - grntchBdstCertYr: z.string() + grntchBdstCertYr: z.string().max(4, "4자리 연도를 입력하세요") .regex(/^\d{4}$/, "4자리 연도를 입력하세요") .default(""), grntchBdstCertNo: z.string().default(""), @@ -61,19 +61,12 @@ export const rswtZod = z.object({ -export type RswtBuilding = { - bdstInfoPk: number; - ctpvCd: number; - sggCd: number; - bdstNm: string; - daddr: string; - frstArchPrmsnDt: Date; - archArea: string; - archChgArea: number; +export type customRswtBdst = Omit<bdstAll, 'reuseBuilding'> & { reuseBuilding: rswtReuseBuilding[]; - chgBuilding: chgBuilding[]; }; + + export type rswtReuseBuilding = { bdstRuseFcltPk: number; bdstInfoFk: number; @@ -106,18 +99,19 @@ export type rswtrObj = { }; -rswtBdstType -const rswtRes: RswtBuilding[] = []; +const rswtRes: customRswtBdst[] = []; export type rswtFacState = { rswt: { isInit: boolean; upHeadList: TableUpperProps[]; - rswtRes: RswtBuilding[]; + rswtRes: customRswtBdst[]; }; }; type rswtFacSActions = { initRswt: (txt: string | undefined) => void; + rswtUpdate: (data: customRswtBdst) => void; + rswtReg: (data: customRswtBdst) => void; }; export type rswtFacType = rswtFacState & rswtFacSActions; @@ -155,5 +149,48 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = ( console.log(error); } }, + rswtUpdate: async (data: customRswtBdst) => { + try { + const res = await putFectch("/reuseFc/waterreuseFc", data); + if(res.ok){ + alert(" 수정이 완료되었습니다.") + } + + const rswtRes = await initFetch(undefined); + set((state: rswtFacState) => ({ + ...state, + rain: { + ...state.rswt, + rswtRes: rswtRes, + isInit: false, + }, + })); + } catch (errorUpdate) { + alert("업데이트 오류입니다. " + (errorUpdate instanceof Error ? errorUpdate.message : "")); + } finally { + } + }, + rswtReg: async (data: customRswtBdst) => { + try { + const res = await postFectch("/reuseFc/waterreuseFc", data); + if(res.ok){ + alert(" 등록이 완료되었습니다.") + } + const rainRes = await initFetch(undefined); + set((state: rswtFacState) => ({ + ...state, + rain: { + ...state.rswt, + rswtRes: rswtRes, + isInit: false, + }, + })); + } catch (e) { + console.log("e", e); + alert("등록 오류입니다."); + } finally { + } + }, + }; }; diff --git a/apps/wr/components/lib/config/index.ts b/apps/wr/components/lib/config/index.ts index 24352c2f3..e6640eac0 100644 --- a/apps/wr/components/lib/config/index.ts +++ b/apps/wr/components/lib/config/index.ts @@ -3,7 +3,7 @@ const LOCAL_PORT = "3000"; const DEV_PORT = "8880"; -const DEV_PORT_COMMON = "8881"; // common +const DEV_PORT_COMMON = "8882"; // common export const LOCAL_URL_WR = `http://localhost:${LOCAL_PORT}/api/v1`; export const DEV_URL_WR = `http://192.168.1.193:${DEV_PORT}/api/v1`; diff --git a/apps/wr/components/lib/func/commom.ts b/apps/wr/components/lib/func/commom.ts index d9b2bbdb5..c5134324f 100644 --- a/apps/wr/components/lib/func/commom.ts +++ b/apps/wr/components/lib/func/commom.ts @@ -1,5 +1,5 @@ import type { comCodeState, selectArray } from "@/app/store/common/code"; -import type { RainyBuilding } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import type { bdstAll } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; @@ -20,19 +20,27 @@ export const getCity = (val: string, sggCd: selectArray[]) => { // cd text 넣기 export const tableData = ( data: any,code:comCodeState)=>{ const chCode = code.code; - return data?.map((item: { sggCd: string; ctpvCd: string; reuseBuilding: { lawTrgtYn: any , bdstUsgCd:any}[]; }) => { + let returnData = {}; const sggText = chCode.sggCd.find( (cd) => cd.val === Number(item.sggCd) )?.text; const cityText = chCode.cityCd.find( (cd) => cd.val === Number(item.ctpvCd) )?.text; - const bdsgUsgText = chCode.bdstUsgCd.find( - (cd) =>cd.val === item?.reuseBuilding[0]?.bdstUsgCd - )?.text - const lawTrgtYn = item?.reuseBuilding[0]?.lawTrgtYn - return { ...item, sggText: sggText, cityText: cityText ,bdsgUsgText:bdsgUsgText ,lawTrgtYn:lawTrgtYn}; + + if (item?.reuseBuilding?.length >0) { + const bdsgUsgText = chCode.bdstUsgCd.find( + (cd) =>cd.val === item?.reuseBuilding[0]?.bdstUsgCd + )?.text + const lawTrgtYn = item?.reuseBuilding[0]?.lawTrgtYn + + returnData= { ...item, sggText: sggText, cityText: cityText ,bdsgUsgText:bdsgUsgText ,lawTrgtYn:lawTrgtYn}; + }else{ + returnData= { ...item, sggText: sggText, cityText: cityText}; + } + + return returnData; }); } diff --git a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx similarity index 92% rename from apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx rename to apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx index 277c1f0cf..2062a2795 100644 --- a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx @@ -1,6 +1,6 @@ import { useWrStore } from "@/app/store"; import type { selectArray } from "@/app/store/common/code"; -import { selectClass, type RainyBuilding } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { selectClass, type bdstAll } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { getCity } from "@/components/lib/func/commom"; import type { objSearchType } from "@/components/ui/modal/bdstReg/component"; import { FormField, FormUi, DatePicker, SelectBox } from "@common/business_components"; @@ -8,7 +8,7 @@ import { Button, Input } from "@common/components"; import { useEffect, useRef, useState } from "react"; import { useFieldArray } from "react-hook-form"; -export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) { +export default function BdstReg({ form }: { form: any }) { const { code } = useWrStore((state) => { return state; }); @@ -50,21 +50,7 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) setObjSearch({...objSearch,sgg: val!=''?String(val):sgg }) }; - // useEffect(()=>{ - // console.log("18", ud); - // console.log("form", form.getValues()); - // const city =form?.getValues('ctpvCd') - // const sgg =form?.getValues('sggCd') - // console.log('city ㄴㄴㄴ ', city) - // console.log('sgg ', sgg) - // if(city>0 && sgg>0){ - // console.log(' if city ', city) - - // // form?.setValue('ctpvCd' , city) - // //form?.setValue('sggCd' , sgg) - // //setSelectSgg(getCity(city,code.sggCd)) - // } - // },[ud]) + useEffect(()=>{ const city =form.getValues('ctpvCd') const sgg =form.getValues('sggCd') @@ -73,12 +59,13 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) }, [selectSgg]) useEffect(() => { - const subscription = form.form?.watch((value) => { + console.log("form", form.getValues()); + const subscription = form.form?.watch((value: any) => { console.log('vale', value) }); return () => subscription?.unsubscribe(); - }, [form]); + }, [form.form]); const safeDate = (value: any): Date | undefined => { @@ -203,7 +190,7 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) <DatePicker mode={"single"} field={{ - value: new Date(field.value), + value: field.value|| new Date(), onChange: (date: Date | undefined) => field.onChange(date), }} diff --git a/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx b/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx index 4efff1a39..dff971bb9 100644 --- a/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx @@ -6,104 +6,82 @@ import { FormUi, SelectBox, } from "@common/business_components/ui"; -import { Input } from "@common/components/ui"; +import { Button, Input } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { useWrStore } from "@/app/store"; import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { hdtflZod, type customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; +import { useEffect } from "react"; -const formSchema = z.object({ - etgtType: z.string().min(2).max(50), - fclCpct: z.string(), - plwtYn: z.string(), - orgwtwtritspt: z.string(), - orgwtocrnprocs: z.string(), - wtritentrctp: z.string(), - amtgnr: z.string(), - prcsfcltcpct: z.string(), - utztnqnt: z.string(), - utztnusgcd: z.string(), -wntUntprc: z.string().min(1), - grssClfg: z.string().min(1), - tn: z.string().min(1).optional(), - combResdch: z.string().min(1).optional(), - tp: z.string().min(1).optional(), - trbt: z.string().min(1).optional(), - ph: z.string().min(1).optional(), - bod: z.string().min(1).optional(), - clIonQnt: z.string().min(1).optional(), - smll: z.string().min(1).optional(), - cdtnv: z.string().min(1).optional(), - crmty: z.string().min(1).optional(), - emsnexittp: z.string(), -}); -export function HtdflRegForm() { - const { rswt } = useWrStore((state) => state); +export function HtdflRegForm({ + htdflForm, + isModal +} :{ + htdflForm:customHtdflBdst; + isModal: boolean; +} ) { + const {code} = useWrStore((state) => state); - const form = useForm<z.infer<typeof formSchema>>({ - resolver: zodResolver(formSchema), - defaultValues: { - etgtType: "", - fclCpct: "", - plwtYn: "", - orgwtwtritspt: "", - orgwtocrnprocs: "", - wtritentrctp: "", - amtgnr: "", - prcsfcltcpct: "", - utztnqnt: "", - utztnusgcd: "", - wntUntprc: "", - grssClfg: "", - tn: "", - combResdch: "", - tp: "", - trbt: "", - ph: "", - bod: "", - clIonQnt: "", - smll: "", - cdtnv: "", - crmty: "", - emsnexittp: "", - }, + const defaultValues: z.infer<typeof hdtflZod> = hdtflZod.parse({}); + + const form = useForm<z.infer<typeof hdtflZod>>({ + resolver: zodResolver(hdtflZod), + defaultValues:defaultValues, }); - // 2. Define a submit handler. - function onSubmit(values: z.infer<typeof formSchema>) { + // 2. Define a submit handler.hdtflZod + function onSubmit(values: z.infer<typeof hdtflZod>) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values); } - const onSelectValue = (val: string) => { + const onSelectValue = (val: string | number) => { console.log(val); }; + +useEffect(() => { + if(hdtflZod) + console.log("hdtflZod", hdtflZod); + const parsedData = hdtflZod.safeParse(htdflForm); + if (parsedData.success) { + form.reset(parsedData.data); + } else { + console.error("Invalid data for form reset", parsedData.error); + } + }, [htdflForm]); + + + return ( - <div className=""> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> {/* <div className="flex justify-between items-center mx-3"> */} <div> - <div> - <h1 className="pl-3 text-xl ">○온배수 시설 정보</h1> + <div className="grid grid-cols-12"> + <h1 className="pl-3 text-xl col-span-10"> + ○온배수 시설 정보 + </h1> + <Button type="submit" className="mr-4 rounded-lg col-span-2"> + 저장 + </Button> </div> </div> - <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 "> - 시설현황 - </h1> + + <div className="grid grid-cols-6 gap-2 mt-4 pl-6"> <div className="col-span-2"> <FormField control={form.control} - name="etgtType" + name="reuseBuilding.0.htdflObj.etgtType" render={({ field }) => ( <FormUi label="발전유형"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -115,14 +93,16 @@ export function HtdflRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="fclCpct" + name="reuseBuilding.0.htdfObj.fclCpct" // 이름 이상함. render={({ field }) => ( <FormUi label="설비용량"> <Input className="" placeholder="1,000,000" - type="" + type="text" {...field} + value={field.value ?? ""} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -131,12 +111,12 @@ export function HtdflRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="plwtYn" + name="reuseBuilding.0.htdfObj.plwtYn" render={({ field }) => ( <FormUi label="담수화 여부"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -155,12 +135,12 @@ export function HtdflRegForm() { <div className="col-span-5 pl-6"> <FormField control={form.control} - name="orgwtwtritspt" + name="reuseBuilding.0.htdfObj.orgwtwtritspt" render={({ field }) => ( <FormUi label="원수취수 지점"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -190,11 +170,10 @@ export function HtdflRegForm() { name="wtritentrctp" render={({ field }) => ( <FormUi label="취수구 온도"> - <SelectBox - selectClass={selectClass} - label={""} - selectArray={rswt.selectYN} - onSelectValue={onSelectValue} + <Input + className="" + placeholder="1,000,000" + type="" {...field} /> </FormUi> @@ -258,7 +237,7 @@ export function HtdflRegForm() { <SelectBox selectClass={selectClass} label={""} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -291,7 +270,7 @@ export function HtdflRegForm() { <SelectBox selectClass={selectClass} label={""} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -464,6 +443,5 @@ export function HtdflRegForm() { </div> </form> </Form> - </div> ); } diff --git a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx index 659297d4e..ac5884f4b 100644 --- a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx @@ -6,7 +6,7 @@ import { bdstDefZod, rainDefZod, rainZod, - type RainyBuilding, + type customRainBdst, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { DatePicker, FormUi } from "@common/business_components"; import { Form, FormField, SelectBox } from "@common/business_components/ui"; @@ -15,7 +15,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; import { useForm, type UseFormReturn } from "react-hook-form"; import { z } from "zod"; -import BdstReg from "../bdstReg/component"; +import BdstReg from "../bdstReg/bdstReg"; export const formToObj = ( isModal: boolean, @@ -41,7 +41,7 @@ export function RainRegForm({ rainForm, isModal, }: { - rainForm: RainyBuilding; + rainForm: customRainBdst; isModal: boolean; }) { @@ -93,7 +93,7 @@ export function RainRegForm({ }, [form]); const objToForm = (raw: z.infer<typeof formSchema>) => { - let regRainForm: RainyBuilding; + let regRainForm: customRainBdst; // 1. 기본 정보 정리 const obj = !rainForm ? rain.regRainForm : rainForm; @@ -175,10 +175,10 @@ export function RainRegForm({ </Button> </div> </div> - {isModal&&rainForm!=undefined ? <BdstReg form={form} ud={rainForm}/> : <></>} + {isModal&&rainForm!=undefined ? <BdstReg form={form}/> : <></>} {isModal ? ( <h1 className="pl-3 text-xl col-span-10 mt-4 "> - ○ 빗물이용시설 운영정보{" "} + ○ 빗물이용시설 정보{" "} </h1> ) : ( <></> diff --git a/apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx similarity index 80% rename from apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx rename to apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx index 13871806a..e6bbc0aaf 100644 --- a/apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx @@ -10,44 +10,61 @@ import { import { Button, Input } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; import { useFieldArray, useForm } from "react-hook-form"; -import { z } from "zod"; +import { number, z } from "zod"; import { useWrStore } from "@/app/store"; import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { rswtZod, - type RswtBuilding, + type customRswtBdst, } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import { useEffect } from "react"; +import BdstReg from "../bdstReg/bdstReg"; export function RswtrRegForm({ rswtForm, isModal, }: { - rswtForm: RswtBuilding; + rswtForm: customRswtBdst; isModal: boolean; }) { - const { rswt, code } = useWrStore((state) => state); + const { rswt, code ,rswtUpdate,rswtReg} = useWrStore((state) => state); + + + const defaultValues: z.infer<typeof rswtZod> = rswtZod.parse({}); + const form = useForm<z.infer<typeof rswtZod>>({ resolver: zodResolver(rswtZod), - }); + defaultValues: defaultValues, + + }) // 2. Define a submit handler. function onSubmit(values: z.infer<typeof rswtZod>) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values); + + + if (isModal) { + // regRainForm.bdstInfoPk = null; + rswtReg(values); + } else { + rswtUpdate(values); + } + } const onSelectValue = (val: string | number) => { console.log(val); + }; function cleanRswtData(raw: any): z.infer<typeof rswtZod> { return { ...raw, - frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt), + frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt||null), archChgPrmsnDt: raw?.archChgPrmsnDt ? new Date(raw?.archChgPrmsnDt) : null, reuseBuilding: (raw?.reuseBuilding || []).map((item: any) => ({ ...item, @@ -66,6 +83,7 @@ export function RswtrRegForm({ useEffect(() => { if(rswtZod) + console.log("rswtForm", rswtForm); form.reset( cleanRswtData(rswtForm)) }, [rswtForm]); @@ -76,13 +94,28 @@ useEffect(() => { <form onSubmit={form.handleSubmit(onSubmit)}> {/* <div className="flex justify-between items-center mx-3"> */} <div> - <div> - <h1 className="pl-3 text-xl ">○ 중수도 시설 운영정보</h1> + <div className="grid grid-cols-12"> + <h1 className="pl-3 text-xl col-span-10"> + ○ 중수도 시설 운영정보 + </h1> <Button type="submit" className="mr-4 rounded-lg col-span-2"> 저장 </Button> </div> </div> + + {isModal && rswtForm != undefined ? ( + <BdstReg form={form} /> + ) : ( + <></> + )} + {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> @@ -102,7 +135,7 @@ useEffect(() => { : new Date(), // Provide a default Date value onChange: (date) => field.onChange(date), }} - selectClass={selectClass} + selectClass={""} /> </FormUi> )} @@ -120,7 +153,7 @@ useEffect(() => { placeholder="1,000,000" type="text" value={field.value ?? ""} - onChange={field.onChange} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -138,8 +171,8 @@ useEffect(() => { className="" placeholder="1,000,000" type="" - value={field.value ?? ""} - onChange={field.onChange} + value={field.value ?? 0} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -156,8 +189,8 @@ useEffect(() => { className="" placeholder="1,000,000" type="text" - value={field.value ?? ""} - onChange={field.onChange} + value={field.value ?? 0} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -183,7 +216,7 @@ useEffect(() => { selectClass={selectClass} selectArray={code.orgwtKndCd} onSelectValue={field.onChange} - value={field.value ??code.orgwtKndCd[0]?.val } + value={field.value ?? code.orgwtKndCd[0]?.val} /> </FormUi> )} @@ -199,8 +232,8 @@ useEffect(() => { className="" placeholder="1,000,000" type="" - value={field.value ??""} - onChange={field.onChange} + value={field.value ?? ""} + onChange={field.onChange} /> </FormUi> )} @@ -228,9 +261,8 @@ useEffect(() => { selectClass={selectClass} label={""} selectArray={code.yn} - onSelectValue={onSelectValue} - value={field.value ??code.yn[0]?.val } - onChange={field.onChange} + onSelectValue={field.onChange} + value={field.value ?? code.yn[0]?.val} /> </FormUi> )} @@ -246,8 +278,10 @@ useEffect(() => { className="" placeholder="1,000,000" type="" - value={field.value ??"" } - onChange={field.onChange} + value={field.value ?? ""} + onChange={(e) => { + field.onChange(Number(e.target.value)); + }} /> </FormUi> )} @@ -270,9 +304,8 @@ useEffect(() => { selectClass={selectClass} label={""} selectArray={code.yn} - onSelectValue={onSelectValue} - value={field.value ??code.yn[0]?.val } - onChange={field.onChange} + onSelectValue={field.onChange} + value={field.value ?? code.yn[0]?.val} /> </FormUi> )} @@ -290,7 +323,7 @@ useEffect(() => { type="" {...field} value={field.value ?? ""} - onChange={field.onChange} + onChange={field.onChange} /> </FormUi> )} @@ -306,8 +339,8 @@ useEffect(() => { className="" placeholder="ab1234678" type="" - value={field.value ??""} - onChange={field.onChange} + value={field.value ?? ""} + onChange={field.onChange} /> </FormUi> )} @@ -319,7 +352,13 @@ useEffect(() => { name="reuseBuilding.0.grntchBdstCertGrd" render={({ field }) => ( <FormUi label="인증등급"> - <Input className="" placeholder="A" type="" value={field.value ??"" } onChange={field.onChange} /> + <Input + className="" + placeholder="A" + type="" + value={field.value ?? ""} + onChange={field.onChange} + /> </FormUi> )} /> diff --git a/apps/wr/components/ui/modal/bdstReg/component.tsx b/apps/wr/components/ui/modal/bdstReg/component.tsx index 541b7e53d..9ea411248 100644 --- a/apps/wr/components/ui/modal/bdstReg/component.tsx +++ b/apps/wr/components/ui/modal/bdstReg/component.tsx @@ -3,40 +3,52 @@ import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page"; import { useWrStore } from "@/app/store"; import { selectClass, - type RainyBuilding, + type bdstAll, + type customRainBdst, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components"; import { Button, Input, Label } from "@common/components"; import { useEffect, useState } from "react"; import { RainRegForm } from "../../form/fcltReg/rainReg/component"; import { getCityCd, type selectArray } from "@/app/store/common/code"; -import { getCity } from "@/components/lib/func/commom"; -import { RswtrRegForm } from "../../form/fcltReg/rswtrReg/component"; +import { getCity, tableData } from "@/components/lib/func/commom"; +import { RswtrRegForm } from "../../form/fcltReg/rswtrReg/RswtrRegForm"; import { HtdflRegForm } from "../../form/fcltReg/htdflReg/component"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; export type objSearchType = { sgg: string|number; city: string|number; }; +//RNB(빗물), RST(중수도), HTB(온배수) + type MoType = 'RNB' | 'RST' | 'HTB'; // 여기에 'htdf' 추가 + type BdstTypeMap = { + RNB: customRainBdst; + RST: customRswtBdst; + HTB: customRswtBdst; // 해야해// 아직 아노딤 +}; -export function BdstReg({moType}:{moType:string} ) { + interface BdstRegProps<T extends MoType> { + moType: T; +} + +export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) { const { rain, code, bdst,findBdst } = useWrStore((state) => { return state; }); - - const [bdstTable, setbdstTable] = useState<RainyBuilding[]>(); - const [rainBdstForm, setRainBdstForm] = useState<RainyBuilding>({} as RainyBuilding); + const [bdstTable, setbdstTable] = useState<BdstTypeMap[T][]>(); + const [rainBdstForm, setRainBdstForm] = useState<BdstTypeMap[T]>({} as BdstTypeMap[T]); const [searchTxt, setSearchTxt] = useState<string>() - const [selectSgg, setSelectSgg] = useState<selectArray[] | undefined>() + const [selectSgg, setSelectSgg] = useState<selectArray[] | []>() const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""}); - const getSelCity = (val: string) => { - const data= getCity(val,code.sggCd) - setSelectSgg(data); - - setObjSearch({ city:val , sgg:''}) - + const getSelCity = (val: string | number) => { + const cityValue = String(val); // Ensure val is treated as a string + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + + setObjSearch({ city: cityValue, sgg: '' }); }; const getSgg = (val: string | number) => { @@ -54,33 +66,26 @@ export function BdstReg({moType}:{moType:string} ) { data = objSearch.sgg } - findBdst(String(data), searchTxt || "","RNB" ) + //RNB(빗물), RST(중수도), HTB(온배수) + findBdst(String(data), searchTxt || "",moType ) } useEffect(() => { if (code.sggCd.length > 0) { - const table = bdst?.bdstBase?.map((item) => { - const sggText = code.sggCd.find( - (cd) => cd.val === Number(item.sggCd) - )?.text; - const cityText = code.cityCd.find( - (cd) => cd.val === Number(item.ctpvCd) - )?.text; - return { ...item, sggText: sggText, cityText: cityText }; - }); - - - setbdstTable(table); - } + + setbdstTable( tableData(bdst.bdstBase, { code })); + } }, [code, bdst]); const tableClick: (val: number | undefined) => void = (val) => { if(val!==undefined && bdst?.bdstBase.length>0){ - const data =bdst?.bdstBase[val] - setRainBdstForm(data); + const data:BdstTypeMap[T] =bdst?.bdstBase[val] + if (data) { + setRainBdstForm(data); + } } } const nodeList = headMakeColSpan(bdst.moUpHeadList); @@ -91,7 +96,7 @@ export function BdstReg({moType}:{moType:string} ) { className="col-span-3 " label={"시도"} selectClass={selectClass} - selectArray={code.cityCd} + selectArray={code.cityCd || []} onSelectValue={getSelCity} > {""} @@ -107,13 +112,7 @@ export function BdstReg({moType}:{moType:string} ) { </SelectBox> <Label className="w-20 text-base text-gray-600 mt-4 text-right">건축물명</Label> <Input className="w-full h-full text-2xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={(e) => setSearchTxt(e.target.value)}/> - {/* <SearchInput - className="col-span-3 col-start-8" - label="건물명" - textValue={searchTxt} - setText={ setSearchTxt} - - /> */} + <Button className="rounded-lg" onClick={()=>{searchBdst(searchTxt)}}>조회</Button> </div> <div className="border-t border-gray-300 my-4"></div> @@ -135,9 +134,9 @@ export function BdstReg({moType}:{moType:string} ) { <div className="border-t border-gray-300 my-4"></div> <ScrollArea className="h-[60vh]"> <div> - {moType === 'rain'? + { moType === 'RNB'? <RainRegForm rainForm={rainBdstForm} isModal={true} /> - :moType==='rswt'?<RswtrRegForm></RswtrRegForm> + :moType==='RST'?<RswtrRegForm rswtForm={rainBdstForm } isModal={true}></RswtrRegForm> :<HtdflRegForm></HtdflRegForm> }