chore: submit 엔터 처리

softeerbootcamp4th · Aug 21, 2024 · 27f5f78 · 27f5f78
1 parent 0c3c64a
commit 27f5f78
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/admin/src/pages/LotteryParticipantList/index.tsx b/admin/src/pages/LotteryParticipantList/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import { LotteryAPI } from "@/apis/lotteryAPI";
@@ -123,6 +123,11 @@ export default function LotteryParticipantList() {
         patchLotteryExpectation(id);
     };
 
+    const handleSubmitSearch = (e: FormEvent) => {
+        e.preventDefault();
+        handleRefetch();
+    };
+
     const expectations = useMemo(
         () =>
             expectation.map((participant) => [
@@ -176,15 +181,15 @@ export default function LotteryParticipantList() {
                         </p>
                     </div>
 
-                    <div className="flex gap-2">
+                    <form className="flex gap-2" onSubmit={handleSubmitSearch}>
                         <input
                             ref={phoneNumberInputRef}
                             className="border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium"
                         />
-                        <Button buttonSize="sm" onClick={handleRefetch}>
+                        <Button buttonSize="sm" type="submit">
                             검색
                         </Button>
-                    </div>
+                    </form>
                 </div>
 
                 <Table
@@ -194,7 +199,7 @@ export default function LotteryParticipantList() {
                     dataLastItem={targetRef}
                 />
 
-                <Button buttonSize="lg" onClick={handleLotteryWinner}>
+                <Button buttonSize="lg" type="button" onClick={handleLotteryWinner}>
                     당첨자 보러가기
                 </Button>
             </div>

diff --git a/admin/src/pages/LotteryWinnerList/index.tsx b/admin/src/pages/LotteryWinnerList/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import { LotteryAPI } from "@/apis/lotteryAPI";
@@ -132,6 +132,11 @@ export default function LotteryWinnerList() {
         patchLotteryExpectation(id);
     };
 
+    const handleSubmitSearch = (e: FormEvent) => {
+        e.preventDefault();
+        handleRefetch();
+    };
+
     const expectations = useMemo(
         () =>
             expectation.map((winner) => [
@@ -183,15 +188,15 @@ export default function LotteryWinnerList() {
                         <p className="h-body-1-medium">당첨자 리스트</p>
                     </div>
 
-                    <div className="flex gap-2">
+                    <form className="flex gap-2" onSubmit={handleSubmitSearch}>
                         <input
                             ref={phoneNumberInputRef}
                             className="border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium"
                         />
-                        <Button buttonSize="sm" onClick={handleRefetch}>
+                        <Button buttonSize="sm" type="submit">
                             검색
                         </Button>
-                    </div>
+                    </form>
                 </div>
 
                 <Table
@@ -201,7 +206,7 @@ export default function LotteryWinnerList() {
                     dataLastItem={targetRef}
                 />
 
-                <Button buttonSize="lg" onClick={handleLottery}>
+                <Button buttonSize="lg" type="button" onClick={handleLottery}>
                     당첨자 다시 추첨하기
                 </Button>
             </div>

diff --git a/admin/src/pages/RushWinnerList/index.tsx b/admin/src/pages/RushWinnerList/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FormEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
 import { useLocation, useNavigate } from "react-router-dom";
 import { RushAPI } from "@/apis/rushAPI";
@@ -137,6 +137,11 @@ export default function RushWinnerList() {
         setSelectedOptionIdx(() => idx);
     };
 
+    const handleSubmitSearch = (e: FormEvent) => {
+        e.preventDefault();
+        handleSearchPhoneNumber();
+    };
+
     const optionTitleList = useMemo(
         () =>
             options
@@ -198,21 +203,22 @@ export default function RushWinnerList() {
                         </p>
                         <Button
                             buttonSize="sm"
+                            type="button"
                             onClick={() => setIsWinnerToggle((prevToggle) => !prevToggle)}
                         >
                             당첨자 수만 보기 {isWinnerToggle ? "OFF" : "ON"}
                         </Button>
                     </div>
 
-                    <div className="flex gap-2">
+                    <form className="flex gap-2" onSubmit={handleSubmitSearch}>
                         <input
                             ref={phoneNumberInputRef}
                             className="border border-neutral-950 rounded-lg text-neutral-950 h-body-1-medium"
                         />
-                        <Button buttonSize="sm" onClick={handleSearchPhoneNumber}>
+                        <Button buttonSize="sm" type="submit">
                             검색
                         </Button>
-                    </div>
+                    </form>
                 </div>
 
                 <Table