SPMS_WEB/react/src/hooks/use-mobile.ts
SEAN fc9b0c0f75 feat: 프론트엔드 아키텍처 셋업 (#2)
- Vite 기본 템플릿 정리 및 index.html 수정
- guideline.html 기반 디자인 토큰 적용 (index.css)
- Feature-based 폴더 구조 (8개 feature 모듈)
- 18개 placeholder 페이지 + lazy loading 라우터
- 레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout)
- Zustand 스토어 (authStore, uiStore)
- API 계층 (Axios client, auth.api)
- 타입 정의, 유틸리티, 환경변수 설정
- ErrorBoundary, ProtectedRoute, PublicRoute

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 13:02:22 +09:00

20 lines
565 B
TypeScript

import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return !!isMobile
}