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

@@ -1232,12 +1232,27 @@ export function TableSectionSettingsModal({
{(tableConfig.calculations || []).map((calc, index) => (
<div key={index} className="flex items-center gap-2 border rounded-lg p-2 bg-muted/30">
<Input
value={calc.resultField}
onChange={(e) => updateCalculation(index, { resultField: e.target.value })}
placeholder="결과 필드"
className="h-8 text-xs w-[150px]"
/>
<Select
value={calc.resultField || ""}
onValueChange={(value) => updateCalculation(index, { resultField: value })}
>
<SelectTrigger className="h-8 text-xs w-[150px]">
<SelectValue placeholder="결과 필드 선택" />
</SelectTrigger>
<SelectContent>
{(tableConfig.columns || []).length === 0 ? (
<SelectItem value="__no_columns__" disabled>
</SelectItem>
) : (
(tableConfig.columns || []).map((col) => (
<SelectItem key={col.field} value={col.field}>
{col.label || col.field}
</SelectItem>
))
)}
</SelectContent>
</Select>
<span className="text-xs text-muted-foreground">=</span>
<Input
value={calc.formula}