fix:결제 모달 레이아웃을 flex 기반으로 변경 (날짜/금액 고정폭, 내용 flex-1)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-02-20 10:38:52 +09:00
parent 8ed7b2698a
commit bfad25a208

View File

@@ -937,18 +937,18 @@ className="p-1 hover:bg-gray-100 rounded-lg"
</div>
{/* 항목 헤더 */}
<div className="grid grid-cols-12 gap-3 mb-2 text-xs font-medium text-gray-500">
<div className="col-span-2">날짜</div>
<div className="col-span-2">금액</div>
<div className="col-span-7">내용</div>
<div className="col-span-1"></div>
<div className="flex gap-3 mb-2 text-xs font-medium text-gray-500">
<div style={{width: '160px', flexShrink: 0}}>날짜</div>
<div style={{width: '130px', flexShrink: 0}}>금액</div>
<div className="flex-1">내용</div>
<div style={{width: '32px', flexShrink: 0}}></div>
</div>
{/* 항목 리스트 */}
<div className="space-y-2">
{prepaymentItems.map((item, index) => (
<div key={index} className="grid grid-cols-12 gap-3 items-start">
<div className="col-span-2">
<div key={index} className="flex gap-3 items-start">
<div style={{width: '160px', flexShrink: 0}}>
<input
type="date"
value={item.date}
@@ -956,7 +956,7 @@ className="p-1 hover:bg-gray-100 rounded-lg"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 text-sm"
/>
</div>
<div className="col-span-2">
<div style={{width: '130px', flexShrink: 0}}>
<input
type="text"
value={formatInputCurrency(item.amount)}
@@ -965,7 +965,7 @@ className="w-full px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 foc
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 text-sm text-right"
/>
</div>
<div className="col-span-7">
<div className="flex-1">
<textarea
value={item.description}
onChange={(e) => updatePrepaymentItem(index, 'description', e.target.value)}
@@ -975,7 +975,7 @@ className="w-full px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 foc
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 text-sm resize-none"
/>
</div>
<div className="col-span-1 flex items-center justify-center pt-1">
<div style={{width: '32px', flexShrink: 0}} className="flex items-center justify-center pt-1">
<button
onClick={() => removePrepaymentItem(index)}
disabled={prepaymentItems.length <= 1}