1. SignUp 페이지 레이아웃, CSS 구현

제일 먼저 내가 맡은 3페이지 중에 회원가입 페이지를 제일 먼저 작업에 들어간 이유는 오로지 혼자 작업하는 페이지였기 때문이다. (나머지 2페이지는 공동 작업 페이지)

프리 프로젝트 땐 로그아웃만 맡았었기 때문에 이번엔 로그인이나 회원가입 코드를 짜 보고 싶어서 자원했다.

메인 프로젝트 팀의 프론트 팀원은 나를 포함해 4명인데 각자 작업하는 방법이 다르다는 걸 이때 처음 알았다. 나는 그 중에 피그마를 참고해 레이아웃을 잡아두고, 기능을 구현하고, css를 수정하는 작업 방식을 사용한다.

팀 프로젝트가 아닐 때는 css를 완전히 만들고 기능을 구현하는 순서를 애용했다. 팀 프로젝트를 시작하면서 "재사용 가능한 컴포넌트는 재사용하는 것이 좋고, 재사용할 것이라면 시간 들여 굳이 만들어둘 필요가 없고 자리만 잡아두자." 라는 생각으로 레이아웃을 잡아두고, 기능 구현 후 다른 팀원이 작업한 컴포넌트가 있음 가져다 쓰고 없음 css를 다듬는 식으로 작업하게 된 것 같다.

2.SignUp 페이지 기능 구현

3.Error 처리

3-1) keyDown 이벤트 한글 입력 시 마지막 글자가 다음 input으로 출력되는 현상

작성한 코드

//회원가입 페이지
  //이름
  const onChangeName = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    setNickname(e.target.value);
    if (e.target.value.length < 2 || e.target.value.length > 10) {
      setNameMessage('닉네임은 2글자 이상 10글자 미만으로 입력해주세요');
      setIsName(false);
    } else {
      setNameMessage('사용 가능한 닉네임입니다');
      setIsName(true);
    }
  }, []);

  // handleEnter
  const handleEnter = (
    e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>,
    next: string
  ) => {
    const key = e.key || e.keyCode;
    if (key === 'Enter' || key === 13) {
      if (next === 'signUpSubmit') {
        onSubmit;
      } else {
        document.getElementById(next)?.focus();
      }
    }
  };

//리턴문
	//닉네임
    <input
         type="text"
         id="nickname"
         className="absolute top-0 w-full h-full px-6 pt-3 text-base font-medium bg-transparent outline-none peer/email input-ani"
         value={nickname}
         name="nicmname"
         onChange={onChangeName}
         onKeyDown={(e) => handleEnter(e, 'email')}
      ></input>

• 닉네임 인풋에 예를들어 한글 닉네임 '티테'를 적고 엔터를 누르면, 다음 인풋인 email로 포커스가 이동되는데 '테'가 함께 넘어와지는 현상이 발생한다.
• 영어로 작성했을 땐 같은 현상이 발생하지 않았다.
  
  

해결방법

해당 현상은 ketDown 이벤트의 문제였다. 한글이 영어보다 많은 정보를 담고있기 때문에 키입력 순간부터 입력완료까지 시간이 걸리고, 이는 이벤트가 이미 발생한 이후에도 진행중일 수 있는 것이다. 실제로 한글 닉네임과 영어 닉네임을 작성하며 비교를 해봤을 때 아래와 같은 차이를 발견할 수 있었다.

커서라고 해야하나? 영어를 입력했을 땐 모든 입력이 끝났기 때문에 e 밑에 짝대기가 없지만, 한글의 경우 테 밑에 밑줄이 쳐져 있는 것을 확인할 수 있다. 이것을 발견하고, 한글 닉네임을 작성한 후 키보드 방향키 오른쪽을 눌러 커서를 옮겨보자 해당 현상이 발생하지 않는 것을 확인했다.

이 현상을 어떻게 해결할 수 있을까 이것저것 시도해 보다가 keyPress 이벤트를 사용하여 문제를 해결했다는 글을 발견하고 닉네임 input 태그의 keyDown 이벤트를 변경해 보았더니 제대로 작동하는 것을 확인할 수 있었다.

하지만 아무래도 임시 방편일 뿐이라 다른 방도를 찾아보는 것이 좋을 것 같다.