From 3ec986dfbeb8a0a834fcdcd620815e3819e352df Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Wed, 9 Jul 2025 19:52:42 +0900
Subject: [PATCH] =?UTF-8?q?datepickerrange=20=EC=83=9D=EC=84=B1(=EC=86=90?=
 =?UTF-8?q?=EB=8C=80=EC=A7=80=EB=A7=88=EC=84=B8=EC=9A=94)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/date_picker_range/index.tsx        | 46 +++++++++++++++++++
 .../business_components/src/ui/index.ts       |  3 +-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 packages/common/business_components/src/ui/date_picker_range/index.tsx

diff --git a/packages/common/business_components/src/ui/date_picker_range/index.tsx b/packages/common/business_components/src/ui/date_picker_range/index.tsx
new file mode 100644
index 000000000..3a6ab1ae0
--- /dev/null
+++ b/packages/common/business_components/src/ui/date_picker_range/index.tsx
@@ -0,0 +1,46 @@
+import "./date-picker.css";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DayPickerSingleProps } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { Button } from "@common/components/ui";
+import { Calendar } from "@common/components/ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@common/components/ui";
+
+type DatePickerRangeProps = {
+  placeholder?: string;
+  disabled?: boolean | ((date: Date) => boolean);
+} & DayPickerSingleProps;
+
+export function DatePickerRange({
+  className,
+  placeholder = "날짜 선택",
+  disabled,
+  ...props
+}: DatePickerRangeProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn("date-picker-trigger", className)}
+          disabled={typeof disabled === "boolean" ? disabled : false}
+        >
+          <CalendarIcon className="!size-[1.6rem]" />
+          {props.selected ? (
+            format(props.selected, "yyyy-MM-dd")
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar initialFocus classNames={{ cell: "rounded-md" }} {...props} 
+          disabled={typeof disabled === "function" ? disabled : undefined}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index fd1e6fe9e..eab3a7eab 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -21,4 +21,5 @@ export * from "./table_div";
 export * from "./title";
 export * from "./sdmInsertForm";
 export * from "./popover_ui";
-export * from "./date_month_picker";
\ No newline at end of file
+export * from "./date_month_picker";
+export * from "./date_picker_range"
\ No newline at end of file