feat(repeater-table): 행 드래그 앤 드롭 및 컬럼 너비 관리 기능 추가
- @dnd-kit 라이브러리로 행 순서 드래그 앤 드롭 구현 - SortableRow 컴포넌트로 드래그 가능한 테이블 행 구현 - GripVertical 아이콘 드래그 핸들 추가 - 드래그 시 선택된 행 인덱스 자동 재계산 - "균등 분배" 버튼으로 컬럼 너비 컨테이너에 맞게 균등 분배 - 컬럼 헤더 더블클릭으로 데이터 기준 자동 확장/복구 토글 - Input 컴포넌트 min-w-0 w-full 적용으로 컬럼 너비 초과 방지
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Plus, Columns } from "lucide-react";
|
||||
import { ItemSelectionModal } from "./ItemSelectionModal";
|
||||
import { RepeaterTable } from "./RepeaterTable";
|
||||
import { ModalRepeaterTableProps, RepeaterColumnConfig, JoinCondition, DynamicDataSourceOption } from "./types";
|
||||
@@ -331,6 +331,9 @@ export function ModalRepeaterTableComponent({
|
||||
// 체크박스 선택 상태
|
||||
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
|
||||
|
||||
// 균등 분배 트리거 (값이 변경되면 RepeaterTable에서 균등 분배 실행)
|
||||
const [equalizeWidthsTrigger, setEqualizeWidthsTrigger] = useState(0);
|
||||
|
||||
// 🆕 납기일 일괄 적용 플래그 (딱 한 번만 실행)
|
||||
const [isDeliveryDateApplied, setIsDeliveryDateApplied] = useState(false);
|
||||
|
||||
@@ -820,9 +823,23 @@ export function ModalRepeaterTableComponent({
|
||||
<div className={cn("space-y-4", className)}>
|
||||
{/* 추가 버튼 */}
|
||||
<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 className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{localValue.length > 0 && `${localValue.length}개 항목`}
|
||||
{selectedRows.size > 0 && ` (${selectedRows.size}개 선택됨)`}
|
||||
</span>
|
||||
{columns.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setEqualizeWidthsTrigger((prev) => prev + 1)}
|
||||
className="h-7 text-xs px-2"
|
||||
title="컬럼 너비 균등 분배"
|
||||
>
|
||||
<Columns className="h-3.5 w-3.5 mr-1" />
|
||||
균등 분배
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{selectedRows.size > 0 && (
|
||||
@@ -855,6 +872,7 @@ export function ModalRepeaterTableComponent({
|
||||
onDataSourceChange={handleDataSourceChange}
|
||||
selectedRows={selectedRows}
|
||||
onSelectionChange={setSelectedRows}
|
||||
equalizeWidthsTrigger={equalizeWidthsTrigger}
|
||||
/>
|
||||
|
||||
{/* 항목 선택 모달 */}
|
||||
|
||||
Reference in New Issue
Block a user