377 lines
15 KiB
TypeScript
377 lines
15 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||
|
|
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 {
|
||
|
|
Plus,
|
||
|
|
Search,
|
||
|
|
Edit,
|
||
|
|
Trash2,
|
||
|
|
Eye,
|
||
|
|
Filter,
|
||
|
|
RotateCcw,
|
||
|
|
Settings,
|
||
|
|
SortAsc,
|
||
|
|
SortDesc,
|
||
|
|
CheckCircle,
|
||
|
|
AlertCircle,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { useButtonActions } from "@/hooks/admin/useButtonActions";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
export default function ButtonActionsManagePage() {
|
||
|
|
const [searchTerm, setSearchTerm] = useState("");
|
||
|
|
const [categoryFilter, setCategoryFilter] = useState<string>("");
|
||
|
|
const [activeFilter, setActiveFilter] = useState<string>("Y");
|
||
|
|
const [sortField, setSortField] = useState<string>("sort_order");
|
||
|
|
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||
|
|
|
||
|
|
// 버튼 액션 데이터 조회
|
||
|
|
const { buttonActions, isLoading, error, deleteButtonAction, isDeleting, deleteError, refetch } = useButtonActions({
|
||
|
|
active: activeFilter || undefined,
|
||
|
|
search: searchTerm || undefined,
|
||
|
|
category: categoryFilter || undefined,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 카테고리 목록 생성
|
||
|
|
const categories = useMemo(() => {
|
||
|
|
const uniqueCategories = Array.from(new Set(buttonActions.map((ba) => ba.category).filter(Boolean)));
|
||
|
|
return uniqueCategories.sort();
|
||
|
|
}, [buttonActions]);
|
||
|
|
|
||
|
|
// 필터링 및 정렬된 데이터
|
||
|
|
const filteredAndSortedButtonActions = useMemo(() => {
|
||
|
|
let filtered = [...buttonActions];
|
||
|
|
|
||
|
|
// 정렬
|
||
|
|
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;
|
||
|
|
}, [buttonActions, sortField, sortDirection]);
|
||
|
|
|
||
|
|
// 정렬 변경 핸들러
|
||
|
|
const handleSort = (field: string) => {
|
||
|
|
if (sortField === field) {
|
||
|
|
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
||
|
|
} else {
|
||
|
|
setSortField(field);
|
||
|
|
setSortDirection("asc");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 삭제 핸들러
|
||
|
|
const handleDelete = async (actionType: string, actionName: string) => {
|
||
|
|
try {
|
||
|
|
await deleteButtonAction(actionType);
|
||
|
|
toast.success(`버튼 액션 '${actionName}'이 삭제되었습니다.`);
|
||
|
|
} catch (error) {
|
||
|
|
toast.error(error instanceof Error ? error.message : "삭제 중 오류가 발생했습니다.");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필터 초기화
|
||
|
|
const resetFilters = () => {
|
||
|
|
setSearchTerm("");
|
||
|
|
setCategoryFilter("");
|
||
|
|
setActiveFilter("Y");
|
||
|
|
setSortField("sort_order");
|
||
|
|
setSortDirection("asc");
|
||
|
|
};
|
||
|
|
|
||
|
|
// 로딩 상태
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="flex h-96 items-center justify-center">
|
||
|
|
<div className="text-lg">버튼 액션 목록을 불러오는 중...</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 에러 상태
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="flex h-96 items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="mb-2 text-lg text-red-600">버튼 액션 목록을 불러오는데 실패했습니다.</div>
|
||
|
|
<Button onClick={() => refetch()} variant="outline">
|
||
|
|
다시 시도
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container mx-auto px-4 py-6">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="mb-6 flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold tracking-tight">버튼 액션 관리</h1>
|
||
|
|
<p className="text-muted-foreground">화면관리에서 사용할 버튼 액션들을 관리합니다.</p>
|
||
|
|
</div>
|
||
|
|
<Link href="/admin/system-settings/button-actions/new">
|
||
|
|
<Button>
|
||
|
|
<Plus className="mr-2 h-4 w-4" />새 버튼 액션 추가
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 필터 및 검색 */}
|
||
|
|
<Card className="mb-6">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2 text-lg">
|
||
|
|
<Filter className="h-5 w-5" />
|
||
|
|
필터 및 검색
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||
|
|
{/* 검색 */}
|
||
|
|
<div className="relative">
|
||
|
|
<Search className="text-muted-foreground absolute top-3 left-3 h-4 w-4" />
|
||
|
|
<Input
|
||
|
|
placeholder="액션명, 설명 검색..."
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
className="pl-10"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 카테고리 필터 */}
|
||
|
|
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="카테고리 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="">전체 카테고리</SelectItem>
|
||
|
|
{categories.map((category) => (
|
||
|
|
<SelectItem key={category} value={category}>
|
||
|
|
{category}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* 활성화 상태 필터 */}
|
||
|
|
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="상태 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="">전체</SelectItem>
|
||
|
|
<SelectItem value="Y">활성화</SelectItem>
|
||
|
|
<SelectItem value="N">비활성화</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* 초기화 버튼 */}
|
||
|
|
<Button variant="outline" onClick={resetFilters}>
|
||
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
||
|
|
초기화
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 결과 통계 */}
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-muted-foreground text-sm">
|
||
|
|
총 {filteredAndSortedButtonActions.length}개의 버튼 액션이 있습니다.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 버튼 액션 목록 테이블 */}
|
||
|
|
<Card>
|
||
|
|
<CardContent className="p-0">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("sort_order")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
순서
|
||
|
|
{sortField === "sort_order" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("action_type")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
액션 타입
|
||
|
|
{sortField === "action_type" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("action_name")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
액션명
|
||
|
|
{sortField === "action_name" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("category")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
카테고리
|
||
|
|
{sortField === "category" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead>기본 텍스트</TableHead>
|
||
|
|
<TableHead>확인 필요</TableHead>
|
||
|
|
<TableHead>설명</TableHead>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("is_active")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
상태
|
||
|
|
{sortField === "is_active" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="hover:bg-muted/50 cursor-pointer" onClick={() => handleSort("updated_date")}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
최종 수정일
|
||
|
|
{sortField === "updated_date" &&
|
||
|
|
(sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
|
||
|
|
</div>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead className="text-center">작업</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{filteredAndSortedButtonActions.length === 0 ? (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={10} className="py-8 text-center">
|
||
|
|
조건에 맞는 버튼 액션이 없습니다.
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
) : (
|
||
|
|
filteredAndSortedButtonActions.map((action) => (
|
||
|
|
<TableRow key={action.action_type}>
|
||
|
|
<TableCell className="font-mono">{action.sort_order || 0}</TableCell>
|
||
|
|
<TableCell className="font-mono">{action.action_type}</TableCell>
|
||
|
|
<TableCell className="font-medium">
|
||
|
|
{action.action_name}
|
||
|
|
{action.action_name_eng && (
|
||
|
|
<div className="text-muted-foreground text-xs">{action.action_name_eng}</div>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<Badge variant="secondary">{action.category}</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="max-w-xs truncate">{action.default_text || "-"}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{action.confirmation_required ? (
|
||
|
|
<div className="flex items-center gap-1 text-orange-600">
|
||
|
|
<AlertCircle className="h-4 w-4" />
|
||
|
|
<span className="text-xs">필요</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex items-center gap-1 text-gray-500">
|
||
|
|
<CheckCircle className="h-4 w-4" />
|
||
|
|
<span className="text-xs">불필요</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="max-w-xs truncate">{action.description || "-"}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<Badge variant={action.is_active === "Y" ? "default" : "secondary"}>
|
||
|
|
{action.is_active === "Y" ? "활성화" : "비활성화"}
|
||
|
|
</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-muted-foreground text-sm">
|
||
|
|
{action.updated_date ? new Date(action.updated_date).toLocaleDateString("ko-KR") : "-"}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Link href={`/admin/system-settings/button-actions/${action.action_type}`}>
|
||
|
|
<Button variant="ghost" size="sm">
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href={`/admin/system-settings/button-actions/${action.action_type}/edit`}>
|
||
|
|
<Button variant="ghost" size="sm">
|
||
|
|
<Edit className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<AlertDialog>
|
||
|
|
<AlertDialogTrigger asChild>
|
||
|
|
<Button variant="ghost" size="sm">
|
||
|
|
<Trash2 className="h-4 w-4 text-red-500" />
|
||
|
|
</Button>
|
||
|
|
</AlertDialogTrigger>
|
||
|
|
<AlertDialogContent>
|
||
|
|
<AlertDialogHeader>
|
||
|
|
<AlertDialogTitle>버튼 액션 삭제</AlertDialogTitle>
|
||
|
|
<AlertDialogDescription>
|
||
|
|
'{action.action_name}' 버튼 액션을 삭제하시겠습니까?
|
||
|
|
<br />이 작업은 되돌릴 수 없습니다.
|
||
|
|
</AlertDialogDescription>
|
||
|
|
</AlertDialogHeader>
|
||
|
|
<AlertDialogFooter>
|
||
|
|
<AlertDialogCancel>취소</AlertDialogCancel>
|
||
|
|
<AlertDialogAction
|
||
|
|
onClick={() => handleDelete(action.action_type, action.action_name)}
|
||
|
|
disabled={isDeleting}
|
||
|
|
className="bg-red-600 hover:bg-red-700"
|
||
|
|
>
|
||
|
|
{isDeleting ? "삭제 중..." : "삭제"}
|
||
|
|
</AlertDialogAction>
|
||
|
|
</AlertDialogFooter>
|
||
|
|
</AlertDialogContent>
|
||
|
|
</AlertDialog>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{deleteError && (
|
||
|
|
<div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
|
||
|
|
<p className="text-red-600">
|
||
|
|
삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|