[Refactor/#383] 공통 모달 리팩토링 #419

se0jinYoon · 2024-08-24T14:39:04Z

✨ 해당 이슈 번호 ✨

closes #383

todo

두 개 버튼 모달 공통 모달로 분리
한 개 버튼 모달 및 그 돌연변이들 공통 모달로 분리
스크롤 방지 useModal 훅에 추가하기

📌 내가 알게 된 부분

너무 길어서 노션 페이지 첨부합니다 ... 공통 모달 구현하면서 고민한 부분, 참고한 자료 기타 등등 작성해놓았으니 궁금하면 커몬
💟 재사용 모달 만들기
공통 모달로 모달을 구현하다보니 페이지 별로 레이아웃이 달라서 모달 위치가 제각각으로 뜨더라구요. 그래서 createPortal 으로 모달을 구현하였어요.
useModal 커스텀 훅에 스크롤 방지 코드를 추가하였어요. 모달이 열릴 경우 스크롤 방지함수를 실행하고 모달이 닫힐 경우 스크롤 방지 함수를 제거하는 로직을 추가해두었습니다.

📓 모달 사용 방법

저희 모달에는 크게 두가지 종류가 있습니다. (자세한 건 노션에 있으니 사용법만 쓸게요)

1. `DefaultModal` - 버튼 2개가 가로로 배치된 모달

DefaultModal 컴포넌트는 내부에 DefaultModalBtn 컴포넌트를 합성컴포넌트로 가지고 있어요.
따라서 DefaultModal을 사용할 때는 두가지를 모두 import해서 사용하시면 됩니다.

✅ DefaultModalBtn에 넘겨줘야 하는 것
interface ModalBtnType {
  // 1️⃣ 아래 설명
  type: 'POSITIVE' | 'NEGATIVE' | 'CUSTOM';
  // 모달 버튼 동작 핸들링
  onClickLeft: () => void;
  onClickRight: () => void;
  // 2️⃣ 아래 설명
  customBtnText?: string[];
}
type - 버튼의 텍스트를 구분하기 위함

POSITIVE : 예를 유발하는 버튼 (아니오/예)

NEGATIVE : 아니오를 유발하는 버튼 (예/아니오)

CUSTOM : 예,아니오가 아닌 상황에 맞는 텍스트일 경우

customBtnText - [홈으로 가기, 글 확인하기]와 같은 경우 문자열 배열로 전달

10/8 수정

interface ModalBtnType {
  btnText: string[];
  onClickLeft: () => void;
  onClickRight: () => void;
}

코드리뷰를 반영하여 버튼 텍스트를 직접 배열로 전달하는 방식으로 변경하였습니다.

✅ DefaultModal에 넘겨줘야 하는 것

interface ModalPropType {
  // 모달 열렸는지 여부
  isModalOpen: boolean;
  // 1️⃣ 아래 설명
  sizeType?: 'DEFAULT' | 'SMALL' | 'MEDIUM' | 'LARGE';
  // 2️⃣ 아래 설명
  modalImg?: 'DELETE' | 'POST' | 'EDIT' | 'SAVE' | 'CAUTION' | '';
  children: React.ReactNode;
  // 모달 내용
  content: string;
  handleClickBg?: () => void;
}

sizeType - 모달 width값
저희 모달은 크게 4가지 넓이값을 가져요

DEFAULT : 40rem (거의 대부분이라 default로 네이밍 지었습니다)
SMALL : 42.7rem
MEDIUM : 43.1rem
LARGE : 44.2rem

modalImg - 없는 경우도 있어서 optional prop으로 넣어두었습니다. 상황에 맞게 전달하시면 됩니다

DELETE
POST
EDIT
SAVE
CAUTION

handleClickBg - 모달 dimmed 부분을 눌렀을 때 모달이 닫히는 동작이 필요한 경우에 전달하시면 됩니다.

✅ 사용 예시

const { isModalOpen, handleShowModal, handleCloseModal } = useModal();

{/* 모임 삭제 모달 */}
<DefaultModal
  isModalOpen={isModalOpen}
  handleClickBg={handleCloseModal}
  content={MODAL.DELETE_GROUP}
  sizeType="LARGE"
>
  <DefaultModalBtn
    type="NEGATIVE"
    onClickLeft={deleteGroup}
    onClickRight={handleCloseModal}
  />
</DefaultModal>

2. `FullModal` - 버튼이 전체사이즈로 하나씩 새로로 배치된 모달

이 모달의 경우 버튼 하나의 경우 외에도, 버튼이 아닌 다른 요소가 모달에 들어가는 등 통일성이 없기 때문에, children을 사용하여 다양한 경우에 대응할 수 있도록 구현하였습니다.

✅ FullModalBtn에 넘겨줘야 하는 것

interface FullModalBtnPropType {
  // 1️⃣ 아래에서 설명
  isPrimary: boolean;
  // 버튼 눌렀을 때 동작
  onClick: () => void;
  // 버튼 내부 텍스트
  content: string;
}

isPrimary - 보라색 배경을 가진 버튼을 구분하기 위함

보라색 배경을 가진 버튼이 더 우위를 가지는 버튼이라 생각하여 다음과 같이 네이밍 하였습니다. 보라색의 경우 true값을 전달해주면 됩니다.

✅ FullModal에 넘겨줘야 하는 것

interface FullModalPropType {
  // 모달 열렸는지 여부
  isModalOpen: boolean;
  // 배경 클릭 시 닫혀야 하는 경우 전달
  handleClickBg?: () => void;
  // 모달 내부에 들어가는 거 전달
  children: React.ReactNode;
  // 모달 내용 전달
  content: string;
}

✅ 사용 예시

const [showTempContinueModal, setShowTempContinueModal] = useState(false);

<FullModal isModalOpen={showTempContinueModal} content="임시 저장된 글을 계속 이어 쓸까요?">
  <FullModalBtn isPrimary={true} content="새로 쓰기" onClick={onClickNewPostBtn} />
  <FullModalBtn isPrimary={false} content="이어 쓰기" onClick={onClickContinueTempBtn} />
  <Spacing marginBottom="0.2" />
  <DeleteTempContentBtn onClick={onClickDeleteTempPost}>
    임시 저장 삭제하기
  </DeleteTempContentBtn>
</FullModal>

📌 질문할 부분

노션의 제일 마지막 목차 부분에 보면 아직 고민하느라 해결하지 못한 부분이 있는데 읽어보시고 의견이 있으시다면 댓글 plz

📌스크린샷(선택)

모달이 연결되어야 하는 부분은 모두 구현 되어있습니다. (페이지 이탈 모달 제외)
페이지 이탈 모달의 경우 react-router-dom을 업데이트 후 진행해야 할 것 같아 별도의 이슈를 파서 진행한 후 연결하겠습니다!
브랜치 들어가서 각자 페이지에서 떠야 하는 모달에 이상 없는지 확인해주시면 감사하겠습니다! (제가 다 확인하긴 했습니다만 .. ~)

vercel · 2024-08-24T14:39:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 8, 2024 8:28am

github-actions · 2024-09-12T17:17:12Z