Climeeting / climeet-fe

https://www.cli-meet.com/

2 stars 2 forks source link

#14 모바일 UX 적용하기(stackflow) #18

Closed piggmme closed 6 months ago

piggmme commented 6 months ago

14

동작 영상

https://github.com/Climeeting/climeet-fe/assets/76723666/1062a363-1d90-4544-a98d-4e88ca55d22f

작업 사항

Stackflow

stackflow에서 화면의 쌓임과 이동 처리를 해주기 때문에 리액트 라우터를 걷어냈습니다.
stackflow.ts 에서 historySyncPlugin 를 추가하여 브라우저 라우팅 히스토리와 일치하도록 했습니다
HomePage, LoginPage에 stackflow를 적용하였습니다.
TopBar, BottomBar 를 추가하였습니다.

SVG Icon

아이콘 컴포넌트 Icon.tsx 를 만들었습니다.
새로운 아이콘 추가할 때는 components/Icon/svgs 에 svg 아이콘을 추가하시고, components/Icon/svgs/index.ts에서 다시 내보내기를 추가하면 됩니다.

패키지 변경

stackflow 관련 패키지를 설치했습니다.
classnames를 추가했습니다.