feat(RepeaterTable): 컬럼 너비 자동 맞춤 기능 추가

- 균등 분배 / 자동 맞춤 토글 방식으로 변경
- measureTextWidth(): 한글/영문/숫자별 픽셀 계산
- applyAutoFitWidths(): 글자 너비 기준 컬럼 조정
- 계산 규칙 결과 필드를 드롭다운으로 변경
This commit is contained in:
SeongHyun Kim
2025-12-18 16:39:10 +09:00
parent 1c6eb2ae61
commit fdb9ef9167
3 changed files with 308 additions and 258 deletions

View File

@@ -2,7 +2,7 @@
import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Plus, Columns } from "lucide-react";
import { Plus, Columns, AlignJustify } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";
@@ -170,8 +170,8 @@ export function TableSectionRenderer({
// 체크박스 선택 상태
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
// 균등 분배 트리거
const [equalizeWidthsTrigger, setEqualizeWidthsTrigger] = useState(0);
// 너비 조정 트리거 (홀수: 자동맞춤, 짝수: 균등분배)
const [widthTrigger, setWidthTrigger] = useState(0);
// 동적 데이터 소스 활성화 상태
const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
@@ -438,12 +438,21 @@ export function TableSectionRenderer({
<Button
variant="outline"
size="sm"
onClick={() => setEqualizeWidthsTrigger((prev) => prev + 1)}
onClick={() => setWidthTrigger((prev) => prev + 1)}
className="h-7 text-xs px-2"
title="컬럼 너비 균등 분배"
title={widthTrigger % 2 === 0 ? "내용에 맞게 자동 조정" : "균등 분배"}
>
<Columns className="h-3.5 w-3.5 mr-1" />
{widthTrigger % 2 === 0 ? (
<>
<AlignJustify className="h-3.5 w-3.5 mr-1" />
</>
) : (
<>
<Columns className="h-3.5 w-3.5 mr-1" />
</>
)}
</Button>
)}
</div>
@@ -478,7 +487,7 @@ export function TableSectionRenderer({
onDataSourceChange={handleDataSourceChange}
selectedRows={selectedRows}
onSelectionChange={setSelectedRows}
equalizeWidthsTrigger={equalizeWidthsTrigger}
equalizeWidthsTrigger={widthTrigger}
/>
{/* 항목 선택 모달 */}