refactor: form wrapper 선언 및 적용

apps/cs/src/widgets/form-wrapper/index.ts

@@ -0,0 +1 @@
+export { FormWrapper } from "./ui/form-wrapper";

apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx

@@ -0,0 +1,68 @@
+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/ui";
+import { Form } from "@/shared/ui/form";
+
+type FormWrapperProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+  children: React.ReactNode;
+  isModifyMode?: boolean;
+  handleSave: (data: T) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+};
+
+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 && (
+            <Button size="lg" color="red" type="button" onClick={onDelete}>
+              삭제
+            </Button>
+          )}
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export { FormWrapper };