Merge branch 'iipbs/wr/form' into iipbs/wr/dev

apps/wr/components/ui/publicReuseInsertForm.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { SelectBox } from "@common/business_components";
-import { FileUpload, FormUi, UiTable } from "@common/business_components/ui";
+import { DatePicker, FileUpload, FormUi, UiTable } from "@common/business_components/ui";
 import { Form, FormField } from "@common/business_components/ui/form";
-import { Button, DatePicker, Input } from "@common/components";
+import { Button, Input } from "@common/components";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -62,8 +62,7 @@ export function PublicReuseFaciltyFormInsert() {
     { text: "자쳬+연계", val: "3" },
   ];
 
-
-
+  const [datePick, setDatePick] = useState(new Date())
   const [files, setFiles] = useState(null);
 
   return (
@@ -256,7 +255,12 @@ export function PublicReuseFaciltyFormInsert() {
                   name="name_2450741594"
                   render={({ field }) => (
                     <FormUi label="설치승인인가일">
-                      <DatePicker mode="single" {...field} />
+                      <DatePicker field={{
+                        value: datePick,
+                        onChange: (date: Date | undefined): void =>{
+                          if (date) setDatePick(date)
+                        }
+                      }} mode="single" {...field}/>
                     </FormUi>
                   )}
                 />
@@ -267,7 +271,12 @@ export function PublicReuseFaciltyFormInsert() {
                   name="name_2450741594"
                   render={({ field }) => (
                     <FormUi label="사업준공일">
-                        <DatePicker mode="single" {...field} />
+                        <DatePicker field={{
+                        value: datePick,
+                        onChange: function (date: Date | undefined): void {
+                          if (date) setDatePick(date)
+                        }
+                      }} mode="single" {...field} />
                     </FormUi>
                   )}
                 />

packages/common/business_components/src/ui/date_picker/date-picker.css

@@ -0,0 +1,7 @@
+@tailwind components;
+
+@layer components {
+  .date-picker-trigger {
+    @apply h-[3rem] w-[12rem] justify-between border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal leading-none text-muted-foreground hover:!bg-accent;
+  }
+}

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

@@ -0,0 +1,46 @@
+"use client";
+
+import "./date-picker.css";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DayPickerSingleProps } from "react-day-picker";
+
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@common/components/ui";
+import { cn } from "../../lib/utils";
+import { FormControl } from "../form";
+
+type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } };
+
+export function DatePicker({ field }: DatePickerProps) {
+    return (
+        <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>
+    );
+}

packages/common/business_components/src/ui/index.ts

@@ -1,4 +1,5 @@
 export * from "./chart";
+export * from "./date_picker";
 export * from "./file-upload";
 export * from "./form";
 export * from "./form_ui";

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

@@ -8,7 +8,7 @@ const SearchInput = React.forwardRef<
     console.log(ref);
     return (
         <div className={className+" flex"} >
-            {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
+            {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
             <Input className="ml-8 w-3/4 text-lg" ref={ref}></Input>
         </div>
     )

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

@@ -17,7 +17,7 @@ export type SelectDataType = {
 const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string, label:string, selectData: SelectDataType[], onSelectValue:(val:string)=>void}>(({className, label, selectData, onSelectValue}, refs) => {
     return (
         <div className={className+" flex items-center"} >
-            {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
+            {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
             <div className="flex w-full items-center">
                 <Input className="w-2/3 text-lg" ref={refs}/>
                 <Select onValueChange={onSelectValue}>