수요신청 폼 ui 완료

apps/wr/app/matMng/matDmd/coReg/page.tsx

@@ -11,9 +11,8 @@ import {
 } from "@common/business_components/ui";
 import { Button } from "@common/components/ui";
 import {  CoRegForm } from "@/components/ui/matDmd/coRegForm/component";
-import toast from "react-hot-toast";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import toast, { Toaster } from "react-hot-toast";
+import { ToastFormUi } from "@/components/toastFromUi";
 
 const formSchema = z.object({
   ctpv: z.string(),
@@ -28,7 +27,6 @@ const formSchema = z.object({
 export default function MyForm() {
 
 
-  const router = useRouter();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -42,17 +40,12 @@ export default function MyForm() {
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     try {
-      console.log(values);
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      );
-     router.push('./dmdReg')
-  //  <Link href='matMng/matDmd/dmdReg'></Link>
+      toast.dismiss();
+      ToastFormUi("수요신청 화면으로 이동하시겠습니까?", "수요처 등록 완료", "./dmdReg", "이동")
+    
     } catch (error) {
       console.error("Form submission error", error);
-       toast.error("Failed to submit the form. Please try again.");
+       toast.error("수요처 등록이 실패하였습니다.");
     }
   }
 
@@ -75,14 +68,15 @@ export default function MyForm() {
             >
                <CoRegForm>{form}</CoRegForm> 
 
-                {/* <WqForm> {form}</WqForm> */}
 
                 <Button  type="submit">수요처등록</Button>
             </form>
           </Form>
           </div>
         </div>
-        <div className="col-span-1 " />
+        <div className="col-span-1 " >
+        <Toaster position="top-center" />
+          </div>
       </div>
     </>
   );

apps/wr/app/matMng/matDmd/dmdReg/page.tsx

@@ -2,15 +2,14 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
-import {
-  Form,
-} from "@common/business_components/ui";
+import { Form } from "@common/business_components/ui";
 import { Button } from "@common/components/ui";
 import { DmdRegForm } from "@/components/ui/matDmd/dmdRegform/component";
-import toast from "react-hot-toast";
+import toast, { Toaster } from "react-hot-toast";
+import { useRouter } from "next/navigation";
 
 const formSchema = z.object({
-  dmdSel: z.string().min(1).min(0),
+  dmdSel: z.string().min(1),
   dmdTmng: z.coerce.date(),
   dmdWq: z.string().min(1).optional(),
   useUsgCd: z.string(),
@@ -27,72 +26,80 @@ const formSchema = z.object({
   cdtnv: z.string().min(1).optional(),
   crmty: z.string().min(1).optional(),
   rmrk: z.string().min(1).optional(),
+  sply1: z.string().min(1).optional(),
+  sply2: z.string().min(1).optional(),
+  sply3: z.string().min(1).optional(),
+  password: z.string().min(1),
 });
 
 export default function MyForm() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
+      dmdSel:'',
       dmdTmng: new Date(),
-      dmdWq: '',
-      useUsgCd: '',
-      wntUntprc: '',
-      grssClfg: '',
-      tn: '',
-      combResdch: '',
-      tp: '',
-      trbt:'',
-      ph: '',
-      bod: '',
-      clIonQnt: '',
-      smll: '',
-      cdtnv: '',
-      crmty: '',
-      rmrk: '',
+      dmdWq: "",
+      useUsgCd: "",
+      wntUntprc: "",
+      grssClfg: "",
+      tn: "",
+      combResdch: "",
+      tp: "",
+      trbt: "",
+      ph: "",
+      bod: "",
+      clIonQnt: "",
+      smll: "",
+      cdtnv: "",
+      crmty: "",
+      rmrk: "",
+      sply1: "",
+      sply2: "",
+      sply3: "",
+      password: "",
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  const router = useRouter();
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
-      console.log(values);
-      
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      );
+
+      toast.success("✅ 수요신청이 완료되었습니다.");
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    router.push("../../")
     } catch (error) {
-      console.error("Form submission error", error);
-      //  toast.error("Failed to submit the form. Please try again.");
+      toast.error("수요신청을 다시입력해주시길 바랍니다.");
     }
   }
 
   return (
     <>
-        <div className="grid h-40 grid-cols-3 place-content-center">
+      <div className="grid h-40 grid-cols-3 place-content-center">
         <h1 className="	col-start-2 col-span-1  text-4xl underline">
-            수요 신청정보입력
-          </h1>
-        </div>
+          수요 신청정보입력
+        </h1>
+      </div>
 
       <div className="grid grid-cols-5 gap-4  overflow-hidden">
-        <div className="col-span-1 "/>
+        <div className="col-span-1 " />
         <div className="col-span-3  max-h-[78vh] overflow-y-scroll ">
           <div>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="space-y-8 max-w-3xl mx-auto"
-            >
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 max-w-3xl mx-auto"
+              >
+                <DmdRegForm> {form}</DmdRegForm>
 
-           <DmdRegForm> {form}</DmdRegForm> 
-
-                <Button  type="submit"> 수요신청</Button>
-            </form>
-          </Form>
+                <Button type="submit"> 수요신청</Button>
+              </form>
+            </Form>
           </div>
         </div>
-        <div className="col-span-1 " />
+        <div className="col-span-1 ">
+          <Toaster position="top-center" />
+        </div>
       </div>
     </>
   );

apps/wr/components/toastFromUi.tsx

@@ -0,0 +1,56 @@
+
+import { Button } from "@common/components/ui";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+
+
+
+export function ToastFormUi(body:string,title:string,url:string,buttonName:string){
+
+  //const router = useRouter();
+
+    return(
+
+      toast.custom((t) => (
+      
+        <div
+          className={`${
+            t.visible ? 'animate-enter' : 'animate-leave'
+          }  w-4/12 h-40 bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+        >
+          <div className="w-full flex-1 py-10">
+            <div className="flex items-start">
+              <div className="flex-shrink-0 pt-0.5">
+          
+              </div>
+              <div className="ml-3  flex-1">
+                <p className="text-xl font-medium  underline">
+                {title}
+                </p>
+                <p className="mt-1 text-2xl">
+                  {body}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex py-20">
+            <Button
+              size='sm'
+              onClick={() => toast.dismiss(t.id)}
+            >
+              <Link href={url}> {buttonName}</Link>
+            </Button>
+          </div>
+          <div className="flex  pl-4 pr-4 py-20">
+            <Button
+              onClick={() => toast.dismiss(t.id)}
+              size='sm'
+            >
+              닫기
+            </Button>
+          </div>
+        </div>
+      ))
+    )
+}

apps/wr/components/ui/matDmd/dmdRegform/component.tsx

@@ -1,7 +1,7 @@
 import { useWrStore } from "@/app/store";
 import { selectClass } from "@/app/store/rainReuseFacilityInsert";
 import { DatePicker, FormField, FormItem, FormLabel, FormUi, SelectBox } from "@common/business_components";
-import {  Input } from "@common/components";
+import {  Button, Input } from "@common/components";
 import { useState } from "react";
 
 export function DmdRegForm(form: any) {
@@ -82,8 +82,8 @@ export function DmdRegForm(form: any) {
           )}
         />
         
-       <div className="grid grid-cols-5">
-        <h1 className="	col-start-3 col-span-1  pl-5 text-2xl">
+       <div className="grid grid-cols-4">
+        <h1 className="	col-span-2  pl-5 text-2xl underline">
             요구수질
           </h1>
         </div>
@@ -243,34 +243,74 @@ export function DmdRegForm(form: any) {
           />
         </div>
       </div>
-
-
+      <div className="grid grid-cols-4">
+        <h1 className="	 col-span-1  pl-2 text-2xl underline">
+            공급후보지 선택
+        </h1>
+        <div className="	col-start-3 col-span-1  ">
+        <Button >
+            후보지 조회 
+        </Button>
+          </div>
+          <div className="	col-start-4 col-span-1    ">
+         <Button  >
+           유사사례조회
+        </Button>
+          </div>
+                
+        </div>
       <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
+      <div className="col-span-4">
           <FormField
             control={form.control}
-            name="crmty"
+            name="sply1"
             render={({ field }) => (
-              <FormUi label="색도">
+              <FormUi label="후보지_1">
+                <Input placeholder="후보지1" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+        <div className="col-span-4">
+          <FormField
+            control={form.control}
+            name="sply2"
+            render={({ field }) => (
+              <FormUi label="후보지_2">
+                <Input placeholder="후보지2" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+        <div className="col-span-4">
+          <FormField
+            control={form.control}
+            name="sply3"
+            render={({ field }) => (
+              <FormUi label="후보지_3">
+                <Input placeholder="후보지3" type="text" {...field} />
+              </FormUi>
+            )}
+          />
+        </div>
+        </div>
+        <div className="grid grid-cols-4">
+        <h1 className="	 col-span-2  pl-2 text-2xl underline">
+            수요신청 비밀번호
+        </h1>
+    
+        <div className="col-start-3 col-span-2">
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormUi label="">
                 <Input placeholder="10" type="text" {...field} />
               </FormUi>
             )}
           />
         </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="rmrk"
-            render={({ field }) => (
-              <FormUi label="비고">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
+     </div>
     </>
   );
 }