feat:계약 필드 에디터에 텍스트 정렬(L/C/R) 설정 기능 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-02-13 20:06:32 +09:00
parent c635abc3dd
commit e0e97165b3
2 changed files with 21 additions and 1 deletions

View File

@@ -593,6 +593,7 @@ public function configureFields(Request $request, int $id): JsonResponse
'fields.*.field_label' => 'nullable|string|max:100',
'fields.*.field_variable' => 'nullable|string|max:50',
'fields.*.font_size' => 'nullable|integer|min:6|max:72',
'fields.*.text_align' => 'nullable|string|in:L,C,R',
'fields.*.is_required' => 'nullable|boolean',
]);
@@ -616,6 +617,7 @@ public function configureFields(Request $request, int $id): JsonResponse
'field_label' => $field['field_label'] ?? null,
'field_variable' => $field['field_variable'] ?? null,
'font_size' => $field['font_size'] ?? null,
'text_align' => $field['text_align'] ?? 'L',
'is_required' => $field['is_required'] ?? true,
'sort_order' => $i,
]);

View File

@@ -415,6 +415,20 @@ className="w-full border rounded px-2 py-1 text-xs mt-0.5" />
className="w-full border rounded px-2 py-1 text-xs mt-0.5" />
</div>
</div>
{['text','date'].includes(selectedField.field_type) && (
<div>
<label className="text-[10px] text-gray-500">텍스트 정렬</label>
<div className="flex gap-1 mt-0.5">
{[{v:'L',label:'왼쪽'},{v:'C',label:'가운데'},{v:'R',label:'오른쪽'}].map(a => (
<button key={a.v}
onClick={() => onUpdateField(selectedFieldIndex, { text_align: a.v })}
className={`flex-1 px-2 py-1 text-[10px] rounded border transition-colors ${(selectedField.text_align || 'L') === a.v ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50'}`}>
{a.label}
</button>
))}
</div>
</div>
)}
<div className="flex items-center gap-2 pt-1">
<label className="flex items-center gap-1.5 text-xs cursor-pointer">
<input type="checkbox" checked={selectedField.is_required !== false}
@@ -765,6 +779,7 @@ className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-7
field_variable: f.field_variable || null,
field_value: f.field_value || null,
font_size: f.font_size || null,
text_align: f.text_align || 'L',
is_required: f.is_required !== false,
}));
setFields(loadedFields);
@@ -851,7 +866,7 @@ className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-7
const newField = {
signer_id: signerId, page_number: currentPage,
position_x: 25, position_y: 40, width: 20, height: 5,
field_type: fieldType, field_label: '', field_variable: null, field_value: null, font_size: null, is_required: true,
field_type: fieldType, field_label: '', field_variable: null, field_value: null, font_size: null, text_align: 'L', is_required: true,
};
const newFields = [...fields, newField];
setFields(newFields);
@@ -902,6 +917,7 @@ className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-7
field_label: f.field_label || '',
field_variable: f.field_variable || null,
font_size: f.font_size || null,
text_align: f.text_align || 'L',
is_required: f.is_required !== false,
sort_order: i,
})),
@@ -937,6 +953,7 @@ className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-7
field_label: f.field_label || '',
field_variable: f.field_variable || null,
font_size: f.font_size || null,
text_align: f.text_align || 'L',
is_required: f.is_required !== false,
}));
@@ -979,6 +996,7 @@ className="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-7
field_variable: f.field_variable || null,
field_value: f.field_value || null,
font_size: f.font_size || null,
text_align: f.text_align || 'L',
is_required: f.is_required !== false,
}));
setFields(newFields);