From eff133b45c240f5330a1aebd439e451b54eabc5a Mon Sep 17 00:00:00 2001 From: lydiacho Date: Tue, 13 Aug 2024 16:21:38 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20breakPoint=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/hooks/useDevice.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/hooks/useDevice.ts b/src/common/hooks/useDevice.ts index a61c01b1..4f9d1097 100644 --- a/src/common/hooks/useDevice.ts +++ b/src/common/hooks/useDevice.ts @@ -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})`, @@ -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})`, From 26943dfe07e34ba5019eb9ec41aefb62297f0a05 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Tue, 13 Aug 2024 16:32:40 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20useDevice=20prop=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/hooks/useDevice.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/hooks/useDevice.ts b/src/common/hooks/useDevice.ts index 4f9d1097..68380379 100644 --- a/src/common/hooks/useDevice.ts +++ b/src/common/hooks/useDevice.ts @@ -23,9 +23,9 @@ export function useIsMobile(maxWidth = '430.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); return isTablet ? 'TAB' : isMobile ? 'MOB' : 'DESK'; } From 97bd198e1730d768cdf4a1ccfc7bcd336b0131d8 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Tue, 13 Aug 2024 17:10:12 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20mobPoint,=20tabPoint=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/hooks/useDevice.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/hooks/useDevice.ts b/src/common/hooks/useDevice.ts index 68380379..2a171149 100644 --- a/src/common/hooks/useDevice.ts +++ b/src/common/hooks/useDevice.ts @@ -12,7 +12,7 @@ export function useIsTablet(minWidth = '431px', maxWidth = '768px') { return isTablet; } -export function useIsMobile(maxWidth = '430.999px') { +export function useIsMobile(maxWidth = '431px') { const [isMobile, setIsMobile] = useState(false); const mobile = useMediaQuery({ query: `(max-width:${maxWidth})`, @@ -24,7 +24,7 @@ export function useIsMobile(maxWidth = '430.999px') { } export function useDevice(tabPoint?: string, mobPoint?: string): 'TAB' | 'MOB' | 'DESK' { - const isTablet = useIsTablet(tabPoint); + const isTablet = useIsTablet(mobPoint, tabPoint); const isMobile = useIsMobile(mobPoint); return isTablet ? 'TAB' : isMobile ? 'MOB' : 'DESK'; From 155fdea09cc8d0ae01bab124d0e1fd25dd99a2cb Mon Sep 17 00:00:00 2001 From: lydiacho Date: Tue, 13 Aug 2024 17:13:03 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20useDevice=20prop=20=EA=B0=9D?= =?UTF-8?q?=EC=B2=B4=EB=A1=9C=20=EB=AC=B6=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/hooks/useDevice.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/hooks/useDevice.ts b/src/common/hooks/useDevice.ts index 2a171149..f1b6be7b 100644 --- a/src/common/hooks/useDevice.ts +++ b/src/common/hooks/useDevice.ts @@ -23,9 +23,9 @@ export function useIsMobile(maxWidth = '431px') { return isMobile; } -export function useDevice(tabPoint?: string, mobPoint?: string): 'TAB' | 'MOB' | 'DESK' { - const isTablet = useIsTablet(mobPoint, tabPoint); - const isMobile = useIsMobile(mobPoint); +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'; }