fix: [FE] 채팅 보내기 클릭시 form action이 수행되어 새로고침이 되는 문제 해결

채팅 보내기 클릭시 form action이 수행되어 새로고침이 되는 문제 해결
boostcampwm2023 · Dec 8, 2023 · ddc163b · ddc163b
1 parent dc0f9ed
commit ddc163b
Showing 1 changed file with 30 additions and 36 deletions.
diff --git a/frontEnd/src/components/room/chatting/ChattingInput.tsx b/frontEnd/src/components/room/chatting/ChattingInput.tsx
@@ -43,45 +43,39 @@ export default function ChattingInput({ usingAi, setUsingAi, postingAi, setPosti
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
-      if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
-        event.preventDefault();
+      event.preventDefault();
 
-        if (!message) return;
+      if (!message) return;
 
-        handleMessageSend();
-
-        if (!message) return;
-
-        handleMessageSend();
-      }
+      handleMessageSend();
     }
+  };
 
-    return (
-      <div className="w-full p-2 rounded-b-lg bg-base">
-        <ToggleAi usingAi={usingAi} setUsingAi={setUsingAi} />
-        <div className="flex items-center w-full h-[72px] rounded-lg drop-shadow-lg">
-          <textarea
-            onKeyDown={handleKeyDown}
-            disabled={usingAi && postingAi}
-            value={message}
-            onChange={onChange}
-            className={`w-full h-full p-2 px-4 focus:outline-none rounded-s-lg resize-none border-2 custom-scroll ${
-              usingAi ? 'border-point-blue' : 'border-white'
-            }`}
-            placeholder={usingAi ? 'AI에게 질문해보세요' : 'Message'}
-          />
-          <button
-            type="button"
-            onClick={handleMessageSend}
-            className={`font-normal rounded-e-lg whitespace-nowrap w-16 flex items-center justify-center h-full ${
-              usingAi ? 'bg-point-blue text-white' : 'bg-primary text-black'
-            }`}
-            disabled={usingAi && postingAi}
-          >
-            <SendButtonText usingAi={usingAi} postingAi={postingAi} />
-          </button>
-        </div>
+  return (
+    <div className="w-full p-2 rounded-b-lg bg-base">
+      <ToggleAi usingAi={usingAi} setUsingAi={setUsingAi} />
+      <div className="flex items-center w-full h-[72px] rounded-lg drop-shadow-lg">
+        <textarea
+          onKeyDown={handleKeyDown}
+          disabled={usingAi && postingAi}
+          value={message}
+          onChange={onChange}
+          className={`w-full h-full p-2 px-4 focus:outline-none rounded-s-lg resize-none border-2 custom-scroll ${
+            usingAi ? 'border-point-blue' : 'border-white'
+          }`}
+          placeholder={usingAi ? 'AI에게 질문해보세요' : 'Message'}
+        />
+        <button
+          type="button"
+          onClick={handleMessageSend}
+          className={`font-normal rounded-e-lg whitespace-nowrap w-16 flex items-center justify-center h-full ${
+            usingAi ? 'bg-point-blue text-white' : 'bg-primary text-black'
+          }`}
+          disabled={usingAi && postingAi}
+        >
+          <SendButtonText usingAi={usingAi} postingAi={postingAi} />
+        </button>
       </div>
-    );
-  };
+    </div>
+  );
 }