refactor: 태크 키씹힘 수정

prgrms-web-devcourse-final-project · Dec 9, 2024 · e7bdf7e · e7bdf7e
1 parent 7dcbf61
commit e7bdf7e
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/features/gathering/ui/GatheringTagInput.tsx b/src/features/gathering/ui/GatheringTagInput.tsx
@@ -25,13 +25,16 @@ export const GatheringTagInput = ({
   placeholder = '태그를 입력해주세요',
 }: GatheringTagInputProps) => {
   const [inputValue, setInputValue] = useState('');
+  const [isComposing, setIsComposing] = useState(false);
 
   const handleKeyDown = (
     e: KeyboardEvent<HTMLInputElement>,
     onChange: HandleChangeFunction,
     currentValue: string[],
   ) => {
-    if ((e.key === 'Enter' || (e.metaKey && e.key === 'Enter')) && inputValue.trim()) {
+    if (isComposing) return;
+
+    if (e.key === 'Enter' && inputValue.trim()) {
       e.preventDefault();
       if (currentValue.length >= 3) {
         return;
@@ -70,6 +73,12 @@ export const GatheringTagInput = ({
               onChange={e => {
                 setInputValue(e.target.value);
               }}
+              onCompositionEnd={() => {
+                setIsComposing(false);
+              }}
+              onCompositionStart={() => {
+                setIsComposing(true);
+              }}
               onKeyDown={e => {
                 handleKeyDown(e, onChange, value || []);
               }}