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
|
"use client"
import * as React from "react"
import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Skeleton } from "@/components/ui/skeleton"
import { MessageSquare, Paperclip } from "lucide-react"
import { fetchTechSalesVendorCommentsClient, TechSalesComment } from "../buyer-communication-drawer"
import { BuyerCommunicationDrawer } from "../buyer-communication-drawer"
interface CommunicationTabProps {
quotation: {
id: number
rfqId: number
vendorId: number
quotationCode: string | null
rfq: {
id: number
rfqCode: string | null
createdByUser?: {
id: number
name: string | null
email: string | null
} | null
} | null
vendor: {
vendorName: string
} | null
}
}
export function CommunicationTab({ quotation }: CommunicationTabProps) {
const [comments, setComments] = useState<TechSalesComment[]>([]);
const [unreadCount, setUnreadCount] = useState(0);
const [loadingComments, setLoadingComments] = useState(false);
const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false);
// 컴포넌트 마운트 시 메시지 미리 로드
useEffect(() => {
if (quotation) {
loadCommunicationData();
}
}, [quotation]);
// 메시지 데이터 로드 함수
const loadCommunicationData = async () => {
try {
setLoadingComments(true);
const commentsData = await fetchTechSalesVendorCommentsClient(quotation.rfqId, quotation.vendorId);
setComments(commentsData);
// 읽지 않은 메시지 수 계산 (구매자가 보낸 메시지 중 읽지 않은 것)
const unread = commentsData.filter(
comment => !comment.isVendorComment && !comment.isRead
).length;
setUnreadCount(unread);
} catch (error) {
console.error("메시지 데이터 로드 오류:", error);
} finally {
setLoadingComments(false);
}
};
// 커뮤니케이션 드로어가 닫힐 때 데이터 새로고침
const handleCommunicationDrawerChange = (open: boolean) => {
setCommunicationDrawerOpen(open);
if (!open) {
loadCommunicationData(); // 드로어가 닫힐 때 데이터 새로고침
}
};
return (
<div className="h-full flex flex-col">
{/* 헤더 */}
<Card className="mb-4">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle className="flex items-center gap-2">
<MessageSquare className="h-5 w-5" />
커뮤니케이션
{unreadCount > 0 && (
<Badge variant="destructive" className="ml-2">
새 메시지 {unreadCount}
</Badge>
)}
</CardTitle>
<CardDescription>
RFQ {quotation.rfq?.rfqCode || "미할당"}에 대한 구매담당자와의 커뮤니케이션
</CardDescription>
</div>
<Button
onClick={() => setCommunicationDrawerOpen(true)}
variant="outline"
size="sm"
>
<MessageSquare className="h-4 w-4 mr-2" />
{unreadCount > 0 ? "새 메시지 확인" : "메시지 보내기"}
</Button>
</CardHeader>
<CardContent>
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<span>구매담당자: {quotation.rfq?.createdByUser?.name || "N/A"}</span>
<span>•</span>
<span>벤더: {quotation.vendor?.vendorName}</span>
</div>
</CardContent>
</Card>
{/* 메시지 미리보기 */}
<Card className="flex-1 flex flex-col min-h-0">
<CardHeader>
<CardTitle className="text-lg">메시지 ({comments.length})</CardTitle>
</CardHeader>
<CardContent>
{loadingComments ? (
<div className="flex items-center justify-center p-8">
<div className="text-center">
<Skeleton className="h-4 w-32 mx-auto mb-2" />
<Skeleton className="h-4 w-48 mx-auto" />
</div>
</div>
) : comments.length === 0 ? (
<div className="min-h-[200px] flex flex-col items-center justify-center text-center p-8">
<div className="max-w-md">
<div className="mx-auto bg-primary/10 rounded-full w-12 h-12 flex items-center justify-center mb-4">
<MessageSquare className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-medium mb-2">아직 메시지가 없습니다</h3>
<p className="text-muted-foreground mb-4">
견적서에 대한 질문이나 의견이 있으신가요? 구매자와 메시지를 주고받으세요.
</p>
<Button
onClick={() => setCommunicationDrawerOpen(true)}
className="mx-auto"
>
메시지 보내기
</Button>
</div>
</div>
) : (
<div className="space-y-4">
{/* 최근 메시지 3개 미리보기 */}
<div className="space-y-2">
<h3 className="text-sm font-medium">최근 메시지</h3>
<ScrollArea className="h-[250px] rounded-md border p-4">
{comments.slice(-3).map(comment => (
<div
key={comment.id}
className={`p-3 mb-3 rounded-lg ${!comment.isVendorComment && !comment.isRead
? 'bg-primary/10 border-l-4 border-primary'
: 'bg-muted/50'
}`}
>
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-medium">
{comment.isVendorComment
? '나'
: comment.userName || '구매 담당자'}
</span>
<span className="text-xs text-muted-foreground">
{new Date(comment.createdAt).toLocaleDateString()}
</span>
</div>
<p className="text-sm line-clamp-2">{comment.content}</p>
{comment.attachments.length > 0 && (
<div className="mt-1 text-xs text-muted-foreground">
<Paperclip className="h-3 w-3 inline mr-1" />
첨부파일 {comment.attachments.length}개
</div>
)}
</div>
))}
</ScrollArea>
</div>
<div className="flex justify-center">
<Button
onClick={() => setCommunicationDrawerOpen(true)}
className="w-full"
>
전체 메시지 보기 ({comments.length}개)
</Button>
</div>
</div>
)}
</CardContent>
</Card>
{/* 커뮤니케이션 드로어 */}
<BuyerCommunicationDrawer
open={communicationDrawerOpen}
onOpenChange={handleCommunicationDrawerChange}
quotation={{
id: quotation.id,
rfqId: quotation.rfqId,
vendorId: quotation.vendorId,
quotationCode: quotation.quotationCode,
rfq: quotation.rfq ? {
rfqCode: quotation.rfq.rfqCode
} : undefined
}}
onSuccess={loadCommunicationData}
/>
</div>
)
}
|
