회사에서 기존에 바텀시트를 일일이 컴포넌트를 만들어야 해서 너무나 귀찮고 관리하기가 어려웠다.
그래서 이번 리팩토링에서 글로벌 바텀시트를 새로 만들어 관리하기로 하였다.
하지만 생각지 못한 문제들에 부딛혔는데 그 중 하나가 css 관련 문제였다.

position fixed overflow 문제

원래 보여주고 싶은 바텀시트는 아래처럼 모바일에 맞는 화면을 보여주고 싶었다.

하지만 styled component에 다음과 같이 코드를 넣었더니 예상치 못한 현상이 발생하였는데...

const Wrapper = styled.div<{ height: number }>`
  height: 300px;
  width: 100%;
  background-color: yellow;
  position: fixed;
  bottom: 0;
  z-index: 9999;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
`;

이런식으로 모바일에 맞춰진 컨테이너를 뚫고 나와버린 것이다.
처음에는 모바일 컨테이너 컴포넌트로 감싸진 기존의 코드가 작동하지 않아서 발생한 문제 같아서 찾아보았는데
그것이 아니라 position fixed 를 적용함으로써 나타나는 문제였다.

stack overflow 에 나와 같은 고민을 하는 사례를 찾아 볼 수 있었다.

하지만 답변들은 대체로 그냥 width 를 설정하지 않으면 해결 됨... 등 구체적인 이유나 설명 등이 없어서

근본적 문제 digging을 시작했다.

왜 position: fixed 에서 width 100% 를 하면 overflow 될 까?

mdn 공식문서의 position fixed 를 살펴보면 알 수 있었다.
여기서 주목할 부분은

It is positioned relative to the initial containing block established by the viewport ...

라는 부분인데 이게 postion fixed 에서 width 가 parent 의 width 가 아니라 viewport 의 width 를 기준으로 하기 때문에 100%로 하면 viewport 의 width 100% 가 되어서 overflow 가 발생한 것이었다.

교훈

문제가 발생하면 stack overflow 같은 리소스에서는 "코드 이렇게 저렇게 고치면 해결됨~ 굿굿!" 하고 끝나지만
왜 발생하는 지에 대해서는 잘 나와있지 않아서 당혹스러웠다. 이럴 때는 해당 공식문서를 참고해서 읽어보면 해답을 얻을 수 있다는 것을
알게되었다.