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

하수재이용 등록 서치폼 적용

Browse Source
This commit is contained in:
leedj312
2025-06-04 11:10:42 +09:00
parent c49b2a8e08
commit 6e96477174
6 changed files with 165 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/store/common/searchCode/index.ts
+41 -26
View File
@@ -1,29 +1,44 @@
import { fetchType, getFetch, postFectch } from "@/components/lib/api"
import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type"
import { fetchType, getFetch, postFectch } from "@/components/lib/api";
import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
import type { DemandCompType } from "./type";
export type comFcltState = {
searchFclts: pubHasuType
}
searchFclts: pubHasuType;
demandCompList: DemandCompType[];
};
export type comFcltActions = {
getSwtrmtFcltNm: (searchNm: string) => void
}
getSwtrmtFcltNm: (searchNm: string) => void;
getDemandCompList :(searchNm: string) => void
};
export const searchActions: (set: any) => comFcltActions = (set: any) => {
return {
getSwtrmtFcltNm: async (searchNm: string) => {
const fcltNm = await getFetch("common", `/prcsFclt/info/1/20/${searchNm}`);
const fcltNmCd: pubHasuType[] = fcltNm.map((item: any) => ({
bscFctCd: item.bscFctCd,
sido: item.sido,
gugun: item.gugun,
bscFctNm: item.bscFctNm,
addr: item.addr,
fctCpc: item.fctCpc
}))
return set((state: comFcltState) => ({
...state,
searchFclts: fcltNmCd
}
))
},
}
}
return {
getSwtrmtFcltNm: async (searchNm: string) => {
const fcltNm = await getFetch(
"common",
`/prcsFclt/info/1/20/${searchNm}`
);
const fcltNmCd: pubHasuType[] = fcltNm.map((item: any) => ({
bscFctCd: item.bscFctCd,
sido: item.sido,
gugun: item.gugun,
bscFctNm: item.bscFctNm,
addr: item.addr,
fctCpc: item.fctCpc,
}));
return set((state: comFcltState) => ({
...state,
searchFclts: fcltNmCd,
}));
},
getDemandCompList: async (searchNm: string) => {
const coList = await getFetch(
fetchType.WR,
`reuseFc/request/${searchNm}/{3}`
);
return set((state: comFcltState) => ({
...state,
demandCompList: coList,
}));
},
};
};
apps/wr/app/store/common/searchCode/type.tsx
+13
View File
@@ -0,0 +1,13 @@
export type DemandCompType = {
dmdInfoPk : string | '';
bzmnNo : string | '';
dmdCoNm : string | '';
daddr : string | '';
telno : string | '';
rgtr : string | '';
useUsgCd : string | '';
ctpvCd : string | '';
sggCd : string | '';
}
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
+1 -1
View File
@@ -173,6 +173,7 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
pbnstRegClick: async (pubHasuRes: pubHasuType) => {
try {
const pbnstRes = await initFetch(pubHasuRes.bscFctCd);
console.log('pbnstRes ' , pbnstRes)
return set((state: pubFacState) => ({
...state,
pbnst: {
@@ -204,7 +205,6 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
pbnstInsert: async (pbnstRes: customPbnst) => {
try {
console.log('writeRgtrAndMdfr(pbnstRes) ', writeRgtrAndMdfr(pbnstRes))
const response = await postFectch(
`/reuseFc/pubFc`,
JSON.stringify( writeRgtrAndMdfr(pbnstRes))
apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
+12 -19
View File
@@ -37,10 +37,10 @@ import { useEffect, useRef, useState } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import MngRegFormDetail from "../mngReg/mngRegFormDetail/mngRegFormDetail";
import {
handleCommaNumberChange,
formatCommaNumber,
safeDate,
} from "@/components/lib/func/commom";
import SearchInputText from "@/components/ui/searchInput/searchInput";
import type { DemandCompType } from "@/app/store/common/searchCode/type";
export function PbnstBuseForm({
formType,
@@ -66,7 +66,7 @@ export function PbnstBuseForm({
const [ppiYn, setPpiYn] = useState("Y");
const [isFcOrgwts, setIsFcOrgwts] = useState<boolean>(false);
const [sumCpct, setSumCpct] = useState<number>(0);
const [searchDmdCo, setSeachDmdCo] = useState<String>();
const [searchDmdCo, setSeachDmdCo] = useState<DemandCompType[]>();
const form = useForm<fcBizType>({
resolver: zodResolver(fcBizSchema),
@@ -195,9 +195,7 @@ export function PbnstBuseForm({
};
const plusArray = () => {
console
.log('qweqwe ')
console.log("qweqwe ");
appendDemand({
dmdCoNm: "",
daddr: "",
@@ -404,7 +402,7 @@ export function PbnstBuseForm({
sonClass="col-span-4"
/>
<div>
<h1 className={formH1Class}>{'하수처리수 재이용수 수요처'}</h1>
<h1 className={formH1Class}>{"하수처리수 재이용수 수요처"}</h1>
<div className="text-right mb-3">
<Button
type="button"
@@ -423,19 +421,14 @@ export function PbnstBuseForm({
name={`fcDemands.${index}.dmdCoNm`}
render={({ field: f }) => (
<FormUi label="수요처명">
<SearchInputSelect
className={""}
label={""}
selectData={[]}
onSelectValue={(val) => {
searchDmdColist(val);
<SearchInputText
label={undefined}
initValue={f.value}
setValue={f.onChange}
setRtnData={(valList : DemandCompType[]) =>{
setSeachDmdCo(valList)
}}
textValue={f.value}
setText={(val) => {
setSeachDmdCo(val);
}}
selectValue={searchDmdCo}
></SearchInputSelect>
></SearchInputText>
</FormUi>
)}
/>
apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+6 -2
View File
@@ -91,6 +91,8 @@ export function PbnstMngForm({
getpbnstInsertIndex({ ...pbnst.pbnsUpdateIndex, mng: val });
}
};
const plusHist = () => {
const regData = {
choose: false,
@@ -246,6 +248,8 @@ export function PbnstMngForm({
}
}
}, [pbnst.pbnsUpdateIndex, pbnst.pbnstRes, formType, getBizCycle]);
//신규 등록시 입력할때 데이터 넣기
useEffect(() => {
if (formType === "reg") {
const formData = form.watch();
@@ -260,13 +264,13 @@ export function PbnstMngForm({
}, [pbnst.pbnstMngRegData]);
useEffect(() => {
if ( pbnst.pbnstRes && pbnst.pbnstRes?.length> 0) return;
if ( pbnst.pbnstRes && pbnst.pbnstRes?.length<= 0) return;
const fcltNmList = pbnst.pbnstRes?.map((item, index) => ({
text: item.ruseUtztnFcltNm,
val: String(index),
}));
if(fcltNmList)
setFcltNm(fcltNmList);
apps/wr/components/ui/searchInput/searchInput.tsx
+92
View File
@@ -0,0 +1,92 @@
import { useWrStore } from '@/app/store';
import type { DemandCompType } from '@/app/store/common/searchCode/type';
import React, { useCallback, useEffect, useRef, useState } from 'react';
type thisProps = {
label: string | undefined;
initValue: string | undefined;
setValue : (dmdCoNm?: string) => void;
setRtnData : (rtnData: DemandCompType[]) => void;
}
export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
const { getDemandCompList, demandCompList } = useWrStore((state) => state);
const [isOpen, setIsOpen] = useState(false);
const [textValue, setTextValue] = useState(initValue || '');
const wrapperRef = useRef<HTMLDivElement>(null);
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setTextValue(value);
setValue(value);
if (value) {
setIsOpen(true);
getDemandCompList(value);
} else {
setIsOpen(false);
}
}, [getDemandCompList, setValue]);
const handleSuggestionClick = useCallback((dmdCoNm: string) => {
setTextValue(dmdCoNm);
setValue(dmdCoNm);
setIsOpen(false);
setRtnData(demandCompList);
}, [demandCompList, setRtnData, setValue]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<div ref={wrapperRef}>
<input
type="text"
value={textValue}
onChange={handleInputChange}
/* onFocus={() => setIsOpen(true)} */
className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder={`${label}을(를) 입력하세요`}
/>
{isOpen && (
<div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
<div className="max-h-72">
{demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => (
<div
key={index}
className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
onClick={() => handleSuggestionClick(item.dmdCoNm)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleSuggestionClick(item.dmdCoNm);
}
}}
>
{item.dmdInfoPk.substring(0,10)}&nbsp;<span className="float-right">{item.dmdCoNm}</span>
</div>
)) : (
<div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
검색 결과가 없습니다.
</div>
)}
</div>
</div>
)}
</div>
)
}