ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

빗물이용시설 등록 수정 및 공통코드 api 추가

Browse Source
This commit is contained in:
leedj312
2025-03-25 17:36:17 +09:00
parent 27ea503260
commit 489be4ce19
7 changed files with 214 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx
+29 -12
View File
@@ -1,11 +1,10 @@
'use client'
import { useWrStore } from "@/app/store";
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"
import type { bdstType, rainRuseType, TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"
import { RainRegForm } from "@/components/ui/form/fcltReg/rainReg/component";
import { ScrollArea, SearchDiv, SearchInput, UiTable } from "@common/business_components";
import { Button, TableHead, TableRow } from "@common/components";
import { useEffect } from "react";
import { useEffect, useState } from "react";
export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
return (<>
@@ -20,17 +19,14 @@ export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
</TableRow>
</>)
}
export default function Home() {
const { rain,init ,dataInit} = useWrStore((state) => {
console.log(state)
const { rain, code,init } = useWrStore((state) => {
return state
});
const {bdstObj, rainRuseObj } =rain
const [rinBdstForm, setRinBdstForm] = useState <rainRuseType[]> ();
const [bdstTable, setbdstTable] = useState <bdstType[]> ();
const nodeList = headMakeColSpan(rain.upHeadList);
const headName = () => {
return (
<h1 className="pl-3 text-xl">○건축물 목록</h1>
@@ -38,12 +34,33 @@ export default function Home() {
}
useEffect(() => {
console.log(rain)
if (!rain.isInit) {
init();
}
}, [rain.isInit,init]);
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=(val:number)=>{
let data
if(bdstObj.length>0) {
data =rainRuseObj.filter((item)=> item.bdstInfoFk===val)
setRinBdstForm(data)
}
}
return (
@@ -66,13 +83,13 @@ export default function Home() {
</div>
<div className="colsapn-1 pl-11">
<UiTable tableData={rain.bdstObj} headlist={rain.upHeadList} pageSize={100} total={10} headName={headName()}>
<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 ></RainRegForm>
<RainRegForm data={rinBdstForm || []} ></RainRegForm>
</ScrollArea>
</div>
apps/wr/app/store/common/code/index.ts
+130
View File
@@ -0,0 +1,130 @@
import { getFectch } from "@/components/lib/api";
// Description: 공통코드
type selectArray = {
text: string;
val: string | number;
};
export const bdstUsgCd: selectArray[] = [
{ val: 1, text: "운동장" },
{ val: 2, text: "체육관" },
{ val: 3, text: "공공업무시설" },
{ val: 4, text: "공공기관의청사" },
{ val: 5, text: "아파트" },
{ val: 6, text: "연립주택" },
{ val: 7, text: "다세대주택" },
{ val: 8, text: "기숙사" },
{ val: 9, text: "초등학교" },
{ val: 10, text: "중학교" },
{ val: 11, text: "고등학교" },
{ val: 12, text: "전문대학" },
{ val: 13, text: "대학및대학교" },
{ val: 14, text: "골프장" },
{ val: 15, text: "대규모점포" },
{ val: 16, text: "기타" },
];
export const rainFcltCd = [
{ val: "1", text: "지붕" },
{ val: "2", text: "건물옥상" },
{ val: "3", text: "골프장 연못" },
{ val: "4", text: "운동장 바닥" },
{ val: "5", text: "운동장 지붕" },
{ val: "6", text: "주차장" },
{ val: "7", text: "태양광패널" },
{ val: "8", text: "연못" },
{ val: "9", text: "기타" },
{ val: "10", text: "확인불가" },
];
export type comCodeState = {
code: {
isInit: boolean;
rainFcltCd: selectArray[];
bdstUsgCd: selectArray[];
cityCd: selectArray[];
sggCd: selectArray[];
};
};
export type comCodeType = comCodeState & comCodeActions;
export const getSggCd = async (set: any) => {
const sgg = await getFectch("common", "/addr/sgg");
const sggCd = sgg.map((item: any) => ({
val: item.sggCd,
text: item.sggKornNm,
}));
set((state: comCodeState) => ({
code: {
...state.code,
sggCd: sggCd,
},
}));
};
export const getCityCd = async (set: any) => {
const city = await getFectch("common", "/addr/city");
const cityCd = city.map((item: any) => ({
val: item.mctpvCd,
text: item.mctpvKornNm,
}));
set((state: comCodeState) => ({
code: {
...state.code,
cityCd: cityCd,
},
}));
};
export const comCodeStateExport: comCodeState = {
code: {
isInit: false,
rainFcltCd: rainFcltCd,
bdstUsgCd: bdstUsgCd,
cityCd: [],
sggCd: [],
},
};
export type comCodeActions = {
codeInit: () => void;
};
export const codeActionExport: (set: any) => comCodeActions = (set: any) => {
return {
codeInit: async () => {
const sgg = await getFectch("common", "/addr/sgg");
const sggCd = sgg.map((item: any) => ({
val: item.sggCd,
text: item.sggKornNm,
}));
const city = await getFectch("common", "/addr/city");
const cityCd = city.map((item: any) => ({
val: item.mctpvCd,
text: item.mctpvKornNm,
}));
return set((state: comCodeState) => ({
code: {
...state.code,
sggCd: sggCd,
cityCd: cityCd,
},
}));
},
divCityCd: async(cd: number) => {
set((state: comCodeState) => ({
code: {
...state.code,
sggCd:state.code.sggCd.filter((item) => { return Number(item.val.toString().slice(0,2)) === cd }),
},
}));
},
};
};
apps/wr/app/store/index.tsx
+2 -3
View File
@@ -1,4 +1,3 @@
'use client'
import { type ReactNode, createContext, useContext, useRef } from 'react'
import { useStore } from 'zustand'
@@ -15,12 +14,12 @@ export interface StoreProviderProps {
children: ReactNode
}
export const StoreProvider = ({
export const StoreProvider = ({
children,
}: StoreProviderProps) => {
const storeRef = useRef<StoreApi>(null)
if (!storeRef.current) {
storeRef.current = StoreZus()
storeRef.current = StoreZus()
}
return (
<StoreContext.Provider value={storeRef.current}>
apps/wr/app/store/store.tsx
+10 -3
View File
@@ -29,18 +29,22 @@ import {
type htdflFacState,
type htdflFacType,
} from "./ruseFcltMng/fcltReg/htdflReg";
import { codeActionExport, comCodeStateExport, getCityCd, getSggCd, type comCodeState, type comCodeType } from "./common/code";
export type WrStore = pubFacType &
export type WrStore = comCodeType&
pubFacType &
rainFacType &
rswtFacType &
matDmdType &
htdflFacType;
export const StoreZus = (
initState: rainFacState &
export const StoreZus = (
initState: comCodeState&
rainFacState &
pubFacState &
rswtFacState &
matDmdState &
htdflFacState = {
...comCodeStateExport,
...pubFacStateExport,
...rainFacStateExport,
...rswtFacStateExport,
@@ -49,6 +53,8 @@ export const StoreZus = (
}
) => {
return createStore<WrStore>()((set) => {
getSggCd(set),
getCityCd(set)
return {
...initState,
...pubFacActionsExport(set),
@@ -56,6 +62,7 @@ export const StoreZus = (
...rswtFacActionsExport(set),
...matDmdActionsExport(set),
...htdflFacActionsExport(set),
...codeActionExport(set),
};
});
};
apps/wr/components/lib/api/index.ts
+4 -3
View File
@@ -1,11 +1,12 @@
//8880
import { DEV_URL_WR } from "../config/env";
import { DEV_URL_COMMON, DEV_URL_WR } from "../config/env";
export const getFectch = async (url: string) => {
const response = await fetch( DEV_URL_WR+url , {
export const getFectch = async( type:string , url: string) => {
const div = type === 'common' ? DEV_URL_COMMON : DEV_URL_WR
const response = await fetch( div+url , {
method: "GET",
headers: {
accept: "application/json",
apps/wr/components/lib/config/env.ts
+5
View File
@@ -2,5 +2,10 @@
const LOCAL_PORT = "3000";
const DEV_PORT = "8880";
const DEV_PORT_COMMON = "8881"; // 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`;
export const DEV_URL_COMMON = `http:///192.168.1.193:${DEV_PORT_COMMON}/api/v1`;
apps/wr/components/ui/form/fcltReg/rainReg/component.tsx
+34 -29
View File
@@ -7,18 +7,18 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
import { FormUi } from "@common/business_components";
import { useWrStore } from "@/app/store";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { selectClass, type rainRuseType } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { useEffect } from "react";
const formSchema = z
.object({
facilityName: z.string().min(2).max(50),
instlCmptnDt: z.string(),
instlCst: z.string(),
chmaraKndCd: z.string(),
chmaraSz: z.string(),
chmaraYn: z.string(),
chmaraCpct: z.string(),
chmaraProcs: z.string(),
instlCmptnDt: z.date(),
instlCst: z.number(),
pntfColKnd: z.string(),
pntfColArea: z.number(),
filtrTrtmfctPrs: z.string(),
filtrTrtmfctYn: z.string(),
filtrTrtmfctCpct: z.string(),
instlCstSprtYn: z.string(),
instlCstSprtAmt: z.string(),
grntchCstSprtYn: z.string(),
@@ -28,22 +28,27 @@ const formSchema = z
grntchBdstCertNo: z.string(),
grntchBdstCertGrd: z.string(),
})
.readonly();
export function RainRegForm() {
const { rain } = useWrStore((state) => state);
export function RainRegForm({data}:{data:rainRuseType[]} ) {
const { rain ,code} = useWrStore((state) => state);
const {rainFcltCd } = code
useEffect(() => {
console.log(data);
if (data && data.length > 0) {
form.reset(data[0]); // Assuming the first item matches the form schema
}
}, [data]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
facilityName: "",
instlCmptnDt: "",
instlCst: "",
chmaraKndCd: "",
chmaraYn: "",
chmaraSz: "",
chmaraCpct: "",
chmaraProcs: "",
instlCmptnDt: new Date(),
instlCst: 0,
pntfColKnd: "",
pntfColArea: 0,
filtrTrtmfctYn: "N",
filtrTrtmfctCpct: "",
filtrTrtmfctPrs: "",
instlCstSprtYn: "",
instlCstSprtAmt: "",
grntchCstSprtYn: "",
@@ -87,9 +92,9 @@ export function RainRegForm() {
<FormUi label="설치완료일">
<Input
className=""
placeholder="1,000,000"
type=""
{...field}
type="date"
onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : undefined)}
value={field.value ? field.value.toISOString().split('T')[0] : ""}
/>
</FormUi>
)}
@@ -125,14 +130,14 @@ export function RainRegForm() {
<div className="col-span-5 pl-6">
<FormField
control={form.control}
name="chmaraKndCd"
name="pntfColKnd"
render={({ field }) => (
<FormUi label="종류">
<SelectBox
className={""}
selectClass={selectClass}
label={""}
selectArray={rain.selectYN}
selectArray={rainFcltCd}
onSelectValue={onSelectValue}
{...field}
/>
@@ -143,7 +148,7 @@ export function RainRegForm() {
<div className="col-span-5">
<FormField
control={form.control}
name="chmaraSz"
name="pntfColArea"
render={({ field }) => (
<FormUi label="면적(m³)">
<Input
@@ -165,7 +170,7 @@ export function RainRegForm() {
<div className="col-span-4 pl-6">
<FormField
control={form.control}
name="chmaraYn"
name="filtrTrtmfctYn"
render={({ field }) => (
<FormUi label="유무">
<SelectBox
@@ -183,7 +188,7 @@ export function RainRegForm() {
<div className="col-span-4">
<FormField
control={form.control}
name="chmaraCpct"
name="filtrTrtmfctCpct"
render={({ field }) => (
<FormUi label="용량(m³/일)">
<Input
@@ -199,7 +204,7 @@ export function RainRegForm() {
<div className="col-span-4">
<FormField
control={form.control}
name="chmaraProcs"
name="filtrTrtmfctPrs"
render={({ field }) => (
<FormUi label="처리공정">
<Input