[2022.07.23] 모달창 만들기

1. footer에서 "개인정보처리방침, 고객센터" 를 누르면 모달창이 뜨게 설정을 해놓았는데 클릭시 아래 검은 배경이 깔리고, 모달창 밑에 검은 배경을 누르면 모달창을 끄게 하고 싶었다.

 

• 기존 ftModal위에 ftDim(검은배경역할)을 형제로 두고, 그 위에 ftModalContain 을 부모로 감쌌다.
• 그 후 각각 스타일을 적용하고, onclick을 설정함

 

▼ 원래 기존 코드에서 추가 작성한 jsx 코드 (개인정보처리방침 코드 /고객센터도 같은 형식으로 작성함)

const [ftModal, setFtModal] = useState(false);
  const [ftsModal, setFtsModal] = useState(false);

  function FtModal(){
    return(
      <div className='ftModalContain'>
        <div className='ftDim' onClick={()=>{setFtModal(!ftModal)}}></div>
        <div className='ftModal'>
          <p className='ftModalClose' onClick={()=>{setFtModal(!ftModal)}}></p>
          <div className='ftModalTextBox'>
            <h4 className='ftModalTitle'>ZETA PLAN의 개인정보처리방침</h4>
            <p className='ftModalTxt'>제타플랜의 개인정보처리방침에 대해 안내드립니다.</p>
            <p className='ftModalTxt'>이용자 개인정보 보호를 여러 경영요소 가운데 최우선의 가치로 두고 있습니다.<br/>(주)제타플랜은 서비스 기획부터 종료까지 개인정보보호법 등 국내의 개인정보 보호 법령을 철저히 준수합니다. 또한 OECD의 개인정보 보호 가이드라인 등 국제 기준을 준수하여 서비스를 제공합니다.<br/>본 개인정보처리방침의 목차는 아래와 같습니다.
            관계법령이 요구하는 개인정보처리방침의 필수 사항과 자체적으로 이용자 개인정보 보호에 있어 중요하게 판단하는 내용을 포함하였습니다.</p>
            <ul className='ftModalTxt'>
              <li className='ftModalTxts'>1.개인정보처리방침의 의의</li>
              <li className='ftModalTxts'>2.수집하는 개인정보 </li>
              <li className='ftModalTxts'>3.수집한 개인정보의 이용</li>
              <li className='ftModalTxts'>4.개인정보의 제공 및 위탁</li>
              <li className='ftModalTxts'>5.개인정보의 파기</li>
              <li className='ftModalTxts'>6.이용자 및 법정대리인의 권리와 행사 방법</li>
            </ul>
            <p className='ftModalTxt ftModalTxtLast'>
              제타플랜은 이용자의 개인정보를 안전하게 관리하기 위하여 최선을 다하며, 개인정보보호법에서 요구하는 수준 이상으로 개인정보를 보호하고 있습니다.
            </p>
          </div>
        </div>
      </div>
    )
  }

 

▼ CSS 적용한 코드

.ftModalContain{
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.ftDim{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity:80%;
  background-color:#1a1818;
  z-index: 100;
}

 

 

참고사이트

 

 

2. 모달창이 뜨면 뒷 배경이 스크롤 되지 않게 막는 설정을 하고 싶었다. (+모달창이 사라지면 현재 위치로 보이게 설정)

* 아래 3가지 방법 중 골라서 사용 (난2방법 사용)

 

 (1) 방법

useEffect(() => {
  document.body.style.cssText = `
    position: fixed; 
    top: -${window.scrollY}px;
    overflow-y: scroll;
    width: 100%;`;
  return () => {
    const scrollY = document.body.style.top;
    document.body.style.cssText = '';
    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
  };
}, []);

scrollTo(string, radix)
: 문자열 인자를 파싱하여 특정진수의 정수를 반환한다.

string -  파싱할 값(문자열이 아닐경우 ToString연산을 사용해 문자열로 변환하며, 공백은 무시한다.)
radix - string의 진수를 나타내는 2부터 36까지의 정수이다. (10이 기본값이 아니다!)

-body의 position을 고정시켜 스크롤을 막는다. 이 때 top을 설정해주어야 한다. top이 설정되지 않으면 모달을 열었을 때, 현재 위치가 아닌 최상위 위치로 스크롤이 이동하기 때문이다.

-해당 css를 변경할 때는 useEffect를 사용할 것이다. 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window.scrollTo를 이용해 현재 스크롤 위치로 이동시키면 된다.

-cssText를 쓰는 이유는 style을 여러번 접근하면 그 횟수만큼 reflow가 발생하게 됩니다. cssText를 이용하면 1번만 계산하기 때문에 이렇게 js로 css를 건드릴 경우 퍼포먼스를 위해 필수로 해주시는게 좋습니다. (class 명을 추가해줘도 됩니다.)

 

(2) 방법

useEffect(() => {
 const scroll = window.scrollY;
 documnet.body.style.cssText = `
   position: fixed;
   top: -${scroll}px;
   overflow: hidden;
   width: 100%;
   height: auto;
 `;
return () => {
  document.body.style.cssText = "";
  window.scrollTo(0, scroll);
 }
},[])

 

(3) 방법 (스크롤바가 사라졌다가 다시 나타나면서 가로가 변형되는 경우가 있다함)

//스크롤 방지
document.body.style.overflow = "hidden";

//스크롤 방지 해제
document.body.style.overflow = "unset";

 

 

출처:

https://joylee-developer.tistory.com/185

[React] Modal 만들기(2) 외부화면 스크롤 방지하기

https://medium.com/@bestseob93/%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%AA%A8%EB%8B%AC-react-modal-%EB%A7%8C%EB%93%A4%EA%B8%B0-bd003458e9d

효율적인 리액트 모달(react-modal) 만들기

https://velog.io/@stnqls3938/%EB%AA%A8%EB%8B%AC-%EB%92%B7%EB%B0%B0%EA%B2%BD-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0

모달 뒷배경 스크롤 방지하기