feat: 모달 인스턴스화 구현

[21owk]

📌 Related Issue

closes #95 #99

📝 Description

• 동적 id를 생성하여, 모달을 인스턴스화
  기존 모달은 같은 전역 atom을 공유하기 때문에, 한 페이지 내 복수의 모달이 있을 경우 개별 제어가 불가능하다는 문제가 있었습니다. 동적 id 생성과 파생 atom으로 각 모달을 인스턴스화 & 메모이제이션하여 불필요한 리렌더링을 막고 개별 조작이 가능하게 개선했습니다.

• 커스텀 훅 개선

  • 모달의 상태와 별개로 마운트 시 훅이 실행되는 문제와 이벤트 발생 시 훅이 동작하지 않는 문제를 수정했습니다.
  • 포커싱 요소의 유무에 따른 포커싱 조건을 개선했습니다. 요소가 없을 경우 임시로 모달 버튼이 강제 포커싱 되게 처리했습니다.

• 모달 사용법 업데이트
  내장 button이 있어서 모달 매개체가 불필요하며, 버튼명으로 쓰일 title만 전달해주세요.
  동일하게 닫기 버튼이 필요한 경우, props로 withCloseButton을 추가해주세요.

  import { Modal } from '@/shared/modal/Modal';
  
  <Modal withCloseButton title="버튼명">모달에 넣을 내용</Modal>
  

📸 Screenshot

순서대로 개별 렌더링 > 요소 o 포커싱 테스트 > 요소 x 포커싱 테스트

📢 Notes