main.tsx

// import { StrictMode } from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { OverlayProvider } from 'overlay-kit';
import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import { HelmetProvider } from 'react-helmet-async';
import { ToastContainer } from 'react-toastify';

import { initClarity } from '@shared/config/clarity';
import {
  getSentryReactErrorHandlerOptions,
  initSentry,
} from '@shared/config/sentry';
import { toastConfig } from '@shared/types/toast';

import { queryClient } from '@apis/config/queryClient';

import AppErrorFallback from '@components/errorFallback/AppErrorFallback';
import '@styles/global.css';

import App from './App';

// TODO: UI 테스트용 MSW 활성화 — API 배포 후 제거
async function enableMocking() {
  if (!import.meta.env.DEV) return;
  const { worker } = await import('./mocks/browser');
  return worker.start({ onUnhandledRequest: 'bypass' });
}

initSentry();
initClarity();

// 개발 모드: 최초 진입 시 ?ab=single|multiple 을 로컬스토리지에 저장
if (import.meta.env.DEV) {
  try {
    const sp = new URLSearchParams(window.location.search);
    const ab = sp.get('ab');
    if (ab === 'single' || ab === 'multiple') {
      localStorage.setItem('ab_image_variant', ab);
    }
  } catch {
    console.error('Error setting ab_image_variant');
  }
}

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Root element not found');
}

enableMocking().then(() => {
  createRoot(rootElement, getSentryReactErrorHandlerOptions()).render(
    // <StrictMode>
    <ErrorBoundary FallbackComponent={AppErrorFallback}>
      <HelmetProvider>
        <QueryClientProvider client={queryClient}>
          <OverlayProvider>
            <App />
            <ToastContainer {...toastConfig} />
            {import.meta.env.DEV && (
              <ReactQueryDevtools initialIsOpen={false} />
            )}
          </OverlayProvider>
        </QueryClientProvider>
      </HelmetProvider>
    </ErrorBoundary>
    // </StrictMode>
  );
});