blob: 6c51c12cf7c4e2efbf50e6adaa72c2824c30645a (
plain)
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
|
"use client"
import * as React from "react"
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
SheetFooter,
SheetClose,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Download } from "lucide-react"
import { formatDate } from "@/lib/utils"
// 첨부파일 구조
interface RfqAttachment {
id: number
fileName: string
filePath: string
createdAt?: Date // or Date
vendorId?: number | null
size?: number
}
// 컴포넌트 Prop
interface RfqAttachmentsSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
rfqId: number
attachments?: RfqAttachment[]
}
/**
* RfqAttachmentsSheet:
* - 단순히 첨부파일 리스트 + 다운로드 버튼만
*/
export function RfqAttachmentsSheet({
rfqId,
attachments = [],
...props
}: RfqAttachmentsSheetProps) {
return (
<Sheet {...props}>
<SheetContent className="flex flex-col gap-6 sm:max-w-sm">
<SheetHeader>
<SheetTitle>Attachments</SheetTitle>
<SheetDescription>RFQ #{rfqId}에 대한 첨부파일 목록</SheetDescription>
</SheetHeader>
<div className="space-y-2">
{/* 첨부파일이 없을 경우 */}
{attachments.length === 0 && (
<p className="text-sm text-muted-foreground">
No attachments
</p>
)}
{/* 첨부파일 목록 */}
{attachments.map((att) => (
<div
key={att.id}
className="flex items-center justify-between rounded border p-2"
>
<div className="flex flex-col text-sm">
<span className="font-medium">{att.fileName}</span>
{att.size && (
<span className="text-xs text-muted-foreground">
{Math.round(att.size / 1024)} KB
</span>
)}
{att.createdAt && (
<span className="text-xs text-muted-foreground">
Created at {formatDate(att.createdAt)}
</span>
)}
</div>
{/* 파일 다운로드 버튼 */}
{att.filePath && (
<a
href={att.filePath}
download
target="_blank"
rel="noreferrer"
className="text-sm"
>
<Button variant="ghost" size="icon" type="button">
<Download className="h-4 w-4" />
</Button>
</a>
)}
</div>
))}
</div>
<SheetFooter className="gap-2 pt-2">
{/* 닫기 버튼 */}
<SheetClose asChild>
<Button type="button" variant="outline">
Close
</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
)
}
|
