[agent-pipeline] pipe-20260315110231-zn60 round-1
This commit is contained in:
DDD1542
parent
c0be2f3528
commit
558acd1f9b
|
|
@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useMemo } from "react";
|
|||
import { useSearchParams } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
|
||||
import { Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, Database, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
|
||||
import ScreenDesigner from "@/components/screen/ScreenDesigner";
|
||||
import TemplateManager from "@/components/screen/TemplateManager";
|
||||
import { ScreenGroupTreeView } from "@/components/screen/ScreenGroupTreeView";
|
||||
|
|
@ -300,25 +300,42 @@ export default function ScreenManagementPage() {
|
|||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
|
||||
{filteredScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={`group rounded-lg border bg-card hover:border-primary/50 hover:shadow-md transition-all cursor-pointer overflow-hidden ${
|
||||
selectedScreen?.screenId === screen.screenId ? "border-primary ring-2 ring-primary/20" : "border-border/50"
|
||||
className={`group rounded-[10px] border p-[14px] cursor-pointer transition-all duration-200 ${
|
||||
selectedScreen?.screenId === screen.screenId
|
||||
? "border-primary/40 bg-card shadow-[0_0_0_1px_hsl(var(--primary)/0.4)]"
|
||||
: "border-border/10 bg-card/80 hover:border-border/20 hover:bg-card hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.5)]"
|
||||
}`}
|
||||
onClick={() => handleScreenSelect(screen)}
|
||||
onDoubleClick={() => handleDesignScreen(screen)}
|
||||
>
|
||||
<div className="h-[100px] bg-gradient-to-br from-muted/30 to-muted/60 flex items-center justify-center">
|
||||
<Monitor className="h-8 w-8 text-muted-foreground/40 group-hover:text-primary/40 transition-colors" />
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<div className="text-sm font-semibold truncate">{screen.screenName}</div>
|
||||
<div className="text-xs font-mono text-muted-foreground truncate mt-0.5">{screen.screenCode}</div>
|
||||
<div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
|
||||
<span>{screen.tableName || "테이블 없음"}</span>
|
||||
{/* 상단: 상태 dot + 이름 + 호버 편집 */}
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="mt-[5px] h-1.5 w-1.5 rounded-full bg-success shadow-[0_0_6px_hsl(var(--success)/0.5)] flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-semibold leading-tight truncate tracking-[-0.2px]">{screen.screenName}</div>
|
||||
<div className="text-[10px] font-mono text-muted-foreground/50 mt-0.5 tracking-[-0.3px] truncate">{screen.screenCode}</div>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5">편집</span>
|
||||
</div>
|
||||
{/* 중단: 메타 정보 */}
|
||||
<div className="flex items-center gap-3 mt-2.5 text-[11px] text-muted-foreground/60">
|
||||
<span className="flex items-center gap-1">
|
||||
<Database className="h-3 w-3 opacity-50" />
|
||||
<span className="font-mono text-[10px] tracking-[-0.3px]">{screen.tableName || "—"}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* 하단: 타입 칩 + 날짜 */}
|
||||
<div className="flex items-center justify-between mt-2.5 pt-2 border-t border-border/5">
|
||||
<span className="text-[10px] font-medium px-[7px] py-[2px] rounded bg-primary/10 text-primary tracking-[-0.2px]">
|
||||
{(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/30 font-mono font-light">
|
||||
{screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ if (typeof document !== "undefined") {
|
|||
style.id = styleId;
|
||||
style.textContent = `
|
||||
@keyframes glow-pulse {
|
||||
from { filter: drop-shadow(0 0 6px hsl(221.2 83.2% 53.3% / 0.4)) drop-shadow(0 0 14px hsl(221.2 83.2% 53.3% / 0.2)); }
|
||||
to { filter: drop-shadow(0 0 10px hsl(221.2 83.2% 53.3% / 0.6)) drop-shadow(0 0 22px hsl(221.2 83.2% 53.3% / 0.3)); }
|
||||
from { filter: drop-shadow(0 0 4px hsl(var(--primary) / 0.25)) drop-shadow(0 0 10px hsl(var(--primary) / 0.12)); }
|
||||
to { filter: drop-shadow(0 0 6px hsl(var(--primary) / 0.35)) drop-shadow(0 0 16px hsl(var(--primary) / 0.18)); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
|
@ -122,42 +122,14 @@ const getScreenTypeIcon = (screenType?: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
// 화면 타입별 색상 (헤더) - 그라데이션
|
||||
const getScreenTypeColor = (screenType?: string, isMain?: boolean) => {
|
||||
if (!isMain) return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80";
|
||||
switch (screenType) {
|
||||
case "grid":
|
||||
return "bg-gradient-to-r from-primary to-primary/80";
|
||||
case "dashboard":
|
||||
return "bg-gradient-to-r from-warning to-warning/80";
|
||||
case "action":
|
||||
return "bg-gradient-to-r from-destructive to-destructive/80";
|
||||
default:
|
||||
return "bg-gradient-to-r from-primary to-primary/80";
|
||||
}
|
||||
// 화면 타입별 색상 (헤더) - 더 이상 그라데이션 미사용
|
||||
const getScreenTypeColor = (_screenType?: string, _isMain?: boolean) => {
|
||||
return "";
|
||||
};
|
||||
|
||||
// 화면 역할(screenRole)에 따른 색상 - 그라데이션
|
||||
const getScreenRoleColor = (screenRole?: string) => {
|
||||
if (!screenRole) return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80";
|
||||
|
||||
// 역할명에 포함된 키워드로 색상 결정
|
||||
const role = screenRole.toLowerCase();
|
||||
|
||||
if (role.includes("그리드") || role.includes("grid") || role.includes("메인") || role.includes("main") || role.includes("list")) {
|
||||
return "bg-gradient-to-r from-primary to-primary/80"; // 메인 그리드
|
||||
}
|
||||
if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) {
|
||||
return "bg-gradient-to-r from-primary to-primary/80"; // 등록 폼
|
||||
}
|
||||
if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) {
|
||||
return "bg-gradient-to-r from-destructive to-destructive/80"; // 액션/이벤트
|
||||
}
|
||||
if (role.includes("상세") || role.includes("detail") || role.includes("popup") || role.includes("팝업")) {
|
||||
return "bg-gradient-to-r from-warning to-warning/80"; // 상세/팝업
|
||||
}
|
||||
|
||||
return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80"; // 기본 회색
|
||||
// 화면 역할(screenRole)에 따른 색상 - 더 이상 그라데이션 미사용
|
||||
const getScreenRoleColor = (_screenRole?: string) => {
|
||||
return "";
|
||||
};
|
||||
|
||||
// 화면 타입별 라벨
|
||||
|
|
@ -176,31 +148,17 @@ const getScreenTypeLabel = (screenType?: string) => {
|
|||
|
||||
// ========== 화면 노드 (상단) - 미리보기 표시 ==========
|
||||
export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
|
||||
const { label, subLabel, isMain, tableName, layoutSummary, isInGroup, isFocused, isFaded, screenRole } = data;
|
||||
const { label, isMain, tableName, layoutSummary, isFocused, isFaded } = data;
|
||||
const screenType = layoutSummary?.screenType || "form";
|
||||
|
||||
// 그룹 모드에서는 screenRole 기반 색상, 그렇지 않으면 screenType 기반 색상
|
||||
// isFocused일 때 색상 활성화, isFaded일 때 회색
|
||||
let headerColor: string;
|
||||
if (isInGroup) {
|
||||
if (isFaded) {
|
||||
headerColor = "bg-gradient-to-r from-muted to-muted/60"; // 흑백 처리 - 더 확실한 회색
|
||||
} else {
|
||||
// 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상
|
||||
headerColor = getScreenRoleColor(screenRole);
|
||||
}
|
||||
} else {
|
||||
headerColor = getScreenTypeColor(screenType, isMain);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex h-[240px] w-[240px] flex-col overflow-hidden rounded-xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-lg transition-all cursor-pointer ${
|
||||
className={`group relative flex h-[240px] w-[240px] flex-col overflow-hidden rounded-[10px] border bg-card/80 backdrop-blur-sm transition-all cursor-pointer ${
|
||||
isFocused
|
||||
? "border-2 border-primary scale-[1.03]"
|
||||
? "border-primary/40 shadow-[0_0_0_1px_hsl(var(--primary)/0.4)] scale-[1.03]"
|
||||
: isFaded
|
||||
? "opacity-40"
|
||||
: "hover:shadow-xl hover:border-border hover:-translate-y-0.5 hover:shadow-[0_0_15px_-3px_hsl(var(--primary)/0.2)]"
|
||||
? "opacity-40 border-border/10 shadow-[0_4px_24px_-8px_rgba(0,0,0,0.5)]"
|
||||
: "border-border/10 shadow-[0_4px_24px_-8px_rgba(0,0,0,0.5)] hover:border-border/20 hover:shadow-[0_4px_24px_-8px_rgba(0,0,0,0.5)] hover:-translate-y-0.5"
|
||||
}`}
|
||||
style={{
|
||||
filter: isFaded
|
||||
|
|
@ -217,48 +175,48 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
|
|||
type="target"
|
||||
position={Position.Left}
|
||||
id="left"
|
||||
className="!h-2.5 !w-2.5 !border-2 !border-background !bg-primary opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
className="!h-2 !w-2 !border-[1.5px] !border-card !bg-muted-foreground/40 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
id="right"
|
||||
className="!h-2.5 !w-2.5 !border-2 !border-background !bg-primary opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
className="!h-2 !w-2 !border-[1.5px] !border-card !bg-muted-foreground/40 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id="bottom"
|
||||
className="!h-2.5 !w-2.5 !border-2 !border-background !bg-primary opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
className="!h-2 !w-2 !border-[1.5px] !border-card !bg-muted-foreground/40 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:shadow-[0_0_6px_hsl(var(--primary)/0.5)]"
|
||||
/>
|
||||
|
||||
{/* 헤더 (컬러) */}
|
||||
<div className={`flex items-center gap-2 px-3 py-2 text-primary-foreground ${headerColor} transition-colors duration-300`}>
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded bg-primary-foreground/20">
|
||||
{/* 헤더: 그라디언트 제거, 모노크롬 */}
|
||||
<div className="flex items-center gap-2 border-b border-border/10 bg-muted/30 px-3 py-2 transition-colors duration-300">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded bg-primary/10 text-primary">
|
||||
<Monitor className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="truncate text-xs font-bold text-primary-foreground">{label}</div>
|
||||
{tableName && <div className="truncate text-[9px] text-primary-foreground/70 font-mono">{tableName}</div>}
|
||||
<div className="truncate text-xs font-bold text-foreground">{label}</div>
|
||||
{tableName && <div className="truncate text-[9px] text-muted-foreground font-mono">{tableName}</div>}
|
||||
</div>
|
||||
{(isMain || isFocused) && <span className="flex h-2 w-2 rounded-full bg-primary-foreground/80 animate-pulse" />}
|
||||
{(isMain || isFocused) && <span className="flex h-2 w-2 rounded-full bg-foreground/8 animate-pulse" />}
|
||||
</div>
|
||||
|
||||
{/* 화면 미리보기 영역 (컴팩트) */}
|
||||
<div className="h-[110px] overflow-hidden bg-gradient-to-b from-muted/30 to-muted/60 p-2.5">
|
||||
<div className="h-[110px] overflow-hidden p-2.5">
|
||||
{layoutSummary ? (
|
||||
<ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center text-muted-foreground">
|
||||
<div className="flex h-full flex-col items-center justify-center text-muted-foreground/40">
|
||||
{getScreenTypeIcon(screenType)}
|
||||
<span className="mt-1 text-[10px]">화면: {label}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 푸터 (타입 + 컴포넌트 수) */}
|
||||
<div className="flex items-center justify-between border-t border-border bg-muted/20 px-3 py-1.5">
|
||||
<span className="text-[9px] font-medium text-muted-foreground">{getScreenTypeLabel(screenType)}</span>
|
||||
{/* 푸터 (타입 칩 + 컴포넌트 수) */}
|
||||
<div className="flex items-center justify-between border-t border-border/10 bg-background/50 px-3 py-1.5">
|
||||
<span className="text-[9px] font-medium px-[7px] py-[2px] rounded bg-primary/10 text-primary">{getScreenTypeLabel(screenType)}</span>
|
||||
<span className="text-[9px] text-muted-foreground">{layoutSummary?.totalComponents ?? 0}개 컴포넌트</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -306,114 +264,114 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
|
|||
}) => {
|
||||
const { totalComponents, widgetCounts } = layoutSummary;
|
||||
|
||||
// 그리드 화면 일러스트
|
||||
// 그리드 화면 일러스트 (모노크롬)
|
||||
if (screenType === "grid") {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3">
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-2 rounded-lg border border-border/5 bg-muted/10 p-3">
|
||||
{/* 상단 툴바 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-16 rounded bg-destructive/80 shadow-sm" />
|
||||
<div className="h-4 w-16 rounded bg-foreground/10" />
|
||||
<div className="flex-1" />
|
||||
<div className="h-4 w-8 rounded bg-primary shadow-sm" />
|
||||
<div className="h-4 w-8 rounded bg-primary shadow-sm" />
|
||||
<div className="h-4 w-8 rounded bg-destructive shadow-sm" />
|
||||
<div className="h-4 w-8 rounded bg-foreground/12" />
|
||||
<div className="h-4 w-8 rounded bg-foreground/12" />
|
||||
<div className="h-4 w-8 rounded bg-foreground/8" />
|
||||
</div>
|
||||
{/* 테이블 헤더 */}
|
||||
<div className="flex gap-1 rounded-t-md bg-primary px-2 py-2 shadow-sm">
|
||||
<div className="flex gap-1 rounded-t-md bg-foreground/12 px-2 py-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-2.5 flex-1 rounded bg-primary-foreground/40" />
|
||||
<div key={i} className="h-2.5 flex-1 rounded bg-foreground/8" />
|
||||
))}
|
||||
</div>
|
||||
{/* 테이블 행들 */}
|
||||
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
|
||||
{[...Array(7)].map((_, i) => (
|
||||
<div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-muted" : "bg-card"}`}>
|
||||
<div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-muted/10" : "bg-card"}`}>
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<div key={j} className="h-2 flex-1 rounded bg-muted-foreground/30" />
|
||||
<div key={j} className="h-2 flex-1 rounded bg-foreground/6" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 페이지네이션 */}
|
||||
<div className="flex items-center justify-center gap-2 pt-1">
|
||||
<div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
|
||||
<div className="h-2.5 w-4 rounded bg-primary" />
|
||||
<div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
|
||||
<div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
|
||||
<div className="h-2.5 w-4 rounded bg-foreground/8" />
|
||||
<div className="h-2.5 w-4 rounded bg-foreground/12" />
|
||||
<div className="h-2.5 w-4 rounded bg-foreground/8" />
|
||||
<div className="h-2.5 w-4 rounded bg-foreground/8" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 폼 화면 일러스트
|
||||
// 폼 화면 일러스트 (모노크롬)
|
||||
if (screenType === "form") {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3 rounded-lg border border-border bg-muted/30 p-3">
|
||||
<div className="flex h-full flex-col gap-3 rounded-lg border border-border/5 bg-muted/10 p-3">
|
||||
{/* 폼 필드들 */}
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className="h-2.5 w-14 rounded bg-muted-foreground/50" />
|
||||
<div className="h-5 flex-1 rounded-md border border-border bg-card shadow-sm" />
|
||||
<div className="h-2.5 w-14 rounded bg-foreground/8" />
|
||||
<div className="h-5 flex-1 rounded-md border border-border/5 bg-card" />
|
||||
</div>
|
||||
))}
|
||||
{/* 버튼 영역 */}
|
||||
<div className="mt-auto flex justify-end gap-2 border-t border-border pt-3">
|
||||
<div className="h-5 w-14 rounded-md bg-muted-foreground/40 shadow-sm" />
|
||||
<div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
|
||||
<div className="mt-auto flex justify-end gap-2 border-t border-border/5 pt-3">
|
||||
<div className="h-5 w-14 rounded-md bg-foreground/8" />
|
||||
<div className="h-5 w-14 rounded-md bg-foreground/12" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 대시보드 화면 일러스트
|
||||
// 대시보드 화면 일러스트 (모노크롬)
|
||||
if (screenType === "dashboard") {
|
||||
return (
|
||||
<div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-3">
|
||||
<div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-border/5 bg-muted/10 p-3">
|
||||
{/* 카드/차트들 */}
|
||||
<div className="rounded-lg bg-success/20 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-success" />
|
||||
<div className="h-10 rounded-md bg-success/60" />
|
||||
<div className="rounded-lg bg-foreground/5 p-2">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-foreground/10" />
|
||||
<div className="h-10 rounded-md bg-foreground/8" />
|
||||
</div>
|
||||
<div className="rounded-lg bg-warning/20 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-warning" />
|
||||
<div className="h-10 rounded-md bg-warning/60" />
|
||||
</div>
|
||||
<div className="col-span-2 rounded-lg bg-primary/10 p-2 shadow-sm">
|
||||
<div className="mb-2 h-2.5 w-12 rounded bg-primary/70" />
|
||||
<div className="rounded-lg bg-foreground/5 p-2">
|
||||
<div className="mb-2 h-2.5 w-10 rounded bg-foreground/10" />
|
||||
<div className="h-10 rounded-md bg-foreground/8" />
|
||||
</div>
|
||||
<div className="col-span-2 rounded-lg bg-foreground/5 p-2">
|
||||
<div className="mb-2 h-2.5 w-12 rounded bg-foreground/10" />
|
||||
<div className="flex h-14 items-end gap-1">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 rounded-t bg-primary/70"
|
||||
className="flex-1 rounded-t bg-foreground/10"
|
||||
style={{ height: `${25 + Math.random() * 75}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 액션 화면 일러스트 (버튼 중심)
|
||||
// 액션 화면 일러스트 (모노크롬)
|
||||
if (screenType === "action") {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-border bg-muted/30 p-3">
|
||||
<div className="rounded-full bg-muted p-4 text-muted-foreground">
|
||||
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-border/5 bg-muted/10 p-3">
|
||||
<div className="rounded-full bg-foreground/5 p-4 text-muted-foreground">
|
||||
<MousePointer2 className="h-10 w-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="h-7 w-16 rounded-md bg-primary shadow-sm" />
|
||||
<div className="h-7 w-16 rounded-md bg-muted-foreground/40 shadow-sm" />
|
||||
</div>
|
||||
<div className="h-7 w-16 rounded-md bg-foreground/12" />
|
||||
<div className="h-7 w-16 rounded-md bg-foreground/8" />
|
||||
</div>
|
||||
<div className="text-xs font-medium text-muted-foreground">액션 화면</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 기본 (알 수 없는 타입)
|
||||
// 기본 (알 수 없는 타입, 모노크롬)
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-border bg-muted/30 text-muted-foreground">
|
||||
<div className="rounded-full bg-muted p-4">
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-border/5 bg-muted/10 text-muted-foreground">
|
||||
<div className="rounded-full bg-foreground/5 p-4">
|
||||
{getScreenTypeIcon(screenType)}
|
||||
</div>
|
||||
<span className="text-sm font-medium">{totalComponents}개 컴포넌트</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue