엔터로 모달끄기

내가 해야 할 업무는 로그인을 다시 다듬는 것이었다. 이 과정에서 맞닥뜨린 문제는 총 세가지였다.

1. 아이디/비번 자동완성에서 닉네임을 아이디로 인식하는데 이를 이메일로 바꾸기
2. 자동완성 후 로그인버튼 클릭 뿐 아니라 엔터를 눌렀을 때에도 로그인이 되도록 하기
3. 아이디/비번이 틀린 경우 뜨는 모달을 엔터로 끄기

하나씩 해결한 방법을 소개하겠다.

닉네임을 아이디로 인식시키기

아이디 비번 자동완성 javascript라고 검색하면 나오는 자료들이 모두 자동완성 끄기였다. 하지만 나는 자동완성을 활용하고 싶지 자동완성을 끄고싶지 않았다. 해결방법은 의외로 간단했는데, 회원가입 순서를 이메일 - 닉네임 - 비밀번호 순서에서 닉네임 - 이메일 - 비밀번호 순서로 바꾸니 해결되었다. 이 부분에 대해서는 사실 검색해도 나오지 않아서 찍어맞춘 기분이라 좀 씁쓸하다.

엔터키로 로그인하기

엔터키로 로그인하는건 e.key ==='Enter'를 활용하면 된다는 사실은 검색하면 쉽게 알 수 있다. 하지만 내가 궁금했던건 자동완성을 할 때에도 로그인이 되어 있어야 한다는 점이었다.
자동완성을 할 때의 상황을 생각해보았을 때 가짓수는 총 3가지였다

1. 이메일에 클릭 후 자동완성
2. 비번에 클릭 후 자동완성
3. 이미 자동완성 된 상태여서 엔터만 누름

3가지 전부 input에 포커스 올라가야 한다는 공통점이 존재했다. 고로 1,2번의 경우 input에 포커스가 갈 경우 엔터키를 클릭 시 signin 함수가 동작하도록 설정했고 3번의 경우 페이지로 이동할 때 이메일에 포커스를 주도록 설정했다.

모달을 엔터로 끄기

가장 어려웠던 부분이다. 엔터키로 모달을 꺼야하는데 사이트를 뒤져보니 전부 input을 기반으로 엔터입력이 이루어졌다. 그래서 챗gpt와 구글검색의 힘을 빌려 하나씩 알아보았다.

input 숨기기

첫번째로 시도한 방식은 input을 만들고 이를 숨긴 방식이었다. 하지만 input이 focus가 되어야 엔터키가 작동할 수 있었고 이를 억지로 useEffect를 사용하여 포커스를 주기에는 형식 상 맞지 않은 것 같았다.

div에 엔터 입력

div에 엔터를 넣는 방식도 고려해보았다. useRef를 통하여 엔터를 누를 시 클릭한것처럼 동작하게 되는 함수이다.

const App: React.FC = () => {
  const divRef = useRef<HTMLDivElement>(null);

  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter') {
      event.preventDefault();
      if (divRef.current) {
        divRef.current.click();
      }
    }
  };

  const handleClick = () => {
    console.log('Div clicked!');
    // div를 클릭할 때 실행할 동작을 여기에 추가하세요.
  };

  return (
    <div>
      <div
        ref={divRef}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        tabIndex={0} // div에 포커스를 줄 수 있도록 tabindex 설정
        style={{ border: '1px solid black', padding: '10px', cursor: 'pointer' }}
      >
        클릭할 영역
      </div>
      <p>페이지 어디서든 엔터 키를 눌러 div를 클릭하세요.</p>
    </div>
  );
};

export default App;

하지만 이 방법도 실패로 돌아가게 되었다. div 역시 포커스가 되어있어야, 한마디로 클릭이 된 상태여야 작동하였고 내가 초기에 생각해낸 엔터만으로 모달창이 사라지지 않았다.

window 객체 이용하기

마지막으로 얻어낸 정답이 바로 window 객체를 사용하는 것이었다. window 객체를 이용하게 되면 클릭 필요 없이 한방에 움직이리라 생각했다. 또한 모달을 없애는 함수이다 보니 이벤트버블링이 일어난다 한들 문제가 없으리라 생각했다. 내가 짠 함수식은 다음과 같다.

  const buttonRef = useRef<HTMLDivElement>(null)
  const clickButton = () => {
    dispatch({ type: actions.clearAlert.type })
  }

  const keydownEnter: EventListener = (event) => {
    if ((event as KeyboardEvent).key === 'Enter') {
      event.preventDefault()
      if (buttonRef.current) {
        buttonRef.current.click()
      }
    }
  }
  useEffect(() => {
    window.addEventListener('keydown', keydownEnter)
  }, [])

우여곡절이 있었지만 결국 엔터로 모달을 끄는데 성공했다.