Modal 컴포넌트 만들기

[bh2980]

작업 중인 PR이라면 제목에 [WIP]을 작성해주세요.

PR 목적 / 요약

• @shared/Modal 컴포넌트
  Modal 컴포넌트는 Modal 내 UI 구성요소를 모아놓은 컴포넌트입니다.
• ModalManager 컴포넌트
  ModalManager 컴포넌트는 Key-Value 형태로 Key와 Modal 컴포넌트를 매칭하여 가지고 있습니다.
  currentModalState를 구독하다가 변경되면, Key로부터 Modal을 찾아 React Portal을 이용해 #popup-root로 return합니다.
  ModalManamger 컴포넌트는 App.tsx에 선언되어 있습니다.
• useModal hook
  openModal, closeModal 함수를 return하는 Hook입니다.
• currentModalState
  현재 화면에 open된 모달의 Key와 props를 객체의 형태로 가지고 있는 Recoil Atom입니다.

Modal 컴포넌트의 렌더링은 다음과 같은 과정으로 이루어집니다.

1. openModal 함수에 Modal에 해당하는 Key와 props를 전달
2. openModal은 currentModalState에 Key와 props를 객체로 저장
3. ModalManager는 currentModalState를 구독하고 있다가 값이 변경되면, Key와 매칭되는 Modal을 찾아 return
4. 모달 열림
5. closeModal 함수로 currentModalState를 null로 초기화
6. ModalManager는 이를 구독하고 있다가 아무것도 return하지 않음.
7. 모달 닫힘

관련 이슈

• close issue Modal 컴포넌트 만들기 #61

리뷰받고 싶은 부분 설명

혹시 몰라서 props를 넣어놓았는데 필요할지 의문입니다.

특이사항

없음

[seyoung8239]

LGTM👍🏻