Improve ux/#136

[seonghunYang]

📌 작업 내용

개선전:

개선후:

구현 내용 및 작업 했던 내역

• useFunnel로 인한 화면 깜박임 현상 수정
• useFunnel URL 교체 시 발생하는 Funnel 컴포넌트 리렌더링 문제 해결
• Form Input 컴포넌트에 자동 포커스(autofocus) 기능 추가
• 폼 페이지(아이디 찾기, 비밀번호 찾기, 로그인, 회원가입)에 자동 포커스 적용

🤔 고민 했던 부분

• 사용자가 폼이 있는 페이지에 접근하고 조작하는 경험을 향상시키기 위한 개선 작업을 진행했습니다.
• 기존 useFunnel에서는 defaultStep으로 초기 렌더링을 하지 않아 화면 깜빡임이 발생했습니다. 이를 해결하기 위해 URL 지정 이전에도 defaultStep이 표시되도록 수정했습니다.
• URL 변경 시 Funnel 컴포넌트가 재렌더링되어 autofocus가 두 번 깜빡이는 문제가 있었습니다. 이를 해결하기 위해 FunnelRoot와 Funnel 컴포넌트에 useCallback과 useMemo를 적용하여 step 변경 시에만 리렌더링되도록 개선했습니다.
• 구글 로그인을 참고하여 autofocus 속성을 추가함으로써 사용자가 즉시 폼을 조작할 수 있도록 했습니다.

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-colfvowatx.chromatic.com/

[gahyuun]

고생하셨습니다! 훨씬 ux가 개선된게 느껴지네요 👍