modal, height, body-scroll-lock

모달 직접 만들다가 아주 쇠약해졌다...

100vh를 남발한 결과, ios safari에서 뷰포트 하단의 주소바 때문에 컨텐츠가 가려지는 동시에 스크롤도 불가능한 문제가 생겼다. vh 단위를 사용할 때 예외 케이스들을 하나씩 처리하는 것보다 실제로 보이는 문서를 기준으로 하는 단위가 더 확실할 것 같다는 조언을 받아 html 구조부터 다시 배워서 적용했다...

모달

// 전체 화면을 차지하는 엘리먼트 - innerHeight만큼의 높이를 갖는다.
.container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

// 부모 요소인 .container의 높이를 갖는다. 
.modal-wrapper {
  height: 100%;
}

// 실제 컨텐츠를 감싸는 박스. 
// absolute를 해주는 이유가 부모 높이가 100%일 때,
// 자식 높이를 100%로 잡으면 전체를 못 잡기 때문으로 이해했는데
// 다시 해보니까 된다. 내일 다시 물어봐야겠음. => min-, max- 값의 경우였음 !!!
// 아무튼 absolute로 위치를 잡은 다음, container처럼 전체 innerHeight를 그대로 가져온다.
.modal-content {
  overflow-y: scroll; 
/*   min-height: 100%; */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

// 모달 컨텐츠. 복수일 수 있다.
// 내가 받은 디자인의 경우 컨텐츠 하나가 내용이 적으면 화면 높이를 채우고 
// 아니면 그대로 자신의 높이를 가져야 했으므로
// 전자의 경우를 반영하기 위해 최소 높이를 지정했다.
.project {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */ - 예전 코드. 만악의 근원.
  min-height: 100%;
 }

body-scroll-lock

바꾼 구조로 모달창은 다시 제대로 구성했는데, ios safari에서만 모달이 스크롤 되지 않는 문제가 발생했다.

• 크롬에서는 문제가 없었음
• 데스크탑 safari도 멀쩡했음

그런데 아무리 봐도 CSS에는 문제가 없는 것 같았고
불현듯 똑같이 ios safari에서만 문제였던 body-scroll-lock가 생각나서 관련 코드를 각주 처리했더니 정상적으로 작동했다.
body-scroll-lock은 모달창이 켜진 상태에서 모달을 제외한 요소는 스크롤을 막아주는 라이브러리이다. target 엘리먼트에 주의를 기울이지 않아서 생겼던 문제. 즉 html 구조를 변경하면서 모달창에 해당하는 엘리먼트가 아닌 다른 요소에 ref를 잡은 것이 문제의 원인이었다.

이미지 비율 맞추기

.image {
  position: relative;
  /* width: 100%; */ - 이전 코드
  /* height: 91.47vw; */ - 이전의 (문제적) 코드
  padding-top: 91.46%;
  background-color: black;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

추가로 이 부분은 이미지 크기가 일정하지 않을 때 padding-top으로 비율을 맞추는 방법이다.

그 외

끝없는 삽질로 인간이 피폐해졌다. 단순히 코드가 문제가 아니라 (물론 코드도 심각한 문제였지만) 내가 일하는 방식 자체에 문제가 많다는 생각이 계속 들었다. 이래저래 실수도 많이 하고 후회도 많이 하고 주위 분들 피해도 많이 끼쳐버렸다. 지금 마음 상태로는 자책이 차지하는 부분이 너무 커서 어떻게 뒷처리를 해야할지 고민이 크다. 흠. 같은 실수를 또 하지 않고 싶고 다음에는 더 나은 방식으로 협업하고 싶은데 정답에 가까운 해결책을 구할 수 있을지 모르겠다.