[FE] swipe 기능을 ref를 받아 쓰도록 개선한다

skiende74 commented 6 days ago

❗ Issue

956

✨ 구현한 기능

변경내용 : 기존 = useMouseDrag가 swipe 핸들러를 window에 걸었음 -> ref를 받아서 ref에 걸도록 변경

- 해결하고자 한 문제 : swipe 이벤트 때문에, 주소모달에서의 스와이프에도 탭이동이 되어버림.
- 해결 :  훅의 이벤트 핸들러 범위를 전역(window)대신 좁은 범위로 잡기

변경내용 : 층수 입력 등 숫자형 방기본정보 입력시 모바일 숫자패드가 뜨도록 반영
해결하고자 한 문제 : 모바일에서 숫자패드가 뜨게 하고싶다. 그러나 type을 사용하면 stepper가 생기는 등 사이드이펙트가 존재
방법 : inputMode="decimal"사용
변경내용 : (UI) 편집체크리스트의 체크리스트에도 탭이동버튼을 추가
원인 : 추가/편집이 서로다른컴포넌트를 쓰고있었음. 당시에 '추가'에만 넣어줬었음.
방법 : 그냥 추가해줌
post-signup을 fetch->fetcher로 대체하였습니다.

📢 논의하고 싶은 내용

🎸 기타

github-actions[bot] commented 6 days ago

🚀 storybook: https://669cc4025d9f500bb8c34778-ksbevijang.chromatic.com/

github-actions[bot] commented 6 days ago

🚀 storybook: https://669cc4025d9f500bb8c34778-gtwrxoyjya.chromatic.com/

github-actions[bot] commented 5 days ago

🚀 storybook: https://669cc4025d9f500bb8c34778-mbjiuvkwno.chromatic.com/

github-actions[bot] commented 5 days ago

🚀 storybook: https://669cc4025d9f500bb8c34778-vppmkkauwa.chromatic.com/

github-actions[bot] commented 5 days ago

🚀 storybook: https://669cc4025d9f500bb8c34778-ptbmuzflxb.chromatic.com/

skiende74 commented 5 days ago

헤일리 리뷰 반영했습니다. 반영내용: TAB_THRESHOLD 상수파일로 이동, fetcher/credential.

추가로 useMouseDrag를 두 곳에서 쓰느라 5~6줄에걸친 코드가 반복된다는 점이 좀 걸려서 변경해보았습니다.

변경내용: useMouseDrag를 이용해 100px 움직일시 탭이동하는 로직을 useTabContext내 에서 제공하게 변경

해결하고자 한 문제 : useMouseDrag를 두 곳에서 쓰느라 5~6줄에걸친 코드가 반복됨.
해당 반복코드를 useMouseDragForTab 같은 훅으로 뽑아서 사용하면, 나중에 또 탭이동을 이용할 일이 있을 때 useMouseDrag를 써야할 지, useMouseDragForTab을 써야할지 일일이 들여다 봐야함.
해결 : useTabContext 에서 제공함으로써 탭을 쓸 때, 그냥 사용할 수 있게 함

유틸 분리에 대해

remainOp을 유틸로 분리하는 리뷰에 대해 단순히 util폴더로 이동 시 colocation을 해치고, (tab에서만 사용되는 로직인데 사용처와 멀어짐) 그렇다고 내부에 그냥 놔두면 가독성에 아쉬운 면이 있다고 생각했습니다. 이제는 한 곳에서만 쓰이는 함수인 만큼, 상수파일로 이동하지는 않고, 훅 내부 대신 외부에 위치하게 두었습니다 (같은 파일).

woowacourse-teams / 2024-bang-ggood