feat: 사이트 반영 팝업 작업

packages/common/components/src/ui/calendar/index.tsx

@@ -44,7 +44,7 @@ export function Calendar({
         ),
         day_range_end: "day-range-end",
         day_selected:
-          "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",

packages/common/components/src/ui/date-picker/date-picker.css

@@ -2,6 +2,6 @@
 
 @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;
+    @apply h-[3rem] 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;
   }
 }

packages/common/components/src/ui/date-picker/date-picker.stories.tsx

@@ -1,6 +1,6 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from ".";
-import { useState } from "react";
 
 const meta: Meta<typeof DatePicker> = {
   title: "Elements/DatePicker",

packages/common/components/src/ui/date-picker/index.tsx

@@ -19,12 +19,12 @@ export function DatePicker({ className, ...props }: DatePickerProps) {
           variant="outline"
           className={cn("date-picker-trigger", className)}
         >
+          <CalendarIcon className="!size-[1.6rem]" />
           {props.selected ? (
             format(props.selected, "yyyy-MM-dd")
           ) : (
             <span>날짜 선택</span>
           )}
-          <CalendarIcon className="!size-[1.6rem]" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0">

packages/common/components/src/ui/date-range-picker/index.tsx

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

packages/common/components/src/ui/index.ts

@@ -5,6 +5,7 @@ export * from "./calendar";
 export * from "./checkbox";
 export * from "./data-table";
 export * from "./date-picker";
+export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./file-uploader";