From 77753e1c365ea955b5979c554ae166b40c1794e7 Mon Sep 17 00:00:00 2001
From: dooohun <ehgns0305@naver.com>
Date: Wed, 4 Dec 2024 16:49:41 +0900
Subject: [PATCH] =?UTF-8?q?hotfix:=20=EC=9C=A0=EB=A0=B9=20=EC=BA=90?=
 =?UTF-8?q?=EB=A6=AD=ED=84=B0=20=EB=B0=9C=EC=83=9D=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 닉네임 입력 후 enter 클릭 시 여러개의 요청이 발생하는 것을 form으로 해결
---
 packages/client/src/pages/nickname/index.tsx | 43 ++++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/pages/nickname/index.tsx b/packages/client/src/pages/nickname/index.tsx
index 0c77d343..f21f2e83 100644
--- a/packages/client/src/pages/nickname/index.tsx
+++ b/packages/client/src/pages/nickname/index.tsx
@@ -17,30 +17,31 @@ export default function Nickname() {
   const toast = toastController();
   const [nickname, setNickname] = useState('');
 
-  const handleNicknameSubmit = async (nickname: string) => {
-    const socket = getQuizSocket();
-    const sid = await emitEventWithAck<string>(socket, 'session', {
-      pinCode: pinCode,
-      nickname: nickname,
-    });
-    if (!sid) {
-      toast.warning('방이 가득 찼습니다.');
-      navigate(`/`);
-    }
-    setCookie('sid', sid);
-    socket.emit('participant notice', { pinCode: pinCode });
-    navigate(`/quiz/wait/${pinCode}`);
-  };
+  const handleNicknameSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleNicknameSubmit(nickname);
+    const socket = getQuizSocket();
+    try {
+      const sid = await emitEventWithAck<string>(socket, 'session', {
+        pinCode: pinCode,
+        nickname: nickname,
+      });
+      if (!sid) {
+        toast.warning('방이 가득 찼습니다.');
+        navigate(`/`);
+        return;
+      }
+      setCookie('sid', sid);
+      socket.emit('participant notice', { pinCode: pinCode });
+      navigate(`/quiz/wait/${pinCode}`);
+    } catch (error) {
+      toast.error('닉네임 등록 중 문제가 발생했습니다.');
     }
   };
 
   return (
     <div className="flex flex-col items-center px-64 pt-16 min-w-[980px]">
-      <div className="flex flex-col items-center gap-3 w-fit">
+      <form className="flex flex-col items-center gap-3 w-fit" onSubmit={handleNicknameSubmit}>
         <label
           htmlFor="nickname"
           className="flex gap-2 ml-1 items-center text-xl font-bold self-start"
@@ -59,21 +60,19 @@ export default function Nickname() {
             className="w-[488px] bg-transparent focus:outline-none"
             value={nickname}
             onChange={(e) => setNickname(e.target.value)}
-            onKeyDown={handleKeyDown}
             maxLength={MAX_NICKNAME_LENGTH}
           />
           <button
-            type="button"
+            type="submit"
             className={`w-20 h-10 text-white bg-primary rounded-3xl ${
               nickname.length === 0 ? 'opacity-50 cursor-not-allowed' : 'opacity-100'
             }`}
-            onClick={() => handleNicknameSubmit(nickname)}
             disabled={nickname.length === 0}
           >
             참가하기
           </button>
         </div>
-      </div>
+      </form>
     </div>
   );
 }