TIL 모달 창 공통 컴포넌트 구현

[yuj2n]

📌 배운 내용

• 모달 공통 컴포넌트 관리와 총 4개 모달(크레딧 충전 모달, 크레딧이 부족할 경우 모달, 후원하기 모달, 투표 모달)을 관리하는 폴더 구조
• 리스트 페이지에서만 사용되는 모달이라면, App.jsx 같은 전역 레벨에서 VoteModal을 포함시킬 필요 없고, ListPage.jsx 내부에서만 조건부로 렌더링

---

🔍 배경

• 크레딧 충전 모달, 크레딧이 부족할 경우 모달, 후원하기 모달, 투표 모달 총 4개의 모달이 있고
  모두 리스트페이지에서만 필요하면 모달 공통 컴포넌트를 어떻게 작성해주어야할까? 에 대한 궁금증 발생
• 4개의 모달이 모두 ListPage에서 사용될 예정
• ✨Feat: 모달 창 공통 컴포넌트 기능 #45
• `TIL` 모달 컴포넌트 관리 위치 #63

---

✅ 핵심 정리 / 해결 방법

폴더 구조

• 📁 components
  ├── 📁 modal // 모달 공통 컴포넌트
  │ ├── Modal.jsx
  │ └── modal.styles.js
  │ └── index.js
  ├── 📁 modals // 각각의 모달 내용 컴포넌트
  │ ├── CreditChargeModal.jsx
  │ ├── CreditLackModal.jsx
  │ ├── DonationModal.jsx
  │ └── VoteModal.jsx
  위와 같은 폴더 구조를 생각했음

추후 공통 컴포넌트(버튼, 라디오, 헤더, 푸터)를 관리할 components/common 폴더에서 관리 예정

• 📁 components
  ├── 📁 common // 공통 컴포넌트
  │ ├── Modal.jsx
  │ └── modal.styles.js
  │ └── index.js
  │ └── radioButton.jsx
  │ └── customButton.jsx
  │ └── ...
  ├── 📁 modals // 각각의 모달 내용 컴포넌트
  │ ├── CreditChargeModal.jsx
  │ ├── CreditLackModal.jsx
  │ ├── DonationModal.jsx
  │ └── VoteModal.jsx

---

모달 관리

import { useState } from 'react';
import Modal from '@/components/modal';
import Charge from '@/components/charge';
import Chart from '@/components/chart';
import CreditChargeModal from '@/components/modals/CreditChargeModal';
import CreditLackModal from '@/components/modals/CreditLackModal';
import DonationModal from '@/components/modals/DonationModal';
import VoteModal from '@/components/modals/VoteModal';

const ListPage = () => {
  const [modalType, setModalType] = useState(null);
  const closeModal = () => setModalType(null);

  const renderModalContent = () => {
    switch (modalType) {
      case 'charge':
        return <CreditChargeModal onClose={closeModal} />;
      case 'lack':
        return <CreditLackModal onClose={closeModal} />;
      case 'donation':
        return <DonationModal onClose={closeModal} />;
      case 'vote':
        return <VoteModal onClose={closeModal} />;
      default:
        return null;
    }
  };

  return (
    <div css={wrapper}>
      <Charge setModalType={setModalType} />
      <div css={carousel}>캐러셀</div>
      <Chart />

      <Modal isOpen={modalType !== null} onClose={closeModal}>
        {renderModalContent()}
      </Modal>
    </div>
  );
};

export default ListPage;

• 위와 같이 작성할 예정
• 아직 적용해보지 않아 제대로 작동할지 의문

---

🧠 느낀점 및 생각 메모

• ListPage에서 4개의 모달을 관리하는 코드를 어떻게 작성해야 할 지 조금 더 알아보아야겠다.

참고 자료

• `TIL` 모달 컴포넌트 관리 위치 #63
• ChatGPT

[sgoldenbird]

common/으로 탬플릿 역할 공통 컴포넌트 빼는거 좋네요. common/안에서도 modal/ button/ 이런식으로 폴더 만들어야 하지 않을까 싶네요.

[yuj2n]

그게 좋은 것 같아요! 아직 common 폴더 부분 작성을 하지 않아서 나중에 작성할 때 적용하면 될 것 같아요!