안녕하세요. 현재 리액트와 파이어베이스로 사이드프로젝트를 만들고있습니다!

지금 영화메뉴에서 영화를 고르고 예매버튼을 누르면 바로 예약버튼을 누르면 /movie-web/book링크로 갈수있게 해놨는데 그렇지 않고 https://wlals2997.github.io/book으로  이동을 하게 됩니다. 다시 새로고침을 하고 예매버튼을 누르게 되면 전에 예매선택해놓은 데이터들이 뜨긴합니다ㅠ 
예매취소버튼 또한 링크가 제대로 가지 않고 있는데요ㅠ 

const onClick = async (e) => {
    await setDoc(doc(dbService, 'usersProfile', 'book'), {
      movie: detail.title,
      time: time,
      location: location,
      movieImage:detail.medium_cover_image,
    });
    document.location.href = '/book';
    console.log(selectMovie);
  };

예매 버튼

//예매취소
  const onClick = async () => {
    await deleteDoc(doc(dbService, 'usersProfile', 'book'));
    document.location.href = '/movie';
  };
예매 취소버튼
을 작성한 코드입니다.
router쪽은 BrowserRouter를 사용했는데 gh-pages로 배포하면 오류가 생긴다고 하여
<BrowserRouter basename='/movie-web'>
basename을 추가해주었구요 package.json에도 

"homepage": "https://wlals2997.github.io/movie-web/"
를 작성해주었습니다.
이전페이지로도 잘 돌아가지 않는데
어떻게 해야하나요?T_T

배포한 주소:https://wlals2997.github.io/movie-web/

깃허브 주소:https://github.com/wlals2997/movie-web