Feat/#333 refactor custom hook

[ilmerry]

• [x] 브랜치명, 브랜치 알맞게 설정
• [x] Reviewer, Assignees, Label, Milestone, Issue(PR 작성 후에) 붙이기
• [ ] PR이 승인된 경우 해당 브랜치는 삭제하기
• [ ] close #333

📌 내용

• useShowByQuery를 삭제하고, useCardType을 사용하도록 고칩니다. 기존에 useShowByQuery를 쓰던 컴포넌트들은 useCardType을 사용하되, isShow~ state를 사용해 보이지 않아야할 Location들에 따라 state를 변경해주고 있습니다.
• useDraggableYContainer를 삭제하고, useDraggingContainer가 x축 y축 모든 방향에서 스크롤 가능하도록 변경하였습니다. 이 과정에서, 모바일에는 MouseEvent가 적용되지 않음을 알았습니다. 따라서 handler 함수에서는 Synthetic Event로 모두 받되, getPageByEventType에서 분기처리하여 MouseEvent와 TouchEvent를 구분하고, 기존에는 onMouse~로만 전달되고 있던 props에 onTouch~ 속성을 추가하였습니다.
• useRecentlyBookmarked의 위치를 변경하였습니다. 제가 잘못 생각했던 부분이 있는데, "두개 이상의 컴포넌트에서 공통으로 사용한다 = 모두의 공통컴포넌트이다"라고 잘못생각했던 것 같습니다. 앞으로는 이 점 유의하면서 코딩하는게 좋겠습니다!
• 댓글 창 모달에 사용하는 useDrawer을 리팩토링하였습니다. 로직은 useDraggingContainer와 유사합니다.

📌 내가 알게 된 부분

clientX와 pageX의 차이

• 디버깅하다가 발견했는데, 현재 상태에서는 clientX와 pageX 모두 같은 값을 찍어내는것을 알았습니다. 그래도 브라우저 창에 의존적인 client보다는, 페이지 내 절대값의 개념인 page를 쓰는것이 안전하겠다고 판단해 page로 통일하겠습니다

[NYeonK]

역시 빠르다 은형!!!!🙆‍♂️👏 틈틈이 봐서, 평일 내에 코드리뷰 달아놓을게요! 수고하셨습니다아:)

[ilmerry]

👍🏼👍🏼👍🏼👍🏼

근데 knob, useDrawer가 뭥가요????(궁금)

@joohaem useDrawer는 댓글창 모달에 사용하는 훅이에요. 이미지에 보다시피 drawer는 상단의 손잡이(knob)를 가지고 컨트롤하는 모달입니다! 따라서 모달 자체에 해당하는 ref도 필요하고, 손잡이에 해당하는 ref도 필요합니다🙂