fix:카드 사용내역 테이블 레이아웃 개선 (사용일시, 10자 표시)

This commit is contained in:
김보곤
2026-02-06 08:34:34 +09:00
parent 3cc610c6b0
commit 3fddd95157

View File

@@ -291,49 +291,50 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 te
</a>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 table-fixed">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="w-16 px-3 py-3 text-left text-xs font-medium text-gray-500">사용일</th>
<th class="w-20 px-3 py-3 text-left text-xs font-medium text-gray-500">카드번호</th>
<th class="w-14 px-3 py-3 text-center text-xs font-medium text-gray-500">공제</th>
<th class="w-20 px-3 py-3 text-left text-xs font-medium text-gray-500">가맹점</th>
<th class="w-20 px-3 py-3 text-left text-xs font-medium text-gray-500">내역</th>
<th class="w-24 px-3 py-3 text-right text-xs font-medium text-gray-500">금액</th>
<th class="w-20 px-3 py-3 text-left text-xs font-medium text-gray-500">계정과목</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">사용일</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">카드번호</th>
<th class="px-2 py-3 text-center text-xs font-medium text-gray-500 w-12">공제</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">가맹점</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">내역</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500">금액</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500">계정과목</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse($recentCardTransactions as $card)
@php
$useDate = \Carbon\Carbon::createFromFormat('Ymd', $card->use_date);
$useTime = $card->use_time ? substr($card->use_time, 0, 2) . ':' . substr($card->use_time, 2, 2) : '';
$isCancel = $card->approval_type === '취소';
$isDeductible = $card->deduction_type === 'deductible';
$cardLast4 = substr($card->card_num, -4);
@endphp
<tr class="hover:bg-gray-50 {{ $isCancel ? 'bg-red-50' : '' }}">
<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">
{{ $useDate->format('m/d') }}
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
{{ $useDate->format('m/d') }} {{ $useTime }}
</td>
<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-600">
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">
****-{{ $cardLast4 }}
</td>
<td class="px-3 py-3 whitespace-nowrap text-center">
<td class="px-2 py-3 whitespace-nowrap text-center">
<span class="px-1.5 py-0.5 rounded text-xs font-medium {{ $isDeductible ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
{{ $isDeductible ? '공제' : '불공' }}
</span>
</td>
<td class="px-3 py-3 text-sm text-gray-800 truncate" title="{{ $card->merchant_name }}">
{{ Str::limit($card->merchant_name, 6) }}
<td class="px-4 py-3 text-sm text-gray-800" title="{{ $card->merchant_name }}">
{{ Str::limit($card->merchant_name, 10) }}
</td>
<td class="px-3 py-3 text-sm text-gray-600 truncate" title="{{ $card->description }}">
{{ Str::limit($card->description ?: '-', 6) }}
<td class="px-4 py-3 text-sm text-gray-600" title="{{ $card->description }}">
{{ Str::limit($card->description ?: '-', 10) }}
</td>
<td class="px-3 py-3 whitespace-nowrap text-sm text-right font-medium {{ $isCancel ? 'text-green-600' : 'text-red-600' }}">
<td class="px-4 py-3 whitespace-nowrap text-sm text-right font-medium {{ $isCancel ? 'text-green-600' : 'text-red-600' }}">
{{ $isCancel ? '+' : '-' }}{{ number_format($card->approval_amount) }}
</td>
<td class="px-3 py-3 text-sm text-gray-600 truncate" title="{{ $card->account_name }}">
{{ Str::limit($card->account_name ?: '-', 6) }}
<td class="px-4 py-3 text-sm text-gray-600" title="{{ $card->account_name }}">
{{ Str::limit($card->account_name ?: '-', 10) }}
</td>
</tr>
@empty