페이지 단위로 스크롤 끊기

import "./styles.css";
import styled from "@emotion/styled";
export default function App() {
  return (
    <Container>
      <Page color={"pink"}>
        <p>page1</p>
      </Page>
      <Page color={"pink"}>
        <p>page2</p>
      </Page>
      <Page color={"pink"}>
        <p>page3</p>
      </Page>
      <Page color={"pink"}>
        <p>page4</p>
      </Page>
    </Container>
  );
}

const Container = styled.div`
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
`;

const Page = styled.div<{ color }>`
  height: 100vh;
  // background-color: ${({ color }) => color};
  border: 1px solid black;
  scroll-snap-align: start;
`;