feat(modal-repeater-table): 체크박스 기반 일괄 삭제 기능 추가

- RepeaterTable: 체크박스 컬럼 추가 (전체 선택/개별 선택 지원)
- RepeaterTable: 선택된 행 시각적 피드백 (bg-blue-50)
- RepeaterTable: 기존 개별 삭제 버튼 컬럼 제거
- ModalRepeaterTableComponent: selectedRows 상태 및 handleBulkDelete 함수 추가
- ModalRepeaterTableComponent: "선택 삭제" 버튼 UI 추가
- RepeatScreenModalConfigPanel: 행 번호 컬럼 선택에서 빈 값 필터링
This commit is contained in:
SeongHyun Kim
2025-12-16 11:39:30 +09:00
parent 4cff9e4cec
commit 56608001ff
3 changed files with 102 additions and 33 deletions

View File

@@ -328,6 +328,9 @@ export function ModalRepeaterTableComponent({
const companyCode = componentConfig?.companyCode || propCompanyCode;
const [modalOpen, setModalOpen] = useState(false);
// 체크박스 선택 상태
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
// 🆕 납기일 일괄 적용 플래그 (딱 한 번만 실행)
const [isDeliveryDateApplied, setIsDeliveryDateApplied] = useState(false);
@@ -794,6 +797,18 @@ export function ModalRepeaterTableComponent({
handleChange(newData);
};
// 선택된 항목 일괄 삭제 핸들러
const handleBulkDelete = () => {
if (selectedRows.size === 0) return;
// 선택되지 않은 항목만 남김
const newData = localValue.filter((_, index) => !selectedRows.has(index));
// 데이터 업데이트 및 선택 상태 초기화
handleChange(newData);
setSelectedRows(new Set());
};
// 컬럼명 -> 라벨명 매핑 생성 (sourceColumnLabels 우선, 없으면 columns에서 가져옴)
const columnLabels = columns.reduce((acc, col) => {
// sourceColumnLabels에 정의된 라벨 우선 사용
@@ -807,14 +822,26 @@ export function ModalRepeaterTableComponent({
<div className="flex justify-between items-center">
<div className="text-sm text-muted-foreground">
{localValue.length > 0 && `${localValue.length}개 항목`}
{selectedRows.size > 0 && ` (${selectedRows.size}개 선택됨)`}
</div>
<div className="flex gap-2">
{selectedRows.size > 0 && (
<Button
variant="destructive"
onClick={handleBulkDelete}
className="h-8 text-xs sm:h-10 sm:text-sm"
>
({selectedRows.size})
</Button>
)}
<Button
onClick={() => setModalOpen(true)}
className="h-8 text-xs sm:h-10 sm:text-sm"
>
<Plus className="h-4 w-4 mr-2" />
{modalButtonText}
</Button>
</div>
<Button
onClick={() => setModalOpen(true)}
className="h-8 text-xs sm:h-10 sm:text-sm"
>
<Plus className="h-4 w-4 mr-2" />
{modalButtonText}
</Button>
</div>
{/* Repeater 테이블 */}
@@ -826,6 +853,8 @@ export function ModalRepeaterTableComponent({
onRowDelete={handleRowDelete}
activeDataSources={activeDataSources}
onDataSourceChange={handleDataSourceChange}
selectedRows={selectedRows}
onSelectionChange={setSelectedRows}
/>
{/* 항목 선택 모달 */}