웹뷰 연결은 되는데 화면이 안 나와요 (TDSMobileAITProvider 사용 중)

개발
1

안녕하세요, AIT 웹뷰 처음 써보는데 막혀서 질문 올립니다.

상황

React + Vite로 웹뷰 만들고 있는데, 시뮬레이터/에뮬레이터에서 연결은 되는 것 같은데 화면이 안 나옵니다.

Metro 서버도 뜨고, 번들링도 100% 되는데 그냥 빈 화면이에요.

설정

granite.config.ts

export default defineConfig({
  brand: {
    primaryColor: '#3182F6',
    icon: '',
    bridgeColorMode: 'basic',
  },
  web: {
    host: '192.168.237.104',
    port: 3000,
    commands: {
      dev: 'vite --host',
      build: 'vite build',
    },
  },
  permissions: [],
});

vite.config.ts

export default defineConfig({
  plugins: [react(), svgr(), tailwindcss()],
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

App.tsx

공식 문서 보니까 TDSMobileAITProvider로 감싸라고 해서 이렇게 했습니다:

import { Button } from '@toss/tds-mobile';
import { TDSMobileAITProvider } from '@toss/tds-mobile-ait';

function App() {
  return (
    <TDSMobileAITProvider>
      <Button>테스트</Button>
    </TDSMobileAITProvider>
  );
}

export default App;

근데 이것도 안 되네요…

일단 테스트로 Button만 넣어봤는데 그것도 안 보입니다.

확인한 것들

  • granite.config.ts에 --host 옵션은 들어가 있음

  • vite.config.ts의 포트랑 granite.config.ts 포트 일치함 (3000)

  • iOS 시뮬레이터, Android 에뮬레이터 둘 다 안 됨

  • Metro는 정상적으로 뜸 (Bundling 100% 완료 메시지 나옴)

원래 구조

사실 원래는 React Router로 페이지 여러 개 만들어 놨었는데, 그것도 안 되길래 일단 간단하게 버튼 하나만 테스트해보려고 위처럼 바꿔봤습니다.

// 원래 이렇게 되어 있었음
import { ThemeProvider } from '@toss/tds-mobile';
import { RouterProvider } from 'react-router-dom';
import { router } from '@/app/routes/routes';

function App() {
  return (
    <ThemeProvider>
      <RouterProvider router={router} />
    </ThemeProvider>
  );
}

근데 이것도 안 됐고, TDSMobileAITProvider로 바꿔도 안 되고…

혹시 뭘 빼먹은 걸까요?

PC 웹 브라우저에서는 localhost:3000으로 접속하면 잘 나오는데, 앱인토스 샌드박스에서만 안 나옵니다.

도움 부탁드립니다 ㅠㅠ

2

안녕하세요 :slight_smile:
react + vite로 프로젝트 생성 후 npx ait init 으로 초기화하고 샌드박스로 열어보면 어떤가요 ?

  1. react + vite로 프로젝트 생성 (npm create vite@latest test-app -- --template react-ts)
  2. npx ait init
  3. npm run dev
1개의 좋아요