[React] Modal 구현

1차 프로젝트 GETTT사이트 클로닝 중 '구독 하기' 버튼을 눌렀을 때 바로 장바구니로 이동하지 않고, 버튼 클릭 시 모달창이 뜨면서 쇼핑 계속하기 or 장바구니로 이동 하는 기능을 구현했다.

import React, { useState, useEffect } from 'react';
import SubscriptionModal from '../Modal/SubscriptionModal';

function ProductContentInfo() {
  const [showModal, setShowModal] = useState(false);
  
<button onClick={() => setShowModal(true)} type="button" className="subscriptionBtn"
> 구독 하기 </button>

{showModal ? <SubscriptionModal /> : null}
              

1. 보여질 모달창 내용을SubscriptionModal 컴포넌트로 분류
2. 버튼을 onClick했을 때 ShowModal의 변경 값이 true로 변경되면서 showModal true이면 SubscriptionModal 오픈

SubscriptionModal 컴포넌트

import React from 'react';
import { Link } from 'react-router-dom';
import './SubscriptionModal.scss';

function SubscriptionModal() {
  return (
    <div className="modalWrapper">
      <div className="modalContainer">
        <div>
          <p className="text">
            선택하신 상품이
            <br /> 장바구니에 추가 되었습니다.
          </p>
          <div className="btnWrapper">
            <Link to="/list-page">
              <button className="modalBtn shoppingBtn">쇼핑 계속하기</button>
            </Link>
            <Link to="/list-page">
              <button className="modalBtn cartBtn">장바구니로 이동</button>
            </Link>
          </div>
        </div>
      </div>
      <span className="background" />
    </div>
  );
}

export default SubscriptionModal;