✨ 모달 팝업 개선: 동적 컴포넌트 렌더링 기능 추가

[joeholee]

🛠 관련 이슈

[Feature Request] 모달 팝업의 동적 컴포넌트 렌더링 기능 추가 (#9)

---

🚀 개선 사항

모달 팝업에서 동적으로 Vue 컴포넌트를 렌더링할 수 있는 기능을 추가했습니다.
이번 PR은 위의 이슈에서 제기된 요구 사항을 해결하며, 동적 컴포넌트를 활용한 UI 확장성을 제공합니다.

---

🔥 주요 변경 사항

1️⃣ ModalPopup.vue

• 모달 내부에서 Vue 컴포넌트를 동적으로 렌더링할 수 있도록 수정.
• 기존 텍스트 기반 렌더링을 유지하면서 확장 가능.

2️⃣ modalPopup.js

• 모달의 content에 Vue 컴포넌트를 전달하고 상태를 관리할 수 있는 기능 추가.
• openModal 호출 시 컴포넌트와 이벤트 핸들러를 함께 전달 가능.

3️⃣ ExampleModalContent.vue

• 동적 컴포넌트 렌더링을 활용한 UI 구현 예제.
• 버튼 클릭과 같은 내부 이벤트 처리 예시 포함.

4️⃣ HomeView.vue

• 예제 모달 호출 코드 추가.
• 동적 컴포넌트 활용법을 보여주기 위한 데모 포함.

---

🛠 활용 예시

// 모달 호출 코드
import { openModal } from '@/stores/modalPopup';
import ExampleModalContent from '@/components/ExampleModalContent.vue';

openModal('동적 모달 제목', ExampleModalContent, [
  { label: '확인', handler: () => { 
      console.log('확인 클릭'); 
      closeModal(); 
    } 
  },
  { label: '취소', handler: () => console.log('취소 클릭') },
]);

---

✅ 기대 효과

1. 📦 재사용성 극대화: 동적 컴포넌트 삽입으로 모달 활용도 증가.
2. 💡 유연성 제공: 모달의 UI와 기능이 상황에 따라 맞춤형으로 변경 가능.
3. 🎉 개발 생산성 향상: 예제 코드와 간단한 API를 통해 손쉽게 기능 구현.

---

🙇‍♂️ 리뷰 부탁드립니다!

[lov-etan]

모달 덕분에 저희 서비스의 UX가 nextLevel로 넘어갈 수 있겠군요. 고생 많으셨습니다. 💯