[FE] 약속 생성 UI 흐름에 퍼널 패턴을 적용해요 :)

[hwinkr]

이슈 요약

기능의 의도

현재 약속 생성 페이지에서 약속을 생성하기 위한 입력들을 할 때, 아래로 스크롤을 하면서 입력값들을 채우게 됩니다.

스크롤을 하는게 정말 불편한 요소인가?

라고 생각할 수 있습니다. 하지만, 데스크탑이 아닌 모바일을 생각해 보면 충분히 불편할 수 있습니다. 모바일은 입력을 하기위해서 모바일 가상 키보드가 화면의 영역을 차지하게 됩니다. 이렇게 되면 키보드 뒤 영역은 가려지게 되고, 한 필드에 입력을 마치면 다음 필드에 입력을 하기 위해서 아래로 내려가야하며 모두 내려왔을 때 어떤 입력값을 해야 하는지 파악하게 됩니다. 따라서,

• 사용자가 한 번에 하나의 입력에만 집중할 수 있도록
• 다음 버튼을 누르면서 다음 입력 필드로 이동하는 흐름을 제공할 수 있도록

위 두 가지 사고를 적용해 보기 위해서 약속 생성 UI 흐름에 퍼널 패턴을 적용해 보기로 했어요.

상세 작업 내용

• 퍼널 패턴을 적용하기 위한, useFunnel 커스텀 훅을 구현
• react-router-dom을 활용해서 다음 입력 필드로 이동할 경우 라우팅 구현

레퍼런스

• 토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기