feat: 사이트 반영 팝업 작업

2025-04-04 14:49:00 +09:00
parent d84bfe2a7c
commit 528cc39831
7 changed files with 151 additions and 23 deletions
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Calendar } from "../calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+
+type DateRangePickerProps = React.HTMLAttributes<HTMLDivElement> & {
+  disabled?: boolean;
+  handleDateChange?: (date: DateRange | undefined) => void;
+};
+
+export function DateRangePicker({
+  disabled,
+  className,
+  handleDateChange,
+}: DateRangePickerProps) {
+  const [date, setDate] = useState<DateRange>();
+
+  const handleSelect = (date: DateRange | undefined) => {
+    setDate(date);
+    handleDateChange?.(date);
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant="outline"
+            className={cn(
+              "h-[3.2rem] min-w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent",
+              !date && "text-muted-foreground",
+            )}
+            disabled={disabled}
+          >
+            <CalendarIcon className="!size-[1.6rem]" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "yyyy-MM-dd")} ~{" "}
+                  {format(date.to, "yyyy-MM-dd")}
+                </>
+              ) : (
+                format(date.from, "yyyy-MM-dd")
+              )
+            ) : (
+              <span>기간 선택</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={handleSelect}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}