SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [전표] 분개 모달 테이블 레이아웃 깨짐 수정

Browse Source 
- table-fixed + Tailwind w-[] 클래스가 빌드에 누락되어 칼럼 너비 미적용
- colgroup + inline style로 변경하여 고정 너비 보장
- 계정과목/거래처/적요 td에 overflow-hidden 추가
- 수동전표, 카드분개, 은행분개 모달 3개 모두 동일 적용
This commit is contained in:
김보곤
2026-03-12 16:21:10 +09:00
parent c948facde9
commit c52da4e68d
1 changed files with 57 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/views/finance/journal-entries.blade.php
View File

@@ -1674,16 +1674,25 @@ className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:rin
<div>
<h4 className="text-sm font-semibold text-stone-700 mb-3">분개 내역</h4>
<div className="overflow-x-auto">
<table className="w-full text-sm table-fixed">
<table className="w-full text-sm" style={{ tableLayout: 'fixed' }}>
<colgroup>
<col style={{ width: '70px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '110px' }} />
<col style={{ width: '110px' }} />
<col />
<col style={{ width: '40px' }} />
</colgroup>
<thead>
<tr className="bg-stone-50 border-b border-stone-200">
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[70px]">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[180px]">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[160px]">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">대변</th>
<th className="px-3 py-2 text-center font-medium text-stone-600">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">대변</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">적요</th>
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[40px]"></th>
<th className="px-3 py-2 text-center font-medium text-stone-600"></th>
</tr>
</thead>
<tbody>
@@ -1696,7 +1705,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
{line.dc_type === 'debit' ? '차변' : '대변'}
</button>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<AccountCodeSelect value={line.account_code} accountCodes={accountCodes}
triggerId={`m-account-${index}`}
onTab={() => document.getElementById(`m-partner-${index}`)?.focus()}
@@ -1706,7 +1715,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
setLines(updated);
}} />
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<TradingPartnerSelect value={line.trading_partner_id} valueName={line.trading_partner_name}
tradingPartners={tradingPartners}
triggerId={`m-partner-${index}`}
@@ -1736,7 +1745,7 @@ className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none fo
placeholder={line.dc_type === 'credit' ? '금액' : ''}
className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none font-medium ${line.dc_type === 'credit' ? 'border-stone-200 focus:ring-2 focus:ring-red-500 text-red-700' : 'bg-stone-100 border-stone-100 text-stone-300'}`} />
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<input type="text" id={`m-desc-${index}`} value={line.description || ''}
onChange={(e) => updateLine(index, 'description', e.target.value)}
onKeyDown={(e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); const next = document.getElementById(`m-account-${index + 1}`); if (next) next.focus(); } }}
@@ -2096,16 +2105,25 @@ className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:rin
<div>
<h4 className="text-sm font-semibold text-stone-700 mb-3">분개 내역</h4>
<div className="overflow-x-auto">
<table className="w-full text-sm table-fixed">
<table className="w-full text-sm" style={{ tableLayout: 'fixed' }}>
<colgroup>
<col style={{ width: '70px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '110px' }} />
<col style={{ width: '110px' }} />
<col />
<col style={{ width: '40px' }} />
</colgroup>
<thead>
<tr className="bg-stone-50 border-b border-stone-200">
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[70px]">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[180px]">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[160px]">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">대변</th>
<th className="px-3 py-2 text-center font-medium text-stone-600">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">대변</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">적요</th>
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[40px]"></th>
<th className="px-3 py-2 text-center font-medium text-stone-600"></th>
</tr>
</thead>
<tbody>
@@ -2118,7 +2136,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
{line.dc_type === 'debit' ? '차변' : '대변'}
</button>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<AccountCodeSelect value={line.account_code} accountCodes={accountCodes}
triggerId={`c-account-${index}`}
onTab={() => document.getElementById(`c-partner-${index}`)?.focus()}
@@ -2128,7 +2146,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
setLines(updated);
}} />
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<TradingPartnerSelect value={line.trading_partner_id} valueName={line.trading_partner_name}
tradingPartners={tradingPartners}
triggerId={`c-partner-${index}`}
@@ -2158,7 +2176,7 @@ className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none fo
placeholder={line.dc_type === 'credit' ? '금액' : ''}
className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none font-medium ${line.dc_type === 'credit' ? 'border-stone-200 focus:ring-2 focus:ring-red-500 text-red-700' : 'bg-stone-100 border-stone-100 text-stone-300'}`} />
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<input type="text" id={`c-desc-${index}`} value={line.description || ''}
onChange={(e) => updateLine(index, 'description', e.target.value)}
onKeyDown={(e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); const next = document.getElementById(`c-account-${index + 1}`); if (next) next.focus(); } }}
@@ -2503,16 +2521,25 @@ className="w-full px-3 py-2 text-sm border border-stone-200 rounded-lg focus:rin
<div>
<h4 className="text-sm font-semibold text-stone-700 mb-3">분개 내역</h4>
<div className="overflow-x-auto">
<table className="w-full text-sm table-fixed">
<table className="w-full text-sm" style={{ tableLayout: 'fixed' }}>
<colgroup>
<col style={{ width: '70px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '160px' }} />
<col style={{ width: '110px' }} />
<col style={{ width: '110px' }} />
<col />
<col style={{ width: '40px' }} />
</colgroup>
<thead>
<tr className="bg-stone-50 border-b border-stone-200">
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[70px]">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[180px]">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600 w-[160px]">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600 w-[120px]">대변</th>
<th className="px-3 py-2 text-center font-medium text-stone-600">구분</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">계정과목</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">거래처</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">차변</th>
<th className="px-3 py-2 text-right font-medium text-stone-600">대변</th>
<th className="px-3 py-2 text-left font-medium text-stone-600">적요</th>
<th className="px-3 py-2 text-center font-medium text-stone-600 w-[40px]"></th>
<th className="px-3 py-2 text-center font-medium text-stone-600"></th>
</tr>
</thead>
<tbody>
@@ -2525,7 +2552,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
{line.dc_type === 'debit' ? '차변' : '대변'}
</button>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<AccountCodeSelect
value={line.account_code}
accountCodes={accountCodes}
@@ -2538,7 +2565,7 @@ className={`px-2 py-0.5 rounded text-xs font-medium cursor-pointer hover:opacity
}}
/>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<TradingPartnerSelect
value={line.trading_partner_id}
valueName={line.trading_partner_name}
@@ -2573,7 +2600,7 @@ className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none fo
className={`w-full px-2 py-1.5 text-xs text-right border rounded outline-none font-medium ${line.dc_type === 'credit' ? 'border-stone-200 focus:ring-2 focus:ring-red-500 text-red-700' : 'bg-stone-100 border-stone-100 text-stone-300'}`}
/>
</td>
<td className="px-3 py-2">
<td className="px-3 py-2 overflow-hidden">
<input type="text" id={`b-desc-${index}`} value={line.description || ''}
onChange={(e) => updateLine(index, 'description', e.target.value)}
onKeyDown={(e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); const next = document.getElementById(`b-account-${index + 1}`); if (next) next.focus(); } }}