채팅 입력시 끝 단어 2번 입력되는 현상을 발견.

윈도우 환경에서는 채팅을 할 시 끝 단어가 2번 반복되는 현상이 없었는데

맥 환경에서는 채팅을 할 시 끝 단어가 간헐적으로 2번 반복되는 현상이 나타났다.

  // 메시지 전송 핸들러

  const KeyPresshandler = async (event: React.KeyboardEvent<HTMLInputElement>) => {

    if (event.key === 'Enter' && inputValue.trim()) {

      if (event.nativeEvent.isComposing === false) {

        event.preventDefault(); // 폼 제출 방지

        sendDirectMessage({

          content: inputValue,

          author_id: LoginPersonal,

          chat_id: chatId,

          item_id: productId,

          // others_id: otherLoginPersonal,

        });

        setInputValue('');

      }

    }

  };

  //dm메시지 전송

  const sendDmMessage = async () => {

    if (!inputValue.trim()) return; // 메시지가 비어있지 않은지 확인

    sendDirectMessage({

      content: inputValue,

      author_id: LoginPersonal,

      chat_id: chatId,

      item_id: productId,

      // others_id: otherLoginPersonal,

    });

    setInputValue('');

  };

  // 메시지 전송 핸들러 라고 적힌 부분이 위의 이미지에서 입력창에 엔터를 치면 들어가는 코드이고 

  //dm메시지 전송 라고 적힌 부분이 위의 이미지에서 전송을 눌러야 들어가는 코드이다.

아래에는 JSX 부분에서 실행 할때 코드 인데,   

             <St.ChatModalFooter>

                <St.InputField

                  value={inputValue}

                  onChange={InputChanger}

                  onKeyDown={KeyPresshandler}

                  placeholder="메세지를 입력해주세요"

                />

                <St.SendButton onClick={sendDmMessage}>전송</St.SendButton>

              </St.ChatModalFooter>

위의 두 코드는 거의 동일하지만 재밌게도 엔터를 눌러서 입력을 하면 끝단어가 2번 보내지고, 전송을 눌러서 보내면 괜찮다고 한다.

원인을 파악하던중 onKeyDown 이라는 이벤트가 발생 할때 문제가 된다는 걸 알았다.

isCompoising(현재 값이 입력이 완료된 상태(false)/진행중인 상태(true))라는 속성과 한글입력방식이 

밀접하게 연관이 있었다

영어의 경우 apple이라고 입력하면 완성된 상태 isCompoising (false) 로 인식하지만

한글의 경우 사과라고 입력하면 진행중인 상태  isCompoising (true) 라고 인식을 해서 끝 단어가 반복이 되는 것이었다.

 

이 경우  if (event.nativeEvent.isComposing === false)  라는 조건문을 걸어줘서 끝단어가 반복되는 것을 막을 수 있었다.