fix:차량일지 기간 버튼 활성 상태 표시 수정

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>