useMediaQuery

function ResponsiveLayout() {
  const isMobile = useMaxWidth(767);
  const isTablet = useBetweenWidth(768, 1023);
  const isDesktop = useMinWidth(1024);
 
  return (
    <div className="layout">
      {isMobile && <MobileLayout />}
      {isTablet && <TabletLayout />}
      {isDesktop && <DesktopLayout />}
    </div>
  );
}

function DarkModeSupport() {
  const prefersDarkMode = usePrefersDarkMode();
 
  return (
    <div className={prefersDarkMode ? 'dark-theme' : 'light-theme'}>
      <h1>안녕하세요!</h1>
      <p>현재 {prefersDarkMode ? '다크' : '라이트'} 모드입니다.</p>
    </div>
  );
}

function AccessibleButton() {
  const prefersReducedMotion = usePrefersReducedMotion();
 
  return (
    <button
      className={prefersReducedMotion ? 'no-animation' : 'animate'}
      aria-label="확인"
    >
      확인
    </button>
  );
}

function DeviceAwareInterface() {
  const isTouchDevice = useIsTouchDevice();
  const hasHover = useHasHover();
 
  return (
    <div>
      {isTouchDevice ? <TouchFriendlyControls /> : <PreciseControls />}
      {hasHover && <HoverEffects />}
    </div>
  );
}

function SmartUI() {
  // 모바일이거나 모션 감소 선호 시 간단한 애니메이션 사용
  const useSimpleAnimation = useMediaQuery(
    media.or(media.max(767), media.prefersReducedMotion.reduce),
  );
 
  // 터치 기능이 있는 큰 화면(태블릿 등)에서는 특별한 UI 제공
  const isLargeTouch = useMediaQuery(
    media.and(media.min(768), media.pointer.coarse),
  );
 
  return (
    <div>
      <Animations complexity={useSimpleAnimation ? 'simple' : 'rich'} />
      {isLargeTouch && <TouchOptimizedUI />}
    </div>
  );
}

// 기본적으로 서버에서는 모바일로 처리 (max-width: 767px)
const isMobile = useMediaQuery(media.max(767), true);