현재 mogiyoon.com을 업데이트 중이다.

문제

input 창에 입력하고 확인 버튼을 두 번 눌러야 이런 결과가 나타났다. (그림자는 수정 이후라서 그런거다) 즉, 한 번 누를 때는 결과가 나타나지 않았다.

말로는 구조가 복잡하고 스타일 클래스 때문이라고 했다.
그래서 추천해준 코드로 실행해보니 안되길 5번은 반복한 것 같다.

input을 form으로 바꾸자길래 바꾸기도 하고 이런 저런 시도들을 해본 것 같다.
그냥 직접 원인을 알아보기 위해 콘솔 추가해달라고 하고 실제로 실행해보니
웬걸 처음에 확인 버튼을 누르는게 씹힌다.
확인 버튼을 눌렀다는 사실조차 모르는 것이다.

투명한 요소? 복잡한 구조? 아니다. 그게 아니다.

여기서 대충 원인이 짐작이 갔다.

원인

영어로 입력하고 실행을 해봤다.
한 번에 잘 된다.
맞다. 한글 입력때문이다. 영어는 입력과 동시에 입력이 끝난다.
하지만 한글은 입력이 끝났을 수도 아닐 수도 있다는 것이다.

이 얼마나 양자역학적인 문자

자음 하나만 입력했을 때
ㅋ
이렇게 끝날 수도 있지만
코
사실은 이렇게 입력하기 위해 다음 입력을 기다릴 수도 있고
콖
이게 될 수도 있다.
사실은 코끼리 인데 말이다.

참고로 아프리카 코끼리가 인도 코끼리보다 쎄다

아무튼 중요한 사실은 입력이 끝났는지 안 끝났는 지 모르기 때문에 일종의 대기 상태에 있게 된다.
그 상황에서 '확인'을 누르게 되면 대기 상태. 즉, 포커싱 상태가 풀리게 되고,
그 다음에 확인을 눌러야 비로소 진짜 클릭 이벤트가 발생한다.

해결

원인을 알았으면 해결해야
Gemini한테 원인을 알려주고 해결해라고 했다.

해결은 안됐다.

권유 받은 방법들로 끝까지 안되길래 포기하려다가
번뜩하고 떠오른 것은

어차피 입력이 끝나면 사람들은 확인 버튼 위에 마우스를 올려야한다.
이때 포커싱을 해제하면 안될까?

  const handleMouseEnter = () => {
    const currentValue = editableDivRef.current?.innerText || '';
    
    // 입력 값이 비어있지 않을 때만 포커스를 제거합니다.
    if (currentValue.trim() !== '') {
      editableDivRef.current?.blur();
    }
  };

...

        <button 
          type="button" 
          onMouseEnter={handleMouseEnter} 
          onClick={handleCheck} 
          className={retroButtonClasses}
        >
          확인
        </button>

AI가 좋은건 저런 함수들 일일이 안 찾아봐도 된다는 점이다.

그리고 물론 잘 해결됐다.