수요처 등록 기본구조 작업중

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

@@ -1,8 +1,6 @@
 "use client"
 
-import {
-  toast
-} from "sonner"
+
 import {
   useForm
 } from "react-hook-form"
@@ -10,15 +8,14 @@ import {
   zodResolver
 } from "@hookform/resolvers/zod"
 import * as z from "zod"
-import {
-  format
-} from "date-fns"
 
 import {
   Calendar as CalendarIcon
 } from "lucide-react"
-import { Form, FormField, FormUi, SelectBox } from "@common/business_components/ui"
+import { Form, FormField, FormUi, ScrollArea, SelectBox } from "@common/business_components/ui"
 import { Button, Input } from "@common/components/ui"
+import { BaseForm } from "@/components/ui/matDmd/baseForm/component"
+import { WqForm } from "@/components/ui/matDmd/wqForm/component"
 
 const formSchema = z.object({
   ctpv: z.string(),
@@ -58,25 +55,42 @@ 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>
-      );
+      );*/
     } catch (error) {
       console.error("Form submission error", error);
-      toast.error("Failed to submit the form. Please try again.");
+    //  toast.error("Failed to submit the form. Please try again.");
     }
   }
 
   return (
+    <>
+    <div>
+            <h1 className="pl-3 text-4xl" >수요처 정보 등록 </h1>
+    </div>
+   
+    <div>
+      <div>
+            <h1 className="space-y-8 max-w-3xl mx-auto py-1 text-2xl" >정보입력 </h1>
+      </div>
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">
+
+      <ScrollArea>
+        <BaseForm >{form} </BaseForm>
         
-     
+        
+        <WqForm> {form}</WqForm>
        
         <Button type="submit">Submit</Button>
+        </ScrollArea>
       </form>
     </Form>
+    </div>
+    </>
   )
 }

apps/wr/app/page.tsx

@@ -16,6 +16,10 @@ export default function Home() {
       <Button className='place-self-auto'> 
         <Link href="reuseFaciltyManage/reuseFacilityInsert/rswtReuseFacilityInsert"> 중수도시설  등록</Link>
       </Button>
+
+      <Button className='place-self-auto'> 
+        <Link href="matMng/matDmd">수요처 등록</Link>
+      </Button>
       </div>
       </>  
   );

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

@@ -1,8 +1,10 @@
-import { FormField, FormUi, SelectBox } from "@common/business_components";
-import { Input } from "@common/components";
+import { useWrStore } from "@/app/store";
+import { FormField, FormItem, FormLabel, FormUi, SelectBox } from "@common/business_components";
+import { DatePicker, Input } from "@common/components";
 
-export function baseFrom(form:any){
+export function BaseForm(form:any){
     
+  const { dmd } = useWrStore((state) => state);
 
     return(
 
@@ -12,7 +14,7 @@ export function baseFrom(form:any){
           name="ctpv"
           render={({ field }) => (
                 <FormUi label="시도">
-                <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+                <SelectBox selectClass={''} label={""} selectArray={dmd.selectSido} onSelectValue={field.onChange} />
                 </FormUi>
 
           )}
@@ -23,7 +25,7 @@ export function baseFrom(form:any){
           name="sgg"
           render={({ field }) => (
             <FormUi label="시군구">
-            <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+            <SelectBox selectClass={''} label={""} selectArray={dmd.selectSgg} onSelectValue={field.onChange} />
             </FormUi>
          
           )}
@@ -102,34 +104,7 @@ export function baseFrom(form:any){
       render={({ field }) => (
         <FormItem className="flex flex-col">
           <FormLabel>요구시기</FormLabel>
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant={"outline"}
-                  className={cn(
-                    "w-[240px] pl-3 text-left font-normal",
-                    !field.value && "text-muted-foreground"
-                  )}
-                >
-                  {field.value ? (
-                    format(field.value, "PPP")
-                  ) : (
-                    <span>Pick a date</span>
-                  )}
-                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={field.value}
-                onSelect={field.onChange}
-                initialFocus
-              />
-            </PopoverContent>
-          </Popover>
+         <DatePicker mode={"single"} {...field} />
         </FormItem>
       )}
     />
@@ -154,7 +129,7 @@ export function baseFrom(form:any){
           name="useUsgCd"
           render={({ field }) => (
             <FormUi label="사용용도">
-            <SelectBox selectClass={''} label={""} selectArray={rain.selectYN} onSelectValue={field.onChange} />
+            <SelectBox selectClass={''} label={""} selectArray={dmd.selectUsg} onSelectValue={field.onChange} />
             </FormUi>
            
           )}

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

@@ -1,7 +1,7 @@
 import { FormField, FormUi } from "@common/business_components";
 import { Input } from "@common/components";
 
-export function WqFrom(form: any) {
+export function WqForm(form: any) {
   return (
     <>
       <div className="grid grid-cols-12 gap-4">

packages/common/business_components/src/ui/select/index.tsx

@@ -11,15 +11,15 @@ interface SelectBox1 {
 
 const SelectBox = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {label:string, className:string, selectArray:SelectBox1[], onSelectValue:(val:string)=>void}
->(({ label, className, selectArray, onSelectValue }, ref)=>{
+  React.HTMLAttributes<HTMLDivElement> & {label:string, selectClass:string|undefined, className:string, selectArray:SelectBox1[], onSelectValue:(val:string)=>void}
+>(({ label, className, selectClass, selectArray, onSelectValue }, ref)=>{
   const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
     <div className={className+" flex items-center"} ref={ref}>
       {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
       <Select onValueChange={onSelectValue}>
-        <SelectTrigger className="ml-8 w-3/4 text-2xl">
+        <SelectTrigger className={selectClass?selectClass:"ml-8 w-3/4 text-2xl"}>
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>
@@ -32,4 +32,4 @@ const SelectBox = React.forwardRef<
   )  
 })
 
-export { SelectBox };
+export { SelectBox };