Kk 28/fix rw club

[halionaz]

📌 내용

• Club Page의 모바일뷰를 구현했어요.
• Club Page 카테고리를 지정할 때 이용하는 Drawer를 쉽게 사용하기 위해, useDrawer 훅을 구현했어요. (리팩토링을 거쳐 useOverlay로 확장시키고 싶어요)
• useSearch 훅을 useQueryParams 훅으로 전환했어요
  • 사용하면서 발견된 타입 관련 이슈가 있어 주석으로 표시했습니다. 함께 고민해보면 좋을 거 같아요

☑️ 체크 사항

• 모바일 화면이 Figma에 표시된 것과 일치하는지
• Modal과 Drawer이 버그 없이 동작하는지

❗ Related Issues

• Schedule Page & Club Page 반응형 대응 #99

[notion-workspace]

동아리 반응형 대응

[Virtuso1225]

p2; 여기 alert 없애주세요..!

[halionaz]

이거 toast 컴포넌트 모바일 최적화가 안되어 있어 이후 PR에 추가하려고 했습니다!

[halionaz]

Screen.Recording.2024-11-24.at.5.50.45.PM.mov

보시면 원래 데스크탑은 상단 헤더를 살짝 가리는 형태로 뜨는데,
모바일에서도 위치가 똑같다보니 위쪽에 불필요하게 너무 크게 표시됩니다.

모바일 토스트를 어떻게 보여줄지도 회의 때 논의해보면 좋겠군요
폰트 크기를 줄이고, 상단보다는 하단으로 위치를 옮긴 후 반응형 페이지에 일괄적으로 적용하는게 좋을 거 같아요!

[Virtuso1225]

근데 제 추측이 맞다면? query 객체는 매번 재생성 될텐데, query 객체 내부 자체는 그대로일 수 있어서 dependency에 넣어두면 무조건 리렌더 발생할 확률 100%

[Virtuso1225]

조금 더 부연 설명을 하자면,

searchFilter =  {
	id: query?.id,
	name: query?.name
}

이런 searchFilter가 있다고 했을 때,

pagination 이 발생해서 page query가 바뀐 경우 query 가 재생성 되고 searchFilter 도 재생성 되겠죠?
하지만 실제 내부 객체 자체는 그대로인 상황에서 searchFilter를 의존하는 콜백함수는 재생성될 필요 없는데 재생성되는 아이러니함을 겪을 것 같다? 라는 내용이었어요.

[halionaz]

@Virtuso1225 우선 PR 리뷰 나왔던 항목은 반영 완료했습니다
써보면서 생긴 몇가지 이슈가 더 있는데 후속 PR에 처리하도록 할게요

• ClubPage UX Improve #133

[Virtuso1225]

p3; obj1, obj2 null 인 경우 early return 하면 깔꼼하지 않을까~? 하는 생각

[Virtuso1225]

약간 제가 했던 말과는 살짝 모순이지만...�isDeepEqual 같은 핵심 js 기능은 es-toolkit or lodash의 isEqual을 쓰는 것은 어떠할지...
es-toolkit isEqual 한 번 까보니까 좀 잘 해둔 것 같아요

[Virtuso1225]

이건 지금 isDeepEqual이 잘 된다면 그냥 넘어가도 오케이~