[FE] 맥북에서 키워드 마지막 글자 입력되는 오류 해결(#774) (#776)

woowacourse-teams · Nov 19, 2024 · 24399c3 · 24399c3
2 parents 7c422c8 + 0cbb2fc
commit 24399c3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/frontend/src/components/common/keyword/Keyword.tsx b/frontend/src/components/common/keyword/Keyword.tsx
@@ -28,12 +28,16 @@ const Keyword = ({ currentKeywords, onKeywordsChange, error }: KeywordProps) =>
       const trimmedKeyword = keyword.trim();
 
       if (trimmedKeyword === "") return;
-      if (currentKeywords.includes(trimmedKeyword)) {
+
+      if (trimmedKeyword.includes("⠀") || currentKeywords.includes(trimmedKeyword)) {
         setKeyword("");
         return;
       }
-      onKeywordsChange([...currentKeywords, trimmedKeyword]);
-      setKeyword("");
+
+      if (e.nativeEvent.isComposing === false) {
+        onKeywordsChange([...currentKeywords, trimmedKeyword]);
+        setKeyword("");
+      }
     }
   };
 

diff --git a/frontend/src/pages/callback/CallbackPage.style.ts b/frontend/src/pages/callback/CallbackPage.style.ts
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { Z_INDEX } from "@/styles/zIndex";
 
 export const CallbackPageContainer = styled.div`
   display: flex;
@@ -41,6 +42,7 @@ export const LoadingContainer = styled.div`
   border-radius: 25px;
 
   p {
+    z-index: ${Z_INDEX.header};
     font: ${({ theme }) => theme.TEXT.medium_bold};
     color: ${({ theme }) => theme.COLOR.grey4};
   }