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

feat: Input 컴포넌트의 Enter 키 입력시 조회, 검색 기능 event 구현

Browse Source
This commit is contained in:
swcho
2025-07-29 20:32:30 +09:00
parent b2e0780654
commit 0fe84dba22
8 changed files with 134 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+6
View File
@@ -134,6 +134,12 @@ const OperationTab: React.FC<OperationTabProps> = ({
placeholder="입력"
value={var1}
onChange={(e) => { setVar1(e.target.value); }}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<YearRangeSelectBox
start={yearFilter.start}
apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+12 -8
View File
@@ -31,12 +31,6 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
@@ -78,7 +72,12 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -90,7 +89,12 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
+24 -10
View File
@@ -32,12 +32,6 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="flex items-center mb-2">
@@ -60,7 +54,12 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -72,7 +71,12 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 양수능력 - 우수맨홀 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
@@ -85,7 +89,12 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart2(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -97,7 +106,12 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd2(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+24 -10
View File
@@ -34,12 +34,6 @@ const SwagePpl: React.FC<SwagePplProps> = ({
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-6">
<div className="mb-2 flex items-center">
@@ -94,7 +88,12 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setVar1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -106,7 +105,12 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 연장 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">연장(m)</Label>
@@ -119,7 +123,12 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -131,7 +140,12 @@ const SwagePpl: React.FC<SwagePplProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+30 -11
View File
@@ -36,12 +36,6 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
{/* 가동개시일자 */}
@@ -71,7 +65,12 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -83,7 +82,12 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd1(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 처리구역 면적 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">처리구역 면적(m²)</Label>
@@ -96,7 +100,12 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setStart2(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<span className="mx-2 text-xl font-semibold">~</span>
<Input
@@ -108,7 +117,12 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
const val = e.target.value.replace(/[^0-9]/g, "");
setEnd2(val);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 하수처리시설명 */}
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
@@ -119,7 +133,12 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
onChange={(e) => {
setVar1(e.target.value);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+12 -8
View File
@@ -28,12 +28,6 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
handleSearch,
}) => {
const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
handleSearch();
}
};
return (
<div className="mb-3">
<div className="mb-2 flex items-center">
@@ -54,7 +48,12 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
onChange={(e) => {
setVar1(e.target.value);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
<Input
@@ -64,7 +63,12 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
onChange={(e) => {
setVar2(e.target.value);
}}
onKeyDown={handleEnterKey}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+12
View File
@@ -160,6 +160,12 @@ const Page = () => {
className='w-[100px]'
value={usr}
onChange={(e) => setUsr(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
</div>
<div className='flex items-center'>
@@ -168,6 +174,12 @@ const Page = () => {
className='w-[100px]'
value={pjNm}
onChange={(e) => setpjNm(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
</div>
</div>
apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
+14 -2
View File
@@ -114,8 +114,8 @@ const Page = () => {
atflId: id,
dcrpPplMtncBizNm: fileNm
})
if (data) {
alert('파일이 등록되었습니다.');
if (data) {
alert('파일이 등록되었습니다.');
setIsModalOpen(false);
handleSearch();
}
@@ -154,6 +154,12 @@ const Page = () => {
className='w-[100px] !text-2xl'
value={usr}
onChange={(e) => setUsr(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
</div>
<div className='flex items-center'>
@@ -162,6 +168,12 @@ const Page = () => {
className='w-[100px] !text-2xl'
value={pjNm}
onChange={(e) => { setpjNm(e.target.value) }}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault(); // Enter 키 기본 동작 방지
handleSearch();
}
}}
/>
</div>
</div>