From 4013345738c5226e1e35a740d553c480a25335cd Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Tue, 6 Feb 2024 17:02:50 +0900
Subject: [PATCH] =?UTF-8?q?chore(keywordSubscribe):=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=20=EB=B0=98=EC=98=81=20-=20=ED=82=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=EB=8F=85=20=EC=A0=84=EC=86=A1=EC=9D=84=20?=
 =?UTF-8?q?keydown=20->=20form=20=EC=A0=9C=EC=B6=9C=20=ED=98=95=EC=8B=9D?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KeywordSubscribe/index.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/KeywordSubscribe/index.tsx b/src/pages/KeywordSubscribe/index.tsx
index a94f39d2..5fc9b79c 100644
--- a/src/pages/KeywordSubscribe/index.tsx
+++ b/src/pages/KeywordSubscribe/index.tsx
@@ -11,7 +11,7 @@ import useInput from '@hooks/useInput';
 import useToasts from '@hooks/useToast';
 import RegisteredKeywordList from '@pages/KeywordSubscribe/components/RegisteredKeywordList';
 import { THEME } from '@styles/ThemeProvider/theme';
-import { KeyboardEventHandler, useEffect, useState } from 'react';
+import { FormEvent, FormEventHandler, useEffect, useState } from 'react';
 
 const KeywordSubscribe = () => {
   const [keywords, setKeywords] = useState<string[]>([]);
@@ -34,8 +34,9 @@ const KeywordSubscribe = () => {
     setKeywords((prevKeyword) => prevKeyword.filter((key) => key !== keyword));
   };
 
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
-    if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (
+    e: FormEvent<HTMLFormElement>,
+  ) => {
     e.preventDefault();
     onClickSubmit();
   };
@@ -73,7 +74,7 @@ const KeywordSubscribe = () => {
     fetchKeywords();
   }, []);
 
-  const checkIsAvailable = () => (inputKeyword.length > 1 ? true : false);
+  const checkIsAvailable = () => inputKeyword.length > 1;
 
   return (
     <>
@@ -82,18 +83,16 @@ const KeywordSubscribe = () => {
         <InformUpperLayout.InformSubTitle subTitle={KEYWORD_PAGE.SUB_TITLE} />
       </InformUpperLayout>
 
-      <InputWrapper>
+      <InputWrapper onSubmit={handleSubmit}>
         <KeywordInput
           onChange={setInputKeyword}
           placeholder={KEYWORD_PAGE.PLACEHOLDER}
           maxLength={15}
-          onKeyDown={handleKeyDown}
           value={inputKeyword}
         />
         <KeywordSubmit
           disabled={!checkIsAvailable()}
           isAvailable={checkIsAvailable()}
-          onClick={onClickSubmit}
         >
           등록
         </KeywordSubmit>
@@ -109,7 +108,7 @@ const KeywordSubscribe = () => {
 
 export default KeywordSubscribe;
 
-const InputWrapper = styled.div`
+const InputWrapper = styled.form`
   padding: 0 20px 0 20px;
   position: relative;
 `;