diff --git a/pages/_app.tsx b/pages/_app.tsx index ac50208..818b0bd 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -20,7 +20,6 @@ let systemColor export default function App({ Component, pageProps }: AppProps): JSX.Element { const [ betaKey, setBetaKey ] = useState('') const [ theme, setDefaultTheme ] = useState(undefined) - const { setTheme } = useTheme() useEffect(() => { setBetaKey(localStorage.betaKey) console.log( @@ -31,9 +30,10 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { '%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!', 'color: #ff0000; font-size: 20px; font-weight: bold;' ) - }, []) - - useEffect(()=> { + if(!localStorage.webp) { + if(canUseWebP()) localStorage.webp = true + else localStorage.webp = false + } try { systemColor = window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light' } catch (e) { @@ -43,8 +43,8 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { localStorage.setItem('theme', systemColor) setDefaultTheme(systemColor) } - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) + return ( @@ -72,3 +72,13 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { ) } + +function canUseWebP() { + const elem = document.createElement('canvas') + if (elem.getContext && elem.getContext('2d')) { + // was able or not to get WebP representation + return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0 + } + // very old browser like IE 8, canvas not supported + return false +} \ No newline at end of file