React Router v7 에서 아이폰 실기기 로컬서버를 찾을 수 없습니다

개발
1

아이폰 실기기에서 샌드박스 앱 실행시
서버를 찾을 수 없다고 나옵니다.
어떻게 해결할까요?
(실기기에서 크롬으로 로컬서버 ip입력은 작동하는 상태입니다)

앱인토스 샌드박스앱 로컬 네트워크는 열려있는 상태입니다.

사용기기: mac, 아이폰

재현 단계

// 1단계: reactor-router v7 프로젝트 만들기
npx create-react-router@latest eng-learning-pet

// 2단계: 앱인토스 패키지 설치
npm install @apps-in-toss/web-framework

// 3단계: 아래 적은 설정파일들 반영한 뒤 개발서버 열기
npm run dev

// 4단계: 이후 샌드박스 앱에서 진행

// 메트로 서버 설정 입력
192.168.***.***:5173

// url 입력값
intoss://eng-learning-pet

설정파일들


// granite.config.ts 파일
// icon과 host, port만 변경함

import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  appName: 'eng-learning-pet',
  brand: {
    displayName: 'eng-learning-pet', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
    primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: '', // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
  },
  web: {
    host: '192.168.***.***', // ipconfig getifaddr en0 사용한 주소
    port: 5173,
    commands: {
      dev: 'react-router dev',
      build: 'react-router build',
    },
  },
  permissions: [],
  outdir: 'dist',
});


// vite.config.ts 파일
// host만 변경함

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  server: {
    host: "192.168.***.***",
  },
});


// react-router.config.ts 파일
// SSR을 false로만 변경함

import type { Config } from "@react-router/dev/config";

export default {
  // Config options...
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: false,
} satisfies Config;