datepickerrange 생성(손대지마세요)

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>
+  );
+}

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";
+export * from "./date_month_picker";
+export * from "./date_picker_range"