모달 창 안에 서브 모달 창 구현

⌨️서론

저번에 alert창을 모달을 이용하여 커스텀하여 바꾸었었다. 하지만 마이페이지에서 닉네임이나 비밀번호 변경의 경우에는 이미 모달창 내에서 만들어져있기 때문에 또 다른 모달 메시지창을 띄워야한다. 이를 구현하기 위해서 코드 작성해둔 걸 기록해두도록 하겠다.🙇‍♂️

1. 서브모달창 관련 atom 만들기

서브 모달창을 위한 atom을 만들고 message창을 만들어둔다.이는 팝업 메시지창을 만들었을 때와 똑같은 형식으로 만들어주면 된다.

//atom.tsx
//서브 모달 창 관련
export const modalInModal = atom({
  key: "modalInModal",
  default: false,
});

export const modalInModalMessage = atom({
  key: "modalInModal",
  default: "",
});

2. 모달창 안에서 서브 모달창 만들기

❗️해당은 react-modal 모듈을 쓰지 않고 만든 버전에서 사용하는 것이기 때문에 react-modal일 시는 약간 달라질 수 있다.
‼️ 또한 닉네임 변경과 비번 변경 중 비번 변경만 보여줄 예정이다.

Type property 추가하기

message라는 문자열도 필요하기 때문에 해당 type에 property를 추가해준다.

type Props = {
  modalClose: () => void;
  message?: string;
};

서브 모달창 만들기

modalClose와 message를 매개변수로 하는 서브모달창을 만들어준다. 모달창 내부에 필요한 컴포넌트들은 본인이 원하는 모양에 맞게 설계를 해 준 뒤 코드를 작성해주면 된다.

const ReturnNextModal = ({ modalClose, message }: Props) => {
  return (
    <ModalinPopup>
      <img src="/img/love_letter.png" alt="모달용배너" />
      <ResponseMessage>{message}</ResponseMessage>
      <ModalinButton onClick={modalClose}>닫기</ModalinButton>
    </ModalinPopup>
  );
};

모달창 내부에 서브 모달창 호출하는 코드 구현하기

서브 모달 창을 호출하기 위해서는 모달 창에서 서브 모달을 여는 state를 호출하였을 때 열리도록 구현을 해야 하고 서브 모달 창을 닫았을 때 모든 모달창이 닫히도록 구현해야 한다.

  const [nextModalOpen, setNextModalOpen] = useRecoilState(modalInModal);
  const [nextModalMsg, setNextModalMsg] = useRecoilState(modalInModalMessage);
//서브 모달창 닫는 함수
  const nextModalClose = () => {
    setNextModalOpen(!nextModalOpen);
    modalClose();
  };
//해당 버튼을 누르면 서브 모달창이 열리도록 한다. 해당 message는 onClick부분에서 변경하도록 구현되어 있다.
//changePassword부분
  const changePassword = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    try {
      const res = await axios.post(
        "api주소",
        {
          password: watch("password"),
        },
        {
          headers: {
            "x-access-token": userInfo.logintoken,
            "Content-Type": "application/json",
          },
        }
      );
      if (res.data.result.valid) {
      } else {
        const res = await axios.patch(
          "api주소",
          {
            newPassword: watch("password"),
          },
          {
            headers: {
              "x-access-token": userInfo.logintoken,
              "Content-Type": "application/json",
            },
          }
        );
        if (res.data.isSuccess) {
          setNextModalOpen(!nextModalOpen);
          setNextModalMsg(res.data.result);
        } else {
          setNextModalOpen(!nextModalOpen);
          setNextModalMsg("오류가 발생했습니다");
        }
      }
    } catch (error) {
      console.log(error);
    }
  };
//...생략
        <ModalMargin>
          <ModalButton
            type="submit"
            disabled={!isValid}
            onClick={changePassword}
          >
            변경 완료
            {nextModalOpen && (
              <ReturnNextModal
                modalClose={nextModalClose}
                message={nextModalMsg}
              />
            )}
          </ModalButton>
        </ModalMargin>

3. 결과화면

코드 구현은 비밀번호로 하였지만 변경된 비밀번호는 안보이기 때문에 변화가 눈으로 보이는 닉네임으로 하도록 하겠다.

이렇게 모달 창 내부에 서브모달창까지 완료하였다. 처음에는 어떻게 해야될지 막막하지만 막상 되고 난 모습을 보니 alert창이 아니어서 기분이 좋았다 😆
프로젝트 관련 다음 포스팅은 quill에디터의 마지막 부분인 수정파트 아니면 프로젝트에 새롭게 도입된 react-query에 대해 다뤄볼 예정이다.📖
이번 참고자료는 기존 모달창 구현을 활용하여서 진행하였다.