Modal

• components/common/Modal

const Modal = ({ children, title }: ModalPorps) => {
  const [open, close] = useState(true); // 삭제 예정!
  return (
    <dialog id="Modal" className="modal">
      <div
        className={`modal-box w-11/12 max-w-5xl ${open ? 'modal-open' : ''}`}
      >
        <header className="grid grid-cols-[1fr,30px]">
          <h2 className="text-h3 flex items-center">{title && title}</h2>
          <form method="dialog">
            <button type="submit">
              {' '}
              <IoClose className="text-3xl" />
            </button>
          </form>
        </header>
        {children}
      </div>
    </dialog>
  );
};

공통 모달임!!

Modal 사용법

1. 모달을 불러온다

const 컴포넌트명 = () => {

  return (

      <Modal>
        <모달안에 들어갈 컴포넌트/>
      </Modal>

  );
};

• Modal 안에서 제목이 필요할시 title=”사용할 제목” 추가 하면 됨. (Modal 컴포넌트에서 props 참고)

1. 버튼을 클릭했을때 모달이 오픈되어야 하는 경우

const 컴포넌트명 = () => {
	const { openModal } = useModalState();
	
	const 어떠한이벤트액션 = (friendName: string) => {
	    openModal();
	  };
	
	  return (
	
	      <button onClick={어떠한이벤트액션}></button>
	
	  );
}

• openModal 함수를 불러오면 모달창이 오픈됨.

1. 모달안에서 state값 변경이 필요한 경우.

모달안에서 state값이 필요한 경우 전역상태로 관리해줘야 하기 때문에 recoil을 사용하여 state값 변경을 해줍니다. 자세한 로직은 useModalState 파일을 참고!!!

• recoil은 recoil 폴더 내 atoms/modal 참고!!!

const useModalState = () => {
  const [modalState, setModalstate] = useRecoilState(modalAtom);
  const [reqModalState, setReqModalState] = useRecoilState(
    modalAcceptOrRejectAtom
  );
	
	// 해당 모달창에서 필요한 state 변경 함수를 작성!!!
	const changeFriendName = () => {
	...로직 생략
	}

  return {
    openModal,
    modalState,
    reqModalState,
    changeFriendName // 해당 함수를 내보낸다!
  };
};

1. useModalState에서 생성한 함수 사용

const 컴포넌트명 = () => {
const { changeFriendName, openModal } = useModalState();
	
const 어떠한이벤트액션 = (friendName: string) => {
		changeFriendName(friendName, memberId);
    openModal();
  };
	
  return (

      ....로직 생략

  );
}