프로젝트 브라우저 화면 내에서 이유없이 빈공간이 생긴다면

문제

모모프로젝트에서 위 사진과 같은 원인 모를 빈 공간이 있어

css 문제인가 싶어 온갖 방법을 써보았지만 해결을 할 수 없었습니다.

게다가 상세페이지에서만 생기는 현상이기에 도무지 원인을 찾기 힘들었는데요,

리팩토링을 진행하면서 계속 신경쓰이는 부분이었는데

프로젝트 종료 한달 반이 지나서야 그 원인을 찾을 수 있었습니다.

 

원인

글 상세 페이지에서는 공통 컴포넌트인 세미헤더에

별도의 링크가 걸린 글자를 넣어주었습니다.

이때 세미헤더의 일관적인 스타일을 가질 수 있는

prop으로 들어가는 글자가 아니라서

고정된 글자의 너비크기를 가지는 다른 페이지와 달리

글 상세 페이지에서만 이런 현상이 나타났었던 것입니다.

 

그리고 이 원인을 찾기 어려웠던 또 다른 이유는

조금 더 깔끔하게 보이기 위해서

  ::-webkit-scrollbar {
  width: 0;
  }

스크롤바를 화면에서 없앴던 것도 있었습니다.

 

빈 공간이 화면 제일 하단에서만 확인이 가능했기에

위쪽에 원인이 있을 줄 몰랐거든요 🥹

스크롤바가 보였다면 가로로 무엇인가 튀어나와있구나, 인지했을것 같습니다.

 

해결

화면이 작아지면 세미헤더 컴포넌트를 사용하는

다른 컴포넌트에서도 같은 현상이 일어나기에

디자인 바꾸기 && 반응형 적용하기가 필요하겠습니다.

 

스크롤을 없애지 않았다면 모를 수 없는 문제이겠지만

혹시나..!