1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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>
)
}
|
