jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

사이드바 방식으로 변경

Browse Source
This commit is contained in:
dohyeons
2025-10-22 13:40:15 +09:00
parent 85987af65e
commit 01ebb2550c
16 changed files with 908 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/components/dashboard/widgets/CustomerIssuesWidget.tsx
View File

@@ -33,7 +33,7 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
useEffect(() => {
loadData();
// 자동 새로고침 (30초마다)
const interval = setInterval(loadData, 30000);
return () => clearInterval(interval);
@@ -65,11 +65,11 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
if (!response.ok) throw new Error("데이터 로딩 실패");
const result = await response.json();
if (result.success && result.data?.rows) {
setIssues(result.data.rows);
}
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : "데이터 로딩 실패");
@@ -80,7 +80,7 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
const getPriorityBadge = (priority: string) => {
const priorityLower = priority?.toLowerCase() || "";
if (priorityLower.includes("긴급") || priorityLower.includes("high") || priorityLower.includes("urgent")) {
return "bg-destructive text-destructive-foreground";
} else if (priorityLower.includes("보통") || priorityLower.includes("medium") || priorityLower.includes("normal")) {
@@ -93,7 +93,7 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
const getStatusBadge = (status: string) => {
const statusLower = status?.toLowerCase() || "";
if (statusLower.includes("처리중") || statusLower.includes("processing") || statusLower.includes("pending")) {
return "bg-primary text-primary-foreground";
} else if (statusLower.includes("완료") || statusLower.includes("resolved") || statusLower.includes("closed")) {
@@ -102,19 +102,20 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
return "bg-muted text-muted-foreground";
};
const filteredIssues = filterPriority === "all"
? issues
: issues.filter((issue) => {
const priority = (issue.priority || "").toLowerCase();
return priority.includes(filterPriority);
});
const filteredIssues =
filterPriority === "all"
? issues
: issues.filter((issue) => {
const priority = (issue.priority || "").toLowerCase();
return priority.includes(filterPriority);
});
if (loading) {
return (
<div className="flex h-full items-center justify-center">
<div className="text-center">
<div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
<p className="mt-2 text-sm text-muted-foreground">데이터 로딩 중...</p>
<p className="text-muted-foreground mt-2 text-sm">데이터 로딩 중...</p>
</div>
</div>
);
@@ -123,11 +124,11 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
if (error) {
return (
<div className="flex h-full items-center justify-center">
<div className="text-center text-destructive">
<div className="text-destructive text-center">
<p className="text-sm">⚠️ {error}</p>
<button
onClick={loadData}
className="mt-2 rounded-md bg-destructive/10 px-3 py-1 text-xs hover:bg-destructive/20"
className="bg-destructive/10 hover:bg-destructive/20 mt-2 rounded-md px-3 py-1 text-xs"
>
다시 시도
</button>
@@ -139,21 +140,21 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
if (!element?.dataSource?.query) {
return (
<div className="flex h-full items-center justify-center">
<div className="text-center text-muted-foreground">
<p className="text-sm">⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요</p>
<div className="text-muted-foreground text-center">
<p className="text-sm">클릭하여 데이터를 연결하세요</p>
</div>
</div>
);
}
return (
<div className="flex h-full flex-col overflow-hidden bg-background p-4">
<div className="bg-background flex h-full flex-col overflow-hidden p-4">
{/* 헤더 */}
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold text-foreground">고객 클레임/이슈</h3>
<h3 className="text-foreground text-lg font-semibold">고객 클레임/이슈</h3>
<button
onClick={loadData}
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
className="text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full p-1"
title="새로고침"
>
🔄
@@ -205,48 +206,48 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
</div>
{/* 총 건수 */}
<div className="mb-3 text-sm text-muted-foreground">
총 <span className="font-semibold text-foreground">{filteredIssues.length}</span>건
<div className="text-muted-foreground mb-3 text-sm">
총 <span className="text-foreground font-semibold">{filteredIssues.length}</span>건
</div>
{/* 이슈 리스트 */}
<div className="flex-1 space-y-2 overflow-auto">
{filteredIssues.length === 0 ? (
<div className="flex h-full items-center justify-center text-center text-muted-foreground">
<div className="text-muted-foreground flex h-full items-center justify-center text-center">
<p>이슈가 없습니다</p>
</div>
) : (
filteredIssues.map((issue, index) => (
<div
key={issue.id || index}
className="rounded-lg border border-border bg-card p-3 transition-all hover:shadow-md"
className="border-border bg-card rounded-lg border p-3 transition-all hover:shadow-md"
>
<div className="mb-2 flex items-start justify-between">
<div className="flex-1">
<div className="mb-1 flex items-center gap-2">
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityBadge(issue.priority || "")}`}>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityBadge(issue.priority || "")}`}
>
{issue.priority || "보통"}
</span>
<span className={`rounded-full px-2 py-0.5 text-xs font-medium ${getStatusBadge(issue.status || "")}`}>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${getStatusBadge(issue.status || "")}`}
>
{issue.status || "처리중"}
</span>
</div>
<p className="text-sm font-medium text-foreground">
{issue.issue_type || issue.issueType || "기타"}
</p>
<p className="text-foreground text-sm font-medium">{issue.issue_type || issue.issueType || "기타"}</p>
</div>
</div>
<p className="mb-2 text-xs text-muted-foreground">
<p className="text-muted-foreground mb-2 text-xs">
고객: {issue.customer_name || issue.customerName || "-"}
</p>
<p className="text-xs text-muted-foreground line-clamp-2">
{issue.description || "설명 없음"}
</p>
<p className="text-muted-foreground line-clamp-2 text-xs">{issue.description || "설명 없음"}</p>
{(issue.created_at || issue.createdAt) && (
<p className="mt-2 text-xs text-muted-foreground">
<p className="text-muted-foreground mt-2 text-xs">
{new Date(issue.created_at || issue.createdAt || "").toLocaleDateString("ko-KR")}
</p>
)}
@@ -257,4 +258,3 @@ export default function CustomerIssuesWidget({ element }: CustomerIssuesWidgetPr
</div>
);
}