합성 패턴 — children과 슬롯

// 래퍼 컴포넌트 — 테두리만 제공
function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="rounded-lg border p-4 shadow-sm">
      {children}
    </div>
  );
}

// 사용: 안에 무엇이든 넣을 수 있다
<Card>
  <h2>제목</h2>
  <p>설명 텍스트</p>
</Card>

<Card>
  <img src="/photo.jpg" alt="사진" />
  <button>좋아요</button>
</Card>

// Layout 컴포넌트 — 페이지 공통 구조
function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen">
      <Header />
      <main className="max-w-4xl mx-auto p-4">
        {children}
      </main>
      <Footer />
    </div>
  );
}

// 모든 페이지에서 재사용
<PageLayout>
  <HomePage />
</PageLayout>

interface DialogProps {
  header: React.ReactNode;   // 슬롯 1: 상단
  children: React.ReactNode; // 슬롯 2: 본문
  footer?: React.ReactNode;  // 슬롯 3: 하단 (선택)
}

function Dialog({ header, children, footer }: DialogProps) {
  return (
    <div className="rounded-xl border shadow-lg">
      <div className="border-b p-4 font-bold">
        {header}
      </div>
      <div className="p-4">
        {children}
      </div>
      {footer && (
        <div className="border-t p-4 flex justify-end gap-2">
          {footer}
        </div>
      )}
    </div>
  );
}

// 사용: 각 슬롯에 원하는 내용 배치
<Dialog
  header={<h2>정말 삭제하시겠습니까?</h2>}
  footer={
    <>
      <button>취소</button>
      <button>삭제</button>
    </>
  }
>
  <p>삭제된 데이터는 복구할 수 없습니다.</p>
</Dialog>

// 1. Modal — 오버레이 + 슬롯
function Modal({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white rounded-xl p-6 max-w-md w-full">
        <div className="flex justify-between mb-4">
          <h2 className="text-lg font-bold">{title}</h2>
          <button onClick={onClose}>✕</button>
        </div>
        {children}
      </div>
    </div>
  );
}

// 2. Card — 이미지 슬롯 + 본문
function Card({ image, children, actions }) {
  return (
    <div className="rounded-xl border overflow-hidden">
      {image && <div className="aspect-video">{image}</div>}
      <div className="p-4">{children}</div>
      {actions && (
        <div className="border-t p-3 flex gap-2">{actions}</div>
      )}
    </div>
  );
}

// 사용
<Card
  image={<img src="/thumb.jpg" alt="" />}
  actions={<button>상세보기</button>}
>
  <h3>프로젝트 제목</h3>
  <p>설명...</p>
</Card>