feat: Show user's recommended vehicles in Cost Calculator dropdown

- Fetch vehicles from user's MyRequest
- Show dropdown with vehicle names and prices
- Auto-select first vehicle if available
- Show 'Example: 20,000,000 KRW' if no vehicles

frontend/src/app/cost/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useTranslation, formatPriceWithCurrency } from '@/lib/i18n';
+import { useTranslation, formatPriceWithCurrency, translateCarName } from '@/lib/i18n';
 import { useExchangeRateStore } from '@/lib/exchangeRateStore';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import SidebarLayout from '@/components/SidebarLayout';
 import { useAuthStore } from '@/lib/store';
+import { vehicleRequestsApi } from '@/lib/api';
 
 // Cost constants
 const KOREAN_FEE_PERCENT = 5; // 5% of vehicle price
@@ -37,6 +38,14 @@ interface Settings {
   domestic_export_customs_krw: number;
 }
 
+interface MyVehicle {
+  id: number;
+  car_name: string;
+  price_krw: number;
+  year?: number;
+  mileage?: number;
+}
+
 export default function CostPage() {
   const { t, language } = useTranslation();
   const { user, isLoading } = useAuthStore();
@@ -94,6 +103,11 @@ export default function CostPage() {
     domestic_export_customs_krw: 1150000,
   });
 
+  // My vehicles from requests
+  const [myVehicles, setMyVehicles] = useState<MyVehicle[]>([]);
+  const [selectedVehicleId, setSelectedVehicleId] = useState<string>('example');
+  const [vehiclesLoading, setVehiclesLoading] = useState(true);
+
   // Calculator state
   const [vehiclePrice, setVehiclePrice] = useState<string>('2000');
   const [carType, setCarType] = useState<'small' | 'compact'>('small');
@@ -133,6 +147,63 @@ export default function CostPage() {
     fetchSettings();
   }, []);
 
