github.io를 통한 배포 시도 중 겪는 어려움

https://kyh012412.github.io/react_side_project1/ 이쪽으로 연결되도록 package.json에 homepage를 연결했고

스크립트도 다음과 같이 predeploy와 deploy를 추가했다.

뭐가 부족한지 정상 작동이 되지 않는 문제가 있다. app.js

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Nav from './component/Nav';
import Collapse from './component/Collapse';
import Carousel from './component/Carousel';
import Dropdown from './component/Dropdown';
import Navbar from './component/Navbar';
import './css/mytemplate.css';
import CardInGame from './component/CardInGame';
import BoardInGame from './component/BoardInGame';
import IsOutsideInfoComeLater from './component/IsOutsideInfoComeLater';
import FetchTest from './component/FetchTest';
import CollapseButton from './component/CollapseButton';
import CollapseBody from './component/CollapseBody';
import { IdContext } from './context/IdContext';
import CollapseSet from './component/CollapseSet';

function App() {
  return (
    <>
      {/* 12시방향 가로로 긴 직사각형 */}
      <div className="header">
        <Navbar id={'topNavbar'} />
      </div>

      {/* 상중하중에 중간에 뚱뚱한 가로로 긴 직사각형 */}
      <div className="middle">
        <div className="middle-left">
          <IdContext.Provider value="leftNavCollapseBody">
            <CollapseSet />
          </IdContext.Provider>
        </div>
        <div className="middle-center" id="Content">
          {/* <BoardInGame jsonPath="/cardData.json" /> */}
          <BrowserRouter basename={process.env.PUBLIC_URL}>
            <Routes>
              <Route path={process.env.PUBLIC_URL} element={<></>} />
              <Route path="/collapse" element={<Collapse />} />
              <Route path="/carousel" element={<Carousel />} />
              <Route path="/dropdowns" element={<Dropdown />} />
              <Route
                path="/card"
                element={
                  <CardInGame name="asset0" imagePath="/img/card/asset0.svg" />
                }
              />
              <Route
                path="/board"
                element={<BoardInGame jsonPath="/cardData.json" />}
              />
              <Route path="/isout" element={<IsOutsideInfoComeLater />} />
              <Route path="/fetchtest" element={<FetchTest />} />
            </Routes>
          </BrowserRouter>
        </div>
        <div className="middle-right"></div>
      </div>

      {/* 상중하 중에 아래부분 가로로 긴 직사각형 */}
      <div className="footer"></div>
    </>
  );
}

export default App;

또는

<BrowserRouter basename="/react_side_project1">
  <Routes>
    <Route path="/" element={<></>} />
    <Route path="/collapse" element={<Collapse />} />
    <Route path="/carousel" element={<Carousel />} />
    <Route path="/dropdowns" element={<Dropdown />} />
    <Route
      path="/card"
      element={
        <CardInGame name="asset0" imagePath="/img/card/asset0.svg" />
      }
    />
    <Route
      path="/board"
      element={<BoardInGame jsonPath="/cardData.json" />}
    />
    <Route path="/isout" element={<IsOutsideInfoComeLater />} />
    <Route path="/fetchtest" element={<FetchTest />} />
  </Routes>
</BrowserRouter>

kyh012412 / react_side_project1

github.io를 통한 배포 시도 중 겪는 어려움 #2