From 96828c175e6fab85a34c8e5f3304327cb185562e Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 19 Mar 2025 17:37:29 +0900 Subject: [PATCH] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/ruseFcltMng/fcltReg/pbnstReg/page.tsx | 18 +- .../ruseFcltMng/fcltReg/pbnstReg/index.tsx | 397 +++++++++++------- apps/wr/app/store/store.tsx | 3 +- .../fcltReg/pbnstReg/mngReg/component.tsx | 218 +++++++--- apps/wr/package.json | 1 + 5 files changed, 402 insertions(+), 235 deletions(-) diff --git a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx index e98ef70b3..afa4f77a2 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx @@ -1,5 +1,4 @@ "use client"; - import { ScrollArea, SearchDiv, @@ -11,11 +10,14 @@ import { useWrStore } from "../../../store"; import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/component"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components"; import { PbnstMngForm} from "@/components/ui/form/fcltReg/pbnstReg/mngReg/component"; +import { useState } from "react"; export default function PublicReuseFaciltyInsert() { const { pubFac } = useWrStore((state) => state); const { pubFacHeadList, publicReuseFacilityData } = pubFac; + + const [swtrmtFcltFk, setSwtrmtFcltFk] = useState() const searchDiv = "하수재이용시설 "; const selectBox = [ { text: "서울하수처리시설", val: "1_hasu" }, @@ -28,6 +30,12 @@ export default function PublicReuseFaciltyInsert() { const onSelectValue = (val: string) => { console.log(val); }; + const cellClick=(val:number)=>{ + + if(publicReuseFacilityData[val])setSwtrmtFcltFk(publicReuseFacilityData[val]?.swtrmtFcltFk) + + } + return ( <>
@@ -51,14 +59,14 @@ export default function PublicReuseFaciltyInsert() {
- + children={undefined} cellClick={cellClick + } />
@@ -71,7 +79,7 @@ export default function PublicReuseFaciltyInsert() { - + diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx index e801a082d..d589e7ab9 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx @@ -1,178 +1,249 @@ import type { TableUpperProps } from "../rainReg"; export type TableProps = { - id: string; - title: string; -} + id: string; + title: string; +}; -export type selectLabel={ - text:string, - val:string -} +export type selectLabel = { + text: string; + val: string; +}; + +export type publicReuseFacilityType = { + sido: string; + sigungo: string; + facilityName: string; + location: string; + locationgubun: string; + facilityCapacity: string; + yn?: string; + authoDay?: string; + area?: string; + reuse?: string; + register?: string; + swtrmtFcltFk: string; +}; +type fcltOperInfoType = { + mng: string; + subCo: string; + startDay: string; + endDay: string; + pbnstRuseFcltPk: string; +}; + +type ruseFcltType = { + swtrmtFcltFk: string; + pbnstRuseFcltPk:string; + fcltNm:string; + fcltCpct: number; + swtrmtCpct: number; +}; +const selectLabel: selectLabel[] = [{ text: "test", val: "1" }]; + +const pubFacHeadList: TableProps[] = [ + { id: "sido", title: "시도" }, + { id: "sigungo", title: "시군구" }, + { id: "facilityName", title: "시설명" }, + { id: "location", title: "위치" }, + { id: "locationgubun", title: "지역구분" }, + { id: "facilityCapacity", title: "시설용량" }, + { id: "yn", title: "재이용여부" }, + { id: "authoDay", title: "등록여부" }, +]; + +const ruseFclt: ruseFcltType[] = [ + { swtrmtFcltFk: "a", fcltCpct: 1000000, swtrmtCpct: 1000000 ,pbnstRuseFcltPk:'aa',fcltNm:'하수1'}, + { swtrmtFcltFk: "a", fcltCpct: 1300000, swtrmtCpct: 1300000 ,pbnstRuseFcltPk:'ab',fcltNm:'하수2'}, + + { swtrmtFcltFk: "b", fcltCpct: 2000000, swtrmtCpct: 2000000 ,pbnstRuseFcltPk:'bb',fcltNm:'재이용1'}, + { swtrmtFcltFk: "b", fcltCpct: 2300000, swtrmtCpct: 2300000 ,pbnstRuseFcltPk:'ba',fcltNm:'재이용2'}, +]; +const pubMngUpHeadList: TableUpperProps[] = [ + { id: "mng", title: "운영방식" }, + { id: "subCo", title: "대행업체" }, + { id: "startDay", title: "시작일", upName: "upChangeRe", upSequnce: 1 }, + { id: "endDay", title: "종료일", upName: "upChangeRe", upSequnce: 2 }, +]; +const date = new Date(); +const fcltOperInfo: fcltOperInfoType[] = [ + { + mng: "자체운영", + subCo: "-", + startDay: "2024-11-11", + endDay: "2024-11-20", + pbnstRuseFcltPk: "aa", + }, + { + mng: "자체운영", + subCo: "한국수자원공사", + startDay: "2022-11-11", + endDay: "2024-09-13", + pbnstRuseFcltPk: "aa", + }, + { + mng: "자체운영", + subCo: "스타벅스", + startDay: "2023-11-11", + endDay: "2024-02-19", + pbnstRuseFcltPk: "bb", + }, +]; +const publicReuseFacilityData: publicReuseFacilityType[] = [ + { + sido: "서울", + sigungo: "강남구", + facilityName: "난지", + location: "경기도 고양시 덕양구 대차로 4가", + locationgubun: "500", + facilityCapacity: "800,000", + reuse: "Y", + register: "Y", + swtrmtFcltFk: "a", + }, + { + sido: "서울", + sigungo: "강남구", + facilityName: "여의도 중앙", + location: "경기도 고양시 덕양구 대차로 4가", + locationgubun: "500", + facilityCapacity: "800,000", + reuse: "Y", + register: "Y", + swtrmtFcltFk: "b", + }, + { + sido: "서울", + sigungo: "강남구", + facilityName: "너의 마음속", + location: "경기도 고양시 덕양구 대차로 4가", + locationgubun: "500", + facilityCapacity: "800,000", + yn: "Y", + authoDay: "2012", + area: "123", + swtrmtFcltFk: "c", + }, +]; + +const erctUswtrCd: selectLabel[] = [ + { text: "처리장연계", val: "1_erct" }, + { text: "자체/연계", val: "2_erct" }, + { text: "자체처리", val: "3_erct" }, +]; -type publicReuseFacilityData = { - sido: string, - sigungo: string, - facilityName: string, - location: string, - locationgubun: string, - facilityCapacity: string, - yn?: string, - authoDay?: string, - area?: string, - reuse?: string, - register?: string - - -} -type pubMngFacData = { - mng: string, - subCo: string, - startDay: string, - endDay: string, -} -const selectLabel:selectLabel[]=[ - {text:'test',val:'1'} -] +const cyclCd: selectLabel[] = [ + { text: "1차", val: "1_cyc" }, + { text: "2차", val: "2_cyc" }, +]; +const seCd: selectLabel[] = [ + { text: "신규", val: "1_Se" }, + { text: "진행", val: "2_Se" }, +]; +const buseCd: selectLabel[] = [ + { text: "재정", val: "1_bus" }, + { text: "만루", val: "2_bus" }, +]; +const rprcsCd: selectLabel[] = [ + { text: "물리적처리", val: "1_rprc" }, + { text: "생물학적처리", val: "2_rprc" }, +]; +const buseMet: selectLabel[] = [ + { text: "재정", val: "1_busemet" }, + { text: "민간투자", val: "2_busemet" }, + { text: "자체", val: "3_busemet" }, +]; +const rprcLoCd: selectLabel[] = [ + { text: "내부", val: "1_rprc" }, + { text: "외부", val: "2_rprc" }, +]; - -const pubFacHeadList:TableProps[] = [ - { id: "sido", title: "시도"}, - { id: "sigungo", title: "시군구"}, - { id: "facilityName", title: "시설명"}, - { id: "location", title: "위치"}, - { id: "locationgubun", title: "지역구분"}, - { id: "facilityCapacity", title: "시설용량"}, - { id: "yn", title: '재이용여부' }, - { id: "authoDay", title: '등록여부'}]; - - - const pubMngUpHeadList:TableUpperProps[] = [ - { id: "mng", title: "운영방식"}, - { id: "subCo", title: "대행업체"}, - { id: "startDay", title: "시작일", upName:'upChangeRe' , upSequnce:1 }, - { id: "endDay", title: "종료일", upName:'upChangeRe' , upSequnce:2 }, - ]; - const date = new Date() - const pubMngFacData:pubMngFacData[] = [ - { mng:"자체운영", subCo:"-",startDay: '2024-11-11' ,endDay:'2024-11-20'}, - { mng:"자체운영", subCo:"한국수자원공사",startDay: '2022-11-11' ,endDay:'2024-09-13'}, - { mng:"자체운영", subCo:"스타벅스",startDay: '2023-11-11' ,endDay:'2024-02-19'}, - ]; - const publicReuseFacilityData:publicReuseFacilityData[] = [ - { - sido: "서울", - sigungo: "강남구", - facilityName: "난지", - location: "경기도 고양시 덕양구 대차로 4가", - locationgubun: "500", - facilityCapacity: "800,000", - reuse: "Y", - register: "Y" - }, - { - sido: "서울", - sigungo: "강남구", - facilityName: "난지", - location: "경기도 고양시 덕양구 대차로 4가", - locationgubun: "500", - facilityCapacity: "800,000", - reuse: "Y", - register: "Y" - }, - { - sido: "서울", - sigungo: "강남구", - facilityName: "난지", - location: "경기도 고양시 덕양구 대차로 4가", - locationgubun: "500", - facilityCapacity: "800,000", - yn: "Y", - authoDay: "2012", - area:"123" - }, -] - - -const erctUswtrCd:selectLabel[]=[ - {text:'처리장연계',val:'1_erct'}, - {text:'자체/연계',val:'2_erct'}, - {text:'자체처리',val:'3_erct'}, -] - -const cyclCd :selectLabel[]= [ - { text: "1차", val: "1_cyc" }, - { text: "2차", val: "2_cyc" }, - ]; - const seCd :selectLabel[] = [ - { text: "신규", val: "1_Se" }, - { text: "진행", val: "2_Se" }, - ]; - const buseCd :selectLabel[]= [ - { text: "재정", val: "1_bus" }, - { text: "만루", val: "2_bus" }, - ]; - const rprcsCd :selectLabel[] = [ - { text: "물리적처리", val: "1_rprc" }, - { text: "생물학적처리", val: "2_rprc" }, - ]; - const buseMet :selectLabel[] = [ - { text: "재정", val: "1_busemet" }, - { text: "민간투자", val: "2_busemet" }, - { text: "자체", val: "3_busemet" }, - ]; - const rprcLoCd :selectLabel[] = [ - { text: "내부", val: "1_rprc" }, - { text: "외부", val: "2_rprc" }, - ]; - -export type pubFacState = {pubFac:{ +export type pubFacState = { + pubFac: { isInit: boolean; pubFacHeadList: TableProps[]; - pubMngUpHeadList:TableUpperProps[] - publicReuseFacilityData: publicReuseFacilityData[]; - selectLabel:selectLabel[]; - pubMngFacData:pubMngFacData[]; - erctUswtrCd:selectLabel[]; - cyclCd:selectLabel[]; - seCd:selectLabel[]; - buseCd :selectLabel[] - rprcsCd :selectLabel[] - buseMet :selectLabel[] - rprcLoCd:selectLabel[] -}} + pubMngUpHeadList: TableUpperProps[]; + publicReuseFacilityData: publicReuseFacilityType[]; + selectLabel: selectLabel[]; + erctUswtrCd: selectLabel[]; + cyclCd: selectLabel[]; + seCd: selectLabel[]; + buseCd: selectLabel[]; + rprcsCd: selectLabel[]; + buseMet: selectLabel[]; + rprcLoCd: selectLabel[]; + }; + pubMng:{ + //isInit:boolean; + fcltOperInfo: fcltOperInfoType[]; + ruseFclt:ruseFcltType[]; + } +}; type pubFacActions = { - decrementList: () => void -} + decrementList: () => void; + mngMainValue:(swtrmtFcltFk:string)=> void; + mngTableValue:(swtrmtFcltFk:string)=> void; +}; export type pubFacType = pubFacState & pubFacActions; -export const pubFacStateExport:pubFacState= {pubFac:{ - isInit:false, +export const pubFacStateExport: pubFacState = { + pubFac: { + isInit: false, pubFacHeadList: pubFacHeadList, - pubMngUpHeadList:pubMngUpHeadList, + pubMngUpHeadList: pubMngUpHeadList, publicReuseFacilityData: publicReuseFacilityData, - selectLabel:selectLabel, - pubMngFacData:pubMngFacData, - erctUswtrCd:erctUswtrCd, - cyclCd:cyclCd, - seCd:seCd, - buseCd:buseCd, - rprcsCd:rprcsCd, - buseMet:buseMet, - rprcLoCd:rprcLoCd -}} -export const pubFacActionsExport:(set:any)=>pubFacActions=(set: any) => { - return { - decrementList:()=>set( - (state:pubFacState) => { - return ( - {pubFac:{ - pubFacheadList: state.pubFac.pubFacHeadList, - publicReuseFacilityUper: - state.pubFac.publicReuseFacilityData.slice(0, state.pubFac.publicReuseFacilityData.length - 1) - }})} - ) - } -} + selectLabel: selectLabel, + erctUswtrCd: erctUswtrCd, + cyclCd: cyclCd, + seCd: seCd, + buseCd: buseCd, + rprcsCd: rprcsCd, + buseMet: buseMet, + rprcLoCd: rprcLoCd, + }, + pubMng:{ + // isInit: false, + fcltOperInfo: fcltOperInfo, + ruseFclt:ruseFclt + } +}; +export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => { + return { + decrementList: () => + set((state: pubFacState) => { + return { + pubFac: { + pubFacheadList: state.pubFac.pubFacHeadList, + publicReuseFacilityUper: state.pubFac.publicReuseFacilityData.slice( + 0, + state.pubFac.publicReuseFacilityData.length - 1 + ), + }, + }; + }), + mngMainValue:(swtrmtFcltFk:string)=> + set((state:pubFacState)=>{ + return{ + + pubMng:{ + ...state.pubMng, + ruseFclt:state.pubMng.ruseFclt.filter((item)=>item.swtrmtFcltFk===swtrmtFcltFk) + } + } + }), + mngTableValue:(pbnstRuseFcltPk:string)=> + set((state:pubFacState)=>{ + return{ + pubMng:{ + ...state.pubMng, + fcltOperInfo:state.pubMng.fcltOperInfo.filter((item)=>item.pbnstRuseFcltPk===pbnstRuseFcltPk) + } + } + }) + + + + }; +}; diff --git a/apps/wr/app/store/store.tsx b/apps/wr/app/store/store.tsx index 51a4dfef8..18395789a 100644 --- a/apps/wr/app/store/store.tsx +++ b/apps/wr/app/store/store.tsx @@ -3,6 +3,7 @@ import { pubFacActionsExport, pubFacStateExport, type pubFacState, + type pubFacType, } from "./ruseFcltMng/fcltReg/pbnstReg"; import { rainFacActionsExport, @@ -29,7 +30,7 @@ import { type htdflFacType, } from "./ruseFcltMng/fcltReg/htdflReg"; -export type WrStore = pubFacState & +export type WrStore = pubFacType & rainFacType & rswtFacType & matDmdType & diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/component.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/component.tsx index 30138af55..dd15691ba 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/component.tsx @@ -1,135 +1,217 @@ "use client"; import { SelectBox } from "@common/business_components"; -import { DatePicker, FileUpload, FormUi, UiTable } from "@common/business_components/ui"; +import { + DatePicker, + FileUpload, + FormUi, + UiTable, +} from "@common/business_components/ui"; import { Form, FormField } from "@common/business_components/ui/form"; import { Button, Input, TableHead, TableRow } from "@common/components"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; -import { z } from "zod"; +import { nullable, z } from "zod"; import { useWrStore } from "@/app/store"; -import { selectClass, type TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { + selectClass, + type TableUpperProps, +} from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -const formSchema = z.object({ - username: z.string().min(2).max(50), - facilityName: z.string().min(2).max(50), -}); - - - const headMakeColSpan = (upHeadList: TableUpperProps[]) => { - return (<> - { - upHeadList.map((head: TableUpperProps) => - (!head.upSequnce ? {head.title} : - head.upName === 'upChangeRe' && head.upSequnce === 1 ? {'운영대행기간'} : null))} - - - {upHeadList.map((head: TableUpperProps) => - (head.upName === 'upChangeRe' ? {head.title} : null))} - - ) +interface mainData { + swtrmtFcltFk: string; } -export function PbnstMngForm() { - const { pubFac } = useWrStore((state) => state); - const { pubMngUpHeadList, pubMngFacData,cyclCd} = pubFac; -const nodeList = headMakeColSpan(pubMngUpHeadList); +export function PbnstMngForm(swtrmtFcltFk: mainData) { + const { pubFac, pubMng, mngMainValue, mngTableValue } = useWrStore((state) => state); + const { pubMngUpHeadList, isInit } = pubFac; + const { fcltOperInfo, ruseFclt } = pubMng; + const [fcltSwtrm, setFcltSwtrm] = useState({ + text: "", + val: "", + fcltCpct: 0, + swtrmtCpct: 0, + }); + + const fcltNmArr = ruseFclt.map((item) => ({ + text: item.fcltNm, + val: item.pbnstRuseFcltPk, + })); + + useEffect(() => { + const cell = swtrmtFcltFk; + const ruseFcltData = ruseFclt.find( + (el) => el.swtrmtFcltFk === cell?.swtrmtFcltFk + ); + if (ruseFcltData !== undefined) + setFcltSwtrm({ + text: ruseFcltData.fcltNm, + val: ruseFcltData.pbnstRuseFcltPk, + fcltCpct: ruseFcltData.fcltCpct, + swtrmtCpct: ruseFcltData.swtrmtCpct, + }); + else setFcltSwtrm({ text: "", val: "", fcltCpct: 0, swtrmtCpct: 0 }); + }, [swtrmtFcltFk]); + + const formSchema = z.object({ + fcltNm: z.string().min(2).max(50), + psysScdg: z.string(), + designScdg: z.string(), + fcltCpct: z.number(), + swtrmtCpct: z.number(), + ruseCpct: z.number(), + splyExtraCpct: z.number(), + }); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { - username: "", + fcltNm: "", + psysScdg: "", + designScdg: "", + fcltCpct: 0, + swtrmtCpct: 0, + ruseCpct: 0, + splyExtraCpct: 0, }, }); - // 2. Define a submit handler. function onSubmit(values: z.infer) { - // Do something with the form values. - // ✅ This will be type-safe and validated. console.log(values); } - const onSelectValue=(val:string)=>{ - console.log(val) -} + const onSelectValue = (val: string) => { + console.log(val); + mngTableValue(val); + }; - const [instlAprvDate, setInstlAprvDate] = useState(new Date()) - const [bizCmcnDate, setBizCmcnDate] = useState(new Date()) + const headMakeColSpan = (upHeadList: TableUpperProps[]) => { + return ( + <> + + {upHeadList.map((head: TableUpperProps) => + !head.upSequnce ? ( + + {head.title} + + ) : head.upName === "upChangeRe" && head.upSequnce === 1 ? ( + + {"운영대행기간"} + + ) : null + )} + + + {upHeadList.map((head: TableUpperProps) => + head.upName === "upChangeRe" ? ( + {head.title} + ) : null + )} + + + ); + }; + + const nodeList = headMakeColSpan(pubMngUpHeadList); + const newReuseFclt = () => {}; const [files, setFiles] = useState(null); return ( -
+
-

○ 재이용시설 운영정보

+

○ 재이용 시설명

( - - + + )} /> -
+
+ +
- -
( + name="psysScdg" + render={({}) => ( - + )} /> -
+
( + name="designScdg" + render={({}) => ( - + )} />
-

○ 재이용시설 운영정보

- +
{nodeList} + cellClick={() => {}} + > + {nodeList} +
+

○ 재이용수 공급 가능량

( - + )} /> @@ -138,22 +220,27 @@ const nodeList = headMakeColSpan(pubMngUpHeadList);
( - + )} />
- +
( - + )} /> @@ -161,10 +248,10 @@ const nodeList = headMakeColSpan(pubMngUpHeadList);
( - + )} /> @@ -174,7 +261,6 @@ const nodeList = headMakeColSpan(pubMngUpHeadList);
-
); } diff --git a/apps/wr/package.json b/apps/wr/package.json index 1c1318449..4788dde32 100644 --- a/apps/wr/package.json +++ b/apps/wr/package.json @@ -12,6 +12,7 @@ "@common/business_components": "workspace:*", "@common/components": "workspace:*", "@hookform/resolvers": "^4.1.3", + "@tanstack/react-table": "^8.21.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.474.0",