TrashModal 데모

학생·선생님 휴지통 UI를 공유하는 bonbon/TrashModal 컴포넌트 예시입니다. 쉘·툴바·리스트·카드·확인 모달을 조합해 사용합니다.

import

경로는 프로젝트 루트 alias 기준입니다.

import {
  TrashModal,
  TrashModalCard,
  TrashModalCardSkeleton,
  TrashModalEmptyState,
  TrashModalList,
  TrashModalRestoreConfirmModal,
  TrashModalRemoveConfirmModal,
} from "@/shared/components/bonbon/TrashModal";

TrashModal — 전체 조합

학생(체크박스 우상단), 교사(체크박스 좌상단), 빈 상태, 로딩 시나리오를 확인할 수 있습니다.

// checkboxPosition으로 위치 제어
<TrashModalCard checkboxPosition="top-right" …>  {/* 학생 */}
<TrashModalCard checkboxPosition="top-left" …>   {/* 교사 (default) */}

// description은 ReactNode를 반환해 count를 bold 처리
texts={{
  description: (count) => (
    <><strong>{count}</strong>개의 작품을 휴지통에서 꺼냅니다.</>
  ),
}}

TrashModalCard — 학생 (checkboxPosition="top-right")

체크박스가 이미지 우상단에 위치합니다. 메타: 제목 + N일 남음 · 삭제 예정일

내가 고양이가 된다면 재밌겠다
7일 남음6월 5일 삭제
봄날의 풍경
3일 남음6월 27일 삭제

TrashModalCard — 교사 (checkboxPosition="top-left")

체크박스가 이미지 좌상단에 위치합니다. 메타: 학생명 · 반 + 제목 + 삭제일

김채원봉봉초 3학년 2반
내가 고양이가 된다면 재밌겠다
26.05.03(목) 삭제
박시공봉봉초 4학년 1반
봄날의 풍경
26.05.10(목) 삭제

TrashModalCardSkeleton

로딩 시 TrashModalList가 그리드로 렌더합니다.

TrashModalEmptyState

imageSrc, title, description props로 빈 상태를 표시합니다.

휴지통이 비어 있어요

삭제한 작품이 여기에 표시됩니다.

확인 모달

꺼내기: bonbon/button FILLED/BRAND (size 72). 비우기: bonbon/button FILLED/RED (size 72). description은 ReactNode로 count를 bold 처리합니다.