[react] select box option 클릭 시 페이지 이동

next.js14, typescript로 홈페이지 개발 중

 

footer 영역의 familysite selectbox에서 option 값 클릭 시 외부 페이지 이동 기능 구현

 

 

 

{/* footer.tsx */}

'use client';

import '@/assets/css/footer.css';

const URL = {
  NAVER: 'https://www.naver.com',
  DAUM: 'https://www.daum.net',
  NATE: 'https://www.nate.com',
};

function Footer() {
  const openOutsideSite = (site: string) => {
    window.open(site);
  };

  return (
    <div className="footer">
      <select
        onChange={(e: any) => {
          openOutsideSite(e.target.value);
        }}
      >
        <option className="out_site_option">Family Site</option>
        <option className="out_site_option" value={URL.NAVER}>
          {t('naver')}
        </option>
        <option className="out_site_option" value={URL.DAUM}>
          {t('daum')}
        </option>
        <option className="out_site_option" value={URL.NATE}>
          {t('nate')}
        </option>
      </select>
    </div>
  );
}

export default Footer;