[Fix] useDevice hook 확장 #391
Conversation
|
src/common/hooks/useDevice.ts
Outdated
| export function useDevice(tabPoint?: string, mobPoint?: string): 'TAB' | 'MOB' | 'DESK' { | ||
| const isTablet = useIsTablet(tabPoint); | ||
| const isMobile = useIsMobile(mobPoint); |
There was a problem hiding this comment.
useIsTablet에 들어가는 tabPoint는 tabel 기준 minWidth가 될 것이고
useIsMobie에 들어가는 mobPoint는 mobile 기준 maxWidth가 되니까
결국 tabPoint와 mobPoint가 같은 거 아닌가요??
모바일 기준 최대 너비가 태블릿 기준 최소 너비니까요!
useIsTablet에서 minWidth의 default value가 431이고, useIsMobile에서 maxWidth의 default value가 430.999 이지만
브라우저에서 px 소수점 인식 제대로 못하기 때문에 하나의 변수로 통일 시켜도 될 거 같다는 생각입니다!
There was a problem hiding this comment.
아 제가 prop을 잘못 작성했는데,
제가 의도했던 코드는 이거였어요!!
저희가 breakPoint가 두개니까요.
+) 그리고 breakPoint 두개를 일반 arguments로 주면 사용하는 쪽에서 어떤 순서로 작성해야 하는지 혼동할 수 있을 것 같아서
값 의미를 정확히 하고자 객체로 묶어서 주었어요
혹시 어떠신가요? ?
export function useDevice({ mobMax, tabMax }: { mobMax?: string; tabMax?: string }): 'TAB' | 'MOB' | 'DESK' {
const isTablet = useIsTablet(mobMax, tabMax);
const isMobile = useIsMobile(mobMax);
return isTablet ? 'TAB' : isMobile ? 'MOB' : 'DESK';
}* fix: breakPoint 수정 * fix: useDevice prop 추가 * fix: mobPoint, tabPoint 적용 * fix: useDevice prop 객체로 묶음
* design: Input short/long 반응형 및 Select 일부 구현 * design: Footer 반응형 구현 * design: Select 반응형 구현 * fix: TextBox 반응형 * design: TextArea 반응형 * design: SelectBox 반응형 * design: Footer 반응형 * [Fix] useDevice hook 확장 (#391) * fix: breakPoint 수정 * fix: useDevice prop 추가 * fix: mobPoint, tabPoint 적용 * fix: useDevice prop 객체로 묶음 * fix: useDevice 기본인수 추가 및 Footer mobMax 설정 * fix: deviceType context로 전달 * chore: import build error fix * fix: DEVICE_TYPE -> deviceType 네이밍 변경
Related Issue : Closes #390
🧑🎤 Summary
🧑🎤 Comment
Footer 같은 경우, 특수하게 breakPoint 가 혼자 달라요.
이런 케이스가 앞으로도 생길 수 있기 때문에 tablet breakPoint, mobile breakPoint 주입해줄 수 있도록,
대신 기존에 사용된 훅들에 영향 없도록 optional prop 추가해주었습니다