From a03359540a57d48b8bc1af7ca8ccc2a232e2d12a Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 3 Sep 2025 16:27:58 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A3=BC=EC=86=8C=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=ED=8A=B9=EC=88=98=EB=AC=B8=EC=9E=90,=20sql=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=B0=A9=EC=A7=80=20=ED=95=A8=EC=88=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/search_input_address/findAddress.ts | 38 ++++++++++++ .../src/ui/search_input_address/index.tsx | 59 +++++++++++-------- 2 files changed, 73 insertions(+), 24 deletions(-) diff --git a/packages/common/business_components/src/ui/search_input_address/findAddress.ts b/packages/common/business_components/src/ui/search_input_address/findAddress.ts index 985d20465..c458b80c4 100644 --- a/packages/common/business_components/src/ui/search_input_address/findAddress.ts +++ b/packages/common/business_components/src/ui/search_input_address/findAddress.ts @@ -87,3 +87,41 @@ export const findAddress = async (search: string) => { } + +export const searchFilter=(search:string)=>{ + + + if(search.length >0){ + //특수문자 제거 + const expText = /[%=><]/ ; + if(expText.test(search) == true){ + alert("특수문자를 입력 할수 없습니다.") ; + search = search.split(expText).join(""); + return false; + } + + //특정문자열(sql예약어의 앞뒤공백포함) 제거 + const sqlArray = [ + //sql 예약어 + "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC", + "UNION", "FETCH", "DECLARE", "TRUNCATE" + ] + + let regex; + for(let i=0; i 선택된 주소 데이터 반환 */ export default function SearchInputAddress({ - initValue , + initValue, setRtnData = () => {}, - readonly=false + readonly = false, }: thisProps) { - const [isOpen, setIsOpen] = useState(false); const [textValue, setTextValue] = useState(initValue || ""); const [searchList, setSearchList] = useState([]); - - useEffect(()=>{ - - if(initValue !== textValue && initValue !== undefined && initValue !== null && initValue !== ''){ - setTextValue(initValue) - } - - },[initValue]) + useEffect(() => { + if ( + initValue !== textValue && + initValue !== undefined && + initValue !== null && + initValue !== "" + ) { + setTextValue(initValue); + } + }, [initValue]); const wrapperRef = useRef(null); + const handleInputChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; - setTextValue(value); - findAddress(value).then((data) => { - setSearchList(data); - }) + + if (searchFilter(value)) { + setTextValue(value); + findAddress(value).then((data) => { + setSearchList(data); + }); + }else{ + setTextValue(""); + setSearchList([]); + } if (value) { setIsOpen(true); } else { setIsOpen(false); } }, - [setSearchList] + [setSearchList], ); const handleSuggestionClick = useCallback( (roadAddrPart1: string) => { setTextValue(roadAddrPart1); setIsOpen(false); - setRtnData(searchList?.find((item) => item.roadAddrPart1 === roadAddrPart1) || ({} as addressType)); + setRtnData( + searchList?.find((item) => item.roadAddrPart1 === roadAddrPart1) || + ({} as addressType), + ); }, - [searchList, setRtnData] + [searchList, setRtnData], ); useEffect(() => { @@ -80,18 +91,18 @@ export default function SearchInputAddress({ 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" + className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder={`주소를 입력하세요`} readOnly={readonly} /> {isOpen && ( -
+
{searchList && searchList.length > 0 ? ( searchList.map((item: addressType, index: number) => (
handleSuggestionClick(item.roadAddrPart1)} role="button" tabIndex={0} @@ -106,7 +117,7 @@ export default function SearchInputAddress({
)) ) : ( -
+
검색 결과가 없습니다.
)}