From ca2ff8403cf749a6aec5aee3bfdaba66390aad1e 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: Tue, 3 Feb 2026 13:30:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EC=B0=A8=EB=9F=89=EC=9D=BC=EC=A7=80=20?=
 =?UTF-8?q?=EA=B8=B0=EA=B0=84=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=ED=91=9C=EC=8B=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/finance/vehicle-logs.blade.php      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/resources/views/finance/vehicle-logs.blade.php b/resources/views/finance/vehicle-logs.blade.php
index 0342f694..2b4e617a 100644
--- a/resources/views/finance/vehicle-logs.blade.php
+++ b/resources/views/finance/vehicle-logs.blade.php
@@ -86,6 +86,7 @@ function VehicleLogsManagement() {
     const [selectedVehicle, setSelectedVehicle] = useState(vehicles[0]?.id || null);
     const [startDate, setStartDate] = useState(thisMonthRange.start);
     const [endDate, setEndDate] = useState(thisMonthRange.end);
+    const [activePeriod, setActivePeriod] = useState('thisMonth'); // 'thisMonth', 'lastMonth', 'custom'
 
     const [vehicleInfo, setVehicleInfo] = useState(null);
     const [logs, setLogs] = useState([]);
@@ -154,6 +155,7 @@ function VehicleLogsManagement() {
         const range = getMonthRange(new Date());
         setStartDate(range.start);
         setEndDate(range.end);
+        setActivePeriod('thisMonth');
     };
 
     const handleLastMonth = () => {
@@ -162,6 +164,16 @@ function VehicleLogsManagement() {
         const range = getMonthRange(lastMonth);
         setStartDate(range.start);
         setEndDate(range.end);
+        setActivePeriod('lastMonth');
+    };
+
+    const handleDateChange = (type, value) => {
+        if (type === 'start') {
+            setStartDate(value);
+        } else {
+            setEndDate(value);
+        }
+        setActivePeriod('custom');
     };
 
     const handleAdd = () => {
@@ -367,25 +379,33 @@ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus
                         <input
                             type="date"
                             value={startDate}
-                            onChange={(e) => setStartDate(e.target.value)}
+                            onChange={(e) => handleDateChange('start', e.target.value)}
                             className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
                         />
                         <span className="text-gray-400">~</span>
                         <input
                             type="date"
                             value={endDate}
-                            onChange={(e) => setEndDate(e.target.value)}
+                            onChange={(e) => handleDateChange('end', e.target.value)}
                             className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
                         />
                         <button
                             onClick={handleThisMonth}
-                            className="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
+                            className={`px-3 py-2 rounded-lg text-sm font-medium ${
+                                activePeriod === 'thisMonth'
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
+                            }`}
                         >
                             이번 달
                         </button>
                         <button
                             onClick={handleLastMonth}
-                            className="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50"
+                            className={`px-3 py-2 rounded-lg text-sm font-medium ${
+                                activePeriod === 'lastMonth'
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
+                            }`}
                         >
                             지난 달
                         </button>