fix: Remove car_id property from adminAddVehicle call to fix TypeScript error
This commit is contained in:
AutonetSellCar Deploy
204
temp_solutions_list_page.tsx
Normal file
204
temp_solutions_list_page.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { solutionsApi, SolutionAdmin, getUploadUrl } from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Loader2,
|
||||
Image as ImageIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function SolutionsListPage() {
|
||||
const { token } = useAuth();
|
||||
const [solutions, setSolutions] = useState<SolutionAdmin[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const fetchSolutions = async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const data = await solutionsApi.adminGetAll(token);
|
||||
setSolutions(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch solutions:", err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSolutions();
|
||||
}, [token]);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!token || !confirm("정말 삭제하시겠습니까?")) return;
|
||||
|
||||
try {
|
||||
await solutionsApi.adminDelete(id, token);
|
||||
setSolutions(solutions.filter((s) => s.id !== id));
|
||||
} catch (err) {
|
||||
alert("삭제에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleActive = async (solution: SolutionAdmin) => {
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
await solutionsApi.adminUpdate(
|
||||
solution.id,
|
||||
{ is_active: !solution.is_active },
|
||||
token
|
||||
);
|
||||
setSolutions(
|
||||
solutions.map((s) =>
|
||||
s.id === solution.id ? { ...s, is_active: !s.is_active } : s
|
||||
)
|
||||
);
|
||||
} catch (err) {
|
||||
alert("상태 변경에 실패했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-[#3B82F6]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">솔루션 관리</h1>
|
||||
<Link
|
||||
href="/admin/solutions/new"
|
||||
className="flex items-center px-4 py-2 bg-[#3B82F6] text-white font-medium rounded-lg hover:bg-[#2563EB] transition-colors"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-2" />
|
||||
새 솔루션
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
이미지
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
솔루션명
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
아이콘
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
색상
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
순서
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-medium text-gray-500">
|
||||
상태
|
||||
</th>
|
||||
<th className="px-6 py-4 text-right text-sm font-medium text-gray-500">
|
||||
관리
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{solutions.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-6 py-12 text-center text-gray-500">
|
||||
등록된 솔루션이 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
solutions.map((solution) => (
|
||||
<tr key={solution.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4">
|
||||
{solution.main_image ? (
|
||||
<img
|
||||
src={getUploadUrl(solution.main_image)}
|
||||
alt={solution.title_ko}
|
||||
className="w-16 h-12 object-cover rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-16 h-12 bg-gray-100 rounded flex items-center justify-center">
|
||||
<ImageIcon className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="font-medium text-gray-900">
|
||||
{solution.title_ko}
|
||||
</div>
|
||||
{solution.title_en && (
|
||||
<div className="text-sm text-gray-500">
|
||||
{solution.title_en}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{solution.icon || "-"}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{solution.color || "-"}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{solution.display_order}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={() => toggleActive(solution)}
|
||||
className={`flex items-center px-3 py-1 rounded-full text-xs font-medium ${
|
||||
solution.is_active
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{solution.is_active ? (
|
||||
<>
|
||||
<Eye className="w-3 h-3 mr-1" />
|
||||
표시
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeOff className="w-3 h-3 mr-1" />
|
||||
숨김
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Link
|
||||
href={`/admin/solutions/${solution.id}`}
|
||||
className="p-2 text-gray-400 hover:text-[#3B82F6] transition-colors"
|
||||
>
|
||||
<Pencil className="w-5 h-5" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(solution.id)}
|
||||
className="p-2 text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user