Modal/Dialog CSS

speciaLLunch·2023년 8월 21일

화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능

가로세로 중앙 정렬
사이드 메뉴 고정
크기 벗어날 경우 스크롤
React.Portal 사용

ReactDom.createProtal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공

const Portals = React.forwardRef<HTMLDivElement, PortalsProps>(
  ({ children }: PortalsProps, ref) => {
    const parentEle = document.querySelector('body')!;
    return ReactDOM.createPortal(children, parentEle);
  },
);

이를 통해 <body>태그 밑에 바로 children 요소 배치 가능
- css 기준을 <body>로 잡을 수 있다는 뜻

React.Portal
- container
  - wrap
    - side
      - title
      - items
    - content

.container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  display: flex;
}

.wrap {
  background-color: #fff;
  position: fixed;
  z-index: 1;
  width: 70%;
  height: 80%;
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
  border-color: #000000;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: scroll;
}

.side {
  background-color: #fff;
  z-index: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sideTitle {
  font-weight: 700;
  font-size: 20px;
  margin: 21px 0 39px 0;
}

.sideItem {
  width: 186px;
  height: 61px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  font-size: 20px;

  &.selected {
    background-color: #a3e9ff;
  }
}

.content {
  padding: 20px 25px;
  font-size: 14px;
  text-align: center;
  line-height: normal;
}