Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fix] useDevice hook 확장 #391

Merged
merged 4 commits into from
Aug 13, 2024
Merged

[Fix] useDevice hook 확장 #391

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eff133b
fix: breakPoint 수정
lydiacho Aug 13, 2024
26943df
fix: useDevice prop 추가
lydiacho Aug 13, 2024
97bd198
fix: mobPoint, tabPoint 적용
lydiacho Aug 13, 2024
155fdea
fix: useDevice prop 객체로 묶음
lydiacho Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/common/hooks/useDevice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useMediaQuery } from 'react-responsive';

export function useIsTablet(minWidth = '429px', maxWidth = '768px') {
export function useIsTablet(minWidth = '431px', maxWidth = '768px') {
const [isTablet, setIsTablet] = useState(false);
const tablet = useMediaQuery({
query: `(min-width: ${minWidth}) and (max-width: ${maxWidth})`,
Expand All @@ -12,7 +12,7 @@ export function useIsTablet(minWidth = '429px', maxWidth = '768px') {
return isTablet;
}

export function useIsMobile(maxWidth = '428.999px') {
export function useIsMobile(maxWidth = '430.999px') {
const [isMobile, setIsMobile] = useState(false);
const mobile = useMediaQuery({
query: `(max-width:${maxWidth})`,
Expand All @@ -23,9 +23,9 @@ export function useIsMobile(maxWidth = '428.999px') {
return isMobile;
}

export function useDevice(): 'TAB' | 'MOB' | 'DESK' {
const isTablet = useIsTablet();
const isMobile = useIsMobile();
export function useDevice(tabPoint?: string, mobPoint?: string): 'TAB' | 'MOB' | 'DESK' {
const isTablet = useIsTablet(tabPoint);
const isMobile = useIsMobile(mobPoint);
Copy link
Member

@eonseok-jeon eonseok-jeon Aug 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useIsTablet에 들어가는 tabPoint는 tabel 기준 minWidth가 될 것이고
useIsMobie에 들어가는 mobPoint는 mobile 기준 maxWidth가 되니까
결국 tabPoint와 mobPoint가 같은 거 아닌가요??
모바일 기준 최대 너비가 태블릿 기준 최소 너비니까요!

useIsTablet에서 minWidth의 default value가 431이고, useIsMobile에서 maxWidth의 default value가 430.999 이지만
브라우저에서 px 소수점 인식 제대로 못하기 때문에 하나의 변수로 통일 시켜도 될 거 같다는 생각입니다!

Copy link
Member Author

@lydiacho lydiacho Aug 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 제가 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';
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

너무 좋습니다~~~ :)
고생하셨어여 😄


return isTablet ? 'TAB' : isMobile ? 'MOB' : 'DESK';
}