모임 만들기 Funnel UI 적용

[cys4585]

PR의 목적이 무엇인가요?

1. 모임 만들기 Funnel UI 적용
2. useStatePersist 커스텀 훅 개발 (web storage를 활용해 react 상태를 새로고침해도 유지할 수 있게하는 커스텀 훅)
3. useFunnel 커스텀 훅 개발 (Funnel UI를 쉽게 구현할 수 있도록 만든 커스텀 훅)
4. Funnel Layout, Component 분리

설명

모임 만들기 UX 개선(사용자가 한 번에 하나의 입력에만 집중할 수 있도록 페이지를 단순화하고 페이지를 스탭으로 연결)을 위해 Funnel UI를 적용했어요.

• 페이지 이동은 react router를 활용했어요. 모든 스탭을 동일한 pathname으로 관리해서 브라우저 URL로 각 스탭에 접근하지 못하도록 했습니다. 또 history stack을 자연스럽게 대응할 수 있는 것도 이점입니다. 브라우저의 뒤로/앞으로 가기로 인한 이슈를 방지할 수 있습니다.
• 브라우저를 통한 페이지 이탈 및 접근은 react router로 대응할 수 없어서 Web API를 활용했어요. (Performance API로부터 페이지 접근 type을 받을 수 있습니다.)
• 디자인 요구사항 기준으로 Funnel Layout이 재활용될 여지가 있을 것 같아 별도로 추상화했어요.

질문 혹은 공유 사항 (Optional)

재사용이 가능할 만한 부분을 두 개 찾아서 추상화해서 커스텀 훅으로 만들었어요.

1. useFunnel

퍼널은 사용자가 어떤 기능의 첫 단계부터 최종 단계에 도달하기까지 거치는 과정을 의미합니다. 보통 사용자에게 많은 입력을 받아 가입, 등록, 생성을 할 때 거치는 절차라고 생각하면 됩니다.
useFunnel 커스텀 훅은 그 퍼널을 쉽게 관리할 수 있도록 하는 데 목적을 두고 만들었어요. 디자인 요구사항에 퍼널 형태의 UI가 많은 것 같아서 개발했습니다.
toss의 useFunnel Interface 문서
toss funnel UI 유튜브

useFunnel 커스텀 훅은 react router에 의존이 있습니다! 스탭 변경을 react router의 useNavigate로 합니다. navigate시 전달해주는 state로 스탭을 판단합니다.

• firstStep: 퍼널의 첫 스탭
• currentStep: 현재 스탭을 알 수 있음
• Funnel: 현재 스탭에 맞는 컴포넌트 렌더링
  • step: 스탭과 컴포넌트 매핑하는 객체
• goBack: 뒤로가기 기능
• goNextStep: 다음 스탭으로 가기 기능

2. useStatePersist

브라우저의 스토리지를 활용해 새로고침을 해도 react state를 유지할 수 있도록 해주는 hook입니다. redux, recoil과 같은 전역 상태 관리 도구에서 persist를 지원하는 걸 보고, 지역 상태 관리도 persist가 되면 좋겠다 생각해서 만들어봤어요. 사용성을 위해 최대한 useState과 인터페이스를 맞추려고 했습니다.
페이지가 unload되기 전, react state를 스토리지에 임시로 저장했다가 다시 페이지가 load되면 스토리지 데이터를 react state로 옮기고, 스토리지 데이터는 삭제합니다.

• key: 스토리지에 저장할 key 값입니다.
• initialState: useState의 initialState와 동일합니다.
• storage: session storage와 local storage를 고를 수 있는 옵션입니다. (생각해보니 지금 구현 기준이면 local storage에 올라갈 필요가... 없을 듯 합니다... 개발하다가 저장하는 방식이 바뀌었는데 고려를 못했네요.. 확장될 여지가 있다고 생각해서 일단은 둬볼게요.)
• [state, setState]: useState의 반환값과 동일합니다.

이슈 ID는 무엇인가요?

• closed 모임 만들기 UX 개선 #325

[jaeml06]

확인했습니다. 수야 고생했어요