chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

리스트 위젯 컨텐츠가 렌더링이 안되는 문제 해결

Browse Source
This commit is contained in:
dohyeons
2025-10-31 12:10:46 +09:00
parent b54413978b
commit 085679a95a
4 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/components/admin/dashboard/widgets/ListWidget.tsx
View File

@@ -39,7 +39,9 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
// 데이터 로드
useEffect(() => {
const loadData = async () => {
if (!element.dataSource || (!element.dataSource.query && !element.dataSource.endpoint)) return;
if (!element.dataSource || (!element.dataSource.query && !element.dataSource.endpoint)) {
return;
}
setIsLoading(true);
setError(null);
@@ -168,8 +170,8 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
return (
<div className="flex h-full w-full items-center justify-center">
<div className="text-center">
<div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
<div className="text-sm text-foreground">데이터 로딩 중...</div>
<div className="border-primary mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
<div className="text-foreground text-sm">데이터 로딩 중...</div>
</div>
</div>
);
@@ -181,8 +183,8 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
<div className="flex h-full w-full items-center justify-center">
<div className="text-center">
<div className="mb-2 text-2xl">⚠️</div>
<div className="text-sm font-medium text-destructive">오류 발생</div>
<div className="mt-1 text-xs text-muted-foreground">{error}</div>
<div className="text-destructive text-sm font-medium">오류 발생</div>
<div className="text-muted-foreground mt-1 text-xs">{error}</div>
</div>
</div>
);
@@ -194,8 +196,8 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
<div className="flex h-full w-full flex-col items-center justify-center gap-4 p-4">
<div className="text-center">
<div className="mb-2 text-4xl">📋</div>
<div className="text-sm font-medium text-foreground">리스트를 설정하세요</div>
<div className="mt-1 text-xs text-muted-foreground">⚙️ 버튼을 클릭하여 데이터 소스와 컬럼을 설정해주세요</div>
<div className="text-foreground text-sm font-medium">리스트를 설정하세요</div>
<div className="text-muted-foreground mt-1 text-xs">⚙️ 버튼을 클릭하여 데이터 소스와 컬럼을 설정해주세요</div>
</div>
</div>
);
@@ -222,7 +224,7 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
<div className="flex h-full w-full flex-col p-4">
{/* 제목 - 항상 표시 */}
<div className="mb-4">
<h3 className="text-sm font-semibold text-foreground">{element.customTitle || element.title}</h3>
<h3 className="text-foreground text-sm font-semibold">{element.customTitle || element.title}</h3>
</div>
{/* 테이블 뷰 */}
@@ -251,7 +253,7 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
<TableRow>
<TableCell
colSpan={displayColumns.filter((col) => col.visible).length}
className="text-center text-muted-foreground"
className="text-muted-foreground text-center"
>
데이터가 없습니다
</TableCell>
@@ -281,7 +283,7 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
{config.viewMode === "card" && (
<div className="flex-1 overflow-auto">
{paginatedRows.length === 0 ? (
<div className="flex h-full items-center justify-center text-muted-foreground">데이터가 없습니다</div>
<div className="text-muted-foreground flex h-full items-center justify-center">데이터가 없습니다</div>
) : (
<div
className={`grid gap-4 ${config.compactMode ? "text-xs" : "text-sm"}`}
@@ -296,9 +298,9 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
.filter((col) => col.visible)
.map((col) => (
<div key={col.id}>
<div className="text-xs font-medium text-muted-foreground">{col.label || col.name}</div>
<div className="text-muted-foreground text-xs font-medium">{col.label || col.name}</div>
<div
className={`font-medium text-foreground ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : ""}`}
className={`text-foreground font-medium ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : ""}`}
>
{String(row[col.dataKey || col.field] ?? "")}
</div>