From ea3ad7e633859669ecc628abaacf224565b0b608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Thu, 19 Feb 2026 11:34:19 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EC=88=98=EB=8B=B9=EC=A0=95=EC=82=B0=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=20flex-wrap=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../partials/commission/filters.blade.php     | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/resources/views/finance/settlement/partials/commission/filters.blade.php b/resources/views/finance/settlement/partials/commission/filters.blade.php
index 7c8d4fe4..1c453989 100644
--- a/resources/views/finance/settlement/partials/commission/filters.blade.php
+++ b/resources/views/finance/settlement/partials/commission/filters.blade.php
@@ -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') }}"