FIX : 윈도우로 접속 시 스크롤 노출되는 이슈

[anonymousRecords]

📌 문제 상황

17일 진행한 QA에서 발견한 이슈로, 윈도우 데스크탑으로 접속했을 시 스크롤이 노출이 되고 화면이 (Header + Outlet), (Footer) 이렇게 분리되어 보이는 것을 확인할 수 있다.

[anonymousRecords]

📌 해결 방법

1.

    <HelmetProvider context={helmetContext}>
      <div css={LayoutStyles}>
        <Header />
        <Outlet />
        <Footer />
      </div>
    </HelmetProvider>

Layout에서 div안에 Header, Outlet, Footer가 함께 있게 해서, 깨지지 않게함.

2.

body {
  --webkit-scrollbar: none;
}

위 속성을 추가해 줌.

[anonymousRecords]

➕ 추가 이슈

Footer가 화면에 꽉 차게 보이지 않음.

[anonymousRecords]

📌 해결 방법

    <div style={{ width: "100%" }}>
      <footer css={FooterStyles}>
...
     </footer>
    </div>

footer 태그 밖에 div를 감싸서 width를 100%로 지정해서 해결했다.