1 files changed, 36 insertions, 3 deletions

diff --git a/components/date-range-picker.tsx b/components/date-range-picker.tsx
index 295160a5..a489d656 100644
--- a/components/date-range-picker.tsx
+++ b/components/date-range-picker.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
+import { CalendarIcon, X } from "lucide-react"
 import { parseAsString, useQueryStates } from "nuqs"
 import { type DateRange } from "react-day-picker"
 
@@ -59,6 +59,12 @@ interface DateRangePickerProps
    * @default true
    */
   shallow?: boolean
+
+  /**
+   * Show a clear button to reset the date range
+   * @default false
+   */
+  showClearButton?: boolean
 }
 
 export function DateRangePicker({
@@ -67,6 +73,7 @@ export function DateRangePicker({
   triggerVariant = "outline",
   triggerSize = "default",
   triggerClassName,
+  showClearButton = false,
   shallow = true,
   className,
   ...props
@@ -97,6 +104,18 @@ export function DateRangePicker({
     }
   }, [dateParams, defaultDateRange])
 
+  // 날짜 초기화 함수
+  const clearDates = (e: React.MouseEvent) => {
+    e.stopPropagation() // 팝오버 토글 방지
+    void setDateParams({
+      from: "",
+      to: "",
+    })
+  }
+
+  // 날짜가 선택되었는지 확인
+  const hasSelectedDate = Boolean(date?.from || date?.to)
+
   return (
     <div className="grid gap-2">
       <Popover>
@@ -105,7 +124,7 @@ export function DateRangePicker({
             variant={triggerVariant}
             size={triggerSize}
             className={cn(
-              "w-full justify-start gap-2 truncate text-left font-normal",
+              "relative w-full justify-start gap-2 truncate text-left font-normal",
               !date && "text-muted-foreground",
               triggerClassName
             )}
@@ -123,6 +142,20 @@ export function DateRangePicker({
             ) : (
               <span>{placeholder}</span>
             )}
+
+            {/* 초기화 버튼 */}
+            {showClearButton && hasSelectedDate && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="absolute right-0 top-0 h-full rounded-l-none px-3 hover:bg-background"
+                onClick={clearDates}
+              >
+                <X className="size-4" />
+                <span className="sr-only">초기화</span>
+              </Button>
+            )}
           </Button>
         </PopoverTrigger>
         <PopoverContent className={cn("w-auto p-0", className)} {...props}>
@@ -143,4 +176,4 @@ export function DateRangePicker({
       </Popover>
     </div>
   )
-}
+}
\ No newline at end of file