[FE] feat: 한국어 crdt 구현

[d0422]

한국어 crdt 구현

PR 설명

• 한국어 crdt 구현

✅ 완료한 기능 명세

• 한국어 crdt 구현

📸 스크린샷

고민과 해결과정

기존의 문제점은 한글이 한글자씩 입력되는 경우 ytext에 자모음이 하나씩 입력되어 한글이 깨진다는 것이었다.
이를 해결하기 위해 compositionEnd 이벤트를 사용했다.
한글이 완성되었을 때 발생하는 이벤트인데, 이때 ytext에 추가시키는 형태로 구현했다.
또한, 기존의 onChange함수에서 한 글자에 한글인 경우에 대해서는 ytext에 처리하지 않는 형태로 구현하여 해결했다.

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newText = event.target.value;
    const newCursor = event.target.selectionStart; // 연산 이후의 최종 위치

    setPlainCode(newText);
    setCursorPosition(newCursor);

    const changedLength = plainCode.length - newText.length;
    const isAdded = changedLength < 0;

    if (isAdded) {
      const addedText = newText.slice(newCursor - Math.abs(changedLength), newCursor);
      const isOneLetter = addedText.length === 1;
      const isKorean = addedText.match(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/);

      if (isOneLetter && isKorean) return; //한글인 경우 추가하지 않음

      crdt.getText('sharedText').insert(newCursor - Math.abs(changedLength), addedText);
    } else {
      const removedLength = Math.abs(changedLength);
      crdt.getText('sharedText').delete(newCursor, removedLength);
    }

    sendMessageDataChannels(codeDataChannel, Y.encodeStateAsUpdate(crdt));
  };

한글을 한글자씩 입력받는 경우 처리

  const handleCompositionEnd = (event: React.CompositionEvent<HTMLTextAreaElement>) => {
    crdt.getText('sharedText').insert(cursorPosition - 1, event.data);
    sendMessageDataChannels(codeDataChannel, Y.encodeStateAsUpdate(crdt));
  };