74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
|
/**
|
||
|
|
* FormActions - 폼 하단 액션 버튼 그룹
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
import { Button } from "../ui/button";
|
||
|
|
import { Save, X } from "lucide-react";
|
||
|
|
|
||
|
|
export interface FormActionsProps {
|
||
|
|
onSave?: () => void;
|
||
|
|
onCancel?: () => void;
|
||
|
|
saveLabel?: string;
|
||
|
|
cancelLabel?: string;
|
||
|
|
saveDisabled?: boolean;
|
||
|
|
cancelDisabled?: boolean;
|
||
|
|
saveLoading?: boolean;
|
||
|
|
children?: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
align?: 'left' | 'center' | 'right';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FormActions({
|
||
|
|
onSave,
|
||
|
|
onCancel,
|
||
|
|
saveLabel = "저장",
|
||
|
|
cancelLabel = "취소",
|
||
|
|
saveDisabled = false,
|
||
|
|
cancelDisabled = false,
|
||
|
|
saveLoading = false,
|
||
|
|
children,
|
||
|
|
className = "",
|
||
|
|
align = 'right',
|
||
|
|
}: FormActionsProps) {
|
||
|
|
|
||
|
|
const alignClasses = {
|
||
|
|
left: "justify-start",
|
||
|
|
center: "justify-center",
|
||
|
|
right: "justify-end",
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`flex flex-col md:flex-row gap-3 ${alignClasses[align]} ${className}`}>
|
||
|
|
{children ? (
|
||
|
|
children
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{onCancel && (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="outline"
|
||
|
|
onClick={onCancel}
|
||
|
|
disabled={cancelDisabled}
|
||
|
|
className="w-full md:w-auto"
|
||
|
|
>
|
||
|
|
<X className="h-4 w-4 mr-2" />
|
||
|
|
{cancelLabel}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
{onSave && (
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
onClick={onSave}
|
||
|
|
disabled={saveDisabled || saveLoading}
|
||
|
|
className="w-full md:w-auto"
|
||
|
|
>
|
||
|
|
<Save className="h-4 w-4 mr-2" />
|
||
|
|
{saveLoading ? "저장 중..." : saveLabel}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|