max-height

모달창의 크기를 화면에 맞게 시원시원하게 만들어 주기 위해서 max-height라는 속성을
모달창에 적용해 보았다!

화면 크기에 맞게 설정해둔 90%의 비율로 모달창이 크게 나와서 사진이미지가 중요했던 프로젝트를 좀 더 강조하는 효과를 가져올 수 있었다 :)

그리고 사진 이외의 모달에 들어가는 내용들을 overflow : scroll; 속성으로 처리해줬다 ㅎㅎ
css는 진입장벽은 낮지만 결코 쉬운 녀석은 아닌 것 같다....

const ModalComponent = styled.div`
  border-radius: 0.5vw;
  position: fixed;
  width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fafafc;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border: none;
  box-sizing: border-box;
  min-width: 380px;
  margin: auto;
  max-height: 90%; // max 적용
  overflow-x: hidden;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: lightgray;
  }