(대표님) date-picker 컴포넌트 개발

1 files changed, 75 insertions, 0 deletions

diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
new file mode 100644
index 00000000..a88a8679
--- /dev/null
+++ b/components/ui/date-picker.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+interface DatePickerProps {
+  date?: Date
+  onSelect?: (date?: Date) => void
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+}
+
+export function DatePicker({
+  date,
+  onSelect,
+  disabled = false,
+  placeholder = "날짜 선택",
+  className,
+}: DatePickerProps) {
+  // 내부 상태 관리와 외부 상태 관리를 모두 지원
+  const [internalDate, setInternalDate] = React.useState<Date | undefined>(date)
+  
+  // 외부에서 date가 변경되면 내부 상태도 업데이트
+  React.useEffect(() => {
+    setInternalDate(date)
+  }, [date])
+  
+  // 날짜 선택 시 외부 콜백과 내부 상태 모두 업데이트
+  const handleSelect = (newDate?: Date) => {
+    setInternalDate(newDate)
+    onSelect?.(newDate)
+  }
+  
+  // 실제 표시할 날짜 (외부 제어 우선)
+  const displayDate = date !== undefined ? date : internalDate
+  
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !displayDate && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {displayDate ? format(displayDate, "PPP") : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={displayDate}
+          onSelect={handleSelect}
+          initialFocus
+          disabled={disabled}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file