[온보딩] funnel 이용하여 사용자 정보 수집 로직 #68
Conversation
|
There was a problem hiding this comment.
와 정말 어렵네요.. 구조 파악이 정말 어려웠어요..! 근데 라이브러리 사용보니 저희 온보딩에 진짜 적합한 라이브러리군요..!
| steps: Steps; | ||
| step: Steps[number]; | ||
| children: Array<ReactElement<StepProps<Steps>>> | ReactElement<StepProps<Steps>>; |
There was a problem hiding this comment.
이건 정말 그냥 의견제시인데 지금 그럼 steps가 스텝을 구별하는 카테고리고
step이 index값이라면 좀더 명확하게 steps, step 이 좀 비슷한 것 같아서 네이밍 변경을 추후에 리팩토링 할 때 해보면 좋을 것 같아요!
There was a problem hiding this comment.
맞아요 그래서 레퍼런스 보면 steps를 그냥 일반적인 typescript에서 사용하는 T를 사용해서 구현했더라구요! 가영님이 알려준 방식이 훨씬 가독성이 좋을 것 같습니다!! 저도 긁어오면서 굉장히 헷갈렸거든요 ㅠ
| <div style={{ display: 'flex', justifyContent: 'flex-end' }}> | ||
| <BtnNext | ||
| type='button' | ||
| onClick={onNext} | ||
| customStyle={{ | ||
| position: 'absolute', | ||
| bottom: '0', | ||
| }} | ||
| > |
There was a problem hiding this comment.
저 방금 리액트 모범사례 읽으면서 인라이 스타일 지양해야한다! 는 글을 읽고 왔습니다. 저도 이렇게 인라인 스타일썼는데 같이 모듈화해서 리팩토링 합시다!
There was a problem hiding this comment.
아 인라인 보다 확실히 이런 방법이 좋겠네요. 아무래도 좀 가독성이 떨어져서 지금...
| const FunnelComponent = useMemo( | ||
| () => | ||
| Object.assign( | ||
| (props: Omit<FunnelProps<Steps>, 'step' | 'steps'>) => ( | ||
| <Funnel<Steps> step={step} steps={steps} {...props} /> | ||
| ), | ||
| { Step }, | ||
| ), | ||
| [step], | ||
| ); |
There was a problem hiding this comment.
useMemo 사용 너무 좋습니다.. Omit 대박이네요..시간이 되면 더 뜯어보고 싶은 코드네요
There was a problem hiding this comment.
Omit이 일단 간지가 좀 나보여서... ㅋㅋㅋㅋㅋㅋ 저도 라이브러리 뜯어보면서 배운거라 제가 구현했다고 하기에는 좀 그러네요.
토스가 한겁니다!!~
| <Funnel.Step name='NAME'> | ||
| <NameInput onNext={() => setStep(() => 'THUMBNAIL')} /> | ||
| </Funnel.Step> |
| <GlobalStyle /> | ||
| </RecoilRoot> | ||
| </QueryClientProvider> | ||
| <Wrapper> |
There was a problem hiding this comment.
지금 고민해보니까 Layout에서 전체 모바일뷰 설정해주는 게 좋긴 한 것 같아서 Layout에 min-height를 지정하거나 Layout과 겹치는 속성을 Wrapper에서 제거하는 식으로 main으로 머지 전에 수정하면 좋을 것 같다는 개인적인 생각이 들었어요..!
|
|
||
| export interface StepProps<Steps extends NonEmptyArray<string>> extends PropsWithChildren { | ||
| name: Steps[number]; | ||
| onNext?: VoidFunction; |
There was a problem hiding this comment.
오 저는 () => void만 썼었는데 VoidFunction으로 쓸 수 있군요! 덕분에 배워갑니다~!
차이를 몰랐었는데 찾아보니 TypeScript의 내장 유틸리티 타입이라서 VoidFunction이 더 명시적이고 가독성이 좋다고 하네요! 최고최고👍
| @@ -42,6 +47,18 @@ const NameInput = () => { | |||
| </S.IconField> | |||
| </S.Wrapper> | |||
| <S.LetterLength>({text.length}/10)</S.LetterLength> | |||
| <div style={{ display: 'flex', justifyContent: 'flex-end' }}> | |||
There was a problem hiding this comment.
스타일 컴포넌트를 적용하면 더 가독성이 좋을 것 같아요~!
| margin: 0 auto; | ||
| margin-top: 6.1rem; |
There was a problem hiding this comment.
margin 설정이 두 번 들어가서 한 번 확인 부탁드려요!
이슈 넘버
구현 사항
Need Review
버튼 오른쪽 정렬
부모에 flex와 flex-end 주기
자식에게 position absolute와 bottom 0 주기
📸 스크린샷
2024-01-10.11.20.56.mov
Reference