+  // Fetch user's vehicles from requests
+  useEffect(() => {
+    const fetchMyVehicles = async () => {
+      if (!user) {
+        setVehiclesLoading(false);
+        return;
+      }
+      try {
+        const data = await vehicleRequestsApi.getMyVehicles();
+        const vehicles: MyVehicle[] = [];
+
+        // Extract vehicles from vehicle requests
+        data.vehicle_requests.forEach(request => {
+          request.approved_vehicles.forEach(vehicle => {
+            const carData = vehicle.car_data;
+            if (carData) {
+              vehicles.push({
+                id: vehicle.id,
+                car_name: carData.car_name || 'Unknown',
+                price_krw: carData.final_price || 0,
+                year: carData.year,
+                mileage: carData.mileage,
+              });
+            }
+          });
+        });
+
+        // Also add direct purchases
+        data.direct_purchases.forEach(purchase => {
+          const carData = purchase.car_data;
+          if (carData) {
+            vehicles.push({
+              id: purchase.id + 10000, // Offset to avoid id collision
+              car_name: carData.car_name || 'Unknown',
+              price_krw: carData.final_price || 0,
+              year: carData.year,
+              mileage: carData.mileage,
+            });
+          }
+        });
+
+        setMyVehicles(vehicles);
+
+        // Auto-select first vehicle if available
+        if (vehicles.length > 0) {
+          setSelectedVehicleId(vehicles[0].id.toString());
+          setVehiclePrice(Math.round(vehicles[0].price_krw / 10000).toString());
+        }
+      } catch (error) {
+        console.error('Failed to fetch my vehicles:', error);
+      } finally {
+        setVehiclesLoading(false);
+      }
+    };
+    fetchMyVehicles();
+  }, [user]);
+
   // Calculate cost for a single slot based on current matched slots
   const calculateSlotCosts = (slots: ContainerSlot[]): ContainerSlot[] => {
     const filledSlots = slots.filter(s => s.status !== 'empty');
@@ -582,24 +653,89 @@ export default function CostPage() {
 
             {/* Input Fields */}
             <div className="space-y-6">
-              {/* Vehicle Price */}
+              {/* Vehicle Selection */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  {t.vehiclePrice} ({language === 'ko' ? '만원' : '10,000 KRW'})
+                  {t.vehiclePrice}
+                </label>
+                {vehiclesLoading ? (
+                  <div className="w-full border border-gray-300 rounded-lg px-4 py-3 bg-gray-50">
+                    <span className="text-gray-500">
+                      {language === 'ko' ? '차량 목록 불러오는 중...' : 'Loading vehicles...'}
+                    </span>
+                  </div>
+                ) : (
+                  <>
+                    <select
+                      value={selectedVehicleId}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setSelectedVehicleId(value);
+                        if (value === 'example') {
+                          setVehiclePrice('2000');
+                        } else {
+                          const vehicle = myVehicles.find(v => v.id.toString() === value);
+                          if (vehicle) {
+                            setVehiclePrice(Math.round(vehicle.price_krw / 10000).toString());
+                          }
+                        }
+                      }}
+                      className="w-full border border-gray-300 rounded-lg px-4 py-3 text-lg focus:ring-primary-500 focus:border-primary-500 bg-white"
+                    >
+                      {myVehicles.length === 0 && (
+                        <option value="example">
+                          {language === 'ko' ? '예시: ₩20,000,000' :
+                           language === 'mn' ? 'Жишээ: ₩20,000,000' :
+                           language === 'ru' ? 'Пример: ₩20,000,000' :
+                           'Example: ₩20,000,000'}
+                        </option>
+                      )}
+                      {myVehicles.map((vehicle) => (
+                        <option key={vehicle.id} value={vehicle.id.toString()}>
+                          {translateCarName(vehicle.car_name, language)}
+                          {vehicle.year ? ` (${vehicle.year})` : ''}
+                          - ₩{vehicle.price_krw.toLocaleString()}
+                        </option>
+                      ))}
+                      {myVehicles.length > 0 && (
+                        <option value="example">
+                          {language === 'ko' ? '직접 입력 (예시)' :
+                           language === 'mn' ? 'Гараар оруулах (жишээ)' :
+                           language === 'ru' ? 'Ввести вручную (пример)' :
+                           'Manual input (example)'}
+                        </option>
+                      )}
+                    </select>
+                    {myVehicles.length === 0 && (
+                      <p className="mt-2 text-sm text-amber-600">
+                        {language === 'ko' ? '💡 추천받은 차량이 없습니다. 예시 가격으로 계산합니다.' :
+                         language === 'mn' ? '💡 Санал болгосон машин байхгүй. Жишээ үнээр тооцоолно.' :
+                         language === 'ru' ? '💡 Нет рекомендованных автомобилей. Расчет по примерной цене.' :
+                         '💡 No recommended vehicles. Using example price for calculation.'}
+                      </p>
+                    )}
+                    {selectedVehicleId === 'example' && myVehicles.length > 0 && (
+                      <div className="mt-2">
+                        <label className="block text-sm text-gray-600 mb-1">
+                          {language === 'ko' ? '차량 가격 (만원)' : 'Vehicle Price (10,000 KRW)'}
                         </label>
                         <div className="relative">
                           <input
                             type="number"
                             value={vehiclePrice}
                             onChange={(e) => setVehiclePrice(e.target.value)}
-                    className="w-full border border-gray-300 rounded-lg px-4 py-3 text-lg focus:ring-primary-500 focus:border-primary-500"
+                            className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-primary-500 focus:border-primary-500"
                             placeholder="2000"
                           />
-                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500">
+                          <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
                             {language === 'ko' ? '만원' : 'x 10,000 KRW'}
                           </span>
                         </div>
-                <p className="mt-1 text-sm text-gray-500">
+                      </div>
+                    )}
+                  </>
+                )}
+                <p className="mt-2 text-sm text-gray-500">
                   = {formatLocalCurrency(parseInt(vehiclePrice || '0') * 10000)}
                 </p>
               </div>