[Setting/#5] Modal 세팅

[yeonjin719]

🚨 관련 이슈

#5

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• modalProvider.tsx 생성
• modal.tsx 생성
• useModalStore.ts 생성
  사용법 예시를 보여주기 위해
• Home.tsx 생성
• errorModal.tsx 생성

😅 미완성 작업

• 아직 디자인이 나오지 않아, 추후 해당 부분 담당자는 Modal 스타일링 해주세요!

📢 논의 사항 및 참고 사항

• 스타일링이 적용 안된 것 처럼 보일 수 있는데 ⚙️ [Setting] Global Style, SVG 파일 추가 #4 가 머지되면 정상적으로 보일겁니다
• 추후 새로운 모달을 만들고 싶으면 modalProvider.tsx에서 MODAL_TYPES에 자신이 만들 모달의 타입을 선언하고 MODAL_COMPONENTS에 해당 컴포넌트(만든 모달 컴포넌트)를 매핑 해주세요!
• 모달을 만들 때 반드시 <Modal onClose={onClose}></Modal>로 감싸 주시고 onClose 넘겨주셔야합니다.
• 모달 사용 시 useModalStore에서 openModal을 불러와서 onClick={()=>openModal({modalType: MODALTYPES.만든모달})} 와 같이 사용해주시면 됩니다
• 만약 이렇게 했는데 모달이 안열린다면, 해당 route element에 ModalProvider가 설정이 되어있는 지 확인해주세요 (routes.tsx에서 확인 가능)