diff --git a/apps/wr/components/ui/publicReuseInsertForm.tsx b/apps/wr/components/ui/publicReuseInsertForm.tsx index 47cecaaf8..1150bdc0d 100644 --- a/apps/wr/components/ui/publicReuseInsertForm.tsx +++ b/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 }) => ( - + { + if (date) setDatePick(date) + } + }} mode="single" {...field}/> )} /> @@ -267,7 +271,12 @@ export function PublicReuseFaciltyFormInsert() { name="name_2450741594" render={({ field }) => ( - + )} /> diff --git a/packages/common/business_components/src/ui/date_picker/date-picker.css b/packages/common/business_components/src/ui/date_picker/date-picker.css new file mode 100644 index 000000000..bf9415652 --- /dev/null +++ b/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; + } +} diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx new file mode 100644 index 000000000..37dbcb096 --- /dev/null +++ b/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 ( + + + + + + + + + + + ); +} diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 2791b2035..795fffa2a 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/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"; diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx index f933428fc..f2d1caeb4 100644 --- a/packages/common/business_components/src/ui/search_input/index.tsx +++ b/packages/common/business_components/src/ui/search_input/index.tsx @@ -8,7 +8,7 @@ const SearchInput = React.forwardRef< console.log(ref); return (
- {label && } + {label && }
) diff --git a/packages/common/business_components/src/ui/search_input_select/index.tsx b/packages/common/business_components/src/ui/search_input_select/index.tsx index b00615e4b..1496d9ddd 100644 --- a/packages/common/business_components/src/ui/search_input_select/index.tsx +++ b/packages/common/business_components/src/ui/search_input_select/index.tsx @@ -17,7 +17,7 @@ export type SelectDataType = { const SearchInputSelect = React.forwardRefvoid}>(({className, label, selectData, onSelectValue}, refs) => { return (
- {label && } + {label && }