feat: 공용 모달 임시 작업

[changhui-chan]

📝 Description

파라미터.

모달 관리 스토어.

사용법

A라는 버튼을 누르면 모달 띄우고 싶은 경우, A라는 버튼있는 컴포넌트 파일에서 작업함

해당 컴포넌트 파일에서

const { modals, openModal, closeModal } = useModalStore();

모달 스토어를 불러오고,

const modalId = useRef('confirm');

모달에 관련된 ref를 설정한다. useReF('[여기]') [여기]에 들어갈 값은 임의로 정해도 괜찮으나, 다른 모달이랑 중복되지 않은 단어로 설정할 필요가 있다.

{modals[modalId.current]?.isVisible && (
        <Modal
          customModalContentStyle={styles.backButtonModal}
          onClose={handleCloseModal}
          customModalButtonStyle={styles.defaultButton}
          isVisible={modals[modalId.current]?.isVisible}
        >
          <div className={styles.modalContainer}>
            <img
              src={exclamationImage}
              className={styles.exclamationImage}
              alt="느낌표 이미지"
            />
            <p>
              페이지를 떠나시면 작성 중인 내용을 잃게 됩니다. 떠나시겠습니까?
            </p>
            <div className={styles.modalButtonContainer}>
              <Button className={styles.backButton} onClick={handleCloseModal}>
                취소
              </Button>
              <Button className={styles.confirmButton} onClick={handleGoBack}>
                확인
              </Button>
            </div>
          </div>
        </Modal>
      )}

이런 식으로 return문 안에서 현재 모달의 isVisible에 따라 열리고 닫히게끔 설정하고

<Modal>
  {children}
</Modal>

{children}은 본인이 작성하고 싶은 모달 안의 내용을 직접 작성해야한다.

  const handleCloseModal = () => {
    closeModal(modalId.current);
  };

close부분의 handleCloseModal의 함수 내용은 위와 같이 모달을 닫을 수 있게끔 설정하는 함수도 따로 작성해주어야한다.

📸 Screenshot

import Modal from '../../shared/ui/modal';
import useModalStore from '../../shared/ui/modal/useModalStore';

const 머시깽깽이 = () => {

  const modalId = useRef('confirm');
  const { modals, openModal, closeModal } = useModalStore();

  const handleOpenBackModal = () => {
    openModal(modalId.current);
  };

  const handleCloseModal = () => {
    closeModal(modalId.current);
  };
  
  return (
  <div>
  <button onClick={handleOpenBackModal}>
{modals[modalId.current]?.isVisible && (
        <Modal
          customModalContentStyle={styles.backButtonModal}
          onClose={handleCloseModal}
          customModalButtonStyle={styles.defaultButton}
          isVisible={modals[modalId.current]?.isVisible}
        >
          <div className={styles.modalContainer}>
            <img
              src={exclamationImage}
              className={styles.exclamationImage}
              alt="느낌표 이미지"
            />
            <p>
              페이지를 떠나시면 작성 중인 내용을 잃게 됩니다. 떠나시겠습니까?
            </p>
            <div className={styles.modalButtonContainer}>
              <Button className={styles.backButton} onClick={handleCloseModal}>
                취소
              </Button>
              <Button className={styles.confirmButton} onClick={handleGoBack}>
                확인
              </Button>
            </div>
          </div>
        </Modal>
      )}
</div>
  )
}


## 📢 Notes

급하게 반영한 만큼 수정할 부분이 산더미라 v2, v3에 반영하도록 하겠읍니다

[21ow]

감사합니다~! 🐹🐹