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-09 20:00:29 +09:00
parent d53115e872
commit bf534b9e96
9 changed files with 412 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
+101 -22
View File
@@ -4,37 +4,76 @@ import { btnClass } from "@/app/store/common/code";
import {
ContentsDiv,
SearchBaseForm,
SearchInput,
SelectBox,
Title,
UiModal,
UiTable,
type ReturnType,
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components/ui";
import { Button, Label } from "@common/components/ui";
import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
import { useCallback, useEffect, useRef, useState } from "react";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import { excelDownload, getCityOrSgg } from "@/components/lib/func/commom";
import type {
customPbnst,
pubHasuType,
} from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import { excelDownload, getCityOrSgg, yearOptions } from "@/components/lib/func/commom";
import { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal";
import SearchInputText from "@/components/ui/searchInput/searchInput";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
export default function PbnstSttn() {
const { code, pbnstSttn, pbnstSttnSearch,pbnSttnInit } = useWrStore((state) => state);
const {
code,
pbnstSttn,
pbnstSttnSearch,
pbnSttnInit,
getPbnStnDetail,
pbnNmSearch,
} = useWrStore((state) => state);
const ref = useRef<ReturnType>({} as ReturnType);
const codeData = getCityOrSgg(ref);
const [isRuseReg, setIsRuseReg] = useState<{
isModal: boolean;
data: pubHasuType;
}>({ isModal: false, data: {} as pubHasuType });
const [searchYear, setSearchYear] = useState<string>(
String(new Date().getFullYear())
);
const [pageNation, setPageNation] = useState(1);
const [isChHead, setIsChHead] = useState(false);
const [bdstTable, setBdstTable] = useState<customPbnst[]>();
const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
const [pbnDetaileData, setPbnDetaileData] = useState<{
isModal: boolean;
data: customPbnst;
}>({ isModal: false, data: {} as customPbnst });
const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
const excelClick = useCallback(() => {
if (codeData) pbnstSttnSearch('1', "10000", codeData);
}, [pbnstSttnSearch, codeData]);
pbnstSttnSearch("1", '10000', ref.current , '', searchYear);
}, [pbnstSttnSearch, searchYear,ref.current]);
const cellCLick = useCallback(
(index: number | undefined) => {
if (
index !== undefined &&
pbnstSttn.pbnstSttnRes &&
pbnstSttn.pbnstSttnRes[index]
) {
const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk;
getPbnStnDetail(pbnstRuseFcltPk.slice(0, 11));
}
},
[getPbnStnDetail, pbnstSttn.pbnstSttnRes]
);
useEffect(() => {
if(pbnstSttn.excelList.length > 0){
if (pbnstSttn.excelList.length >= 0) {
excelDownload(
pbnstSttn.excelList,
"하수재이용시설 현황",
@@ -42,23 +81,22 @@ export default function PbnstSttn() {
"A1:U2"
);
}
}, [pbnstSttn.excelList]);
useEffect(() => {
if (!pbnstSttn.isInit) {
pbnSttnInit('1','11')
pbnSttnInit("1", "13", ref.current, searchYear);
}
}, [pbnstSttn.isInit, pbnSttnInit,ref.current]);
useEffect(() => {
setBdstTable(pbnstSttn.pbnstSttnRes);
}, [pbnstSttn.pbnstSttnRes]);
},[pbnstSttn.isInit,pbnSttnInit])
useEffect(() => {
console.log('pbnstSttn.pbnstSttnRes ', pbnstSttn.pbnstSttnRes)
useEffect(() => {
if (pbnRuseNm.length > 1)
pbnNmSearch("1", "23", ref.current, pbnRuseNm, searchYear);
}, [pbnRuseNm]);
setBdstTable(pbnstSttn.pbnstSttnRes)
},[pbnstSttn.pbnstSttnRes])
return (
<>
<ContentsDiv>
@@ -82,7 +120,34 @@ export default function PbnstSttn() {
조회항목설정
</Button>
}
leftChildren={undefined}
leftChildren={
<>
<div className="flex flex-row space-x-2">
<SelectBox
className="w-48 h-full text-2xl"
label="연도"
selectClass={""}
selectArray={yearOptions}
value={searchYear}
onSelectValue={(val: string | number) =>
setSearchYear(String(val))
}
/>
</div>
<SearchInputText
label={"하수처리시설"}
initValue={pbnRuseNm ?? ""}
setValue={(searchNm?: string) => {
setPbnRuseNm(searchNm || "");
}}
setRtnData={function (rtnData: any[]): void {
setBdstTable(rtnData);
}}
searchList={pbnstSttn.pbnstSearchData||[]}
></SearchInputText>
</>
}
queryClick={function (returnType: ReturnType): void {
// '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}'
let con;
@@ -94,7 +159,7 @@ export default function PbnstSttn() {
// pbnstSttnSearch(1, "20", con);
}}
excelClick={excelClick}
initClick={function (): void { }}
initClick={function (): void {}}
btnClass={btnClass}
ref={ref}
/>
@@ -112,7 +177,9 @@ export default function PbnstSttn() {
headlist={pbnstSttn.pbnstSttHeadList}
pageSize={20}
total={100000}
cellClick={(index: number | undefined, headId: string) => { }}
cellClick={(index: number | undefined, headId: string) => {
cellCLick(index);
}}
onPageChange={setPageNation}
></UiTable>
</ListDiv>
@@ -134,6 +201,18 @@ export default function PbnstSttn() {
/>
}
/>
<UiModal
body={
<PbnstRegModal
data={isRuseReg.data || ({} as customPbnst)}
></PbnstRegModal>
}
bodyClass="w-[68vw] max-w-none h-[90vh]"
open={isRuseReg.isModal}
onOpenChange={(open) => {
setIsRuseReg({ data: {} as pubHasuType, isModal: open });
}}
/>
</ContentsDiv>
</>
);
apps/wr/app/store/prfmncReg/pbnstPrfmncReg/type.tsx
+2
View File
@@ -1,5 +1,6 @@
import { z } from "zod";
import type { TableUpperProps } from "../../common/type/header";
import { fcOperSchema } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
export const PrfSchema = z.object({
pbnstRuseFcltFk: z.string(),
@@ -36,6 +37,7 @@ export const FcPrfSchema = z.object({
mdfcnDt: z.date().default(new Date()),
mdfr: z.string(),
prfList: z.array(PrfSchema),
operList:z.array(fcOperSchema),
bscFctNm: z.string().nullish(),
});
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
-1
View File
@@ -273,7 +273,6 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
};
});
console.log(" pbnstBizCycle ", pbnstBizCycle);
return set((state: pubFacState) => ({
...state,
pbnst: {
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ const fcFileSchema = z.object({
mdfr: z.string().nullish(),
});
const fcOperSchema = z.object({
export const fcOperSchema = z.object({
pbnstRuseFcltOperInfoPk: z.number().nullish(),
pbnstRuseFcltFk: z.string().nullish(),
operMthd: z.string(),
apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
+3 -3
View File
@@ -65,7 +65,7 @@ export const pbnSttHeadListExport: z.infer<typeof sttnHeadListType> = [
},
{
id: "mngMeth",
id: "operMthd",
title: "운영방식",
visible: true,
},
@@ -75,12 +75,12 @@ export const pbnSttHeadListExport: z.infer<typeof sttnHeadListType> = [
visible: true,
},
{
id: "firstDay",
id: "bgngDt",
title: "시작일",
visible: true,
},
{
id: "LastDay",
id: "endDt",
title: "종료일",
visible: true,
},
apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
+200 -70
View File
@@ -7,15 +7,19 @@ import type { sttnHeadListType } from "../rainSttn/headList";
import type { customPbnst, pubHasuType } from "../../fcltReg/pbnstReg/type";
import { excelPbnstSttnParsing } from "./excel";
import type { FcPrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
import type { ReturnType } from "@common/business_components/ui";
import type { WaterReuseFacility } from "./type";
const pbnstSttHeadList = pbnSttHeadListExport;
const pbnstSttNodeList = pbnstSttNodeListExport;
export type pbnstSttnState = {
pbnstSttn: {
pbnstSttnRes: customPbnst[];
pbnstSttnRes: WaterReuseFacility[];
pbnstSearchData: WaterReuseFacility[];
pbnstSttHeadList: CommonTableProps[];
pbnstSttNodeList: CommonTableProps[];
pbnstDetail: customPbnst;
excelList: [];
isInit: boolean;
};
@@ -23,8 +27,27 @@ export type pbnstSttnState = {
type pbnstSttnActions = {
pbnstChSttnHead: (headList: z.infer<typeof sttnHeadListType>) => void;
pbnstSttnSearch: (page: string, total: string, con: string) => void;
pbnSttnInit: (page: string, sggOrCity: string) => void;
pbnstSttnSearch: (
page: string,
total: string,
reurnValue: ReturnType,
searchNm: string | undefined,
year: string
) => void;
pbnSttnInit: (
page: string,
total: string,
reurnValue: ReturnType,
year: string
) => void;
getPbnStnDetail: (bscFctCd: string) => void;
pbnNmSearch: (
page: string,
total: string,
reurnValue: ReturnType,
searchNm: string | undefined,
year: string
) => void;
};
export type pbnstSttnType = pbnstSttnState & pbnstSttnActions;
@@ -34,74 +57,110 @@ export const pbnstSttnStateExport: pbnstSttnState = {
pbnstSttHeadList: pbnstSttHeadList,
pbnstSttNodeList: pbnstSttNodeList,
pbnstSttnRes: [],
pbnstDetail: {} as customPbnst,
pbnstSearchData: [],
excelList: [],
isInit: false,
},
};
const checkWrRegList = async () => {
const wrRegList = await getFetch("wr", `/reuseFc/pubDetailList`);
return wrRegList;
};
const hasuListFetch = async (page: string, sggOrCity: string) => {
const checkWrRegListRes = await checkWrRegList();
const rainRes = await postFectch(
`/prcsFclt/ruseInfo/${page ? page : 1}/10/A/${sggOrCity ? sggOrCity : "11"}/0/1/SW`,
checkWrRegListRes?.fcltCds,
fetchType.COMMON
const hasuListFetch = async (
page: string,
total: string,
reurnValue: ReturnType,
searchNm: string | undefined,
year: string
) => {
let url = "";
if (reurnValue.partValue === "A") {
url = `/prcsFclt/info/${page}/${total}/${reurnValue.partValue}/${
reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue
}/0/1/SW`
} else if (reurnValue.partValue === "R") {
url = `/prcsFclt/info/${page}/${total}/${reurnValue.partValue}/${
reurnValue.regionValue
? reurnValue.regionValue
: reurnValue.unitWaterShedValue
? reurnValue.unitWaterShedValue
: reurnValue.middleRegionValue
}/0/1/SW`
} else {
url = `/prcsFclt/info/${page}/${total}/${reurnValue.envPartValue}/${reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue}/0/1/SW`
}
if( searchNm&& searchNm?.length>0){
url+="/"+searchNm
}
const pbnList = await getFetch(fetchType.COMMON, url);
const arrayList = pbnList.map((item: pubHasuType) => item.bscFctCd);
const getRuseList = await postFectch(
`/reuseFc/pubDetailList/${year}`,
arrayList,
fetchType.WR
);
const data = checkWrRegListRes.fcPrfList.map((item: FcPrfType) => {
const findData = rainRes.data.find(
(fclt: pubHasuType) =>
fclt.bscFctCd === item.pbnstRuseFcltPk.substring(0, 11)
);
const usage = item.prfList.reduce(
(acc, cur) => {
acc.inUsage +=
cur.wshwtr +
cur.coolUswtr +
cur.cleanUswtr +
cur.drwtUswtr +
cur.dltnUswtr +
cur.ithlRswtr +
cur.ithlEtcUswtr +
cur.cleanToilUswtr +
cur.resn;
acc.outUsage +=
cur.lndwtr +
cur.hydUswtr +
cur.ugwtChr +
cur.farmUswtr +
cur.rvrKeepUswtr +
cur.indstUswtr;
acc.total = acc.inUsage + acc.outUsage;
const checkWrRegListRes = getRuseList.data;
return acc;
},
{ total: 0, inUsage: 0, outUsage: 0 }
);
return {
rvbsn: findData?.rvbsn,
lgbsn: findData?.lgbsn,
mdmbsn: findData?.mdmbsn,
rgnNm: findData?.rgnNm,
sido: findData?.sido,
gugun: findData?.gugun,
bscFctNm: findData?.bscFctNm,
efflWqltStndrdNm: findData?.efflWqltStndrdNm,
fctCpc: findData.fctCpc,
tel: findData?.lclgvrnmnt ?? "-",
ruseUtztnFcltNm: item.ruseUtztnFcltNm,
fcltCpct: item.fcltCpct,
splyExtraCpct: item.splyExtraCpct,
ruseCpct: item.ruseCpct,
pbnstRuseFcltPk: item.pbnstRuseFcltPk,
usageTotal: usage.total,
inUsage: usage.inUsage,
outUsage: usage.outUsage,
fcOpers: item?.fcOpers ?? [],
};
});
const data: WaterReuseFacility[] = checkWrRegListRes.map(
(item: FcPrfType) => {
const findData = pbnList.find(
(fclt: pubHasuType) =>
fclt.bscFctCd === item.pbnstRuseFcltPk.substring(0, 11)
);
const usage = item.prfList.reduce(
(acc, cur) => {
acc.inUsage +=
cur.wshwtr +
cur.coolUswtr +
cur.cleanUswtr +
cur.drwtUswtr +
cur.dltnUswtr +
cur.ithlRswtr +
cur.ithlEtcUswtr +
cur.cleanToilUswtr +
cur.resn;
acc.outUsage +=
cur.lndwtr +
cur.hydUswtr +
cur.ugwtChr +
cur.farmUswtr +
cur.rvrKeepUswtr +
cur.indstUswtr;
acc.total = acc.inUsage + acc.outUsage;
return acc;
},
{ total: 0, inUsage: 0, outUsage: 0 }
);
return {
rvbsn: findData?.rvbsn,
lgbsn: findData?.lgbsn,
mdmbsn: findData?.mdmbsn,
rgnNm: findData?.rgnNm,
sido: findData?.sido,
gugun: findData?.gugun,
bscFctNm: findData?.bscFctNm,
efflWqltStndrdNm: findData?.efflWqltStndrdNm,
fctCpc: findData.fctCpc,
tel: findData?.tel ?? "-",
ruseUtztnFcltNm: item.ruseUtztnFcltNm,
fcltCpct: item.fcltCpct,
splyExtraCpct: item.splyExtraCpct,
ruseCpct: item.ruseCpct,
pbnstRuseFcltPk: item.pbnstRuseFcltPk,
usageTotal: usage.total,
inUsage: usage.inUsage,
outUsage: usage.outUsage,
operMthd: item.operList[0]?.operMthd,
rprtvBzenty: item.operList[0]?.rprtvBzenty,
bgngDt: item.operList[0]?.bgngDt.toLocaleDateString ?? "",
endDt: item.operList[0]?.endDt.toLocaleDateString?? "",
searchNm: findData.bscFctNm,
searchPk: findData.bscFctCd,
};
}
);
return data;
};
@@ -122,10 +181,21 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
},
}));
},
pbnstSttnSearch: async (page: string, total: string, con: string) => {
pbnstSttnSearch: async (
page: string,
total: string,
reurnValue: ReturnType,
searchNm: string | undefined,
year: string
) => {
try {
const pbnstSttnRes = await hasuListFetch(page, con);
const pbnstSttnRes = await hasuListFetch(
page,
total,
reurnValue,
searchNm,
year
);
console.log("pbnstSttnRes", pbnstSttnRes);
if (Number(total) > 9000) {
const pbnstExcel = excelPbnstSttnParsing(pbnstSttnRes);
@@ -153,10 +223,23 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
console.log("error", erTxt);
}
},
pbnSttnInit: async (page: string, sggOrCity: string) => {
pbnSttnInit: async (
page: string,
total: string,
reurnValue: ReturnType,
year: string
) => {
try {
const pbnstSttnRes = await hasuListFetch(page, sggOrCity);
console.log("pbnstSttnRes", pbnstSttnRes);
const pbnstSttnRes = await hasuListFetch(
page,
total,
reurnValue,
undefined,
year
);
console.log('pbnstSttnRes ', pbnstSttnRes)
set((state: pbnstSttnState) => {
return {
...state,
@@ -171,5 +254,52 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
console.log("error", erTxt);
}
},
getPbnStnDetail: async (bscFctCd: string) => {
try {
const pbnstDetail = await getFetch("wr", `/reuseFc/pubFc/${bscFctCd}`);
console.log("pbnstDetail ", pbnstDetail);
set((state: pbnstSttnState) => {
return {
...state,
pbnstSttn: {
...state.pbnstSttn,
pbnstDetail: pbnstDetail,
},
};
});
} catch (errorHasu) {
console.log(errorHasu);
}
},
pbnNmSearch: async (
page: string,
total: string,
reurnValue: ReturnType,
searchNm: string | undefined,
year: string
) => {
try {
const pbnstSttnRes = await hasuListFetch(
page,
total,
reurnValue,
searchNm,
year
);
set((state: pbnstSttnState) => {
return {
...state,
pbnstSttn: {
...state.pbnstSttn,
pbnstSearchData: pbnstSttnRes,
},
};
});
} catch (e) {
console.log(e);
}
},
};
};
apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
+24
View File
@@ -0,0 +1,24 @@
export type WaterReuseFacility = {
bscFctNm: string; // 기본시설명 (예: "난지")
efflWqltStndrdNm: string; // 방류수 수질 기준명 (예: "500톤 이상(Ⅲ지역)")
fcltCpct: number; // 시설 용량 (숫자형, 예: 1)
fctCpc: string; // 시설 처리 능력 (예: "2360000")
gugun: string; // 구군 정보 (예: " ")
inUsage: number; // 유입량 (예: 1387)
lgbsn: string; // 대수계 (예: "한강본류")
mdmbsn: string; // 중권역 (예: "한강서울")
outUsage: number; // 유출량 (예: 900)
pbnstRuseFcltPk: string; // 공공하수 재이용 시설 PK (예: "11000SW001R1")
rgnNm: string; // 관할 기관명 (예: "한강유역환경청")
ruseCpct: number; // 재이용 가능 용량 (예: 123)
ruseUtztnFcltNm: string; // 재사용 활용 시설명 (예: "난지 재사용")
rvbsn: string; // 소수계 (예: "한강")
sido: string; // 시도 정보 (예: "서울특별시")
splyExtraCpct: number; // 추가 공급 용량 (예: 123)
tel: string; // 전화번호 (예: "-")
usageTotal: number; // 총 사용량 (예: 2287)
operMthd: string;
rprtvBzenty: string;
bgngDt: string;
endDt: string;
};
apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
+11 -3
View File
@@ -160,7 +160,6 @@ export function PbnstBuseForm({
formData.pplInstls = ref.current ? [...ref.current] : []; // ← form 내부 상태 기준으로 복사
formData.fcDemands = fcDemands;
formData.fcOrgwts = fcOrgwtFiled;
ß
if (formType === "reg") {
if (
firstBizData &&
@@ -460,13 +459,13 @@ export function PbnstBuseForm({
render={({ field: f }) => (
<FormUi label="수요처명">
<SearchInputText
label={undefined}
label={'수요처'}
initValue={f.value}
setValue={(val) => {
f.onChange(val);
if (val) getDemandCompList(val, 3);
}}
setRtnData={(valList: PbnstDemandComType[]) => {
setRtnData={(valList: any[]) => {
if (
valList.length > 0 &&
valList['0']
@@ -507,6 +506,15 @@ export function PbnstBuseForm({
}
}}
searchList={demandCompList?.map((item=>{
return({
...item,
searchNm:item.dmdCoNm,
searchPk:item.dmdInfoPk
})
}))
}
></SearchInputText>
</FormUi>
)}
apps/wr/components/ui/searchInput/searchInput.tsx
+70 -54
View File
@@ -1,56 +1,69 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useWrStore } from '@/app/store';
import type { PbnstDemandComType } from '@/app/store/ruseFcltMng/fcltReg/pbnstReg/type';
import type { DemandCompType } from '@common/business_components/ui';
import React, { useCallback, useEffect, useRef, useState } from 'react';
type SearchType = {
searchNm: string;
searchPk: string;
};
type thisProps = {
label: string | undefined;
initValue: string | undefined;
setValue : (dmdCoNm?: string) => void;
setRtnData : (rtnData: PbnstDemandComType[]) => void;
}
export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
const { demandCompList } = useWrStore((state) => state);
setValue: (searchNm?: string) => void;
setRtnData: (rtnData: any[]) => void;
searchList?: any[];
};
export default function SearchInputText({
label = undefined,
initValue = undefined,
setValue = () => {},
setRtnData = () => {},
searchList = undefined,
}: thisProps) {
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);
} else {
setIsOpen(false);
}
}, [ setValue]);
const [textValue, setTextValue] = useState(initValue || "");
const handleSuggestionClick = useCallback((dmdCoNm: string) => {
setTextValue(dmdCoNm);
setValue(dmdCoNm);
setIsOpen(false);
setRtnData(demandCompList);
}, [demandCompList, setRtnData, setValue]);
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);
} else {
setIsOpen(false);
}
},
[setValue]
);
const handleSuggestionClick = useCallback(
(dmdCoNm: string) => {
setTextValue(dmdCoNm);
setValue(dmdCoNm);
setIsOpen(false);
setRtnData(searchList || []);
},
[searchList, setRtnData, setValue]
);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
if (
wrapperRef.current &&
!wrapperRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<div ref={wrapperRef}>
<input
@@ -64,22 +77,25 @@ export default function SearchInputText({label=undefined, initValue=undefined, s
{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>
)) : (
{searchList && searchList.length > 0 ? (
searchList.map((item: SearchType, 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.searchNm)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
handleSuggestionClick(item.searchNm);
}
}}
>
{item.searchPk?.substring(0, 10)}&nbsp;
<span className="float-right">{item.searchNm}</span>
</div>
))
) : (
<div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
검색 결과가 없습니다.
</div>
@@ -88,5 +104,5 @@ export default function SearchInputText({label=undefined, initValue=undefined, s
</div>
)}
</div>
)
}
);
}