[2022.07.18](2) 모달창 띄우기, 클릭시 링크 이동

1. footer에서 개인정보처리방침누르면 모달창으로 띄우게 하고 싶음

 

https://velog.io/@uni/React-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

[React] 모달창 띄우기

 

코딩애플 들었던 부분을 응용하여 코드를 작성함

 

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

  function FtModal(){
    return(
      <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>
    )
  }

...
return(
	...
     <li className='ftInfoList' onClick={()=>{setFtModal(!ftModal)}}>
              개인정보처리방침
            </li>
            <li className='ftInfoList'>
              사이트맵
            </li>
            <li className='ftInfoList' onClick={goToMap}>
              Contact us
            </li>
            {
              ftModal === true ? <FtModal/> : null
            }
          </ul>
       ...
       
)

 

---

 

2. 클릭시 해당 사이트로 이동하게 설정

 

const Footer = () => {
  const goToSnsFb = () => {
    window.open('https://www.facebook.com/Zetaplan-FInvestment-1900302276910629/');
  }
  const goToSnsYou = () => {
    window.open('https://www.youtube.com/channel/UC2BZ-Cd829KVoAYdeiSKUzQ');
  }
  const goToSnsBl = () => {
    window.open('http://zetaplan.com/page/208/?p=wordpress_themes');
  }
  const goToMap = () => {
    window.open('/zeta-map');
  }
  const goToMail = () => {
    window.open('mailto:zetabiz@zetaplan.com');
  }
  const goToTelSeoul = () => {
    window.open('tel:02-538-4801');
  }
  const goToTelGj = () => {
    window.open('tel:062-233-4142');
  }