From 5785e57b40d4f4f7e467e934f19b0a874b6f1915 Mon Sep 17 00:00:00 2001
From: truthwing <truthplumage@gmail.com>
Date: Tue, 11 Mar 2025 14:00:58 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=ED=94=BC?=
 =?UTF-8?q?=EC=BB=A4=20=EC=B6=94=EA=B0=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=9B=90=EC=95=A4=EC=98=AC=EC=97=90=20?=
 =?UTF-8?q?=EB=AC=B8=EC=9D=98=20=ED=95=B4=EC=95=BC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/date_picker/date-picker.css        |  7 +++
 .../src/ui/date_picker/index.tsx              | 46 +++++++++++++++++++
 .../business_components/src/ui/index.ts       |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 packages/common/business_components/src/ui/date_picker/date-picker.css
 create mode 100644 packages/common/business_components/src/ui/date_picker/index.tsx

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..04b7b3505
--- /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/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>
+    );
+}
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";