app/+html.tsx · Ramble-FE

import { ScrollViewStyleReset } from 'expo-router/html';
import { type PropsWithChildren } from 'react';

/**
 * Google OAuth 리다이렉트 시 scope 파라미터에 URL이 포함되어 
 * React 하이드레이션 에러가 발생하는 문제를 해결합니다.
 * scope 파라미터를 URL에서 제거하여 정상적인 렌더링을 보장합니다.
 */
const googleOAuthFixScript = `
  (function() {
    try {
      var url = new URL(window.location.href);
      var scope = url.searchParams.get('scope');
      if (scope && scope.includes('https://')) {
        url.searchParams.delete('scope');
        window.history.replaceState(null, '', url.toString());
      }
    } catch (e) {
      console.error('Error fixing Google OAuth URL:', e);
    }
  })();
`;

export default function Root({ children }: PropsWithChildren) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <script dangerouslySetInnerHTML={{ __html: googleOAuthFixScript }} />

        <ScrollViewStyleReset />
      </head>
      <body>{children}</body>
    </html>
  );
}