Fe/bugfix/#524 sidebar 관련버그 수정

[Doosies]

변경 사항

• 🐞 SideBar 관련 버그 #524 의 이슈 해결

고민과 해결 과정

이슈 해결

기존에는 sidebar가 flex를 기반으로 작성이 되어있어서 모바일 대응이 힘들었음 그래서 sidebar 구조를 변경함

sidebar 로직 단순화

이슈를 해결하면서 훅의 코드가 여러곳에 퍼져있는걸 확인함 그래서 원인을 파악하는데 시간이 오래걸렸음
따라서 여러곳에 퍼져있는 로직을 useSidebar 훅 한곳으로 모아서 응집도를 높이면서 단순화 시킴
그런데 기존 테스트 코드는 수정하지 못함...

이제 sidebar를 사용하려면 usesidebar훅, sidebar 컴포넌트만 있다면 간단하게 사용이 가능해짐

동작과정

sidebar는 position: absolute left:100%로 해서 오른쪽에 가있도록 함
그 후 mainContent와 sideBar의 ref를 훅으로 받아와서 열면 transformx -(사이드바의 가로 길이), 닫으면 transformx 0으로 애니메이션을 줌

SideBar SideBar 컴포넌트도 훅 안에 넣고싶었는데 불가능했음
이유는 상위 라우터에서 훅이 다시 실행되지 않기에, 화면에 반영되지 않았기 때문임

즉, HumanChatPage 라우터에서 실행한 훅은 하위 라우터에서 안의 내용이 변경되어도
훅에서 리턴한 컴포넌트가 상위 라우터에 영향을 주지 않고, 상위 라우터가 리렌더링 되지 않앟기에
ref를 인수로 받는 식으로 useSidebar훅을 만들어줌

해결된 문제들

• 모바일에서 아래처럼 사이드바가 왼쪽이 살짝 보임
• 열려도 전체가 열리지 않고 일부분만 열림
• webrtc에서 사용자 둘이 연결되면 갑자기 사이드바가 열리던 버그
• 사이드바 버튼을 여러번 눌러도 자연스럽게 열리고, 닫힘

아래는 기존 문제들 스크린샷

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	c963e29
Status:	⚡️  Build in progress...

View logs

[HeoJiye]

👍👍 여기 모바일 쪽 문제가 있었구나..
고마워!