46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* 반응형 브레이크포인트 감지 훅
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
import { Breakpoint, BREAKPOINTS } from "@/types/responsive";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 현재 윈도우 크기에 따른 브레이크포인트 반환
|
||
|
|
*/
|
||
|
|
export function useBreakpoint(): Breakpoint {
|
||
|
|
const [breakpoint, setBreakpoint] = useState<Breakpoint>("desktop");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const updateBreakpoint = () => {
|
||
|
|
const width = window.innerWidth;
|
||
|
|
|
||
|
|
if (width >= BREAKPOINTS.desktop.minWidth) {
|
||
|
|
setBreakpoint("desktop");
|
||
|
|
} else if (width >= BREAKPOINTS.tablet.minWidth) {
|
||
|
|
setBreakpoint("tablet");
|
||
|
|
} else {
|
||
|
|
setBreakpoint("mobile");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 초기 실행
|
||
|
|
updateBreakpoint();
|
||
|
|
|
||
|
|
// 리사이즈 이벤트 리스너 등록
|
||
|
|
window.addEventListener("resize", updateBreakpoint);
|
||
|
|
|
||
|
|
return () => window.removeEventListener("resize", updateBreakpoint);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return breakpoint;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 현재 브레이크포인트의 컬럼 수 반환
|
||
|
|
*/
|
||
|
|
export function useGridColumns(): number {
|
||
|
|
const breakpoint = useBreakpoint();
|
||
|
|
return BREAKPOINTS[breakpoint].columns;
|
||
|
|
}
|