File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useTransition } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import {
FoxPencilSimpleIcon,
FoxPlusIcon,
FoxTrashIcon,
} from '@fox/core/icons';
import { useFeedback } from '@/app/_hooks/use-feedback';
import type { SystemMenuNode } from '@/lib/domain/system-menu';
import { deleteSystemMenuAction } from '../_actions';
import styles from './menu-tree.module.scss';
interface MenuRowActionsProps {
node: SystemMenuNode;
onEdit: (node: SystemMenuNode) => void;
onAddChild: (node: SystemMenuNode) => void;
}
export function MenuRowActions({ node, onEdit, onAddChild }: MenuRowActionsProps) {
const { showAlert, hideAlert, showToast } = useFeedback();
const [isDeleting, startDeleting] = useTransition();
function runDelete() {
hideAlert();
startDeleting(async () => {
const result = await deleteSystemMenuAction(node.id);
if (result.status === 'error') {
showToast({ variant: 'danger', message: result.message });
return;
}
showToast({ variant: 'success', message: '메뉴를 삭제했습니다.' });
});
}
function confirmDelete() {
showAlert({
variant: 'danger',
title: '메뉴를 삭제하시겠습니까?',
message:
node.children.length > 0
? `"${node.name}" 아래에 하위 메뉴 ${node.children.length}개가 있습니다. 삭제 후에는 되돌릴 수 없습니다.`
: `"${node.name}" 메뉴를 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
actions: (
<FoxButtonGroup size="md">
<FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
<FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
</FoxButtonGroup>
),
});
}
return (
<div className={styles.actions}>
<FoxIconButton
type="default"
size="sm"
icon={<FoxPencilSimpleIcon />}
label="수정"
onAction={() => onEdit(node)}
/>
<FoxIconButton
type="default"
size="sm"
icon={<FoxPlusIcon />}
label="하위 메뉴 추가"
onAction={() => onAddChild(node)}
/>
<FoxIconButton
type="default"
size="sm"
icon={<FoxTrashIcon />}
label={isDeleting ? '삭제 중' : '삭제'}
disabled={isDeleting}
onAction={confirmDelete}
/>
</div>
);
}