[FE] 인풋 컴포넌트 디자인 수정 및 로그인 페이지 디자인 수정

[hwinkr]

관련 이슈

• resolves: [FE] 현재 날짜 기준 1년 이후에만 날짜를 결정할 수 있도록 제한, 닉네임과 비밀번호 스텝을 구분해요 :) #410

작업 내용

인풋 컴포넌트 디자인 개선

모바일 기기에서는 입력을 하기 위해 가상 키패드가 올라옵니다. 이 때, 가상 키패드 뒤에 가상 영역이 생기는 문제가 있어, 스크롤이 되는데요. 사용자 경험 향상을 위해서 퍼널 패턴을 도입했지만, 아이러니하게도 다시 사용자 경험을 저하시키는 요소가 발견되었습니다. 따라서, 이 문제를 해결하기 위해서 브레인 스토밍을 했었죠!

해당 이미지처럼 닉네임, 비밀번호를 가로로 배치하거나, 닉네임과 비밀번호 입력 스텝을 구분하는 방법이 제시되었는데

• 가로로 배치하는 것은 이미 작은 모바일 기기에 어울리지 않는다는 점
• 닉네임과 비밀번호를 따로 입력하는 것은 입력 관심사를 퍼널 패턴을 도입하기 위해 억지로 분리한다는 점

이 두 가지 생각으로 인해서 채택되지 않았습니다. 결국 스크롤을 막기 위해서 선택한 방법은 인풋 필드의 높이를 줄이는 것이었습니다.

Before	After

인풋 필드의 높이를 줄였고, 헤더의 높이도 줄일 예정이므로 모바일 기기에서 현재 포커스되는 인풋 필드로 강제로 스크롤 하는 문제는 어느정도 해결되는 것으로 확인됐습니다. 아이폰 7 사용자는 약간의 스크롤은 발생하기는 하지만, 이전 상황에 비하면 훨씬 개선되었다고 판단했어요.

ScrollBlock.tsx

해당 컴포넌트는 children이 모바일 환경에서 스크롤되지 않도록 하는 책임을 가집니다.

useEffect(() => {
  const handleTouchMove = (e: TouchEvent) => {
    e.preventDefault();
  };

  // 터치 이벤트를 사용해서 스크롤을 할 경우, 해당 스크롤을 막는다는 것을 브라우저에게 명시적으로 알려주기 위해서 passive 속성 추가(@해리)
  document.addEventListener('touchmove', handleTouchMove, { passive: false });

  return () => {
    document.removeEventListener('touchmove', handleTouchMove);
  };
}, []);

{passive: false}를 설정이 왜 필요했는지에 대해서 설명드릴게요. 모바일에서 브라우저는 터치 이벤트가 발생할 때, 성능 최적화를 위해서 기본적으로 true로 설정합니다. 마우스나, 손가락을 이용해서 특정 페이지를 스크롤 할 때, 브라우저는 빠르게 이벤트에 반응해서 스크롤을 해줘야 하는 책임을 가지고 있습니다. 이 때, passive 속성은 e.preventDefault()를 실행할지 말지 암묵적으로 결정하는 속성입니다.

1. true

true인 경우, 브라우저는 이벤트 핸들러가 e.preventDefault()를 호출하지 않을 것으로 보장받습니다. 그러므로, 이벤트 핸들러가 실행되기 전 우선적으로 스크롤을 처리하게 됩니다. 이것이 스크롤 성능 최적화입니다. 자세한 내용은 MDN의 스크롤 성능 향상 섹션에서 확인할 수 있어요.

2. false

false인 경우에는, 브라우저가 이벤트 핸들러 내부에서 e.preventDefault()를 호출할지 모른다고 가정합니다. 따라서, 내부에서 해당 메서드를 호출할 수 있기 때문에 스크롤을 바로 실행하지 않고 이벤트 핸들러가 완료될 때까지 기다립니다. 이 기다림이 메인 스레드를 블록하고, 렌더링 지연으로 이어집니다.

브라우저는 스크롤 관련 성능 최적화를 위해서, touchmove, wheel과 같은 이벤트의 passive를 기본적으로 true로 설정합니다. 하지만, 저희는 스크롤을 막기로 결정했기 때문에, false속성과 함께 기본 동작인 스크롤을 막을 수 있도록 e.preventDefault()함수를 호출했습니다!

특이 사항

리뷰 요구사항 (선택)

[github-actions]

Test Results

27 tests   27 ✅  16s ⏱️
 3 suites   0 💤
 1 files     0 ❌

Results for commit 155d745.