[FEATURE] [공통 컴포넌트] Modal

[KingNono1030]

📌 공통 컴포넌트 추가: Portal, Modal, Toast, SnackBar

📝 작업 설명

• Portal, Modal, Toast, SnackBar 컴포넌트를 공통 컴포넌트로 추가합니다.
• Portal을 통해 DOM 외부에 렌더링할 요소를 지원하고, Modal, Toast, SnackBar는 각각 특정 UI 패턴을 처리하는 독립적인 아토믹 컴포넌트로 제작합니다.

components
└── common
    ├── popup
    │   ├── Portal.tsx           // 기본 포탈 컴포넌트
        ├── Modal.tsx                 // 모달 컴포넌트
        ├── Toast.tsx                 // 토스트 컴포넌트: 필요한 경우 추가
        └── SnackBar.tsx              // 스낵바 컴포넌트: 필요한 경우 추가

🎯 목표 및 필요성

• 공통 컴포넌트를 정의하여 UI 요소의 재사용성을 높이고, 프로젝트 전반에서 일관된 사용자 경험을 제공합니다.
• Portal을 통해 레이아웃 구조와 독립적인 UI 요소(모달, 토스트, 스낵바 등)의 위치를 관리하여 코드의 가독성과 유지 보수성을 향상시킵니다.

📅 예상 마일스톤

• 하루 컷

🔍 상세 작업 내용

1. Portal 컴포넌트 - createPortal을 활용해 DOM 외부에 UI를 렌더링할 수 있는 기본적인 유틸리티 컴포넌트로 제작합니다.
2. Modal 컴포넌트 - 배경 오버레이 및 모달 콘텐츠를 포함한 모달 컴포넌트를 추가합니다. openModal(<ModalContent />) 형태로 전역에서 열 수 있도록 구현합니다.

(아래는 필요한 경우 추가)

• Toast 컴포넌트 - 짧은 메시지와 함께 사용자에게 정보를 전달하는 토스트 컴포넌트를 구현합니다. 전역 상태와 연계하여 다수의 토스트 메시지를 관리할 수 있도록 합니다.
• SnackBar 컴포넌트 - 화면 하단에 일정 시간 동안 표시되는 스낵바 컴포넌트를 구현합니다. 상태 관리와 함께 자동으로 사라지는 기능을 지원합니다.

📌 참고 사항

• Portal은 여러 UI 요소에서 공통적으로 사용되는 유틸리티로, Modal, Toast, SnackBar 외에 추가적인 컴포넌트에서도 활용될 수 있습니다.
• Portal과 연계된 상태 관리를 어떻게 할지 논의가 필요하며, 전역 상태 관리 방식(Zustand, Context API 등)과의 통합도 고려합니다.