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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
"use client"
import { useState } from "react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { Calendar as CalendarIcon, Clock, Edit2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"
import { updateRfqDueDate } from "./service"
interface DueDateEditButtonProps {
rfqId: number
currentDueDate: Date | string | null
rfqCode: string
rfqTitle: string
}
export function DueDateEditButton({
rfqId,
currentDueDate,
rfqCode,
rfqTitle
}: DueDateEditButtonProps) {
const [open, setOpen] = useState(false)
const [date, setDate] = useState<Date | undefined>(
currentDueDate ? new Date(currentDueDate) : undefined
)
const [time, setTime] = useState<string>(
currentDueDate
? format(new Date(currentDueDate), "HH:mm")
: "17:00" // 기본값: 오후 5시
)
const [isLoading, setIsLoading] = useState(false)
const { toast } = useToast()
const router = useRouter()
const handleSave = async () => {
if (!date) {
toast({
title: "오류",
description: "마감일을 선택해주세요.",
variant: "destructive",
})
return
}
setIsLoading(true)
try {
// 날짜와 시간 결합
const [hours, minutes] = time.split(':').map(Number)
const dateTime = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
hours,
minutes,
0,
0
)
// ISO 문자열로 전송 (자동으로 로컬 타임존 포함)
const result = await updateRfqDueDate(
rfqId,
dateTime.toISOString(),
rfqCode,
rfqTitle
)
if (result.success) {
toast({
title: "성공",
description: result.message,
})
setOpen(false)
router.refresh()
} else {
toast({
title: "오류",
description: result.message,
variant: "destructive",
})
}
} catch (error) {
toast({
title: "오류",
description: "마감일 수정 중 오류가 발생했습니다.",
variant: "destructive",
})
} finally {
setIsLoading(false)
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button
variant="outline"
size="sm"
className="h-7 px-2"
>
<Edit2 className="h-3 w-3 mr-1" />
수정
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>마감일 수정</DialogTitle>
<DialogDescription>
{rfqCode} {rfqTitle ? `- ${rfqTitle}` : ''}의 마감일을 수정합니다.
변경 시 관련 업체에 이메일이 발송됩니다.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
{/* 날짜 선택 */}
<div className="grid gap-2">
<label htmlFor="dueDate" className="text-sm font-medium">
마감 날짜
</label>
<Popover>
<PopoverTrigger asChild>
<Button
id="dueDate"
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "yyyy년 MM월 dd일", { locale: ko }) : "날짜를 선택하세요"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
initialFocus
locale={ko}
disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
/>
</PopoverContent>
</Popover>
</div>
{/* 시간 선택 */}
<div className="grid gap-2">
<label htmlFor="time" className="text-sm font-medium">
마감 시간
</label>
<div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-muted-foreground" />
<input
id="time"
type="time"
value={time}
onChange={(e) => setTime(e.target.value)}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
/>
</div>
</div>
{/* 현재 마감일시 표시 */}
{currentDueDate && (
<div className="text-sm text-muted-foreground">
현재 마감일시: {format(new Date(currentDueDate), "yyyy년 MM월 dd일 HH:mm", { locale: ko })}
</div>
)}
{/* 선택한 날짜시간 미리보기 */}
{date && (
<div className="rounded-md bg-muted p-3">
<p className="text-sm font-medium">선택한 마감일시:</p>
<p className="text-sm text-muted-foreground">
{format(date, "yyyy년 MM월 dd일", { locale: ko })} {time}
</p>
</div>
)}
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setOpen(false)}
disabled={isLoading}
>
취소
</Button>
<Button
onClick={handleSave}
disabled={isLoading}
>
{isLoading ? "저장 중..." : "저장"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
|
