Feature: Russian language support & Vehicle Requests improvements
- Add Russian language support (title_ru, subtitle_ru) for hero banners - Add fuel/transmission translations for Mongolian (경유→Дизель, 오토→Автомат) - Improve Vehicle Requests admin page: - Display real request ID and user email - Show detailed request info (maker, grade, year, fuel, mileage) - Replace modal search with Cars page integration - Add "Add to Request" flow in Cars page for vehicle recommendations - Fix image URL handling in FilmStripSlider and car detail page 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import api, { heroBannersApi, carmodooApi } from '@/lib/api';
|
||||
import api, { heroBannersApi, carmodooApi, vehicleRequestsApi } from '@/lib/api';
|
||||
|
||||
interface CarmodooMaker {
|
||||
code: string;
|
||||
@@ -193,6 +194,16 @@ export default function CarsAdminPage() {
|
||||
}>;
|
||||
} | null>(null);
|
||||
|
||||
// Vehicle Request mode (when coming from Vehicle Requests page)
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const requestId = searchParams.get('requestId');
|
||||
const [addingToRequest, setAddingToRequest] = useState(false);
|
||||
const [requestAddResult, setRequestAddResult] = useState<{
|
||||
added: number;
|
||||
errors: number;
|
||||
} | null>(null);
|
||||
|
||||
// Dealer description editing state
|
||||
const [showDescEditModal, setShowDescEditModal] = useState(false);
|
||||
const [editingCar, setEditingCar] = useState<CarmodooCarItem | null>(null);
|
||||
@@ -249,6 +260,33 @@ export default function CarsAdminPage() {
|
||||
}
|
||||
}, [filters.model_code]);
|
||||
|
||||
// Pre-fill filters from URL params (when coming from Vehicle Requests page)
|
||||
useEffect(() => {
|
||||
if (requestId) {
|
||||
const makerCode = searchParams.get('maker_code') || '';
|
||||
const modelCode = searchParams.get('model_code') || '';
|
||||
const grade = searchParams.get('grade') || '';
|
||||
const yearMin = searchParams.get('year_min') || '';
|
||||
const yearMax = searchParams.get('year_max') || '';
|
||||
const mileageMax = searchParams.get('mileage_max') || '';
|
||||
const fuel = searchParams.get('fuel') || '';
|
||||
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
maker_code: makerCode,
|
||||
model_code: modelCode,
|
||||
grade: grade,
|
||||
year_min: yearMin,
|
||||
year_max: yearMax,
|
||||
mileage_max: mileageMax,
|
||||
fuel: fuel,
|
||||
}));
|
||||
|
||||
// Switch to Carmodoo tab
|
||||
setActiveTab('carmodoo');
|
||||
}
|
||||
}, [requestId]);
|
||||
|
||||
const loadLocalCars = async (page = 1) => {
|
||||
setLocalLoading(true);
|
||||
try {
|
||||
@@ -714,6 +752,76 @@ export default function CarsAdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// 차량 추천 목록에 추가 함수 (Vehicle Request용)
|
||||
const handleAddToRequest = async () => {
|
||||
if (!requestId) return;
|
||||
if (selectedCars.size === 0) {
|
||||
alert('Please select at least one car to add to the request.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`${selectedCars.size}개의 차량을 추천 목록에 추가하시겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setAddingToRequest(true);
|
||||
setRequestAddResult(null);
|
||||
|
||||
try {
|
||||
const selectedCarsList = cars.filter(car => selectedCars.has(car.id));
|
||||
let addedCount = 0;
|
||||
let errorCount = 0;
|
||||
|
||||
for (const car of selectedCarsList) {
|
||||
try {
|
||||
// Add vehicle to request
|
||||
await vehicleRequestsApi.adminAddVehicle(parseInt(requestId), {
|
||||
request_id: parseInt(requestId),
|
||||
car_data: {
|
||||
id: car.id,
|
||||
car_name: car.car_name,
|
||||
maker_name: car.maker_name,
|
||||
model_name: car.model_name,
|
||||
year: car.year,
|
||||
mileage: car.mileage,
|
||||
final_price: car.price,
|
||||
fuel: car.fuel,
|
||||
transmission: car.transmission,
|
||||
color: car.color,
|
||||
main_image: car.main_image,
|
||||
},
|
||||
is_approved: true,
|
||||
});
|
||||
addedCount++;
|
||||
} catch (err) {
|
||||
console.error(`Failed to add car ${car.id}:`, err);
|
||||
errorCount++;
|
||||
}
|
||||
}
|
||||
|
||||
setRequestAddResult({
|
||||
added: addedCount,
|
||||
errors: errorCount,
|
||||
});
|
||||
|
||||
setSelectedCars(new Set());
|
||||
|
||||
if (errorCount > 0) {
|
||||
alert(`${addedCount}개의 차량이 추천 목록에 추가되었습니다.\n(실패: ${errorCount}개)`);
|
||||
} else {
|
||||
alert(`${addedCount}개의 차량이 추천 목록에 추가되었습니다.`);
|
||||
}
|
||||
|
||||
// Redirect back to vehicle requests page
|
||||
router.push('/admin/vehicle-requests');
|
||||
} catch (err) {
|
||||
console.error('Add to request failed:', err);
|
||||
alert('추천 목록 추가에 실패했습니다.');
|
||||
} finally {
|
||||
setAddingToRequest(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCar = async (carId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this car?')) {
|
||||
return;
|
||||
@@ -858,6 +966,29 @@ export default function CarsAdminPage() {
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-6">Cars Management</h1>
|
||||
|
||||
{/* Request Mode Banner */}
|
||||
{requestId && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-blue-100 rounded-full p-2">
|
||||
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-blue-800">Adding vehicles to Request #{requestId}</p>
|
||||
<p className="text-sm text-blue-600">Search and select vehicles, then click "Add to Request" button.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/admin/vehicle-requests')}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
|
||||
>
|
||||
← Back to Requests
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200 mb-6">
|
||||
<button
|
||||
@@ -1605,7 +1736,7 @@ export default function CarsAdminPage() {
|
||||
</span>
|
||||
<button
|
||||
onClick={handleImport}
|
||||
disabled={importing || registeringBanners || selectedCars.size === 0}
|
||||
disabled={importing || registeringBanners || addingToRequest || selectedCars.size === 0}
|
||||
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{importing ? (
|
||||
@@ -1624,7 +1755,7 @@ export default function CarsAdminPage() {
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRegisterAsBanner}
|
||||
disabled={importing || registeringBanners || selectedCars.size === 0}
|
||||
disabled={importing || registeringBanners || addingToRequest || selectedCars.size === 0}
|
||||
className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{registeringBanners ? (
|
||||
@@ -1641,6 +1772,27 @@ export default function CarsAdminPage() {
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{requestId && (
|
||||
<button
|
||||
onClick={handleAddToRequest}
|
||||
disabled={importing || registeringBanners || addingToRequest || selectedCars.size === 0}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{addingToRequest ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Adding...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
<span>Add to Request #{requestId}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { vehicleRequestsApi, carmodooApi, VehicleRequest, VehicleRequestWithVehicles, CarmodooSearchResult } from '@/lib/api';
|
||||
|
||||
const ITEMS_PER_PAGE = 12;
|
||||
import Link from 'next/link';
|
||||
import { vehicleRequestsApi, VehicleRequest, VehicleRequestWithVehicles } from '@/lib/api';
|
||||
|
||||
export default function AdminVehicleRequestsPage() {
|
||||
const [requests, setRequests] = useState<VehicleRequest[]>([]);
|
||||
const [selectedRequest, setSelectedRequest] = useState<VehicleRequestWithVehicles | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<CarmodooSearchResult[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [deletingVehicleId, setDeletingVehicleId] = useState<number | null>(null);
|
||||
|
||||
// Pagination state
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalResults, setTotalResults] = useState(0);
|
||||
|
||||
// Load requests
|
||||
useEffect(() => {
|
||||
loadRequests();
|
||||
@@ -46,65 +38,21 @@ export default function AdminVehicleRequestsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Search for vehicles based on request criteria
|
||||
const searchVehicles = async (page: number = 1) => {
|
||||
if (!selectedRequest) return;
|
||||
// Build Cars page URL with search criteria from request
|
||||
const buildCarsPageUrl = () => {
|
||||
if (!selectedRequest) return '/admin/cars';
|
||||
|
||||
try {
|
||||
setIsSearching(true);
|
||||
const params: any = {
|
||||
page: page,
|
||||
page_size: 50, // Fetch more results
|
||||
};
|
||||
const params = new URLSearchParams();
|
||||
params.set('requestId', selectedRequest.request.id.toString());
|
||||
if (selectedRequest.request.maker_code) params.set('maker_code', selectedRequest.request.maker_code);
|
||||
if (selectedRequest.request.model_code) params.set('model_code', selectedRequest.request.model_code);
|
||||
if (selectedRequest.request.grade_code) params.set('grade', selectedRequest.request.grade_code);
|
||||
if (selectedRequest.request.year_from) params.set('year_min', selectedRequest.request.year_from.toString());
|
||||
if (selectedRequest.request.year_to) params.set('year_max', selectedRequest.request.year_to.toString());
|
||||
if (selectedRequest.request.mileage_max) params.set('mileage_max', selectedRequest.request.mileage_max.toString());
|
||||
if (selectedRequest.request.fuel) params.set('fuel', selectedRequest.request.fuel);
|
||||
|
||||
if (selectedRequest.request.maker_code) params.maker_code = selectedRequest.request.maker_code;
|
||||
if (selectedRequest.request.model_code) params.model_code = selectedRequest.request.model_code;
|
||||
if (selectedRequest.request.grade_code) params.grade = selectedRequest.request.grade_code;
|
||||
if (selectedRequest.request.year_from) params.year_min = selectedRequest.request.year_from;
|
||||
if (selectedRequest.request.year_to) params.year_max = selectedRequest.request.year_to;
|
||||
if (selectedRequest.request.mileage_min) params.mileage_min = selectedRequest.request.mileage_min;
|
||||
if (selectedRequest.request.mileage_max) params.mileage_max = selectedRequest.request.mileage_max;
|
||||
if (selectedRequest.request.fuel) params.fuel = selectedRequest.request.fuel;
|
||||
|
||||
const result = await carmodooApi.requestSearch(params);
|
||||
setSearchResults(result.cars);
|
||||
setTotalResults(result.cars.length);
|
||||
setCurrentPage(page);
|
||||
} catch (error) {
|
||||
console.error('Failed to search vehicles:', error);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get paginated results
|
||||
const getPaginatedResults = () => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return searchResults.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(searchResults.length / ITEMS_PER_PAGE);
|
||||
|
||||
// Add vehicle to request
|
||||
const addVehicleToRequest = async (car: CarmodooSearchResult) => {
|
||||
if (!selectedRequest) return;
|
||||
|
||||
try {
|
||||
await vehicleRequestsApi.adminAddVehicle(selectedRequest.request.id, {
|
||||
request_id: selectedRequest.request.id,
|
||||
car_data: car,
|
||||
is_approved: true, // Auto-approve when adding
|
||||
});
|
||||
|
||||
// Reload request detail
|
||||
await loadRequestDetail(selectedRequest.request.id);
|
||||
|
||||
// Remove from search results
|
||||
setSearchResults(prev => prev.filter(c => c.id !== car.id));
|
||||
} catch (error) {
|
||||
console.error('Failed to add vehicle:', error);
|
||||
}
|
||||
return `/admin/cars?${params.toString()}`;
|
||||
};
|
||||
|
||||
// Delete vehicle from request
|
||||
@@ -212,26 +160,52 @@ export default function AdminVehicleRequestsPage() {
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded font-mono">
|
||||
#{request.id}
|
||||
</span>
|
||||
{getStatusBadge(request.status)}
|
||||
</div>
|
||||
<h3 className="font-medium text-gray-800">
|
||||
{request.maker_name} - {request.model_name}
|
||||
{request.maker_name || '-'} {request.model_name || ''}
|
||||
{request.grade_name && <span className="text-gray-500 font-normal"> / {request.grade_name}</span>}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
User ID: {request.user_id}
|
||||
</p>
|
||||
</div>
|
||||
{getStatusBadge(request.status)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{request.year_from && request.year_to && (
|
||||
<span className="mr-4">Year: {request.year_from}-{request.year_to}</span>
|
||||
)}
|
||||
{request.mileage_max && (
|
||||
<span>Max Mileage: {Math.round(request.mileage_max / 10000)}만km</span>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-600 mt-2">
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-400 w-14">Year:</span>
|
||||
<span className="font-medium">
|
||||
{request.year_from || '-'} ~ {request.year_to || '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-400 w-14">Fuel:</span>
|
||||
<span className="font-medium">{request.fuel || '-'}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-400 w-14">Mileage:</span>
|
||||
<span className="font-medium">
|
||||
{request.mileage_max ? `~${Math.round(request.mileage_max / 10000)}만km` : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-400 w-14">CC:</span>
|
||||
<span className="font-medium">
|
||||
{request.displacement_min || request.displacement_max
|
||||
? `${request.displacement_min || '-'} ~ ${request.displacement_max || '-'}`
|
||||
: '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-500" title={`ID: ${request.user_id}`}>
|
||||
{request.user_email || request.user_name || `User #${request.user_id}`}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{formatDate(request.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{formatDate(request.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -315,16 +289,13 @@ export default function AdminVehicleRequestsPage() {
|
||||
<h3 className="font-semibold text-gray-700">
|
||||
Recommended Vehicles ({selectedRequest.approved_vehicles.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddModal(true);
|
||||
setCurrentPage(1);
|
||||
searchVehicles(1);
|
||||
}}
|
||||
className="bg-primary-600 text-white px-3 py-1 rounded text-sm hover:bg-primary-700"
|
||||
<Link
|
||||
href={buildCarsPageUrl()}
|
||||
className="bg-primary-600 text-white px-3 py-1.5 rounded text-sm hover:bg-primary-700 flex items-center gap-1.5"
|
||||
>
|
||||
+ Add Vehicle
|
||||
</button>
|
||||
<span>🚗</span>
|
||||
<span>Search & Add from Carmodoo</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{selectedRequest.approved_vehicles.length === 0 ? (
|
||||
@@ -376,150 +347,6 @@ export default function AdminVehicleRequestsPage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Vehicle Modal */}
|
||||
{showAddModal && selectedRequest && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b flex items-center justify-between shrink-0">
|
||||
<h3 className="font-semibold text-gray-800">Search & Add Vehicles</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddModal(false);
|
||||
setSearchResults([]);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="text-gray-500 hover:text-gray-700 text-2xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-b shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Searching for: <span className="font-medium">{selectedRequest.request.maker_name} {selectedRequest.request.model_name}</span>
|
||||
</p>
|
||||
{searchResults.length > 0 && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Found {searchResults.length} vehicles (showing {Math.min((currentPage - 1) * ITEMS_PER_PAGE + 1, searchResults.length)}-{Math.min(currentPage * ITEMS_PER_PAGE, searchResults.length)})
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => searchVehicles(1)}
|
||||
disabled={isSearching}
|
||||
className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{isSearching ? 'Searching...' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{isSearching ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-500">Searching from Carmodoo...</p>
|
||||
</div>
|
||||
) : searchResults.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">No vehicles found</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{getPaginatedResults().map((car) => (
|
||||
<div key={car.id} className="border rounded-lg p-3 hover:shadow-md transition">
|
||||
{car.main_image && (
|
||||
<img
|
||||
src={car.main_image}
|
||||
alt=""
|
||||
className="w-full h-32 object-cover rounded mb-2"
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-sm truncate" title={car.car_name}>{car.car_name}</p>
|
||||
<div className="text-xs text-gray-500 space-y-0.5">
|
||||
<p>{car.year}년 | {car.mileage?.toLocaleString()}km</p>
|
||||
<p>{car.fuel} | {car.transmission}</p>
|
||||
{car.color && <p>Color: {car.color}</p>}
|
||||
</div>
|
||||
<p className="text-sm font-bold text-primary-600">
|
||||
{car.final_price?.toLocaleString()}만원
|
||||
</p>
|
||||
<button
|
||||
onClick={() => addVehicleToRequest(car)}
|
||||
className="w-full bg-green-600 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700 mt-2"
|
||||
>
|
||||
+ Add to List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{searchResults.length > ITEMS_PER_PAGE && (
|
||||
<div className="p-4 border-t shrink-0 flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||
.filter(page => {
|
||||
// Show first, last, current, and pages near current
|
||||
return page === 1 || page === totalPages || Math.abs(page - currentPage) <= 2;
|
||||
})
|
||||
.map((page, index, array) => (
|
||||
<span key={page}>
|
||||
{index > 0 && array[index - 1] !== page - 1 && (
|
||||
<span className="px-2 text-gray-400">...</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={`px-3 py-1 border rounded ${
|
||||
currentPage === page
|
||||
? 'bg-primary-600 text-white border-primary-600'
|
||||
: 'hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,14 +9,15 @@ import { useTranslation } from '@/lib/i18n';
|
||||
import { useTranslate } from '@/lib/useTranslate';
|
||||
|
||||
// 이미지 URL 변환 (로컬 경로는 백엔드 URL 추가)
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
const getImageUrl = (url: string | undefined): string => {
|
||||
if (!url) return '';
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
return url;
|
||||
}
|
||||
// 로컬 경로인 경우 백엔드 URL 추가
|
||||
const backendPort = process.env.NEXT_PUBLIC_API_URL?.includes('8001') ? 8001 : 8000;
|
||||
return `http://localhost:${backendPort}${url}`;
|
||||
return `${API_BASE_URL}${url}`;
|
||||
};
|
||||
|
||||
export default function CarDetailPage() {
|
||||
|
||||
@@ -13,22 +13,21 @@ export default function Home() {
|
||||
const [bannerSettings, setBannerSettings] = useState<HeroBannerSettings | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
const loadBanners = async () => {
|
||||
try {
|
||||
const [bannersData, settingsData] = await Promise.all([
|
||||
heroBannersApi.getList(language),
|
||||
heroBannersApi.getSettings(),
|
||||
]);
|
||||
setBanners(bannersData);
|
||||
setBannerSettings(settingsData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load banners:', error);
|
||||
// 에러 시 샘플 배너 사용 (FilmStripSlider 내부에서 처리)
|
||||
}
|
||||
};
|
||||
loadBanners();
|
||||
}, []);
|
||||
|
||||
const loadBanners = async () => {
|
||||
try {
|
||||
const [bannersData, settingsData] = await Promise.all([
|
||||
heroBannersApi.getList(language),
|
||||
heroBannersApi.getSettings(),
|
||||
]);
|
||||
setBanners(bannersData);
|
||||
setBannerSettings(settingsData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load banners:', error);
|
||||
// 에러 시 샘플 배너 사용 (FilmStripSlider 내부에서 처리)
|
||||
}
|
||||
};
|
||||
}, [language]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -338,15 +338,23 @@ const getImageUrl = (url: string): string => {
|
||||
|
||||
// Helper to get localized title/subtitle based on language
|
||||
function getLocalizedText(banner: HeroBanner, field: 'title' | 'subtitle', language: Language): string {
|
||||
// Public API returns localized single field (title, subtitle)
|
||||
const directField = banner[field as keyof HeroBanner] as string | undefined;
|
||||
if (directField) {
|
||||
return directField;
|
||||
}
|
||||
// Admin API returns multi-language fields (title_ko, title_en, etc.)
|
||||
// 1. 먼저 선택된 언어의 필드 확인 (title_mn, title_en, etc.)
|
||||
const langKey = `${field}_${language}` as keyof HeroBanner;
|
||||
const langValue = banner[langKey] as string | undefined;
|
||||
if (langValue) {
|
||||
return langValue;
|
||||
}
|
||||
|
||||
// 2. 영어 폴백
|
||||
const enKey = `${field}_en` as keyof HeroBanner;
|
||||
return (banner[langKey] as string) || (banner[enKey] as string) || '';
|
||||
const enValue = banner[enKey] as string | undefined;
|
||||
if (enValue) {
|
||||
return enValue;
|
||||
}
|
||||
|
||||
// 3. 마지막으로 직접 필드 (API가 단일 필드로 반환하는 경우)
|
||||
const directField = banner[field as keyof HeroBanner] as string | undefined;
|
||||
return directField || '';
|
||||
}
|
||||
|
||||
function BannerCard({ banner, width, height }: BannerCardProps) {
|
||||
|
||||
@@ -544,6 +544,8 @@ export const settingsApi = {
|
||||
export interface VehicleRequest {
|
||||
id: number;
|
||||
user_id: number;
|
||||
user_email?: string; // 관리자용
|
||||
user_name?: string; // 관리자용
|
||||
maker_code?: string;
|
||||
maker_name?: string;
|
||||
model_code?: string;
|
||||
|
||||
@@ -2994,6 +2994,12 @@ const CAR_TRANSLATIONS: Record<string, Record<string, string>> = {
|
||||
'듀얼': { ko: '듀얼', en: 'Dual', mn: 'Dual', ru: 'Дуал' },
|
||||
'싱글': { ko: '싱글', en: 'Single', mn: 'Single', ru: 'Сингл' },
|
||||
'트윈': { ko: '트윈', en: 'Twin', mn: 'Twin', ru: 'Твин' },
|
||||
// Fuel Types (추가분)
|
||||
'경유': { ko: '경유', en: 'Diesel', mn: 'Дизель', ru: 'Дизель' },
|
||||
'휘발유': { ko: '휘발유', en: 'Gasoline', mn: 'Бензин', ru: 'Бензин' },
|
||||
// Transmission Types (추가분)
|
||||
'오토': { ko: '오토', en: 'Automatic', mn: 'Автомат', ru: 'Автомат' },
|
||||
'수동': { ko: '수동', en: 'Manual', mn: 'Механик', ru: 'Механика' },
|
||||
};
|
||||
|
||||
// Sorted keys for translation (longest first to avoid partial matches)
|
||||
|
||||
@@ -134,10 +134,12 @@ export interface HeroBanner {
|
||||
title_ko?: string;
|
||||
title_en?: string;
|
||||
title_mn?: string;
|
||||
title_ru?: string; // 러시아어
|
||||
// 다국어 서브타이틀 (Admin API 응답)
|
||||
subtitle_ko?: string;
|
||||
subtitle_en?: string;
|
||||
subtitle_mn?: string;
|
||||
subtitle_ru?: string; // 러시아어
|
||||
// 로컬라이즈된 필드 (Public API 응답)
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
|
||||
Reference in New Issue
Block a user