react antd 모달 사이즈 주기 -3

모달에 스타일을  주려고 하는데, 초기에는 max-width와 min-width를  활용해서 
최대 크기는  80vw 최소 크기는 400 px로 설정하려고 했다. ( 모달 크기도 화면의 크기에 따라서 조정하고 싶었습니다)
따라서 기존에 작성된 코드에서 width를 매개변수로 전달 받아서 스타일을 주려고 했는데,  모달에 최대사이즈와 최소사이즈를 주는 법을 찾지 못하였습니다.



문제해결 방법 1
우선 Modal antd 홈페이지에서 api를 살펴보았습니다.  (https://ant.design/components/modal)
하지만  width 키워드는 존재했지만, max-width와 min-width는 찾지 못하였습니다.
이를 해결하기 위해서 stackoverflow에도 검색을 하였는데,  className을 활용해라는 막연한 답변만 존재하고 실용가능한 답이 없었습니다.

문제해결 방법 2

두 번째는  키워드에서 style이라는 키워드가 있기에 이를 활용해서 해결해보려고 했습니다.
이중에서 style이라는 키워드가 있어서 이를 활용해서 css를 주려고 했습니다.
하지만 이 키워드에서 width 관련 스타일(max.min)은 적용되지 않았습니다.
(바깥 영역에 빨간색은 보이는 100vh가 제대로 적용되지 않음.

문제해결 방법 3
그 다음엔  해결하기 위해서 className을 줘서   해결하려고 했습니다.
이 방법 또한  실패했습니다. 파란색 영역은 적용되는데 크기는 적용되지 않음.

.CommonModal {
	/* 여기에 원하는 스타일을 작성합니다 */
	display: flex;
	justify-content: center;
	/* min-width: 400px !important;
	max-width: 100vw !important; */
	width: 5000px;
	align-items: center;
	background-color: blue;
	/* 추가적인 스타일을 적용하고 싶다면 이곳에 작성합니다 */
}

이를 해결하기 위해서 개발자 도구를 통해서 className을 찾은 다음에 직접적으로 스타일을 주려고 했는데 크기를 결정하는 컴퍼넌트의 class 이름이 ant-modal css-dev-only-do-not-override로 수정하지 말라고 적혀있더군요..

따라서 컴퍼넌트를 전달할 떄 , 직접 주는 width 값을 변경하기로 결정하였습니다.
useEffect를 통해서 사이즈가 변경될 때 적용을 시키려고 하다가 이럴 경우 렌더링이 많이 일어 날 거 같아서,,
그냥 모바일 크기 vs 웹 크기에서 모달 크기를 결정해놓고 size를 주었습니다.

	const modalOpen = () => {
		const modalSize = window.innerWidth >= 1000 ? 600 : 450;

		dispatch(openModal({ modalComponent: 'auth', modalSize: modalSize }));
	};