modal 컴포넌트의 아이콘의 크기가 페이지마다 달라지는 현상

<modal 컴포넌트>

import styled from 'styled-components';
import { close } from '../../redux/reducers/modalSlice';
import { useDispatch } from 'react-redux';

const ModalWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;

const ModalBackDrop = styled.div`
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ModalMain = styled.div`
  width: 30rem;
  height: 20rem;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
`;

const ModalIconWrapper = styled.div`
  width: 3rem;
  height: 3rem;
  border: 3px solid ${(props) => props.color};
  border-radius: 100%;
  padding: 1rem;
  opacity: 0.5;
  color: ${(props) => props.color};

  svg {
    width: 100%;
    height: 100%;
  }

  svg > path {
    stroke: ${(props) => props.color};
    stroke-width: 0.1;
    fill: ${(props) => props.color};
  }
`;

const ModalText = styled.h3`
  font-weight: bold;
  font-size: 1.2rem;
`;

const ModalButton = styled.button`
  width: 5rem;
  height: 3rem;
  border: none;
  border-radius: 3px;
  color: var(--white);
  background-color: var(--blue-500);
  cursor: pointer;
`;

export default function Modal({ icon, text, color }) {
  const dispatch = useDispatch();
  const closeModal = () => {
    dispatch(
      close({
        isOpen: false,
      }),
    );
  };

  return (
    <ModalWrapper>
      <ModalBackDrop onClick={closeModal}>
        <ModalMain onClick={(e) => e.stopPropagation()}>
          <ModalIconWrapper color={color}>{icon}</ModalIconWrapper>
          <ModalText>{text}</ModalText>
          <ModalButton onClick={closeModal}>OK</ModalButton>
        </ModalMain>
      </ModalBackDrop>
    </ModalWrapper>
  );
}

어제의 문제와 비슷하게, 메인페이지에서는 정상적으로 나오는 모달창이 로그인과 회원가입 페이지에서는 다르게 나왔다.
정확히 말하자면, ModalIconWrapper만 사이즈가 줄어들어서 나오는 현상이 발생했다.
아니.... 줄어들거면 다 줄어들던가 딱 ModalIconWrapper 부분만 줄어드는건 도대체 무슨 현상일까?

<providers의 일부분>

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> },
      { path: 'questions', element: <Questions /> },
      { path: 'tags', element: <Tags /> },
      { path: 'mypage', element: <MyPage /> },
      { path: 'questions/:id', element: <QuestionDetail /> },
    ],
  },
  { path: '/login', element: <Login /> },
  { path: '/signup', element: <SignUp /> },
]);

 

사이드메뉴는 로그인/회원가입 페이지에서 나오면 안되므로 로그인과 회원가입 페이지를 따로 빼내게 되었는데, 여기서 어떤 문제가 발생했을 가능성이 있어보인다.
혹은 회원가입페이지 스타일드컴포넌트에서 무분별하게 남용한 rem 단위가 문제를 일으켰을지도 모를 일이다.
팀원들과 함께 여러 방면으로 수정해봤지만 해결방법을 찾아내지 못했다.

그래서 결국 회원가입페이지를 위한 전용 모달컴포넌트를 하나 추가하는 꼼수(?)로 해결하였다. 도대체 무슨 이유였을까....?
프리프로젝트의 종료기한이 얼마 남지 않았기에 더 고민할 수는 없지만, 궁금하다.....!!