fix:수당정산 필터 flex-wrap 레이아웃으로 변경

사이드바로 인해 grid 열이 깨지는 문제 해결.
flex-wrap으로 변경하여 PC에서 한 줄, 모바일에서 2열 자동 배치.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-02-19 11:34:19 +09:00
parent f1de56dc0c
commit ea3ad7e633

View File

@@ -2,9 +2,8 @@
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<form id="filter-form" method="GET" action="{{ route('finance.settlement') }}">
<input type="hidden" name="tab" value="commission">
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
{{-- 년도 --}}
<div>
<div class="flex flex-wrap items-end gap-3">
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
<label class="block text-xs font-medium text-gray-500 mb-1">년도</label>
<select name="year" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
@for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
@@ -13,8 +12,7 @@
</select>
</div>
{{-- --}}
<div>
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[80px]">
<label class="block text-xs font-medium text-gray-500 mb-1"></label>
<select name="month" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
@for ($m = 1; $m <= 12; $m++)
@@ -23,8 +21,7 @@
</select>
</div>
{{-- 상태 --}}
<div>
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
<label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
<select name="status" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
<option value="">전체</option>
@@ -35,8 +32,7 @@
</select>
</div>
{{-- 입금구분 --}}
<div>
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
<label class="block text-xs font-medium text-gray-500 mb-1">입금구분</label>
<select name="payment_type" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
<option value="">전체</option>
@@ -45,8 +41,7 @@
</select>
</div>
{{-- 영업파트너 --}}
<div>
<div class="w-[calc(50%-6px)] sm:w-auto sm:flex-1 sm:min-w-[120px]">
<label class="block text-xs font-medium text-gray-500 mb-1">영업파트너</label>
<select name="partner_id" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
<option value="">전체</option>
@@ -58,8 +53,7 @@
</select>
</div>
{{-- 수당유형 --}}
<div>
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[110px]">
<label class="block text-xs font-medium text-gray-500 mb-1">수당유형</label>
<select name="commission_type" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
<option value="">전체</option>
@@ -69,10 +63,9 @@
</select>
</div>
{{-- 버튼 --}}
<div class="flex items-end gap-1 col-span-2 sm:col-span-2 lg:col-span-2">
<div class="flex items-end gap-1 w-full sm:w-auto">
<button type="submit"
class="flex-1 px-3 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors">
class="flex-1 sm:flex-none px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors">
조회
</button>
<a href="{{ route('finance.settlement') }}"