352 lines
12 KiB
TypeScript
352 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { toast } from "sonner";
|
|
import { showErrorToast } from "@/lib/utils/toastUtils";
|
|
import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
|
|
import { useWebTypes } from "@/hooks/admin/useWebTypes";
|
|
import Link from "next/link";
|
|
import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
|
|
import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";
|
|
|
|
export default function WebTypesManagePage() {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [categoryFilter, setCategoryFilter] = useState<string>("all");
|
|
const [activeFilter, setActiveFilter] = useState<string>("Y");
|
|
const [sortField, setSortField] = useState<string>("sort_order");
|
|
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
|
|
|
const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
|
|
active: activeFilter === "all" ? undefined : activeFilter,
|
|
search: searchTerm || undefined,
|
|
category: categoryFilter === "all" ? undefined : categoryFilter,
|
|
});
|
|
|
|
const categories = useMemo(() => {
|
|
const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
|
|
return uniqueCategories.sort();
|
|
}, [webTypes]);
|
|
|
|
const filteredAndSortedWebTypes = useMemo(() => {
|
|
let filtered = [...webTypes];
|
|
|
|
filtered.sort((a, b) => {
|
|
let aValue: any = a[sortField as keyof typeof a];
|
|
let bValue: any = b[sortField as keyof typeof b];
|
|
|
|
if (sortField === "sort_order") {
|
|
aValue = aValue || 0;
|
|
bValue = bValue || 0;
|
|
}
|
|
|
|
if (typeof aValue === "string") {
|
|
aValue = aValue.toLowerCase();
|
|
}
|
|
if (typeof bValue === "string") {
|
|
bValue = bValue.toLowerCase();
|
|
}
|
|
|
|
if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
|
|
if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
return filtered;
|
|
}, [webTypes, sortField, sortDirection]);
|
|
|
|
const handleDelete = async (webType: string, typeName: string) => {
|
|
try {
|
|
await deleteWebType(webType);
|
|
toast.success(`웹타입 '${typeName}'이 삭제되었습니다.`);
|
|
} catch (error) {
|
|
showErrorToast("웹타입 삭제에 실패했습니다", error, { guidance: "잠시 후 다시 시도해 주세요." });
|
|
}
|
|
};
|
|
|
|
const resetFilters = () => {
|
|
setSearchTerm("");
|
|
setCategoryFilter("all");
|
|
setActiveFilter("Y");
|
|
setSortField("sort_order");
|
|
setSortDirection("asc");
|
|
};
|
|
|
|
// 삭제 AlertDialog 렌더 헬퍼
|
|
const renderDeleteDialog = (wt: WebTypeStandard) => (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="ghost" size="sm">
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
'{wt.type_name}' 웹타입을 삭제하시겠습니까?
|
|
<br />이 작업은 되돌릴 수 없습니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => handleDelete(wt.web_type, wt.type_name)}
|
|
disabled={isDeleting}
|
|
className="bg-destructive hover:bg-destructive/90"
|
|
>
|
|
{isDeleting ? "삭제 중..." : "삭제"}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
|
|
const columns: RDVColumn<WebTypeStandard>[] = [
|
|
{
|
|
key: "sort_order",
|
|
label: "순서",
|
|
width: "80px",
|
|
render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
|
|
},
|
|
{
|
|
key: "web_type",
|
|
label: "웹타입 코드",
|
|
hideOnMobile: true,
|
|
render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
|
|
},
|
|
{
|
|
key: "type_name",
|
|
label: "웹타입명",
|
|
render: (_val, wt) => (
|
|
<div>
|
|
<div className="font-medium">{wt.type_name}</div>
|
|
{wt.type_name_eng && (
|
|
<div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "category",
|
|
label: "카테고리",
|
|
render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
|
},
|
|
{
|
|
key: "description",
|
|
label: "설명",
|
|
hideOnMobile: true,
|
|
render: (_val, wt) => (
|
|
<span className="max-w-xs truncate">{wt.description || "-"}</span>
|
|
),
|
|
},
|
|
{
|
|
key: "is_active",
|
|
label: "상태",
|
|
render: (_val, wt) => (
|
|
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
|
|
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: "updated_date",
|
|
label: "최종 수정일",
|
|
hideOnMobile: true,
|
|
render: (_val, wt) => (
|
|
<span className="text-muted-foreground">
|
|
{wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
const cardFields: RDVCardField<WebTypeStandard>[] = [
|
|
{
|
|
label: "카테고리",
|
|
render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
|
|
},
|
|
{
|
|
label: "순서",
|
|
render: (wt) => String(wt.sort_order || 0),
|
|
},
|
|
{
|
|
label: "설명",
|
|
render: (wt) => wt.description || "-",
|
|
hideEmpty: true,
|
|
},
|
|
{
|
|
label: "수정일",
|
|
render: (wt) =>
|
|
wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">웹타입 관리</h1>
|
|
<p className="text-sm text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
|
|
</div>
|
|
<Link href="/admin/standards/new">
|
|
<Button className="w-full sm:w-auto">
|
|
<Plus className="mr-2 h-4 w-4" />새 웹타입 추가
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 에러 상태 */}
|
|
{error && (
|
|
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
|
<p className="text-sm font-semibold text-destructive">웹타입 목록을 불러오는데 실패했습니다.</p>
|
|
<Button onClick={() => refetch()} variant="outline" size="sm" className="mt-2">
|
|
다시 시도
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 검색 툴바 */}
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<div className="relative w-full sm:w-[300px]">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
placeholder="웹타입명, 설명 검색..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="h-10 pl-10 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
|
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
|
<SelectValue placeholder="카테고리 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체 카테고리</SelectItem>
|
|
{categories.map((category) => (
|
|
<SelectItem key={category} value={category}>
|
|
{category}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
|
<SelectTrigger className="h-10 w-full sm:w-[160px]">
|
|
<SelectValue placeholder="상태 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">전체</SelectItem>
|
|
<SelectItem value="Y">활성화</SelectItem>
|
|
<SelectItem value="N">비활성화</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* 정렬 선택 */}
|
|
<div className="flex items-center gap-2">
|
|
<Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
|
|
<SelectTrigger className="h-10 w-full sm:w-[140px]">
|
|
<SelectValue placeholder="정렬 기준" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="sort_order">순서</SelectItem>
|
|
<SelectItem value="web_type">웹타입 코드</SelectItem>
|
|
<SelectItem value="type_name">웹타입명</SelectItem>
|
|
<SelectItem value="category">카테고리</SelectItem>
|
|
<SelectItem value="is_active">상태</SelectItem>
|
|
<SelectItem value="updated_date">수정일</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
|
|
className="h-10 w-10 shrink-0"
|
|
title={sortDirection === "asc" ? "오름차순" : "내림차순"}
|
|
>
|
|
{sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 결과 수 */}
|
|
<div className="text-sm text-muted-foreground">
|
|
총 <span className="font-semibold text-foreground">{filteredAndSortedWebTypes.length}</span>개의 웹타입
|
|
</div>
|
|
|
|
{/* 삭제 에러 */}
|
|
{deleteError && (
|
|
<div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
|
<p className="text-sm text-destructive">
|
|
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<ResponsiveDataView<WebTypeStandard>
|
|
data={filteredAndSortedWebTypes}
|
|
columns={columns}
|
|
keyExtractor={(wt) => wt.web_type}
|
|
isLoading={isLoading}
|
|
emptyMessage="조건에 맞는 웹타입이 없습니다."
|
|
skeletonCount={6}
|
|
cardTitle={(wt) => wt.type_name}
|
|
cardSubtitle={(wt) => (
|
|
<>
|
|
{wt.type_name_eng && (
|
|
<span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
|
|
)}
|
|
<span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
|
|
</>
|
|
)}
|
|
cardHeaderRight={(wt) => (
|
|
<Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
|
|
{wt.is_active === "Y" ? "활성화" : "비활성화"}
|
|
</Badge>
|
|
)}
|
|
cardFields={cardFields}
|
|
actionsLabel="작업"
|
|
actionsWidth="140px"
|
|
renderActions={(wt) => (
|
|
<>
|
|
<Link href={`/admin/standards/${wt.web_type}`}>
|
|
<Button variant="ghost" size="sm">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/admin/standards/${wt.web_type}/edit`}>
|
|
<Button variant="ghost" size="sm">
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
{renderDeleteDialog(wt)}
|
|
</>
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|