<SlideBox> 오픈시 스크롤 고정

useEffect(() => {
  document.body.style.overflow = 'hidden';
  // SlideBox off시 초기화.
  return () => {
    document.body.style.overflow = 'unset';
  };
}, [slidebox]);

<SlideBox> 오픈시 배경 블러

// SlideBox.js

// SlideBox에 mask 요소 추가.
<div
  className='mask'
  // 뒷 배경 클릭시 off
  onClick={() => {
  setSlidebox(false);
  }}
/>

/* SlideBox.css */

.mask {
  background-color: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  /* z-index 한수준 낮게 설정 */
  z-index: 90;
}

적용