Files
jaengseung-made/app/components/deepfield/useFieldMode.ts

30 lines
890 B
TypeScript

'use client';
import { useEffect, useState } from 'react';
import { decideFieldMode, type FieldMode } from '@/lib/deepfield-mode';
function detectWebGL(): boolean {
try {
const canvas = document.createElement('canvas');
return Boolean(canvas.getContext('webgl2') ?? canvas.getContext('webgl'));
} catch {
return false;
}
}
/** SSR/첫 페인트는 'static'으로 시작 — 클라이언트에서 승격 (hydration 불일치 방지) */
export function useFieldMode(): FieldMode {
const [mode, setMode] = useState<FieldMode>('static');
useEffect(() => {
setMode(
decideFieldMode({
reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
webglSupported: detectWebGL(),
hardwareConcurrency: navigator.hardwareConcurrency ?? 0,
viewportWidth: window.innerWidth,
}),
);
}, []);
return mode;
}