datepicker 한글 및 선택후 팝오버 추가

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

@@ -10,12 +10,23 @@ import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@comm
 import { cn } from "../../lib/utils";
 import { FormControl } from "../form";
 import { ko } from "date-fns/locale";
+import { useState } from "react";
 
 type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void  } ,selectClass:string|undefined   };
 
+
 export function DatePicker({ field, selectClass }: DatePickerProps) {
+
+
+    const [open, setOpen] = useState(false);
+
+    const handleSelect = (date: Date | undefined) => {
+        field.onChange(date);      // React Hook Form 업데이트
+        setOpen(false);         
+      };
+    
     return (
-        <Popover>
+        <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <FormControl>
                     <Button
@@ -28,7 +39,7 @@ export function DatePicker({ field, selectClass }: DatePickerProps) {
                         ):selectClass}
                     >
                         {field?.value ? (
-                            format(field?.value, "PPP")
+                            format(field?.value, "PPP", { locale: ko })
                         ) : (
                             <span>Pick a date</span>
                         )}
@@ -40,7 +51,7 @@ export function DatePicker({ field, selectClass }: DatePickerProps) {
                 <Calendar
                     mode="single"
                     selected={field?.value}
-                    onSelect={field?.onChange}
+                    onSelect={handleSelect}
                     initialFocus
                     locale={ko}
                 />