공공재사용 시설 등록 작업중 (css)

apps/wr/app/component/publicReuseInsertForm.tsx

@@ -0,0 +1,10 @@
+export function PublicReuseFaciltyInsert(){
+    
+    
+    
+    return (
+            <>
+            
+            </>
+    );
+}

apps/wr/app/publicReuseFaciltyInsert/page.tsx

@@ -1,16 +1,22 @@
-import {UiTable} from '@common/business_components';
-import { TableRow } from '@common/components';
+'use client'
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import {UiTable } from '@common/business_components';
+import {UiForm} from '@common/business_components';
+import { Input, TableRow } from '@common/components';
 import { TableHead } from '@common/components';
-
-
+import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@common/business_components/ui/form/lib/form";
+import Style from "../style/PublicReuseFaciltyInsert.module.css";
 
 interface TableUpperProps {
   id: string;
-  title: string;
-  upName : string;
+  title: string|undefined;
+  upName : string|undefined;
   upSequnce: number;
 }
-
+/*
 const publicReuseFacility = [
   { 
     sido: "서울",
@@ -43,7 +49,7 @@ const publicReuseFacility = [
     register: "Y"
   },   
 
-]
+]*/
 
 const publicReuseFacilityUper = [
   { 
@@ -80,7 +86,7 @@ const publicReuseFacilityUper = [
   ]
 
 
-  
+  /*
 const headList = [
                   { id: "sido", title: "시도" },
                   { id: "sigungo", title: "시군구" },
@@ -91,42 +97,100 @@ const headList = [
                   { id: "reuse", title: '재이용여부' },
                   { id: "register", title: '등록여부' }];
 
-
+*/
 
  const upHeadList = [
-                    { id: "sido", title: "시도" },
-                    { id: "sigungo", title: "시군구" },
-                    { id: "facilityName", title: "시설명" },
-                    { id: "location", title: "위치" },
-                    { id: "locationgubun", title: "지역구분" },
-                    { id: "facilityCapacity", title: "시설용량" },
+                    { id: "sido", title: "시도" , upName:'no',upSequnce:1 },
+                    { id: "sigungo", title: "시군구" , upName:'no', upSequnce:1 },
+                    { id: "facilityName", title: "시설명" , upName:'no', upSequnce:1 },
+                    { id: "location", title: "위치" , upName:'no',upSequnce:1 },
+                    { id: "locationgubun", title: "지역구분" ,upName:'no', upSequnce:1 },
+                    { id: "facilityCapacity", title: "시설용량" , upName:'no',upSequnce:1 },
                     { id: "yn", title: '여부', upName:'upChangeRe' , upSequnce:1 },
                     { id: "authoDay", title: '허가일',upName:'upChangeRe', upSequnce:2 },
                     { id: "area", title: '면적' ,upName:'upChangeRe',upSequnce:3 }];
 
-  const headMakeColSpan = (upHeadList: any) => {
+  const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
     return  ( <>
     <TableRow>{
     upHeadList.map((head: TableUpperProps) => 
-      (head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead  rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:
+      (head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead key={head.id+head.upSequnce} rowSpan={1} colSpan={3}>{'중축 개축 증축 '}</TableHead>:
         head.upSequnce> 1?null:<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>))}
     </TableRow>
     <TableRow>
       {upHeadList.map((head: TableUpperProps) =>
         (head.upName === 'upChangeRe'?<TableHead key={head.id}>{head.title}</TableHead>:null))}
     </TableRow>
-    </>)
+    </> )
   }
 
+  
+
+
+
+
+
 
 
   export default function PublicReuseFaciltyInsert() {
 
   const nodeList= headMakeColSpan(upHeadList);
   const total = 100;
-  return (  <div>
-            <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total} children={nodeList} headName={'test'} />
-            </div>
+ 
+  const formSchema= z.object({
+    username: z.string().min(2).max(50),
+})
+
+const form = useForm<z.infer<typeof formSchema>>({
+  resolver: zodResolver(formSchema),
+  defaultValues: {
+    username: "",
+  },
+})
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+  }
+  const formField = ()=>{
+    return(
+    <FormField
+    control={form.control}
+    name="username"
+    render={({ field }) => (
+                    <FormItem>
+                        <FormLabel>Username</FormLabel>
+                        <FormControl>
+                        <Input placeholder="shadcn" {...field} />
+                        </FormControl>
+                        <FormDescription>
+                        This is your public display name.
+                        </FormDescription>
+                        <FormMessage />
+                    </FormItem>
+    )}
+  />
+ ) }
+
+ const makeFromField= formField();
+
+
+  return (  <>
+  <div>
+        <div className={Style.table}>
+          <UiTable publicReuseFacility={publicReuseFacilityUper} headlist={upHeadList} pageSize={100} total={total}  headName={'test'}>
+            {nodeList}
+           </UiTable>
+        </div>
+          <div className={Style.form} >
+          <UiForm onSubmit={onSubmit} form={form} formField={makeFromField}      ></UiForm>
+
+          </div>
+</div>     
+          
+          </>
   );
 }
 

apps/wr/app/style/PublicReuseFaciltyInsert.module.css

@@ -0,0 +1,10 @@
+.table{
+    width: 50%;
+    float:left; 
+}
+
+.form{
+    width: 50%;
+    display:flex; 
+    margin-left:10px;
+}

apps/wr/package.json

@@ -11,7 +11,11 @@
   "dependencies": {
     "@common/business_components": "workspace:*",
     "@common/components": "workspace:*",
-    "next": "15.1.7"
+    "next": "15.1.7",
+    "zod": "^3.24.2",
+    "@hookform/resolvers": "^4.1.3",
+    "react-hook-form": "^7.54.2"
+
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

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

@@ -1,8 +1,7 @@
 
 
-"use client"
 import { Button } from "@common/components"
-import { Form } from "./form"
+import { Form } from "./lib/form"
 
   interface UiFormProps {
     onSubmit: object
@@ -28,7 +27,7 @@ import { Form } from "./form"
             )}
           />*/
 
-export default function UIForm(uiFormProps: UiFormProps) {
+export  function UiForm(uiFormProps: UiFormProps) {
 
   const {onSubmit, form, formField} = uiFormProps;  
     return (

packages/common/business_components/src/ui/form/lib/form.tsx

@@ -12,8 +12,8 @@ import {
   useFormContext,
 } from "react-hook-form"
 
-import { cn } from "../../lib/utils"
-import { Label } from "./label"
+import { cn } from "../../../lib/utils"
+import { Label } from "../lib/label"
 
 const Form = FormProvider
 

packages/common/business_components/src/ui/form/lib/label.tsx

@@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
 import * as React from "react"
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../../lib/utils"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

packages/common/business_components/src/ui/form/test.tsx

@@ -1,27 +1,27 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
-import UIForm from "."
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form"
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./lib/form"
 import { Input } from "@common/components/ui"
+import { UiForm } from "."
 
 
 
 export default function Test (){
     
-    const formSchema2= z.object({
+    const formSchema= z.object({
         username: z.string().min(2).max(50),
     })
     
-    const form = useForm<z.infer<typeof formSchema2>>({
-      resolver: zodResolver(formSchema2),
+    const form = useForm<z.infer<typeof formSchema>>({
+      resolver: zodResolver(formSchema),
       defaultValues: {
         username: "",
       },
     })
     
       // 2. Define a submit handler.
-      function onSubmit(values: z.infer<typeof formSchema2>) {
+      function onSubmit(values: z.infer<typeof formSchema>) {
         // Do something with the form values.
         // ✅ This will be type-safe and validated.
         console.log(values)
@@ -50,7 +50,7 @@ export default function Test (){
 
     return (
         <div>
-            <UIForm form={form} onSubmit ={onSubmit} formField={makeFromField} ></UIForm>
+            <UiForm form={form} onSubmit ={onSubmit} formField={makeFromField} ></UIForm>
          </div>
     )
 }

packages/common/business_components/src/ui/select/lib/selectBox.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../../lib/utils"
 
 const Select = SelectPrimitive.Root