69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { useRouter } from "next/navigation";
|
|
import { useConfirm } from "@frontend-opensource/use-react-hooks";
|
|
import { type FieldValues, type UseFormReturn } from "react-hook-form";
|
|
import { Button } from "@common/components";
|
|
import { Form } from "./form";
|
|
|
|
type FormWrapperProps<T extends FieldValues> = {
|
|
form: UseFormReturn<T>;
|
|
children: React.ReactNode;
|
|
isModifyMode?: boolean;
|
|
handleSave: (data: T) => Promise<unknown>;
|
|
handleDelete?: () => Promise<unknown>;
|
|
};
|
|
|
|
function FormWrapper<T extends FieldValues>({
|
|
form,
|
|
children,
|
|
isModifyMode,
|
|
handleSave,
|
|
handleDelete,
|
|
}: FormWrapperProps<T>) {
|
|
const router = useRouter();
|
|
const { confirm } = useConfirm();
|
|
|
|
const onSubmit = async (data: T) => {
|
|
const confirmMessage = isModifyMode
|
|
? "수정하시겠습니까?"
|
|
: "저장하시겠습니까?";
|
|
|
|
if (await confirm(confirmMessage)) {
|
|
await handleSave(data);
|
|
}
|
|
};
|
|
|
|
const onDelete = async () => {
|
|
if (await confirm("삭제하시겠습니까?")) {
|
|
await handleDelete?.();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
|
{children}
|
|
<div className="flex justify-center gap-4 pb-12 pt-10">
|
|
<Button
|
|
size="lg"
|
|
color="white"
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
>
|
|
목록
|
|
</Button>
|
|
<Button size="lg" type="submit">
|
|
저장
|
|
</Button>
|
|
{isModifyMode && handleDelete && (
|
|
<Button size="lg" color="red" type="button" onClick={onDelete}>
|
|
삭제
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
export { FormWrapper };
|