105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* pop-card-list-v2 디자인 모드 미리보기
|
|
*
|
|
* 디자이너 캔버스에서 표시되는 미리보기.
|
|
* CSS Grid 기반 셀 배치를 시각적으로 보여준다.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { LayoutGrid, Package } from "lucide-react";
|
|
import type { PopCardListV2Config } from "../types";
|
|
import { CARD_SCROLL_DIRECTION_LABELS, CARD_SIZE_LABELS } from "../types";
|
|
|
|
interface PopCardListV2PreviewProps {
|
|
config?: PopCardListV2Config;
|
|
}
|
|
|
|
export function PopCardListV2PreviewComponent({ config }: PopCardListV2PreviewProps) {
|
|
const scrollDirection = config?.scrollDirection || "vertical";
|
|
const cardSize = config?.cardSize || "medium";
|
|
const dataSource = config?.dataSource;
|
|
const cardGrid = config?.cardGrid;
|
|
const hasTable = !!dataSource?.tableName;
|
|
const cellCount = cardGrid?.cells?.length || 0;
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col bg-muted/30 p-3">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<LayoutGrid className="h-4 w-4" />
|
|
<span className="text-xs font-medium">카드 목록 V2</span>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<span className="rounded bg-primary/10 px-1.5 py-0.5 text-[9px] text-primary">
|
|
{CARD_SCROLL_DIRECTION_LABELS[scrollDirection]}
|
|
</span>
|
|
<span className="rounded bg-secondary px-1.5 py-0.5 text-[9px] text-secondary-foreground">
|
|
{CARD_SIZE_LABELS[cardSize]}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{!hasTable ? (
|
|
<div className="flex flex-1 items-center justify-center">
|
|
<div className="text-center">
|
|
<Package className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
|
|
<p className="text-xs text-muted-foreground">데이터 소스를 설정하세요</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="mb-2 text-center">
|
|
<span className="rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
|
|
{dataSource!.tableName}
|
|
</span>
|
|
<span className="ml-1 text-[10px] text-muted-foreground/60">
|
|
({cellCount}셀)
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col gap-2">
|
|
{[0, 1].map((cardIdx) => (
|
|
<div key={cardIdx} className="rounded-md border bg-card p-2">
|
|
{cellCount === 0 ? (
|
|
<div className="flex h-12 items-center justify-center">
|
|
<span className="text-[10px] text-muted-foreground">셀을 추가하세요</span>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: cardGrid!.colWidths?.length
|
|
? cardGrid!.colWidths.map((w) => w || "1fr").join(" ")
|
|
: `repeat(${cardGrid!.cols || 1}, 1fr)`,
|
|
gridTemplateRows: `repeat(${cardGrid!.rows || 1}, minmax(16px, auto))`,
|
|
gap: "2px",
|
|
}}
|
|
>
|
|
{cardGrid!.cells.map((cell) => (
|
|
<div
|
|
key={cell.id}
|
|
className="rounded border border-dashed border-border/50 bg-muted/20 px-1 py-0.5"
|
|
style={{
|
|
gridColumn: `${cell.col} / span ${cell.colSpan || 1}`,
|
|
gridRow: `${cell.row} / span ${cell.rowSpan || 1}`,
|
|
}}
|
|
>
|
|
<span className="text-[8px] text-muted-foreground">
|
|
{cell.type}
|
|
{cell.columnName ? `: ${cell.columnName}` : ""}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|