vexplor/backend-node/scripts/seed-ui-components.js

const { PrismaClient } = require("@prisma/client");

const prisma = new PrismaClient();

// 실제 UI 구성에 필요한 컴포넌트들
const uiComponents = [
  // === 액션 컴포넌트 ===
  {
    component_code: "button-primary",
    component_name: "기본 버튼",
    component_name_eng: "Primary Button",
    description: "일반적인 액션을 위한 기본 버튼 컴포넌트",
    category: "action",
    icon_name: "MousePointer",
    default_size: { width: 100, height: 36 },
    component_config: {
      type: "button",
      variant: "primary",
      text: "버튼",
      action: "custom",
      style: {
        backgroundColor: "#3b82f6",
        color: "#ffffff",
        borderRadius: "6px",
        fontSize: "14px",
        fontWeight: "500",
      },
    },
    sort_order: 10,
  },
  {
    component_code: "button-secondary",
    component_name: "보조 버튼",
    component_name_eng: "Secondary Button",
    description: "보조 액션을 위한 버튼 컴포넌트",
    category: "action",
    icon_name: "MousePointer",
    default_size: { width: 100, height: 36 },
    component_config: {
      type: "button",
      variant: "secondary",
      text: "취소",
      action: "cancel",
      style: {
        backgroundColor: "#f1f5f9",
        color: "#475569",
        borderRadius: "6px",
        fontSize: "14px",
      },
    },
    sort_order: 11,
  },

  // === 레이아웃 컴포넌트 ===
  {
    component_code: "card-basic",
    component_name: "기본 카드",
    component_name_eng: "Basic Card",
    description: "정보를 그룹화하는 기본 카드 컴포넌트",
    category: "layout",
    icon_name: "Square",
    default_size: { width: 400, height: 300 },
    component_config: {
      type: "card",
      title: "카드 제목",
      showHeader: true,
      showFooter: false,
      style: {
        backgroundColor: "#ffffff",
        border: "1px solid #e5e7eb",
        borderRadius: "8px",
        padding: "16px",
        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
      },
    },
    sort_order: 20,
  },
  {
    component_code: "dashboard-grid",
    component_name: "대시보드 그리드",
    component_name_eng: "Dashboard Grid",
    description: "대시보드를 위한 그리드 레이아웃 컴포넌트",
    category: "layout",
    icon_name: "LayoutGrid",
    default_size: { width: 800, height: 600 },
    component_config: {
      type: "dashboard",
      columns: 3,
      gap: 16,
      items: [],
      style: {
        backgroundColor: "#f8fafc",
        padding: "20px",
        borderRadius: "8px",
      },
    },
    sort_order: 21,
  },
  {
    component_code: "panel-collapsible",
    component_name: "접을 수 있는 패널",
    component_name_eng: "Collapsible Panel",
    description: "접고 펼칠 수 있는 패널 컴포넌트",
    category: "layout",
    icon_name: "ChevronDown",
    default_size: { width: 500, height: 200 },
    component_config: {
      type: "panel",
      title: "패널 제목",
      collapsible: true,
      defaultExpanded: true,
      style: {
        backgroundColor: "#ffffff",
        border: "1px solid #e5e7eb",
        borderRadius: "8px",
      },
    },
    sort_order: 22,
  },

  // === 데이터 표시 컴포넌트 ===
  {
    component_code: "stats-card",
    component_name: "통계 카드",
    component_name_eng: "Statistics Card",
    description: "수치와 통계를 표시하는 카드 컴포넌트",
    category: "data",
    icon_name: "BarChart3",
    default_size: { width: 250, height: 120 },
    component_config: {
      type: "stats",
      title: "총 판매량",
      value: "1,234",
      unit: "개",
      trend: "up",
      percentage: "+12.5%",
      style: {
        backgroundColor: "#ffffff",
        border: "1px solid #e5e7eb",
        borderRadius: "8px",
        padding: "20px",
      },
    },
    sort_order: 30,
  },
  {
    component_code: "progress-bar",
    component_name: "진행률 표시",
    component_name_eng: "Progress Bar",
    description: "작업 진행률을 표시하는 컴포넌트",
    category: "data",
    icon_name: "BarChart2",
    default_size: { width: 300, height: 60 },
    component_config: {
      type: "progress",
      label: "진행률",
      value: 65,
      max: 100,
      showPercentage: true,
      style: {
        backgroundColor: "#f1f5f9",
        borderRadius: "4px",
        height: "8px",
      },
    },
    sort_order: 31,
  },
  {
    component_code: "chart-basic",
    component_name: "기본 차트",
    component_name_eng: "Basic Chart",
    description: "데이터를 시각화하는 기본 차트 컴포넌트",
    category: "data",
    icon_name: "TrendingUp",
    default_size: { width: 500, height: 300 },
    component_config: {
      type: "chart",
      chartType: "line",
      title: "차트 제목",
      data: [],
      options: {
        responsive: true,
        plugins: {
          legend: { position: "top" },
        },
      },
    },
    sort_order: 32,
  },

  // === 네비게이션 컴포넌트 ===
  {
    component_code: "breadcrumb",
    component_name: "브레드크럼",
    component_name_eng: "Breadcrumb",
    description: "현재 위치를 표시하는 네비게이션 컴포넌트",
    category: "navigation",
    icon_name: "ChevronRight",
    default_size: { width: 400, height: 32 },
    component_config: {
      type: "breadcrumb",
      items: [
        { label: "홈", href: "/" },
        { label: "관리자", href: "/admin" },
        { label: "현재 페이지" },
      ],
      separator: ">",
    },
    sort_order: 40,
  },
  {
    component_code: "tabs-horizontal",
    component_name: "가로 탭",
    component_name_eng: "Horizontal Tabs",
    description: "컨텐츠를 탭으로 구분하는 네비게이션 컴포넌트",
    category: "navigation",
    icon_name: "Tabs",
    default_size: { width: 500, height: 300 },
    component_config: {
      type: "tabs",
      orientation: "horizontal",
      tabs: [
        { id: "tab1", label: "탭 1", content: "첫 번째 탭 내용" },
        { id: "tab2", label: "탭 2", content: "두 번째 탭 내용" },
      ],
      defaultTab: "tab1",
    },
    sort_order: 41,
  },
  {
    component_code: "pagination",
    component_name: "페이지네이션",
    component_name_eng: "Pagination",
    description: "페이지를 나눠서 표시하는 네비게이션 컴포넌트",
    category: "navigation",
    icon_name: "ChevronLeft",
    default_size: { width: 300, height: 40 },
    component_config: {
      type: "pagination",
      currentPage: 1,
      totalPages: 10,
      showFirst: true,
      showLast: true,
      showPrevNext: true,
    },
    sort_order: 42,
  },

  // === 피드백 컴포넌트 ===
  {
    component_code: "alert-info",
    component_name: "정보 알림",
    component_name_eng: "Info Alert",
    description: "정보를 사용자에게 알리는 컴포넌트",
    category: "feedback",
    icon_name: "Info",
    default_size: { width: 400, height: 60 },
    component_config: {
      type: "alert",
      variant: "info",
      title: "알림",
      message: "중요한 정보를 확인해주세요.",
      dismissible: true,
      icon: true,
    },
    sort_order: 50,
  },
  {
    component_code: "badge-status",
    component_name: "상태 뱃지",
    component_name_eng: "Status Badge",
    description: "상태나 카테고리를 표시하는 뱃지 컴포넌트",
    category: "feedback",
    icon_name: "Tag",
    default_size: { width: 80, height: 24 },
    component_config: {
      type: "badge",
      text: "활성",
      variant: "success",
      size: "sm",
      style: {
        backgroundColor: "#10b981",
        color: "#ffffff",
        borderRadius: "12px",
        fontSize: "12px",
      },
    },
    sort_order: 51,
  },
  {
    component_code: "loading-spinner",
    component_name: "로딩 스피너",
    component_name_eng: "Loading Spinner",
    description: "로딩 상태를 표시하는 스피너 컴포넌트",
    category: "feedback",
    icon_name: "RefreshCw",
    default_size: { width: 100, height: 100 },
    component_config: {
      type: "loading",
      variant: "spinner",
      size: "md",
      message: "로딩 중...",
      overlay: false,
    },
    sort_order: 52,
  },

  // === 입력 컴포넌트 ===
  {
    component_code: "search-box",
    component_name: "검색 박스",
    component_name_eng: "Search Box",
    description: "검색 기능이 있는 입력 컴포넌트",
    category: "input",
    icon_name: "Search",
    default_size: { width: 300, height: 40 },
    component_config: {
      type: "search",
      placeholder: "검색어를 입력하세요...",
      showButton: true,
      debounce: 500,
      style: {
        borderRadius: "20px",
        border: "1px solid #d1d5db",
      },
    },
    sort_order: 60,
  },
  {
    component_code: "filter-dropdown",
    component_name: "필터 드롭다운",
    component_name_eng: "Filter Dropdown",
    description: "데이터 필터링을 위한 드롭다운 컴포넌트",
    category: "input",
    icon_name: "Filter",
    default_size: { width: 200, height: 40 },
    component_config: {
      type: "filter",
      label: "필터",
      options: [
        { value: "all", label: "전체" },
        { value: "active", label: "활성" },
        { value: "inactive", label: "비활성" },
      ],
      defaultValue: "all",
      multiple: false,
    },
    sort_order: 61,
  },
];

async function seedUIComponents() {
  try {
    console.log("🚀 UI 컴포넌트 시딩 시작...");

    // 기존 데이터 삭제
    console.log("📝 기존 컴포넌트 데이터 삭제 중...");
    await prisma.$executeRaw`DELETE FROM component_standards`;

    // 새 컴포넌트 데이터 삽입
    console.log("📦 새로운 UI 컴포넌트 삽입 중...");

    for (const component of uiComponents) {
      await prisma.component_standards.create({
        data: {
          ...component,
          company_code: "DEFAULT",
          created_by: "system",
          updated_by: "system",
        },
      });
      console.log(`✅ ${component.component_name} 컴포넌트 생성됨`);
    }

    console.log(
      `\n🎉 총 ${uiComponents.length}개의 UI 컴포넌트가 성공적으로 생성되었습니다!`
    );

    // 카테고리별 통계
    const categoryCounts = {};
    uiComponents.forEach((component) => {
      categoryCounts[component.category] =
        (categoryCounts[component.category] || 0) + 1;
    });

    console.log("\n📊 카테고리별 컴포넌트 수:");
    Object.entries(categoryCounts).forEach(([category, count]) => {
      console.log(`   ${category}: ${count}개`);
    });
  } catch (error) {
    console.error("❌ UI 컴포넌트 시딩 실패:", error);
    throw error;
  } finally {
    await prisma.$disconnect();
  }
}

// 실행
if (require.main === module) {
  seedUIComponents()
    .then(() => {
      console.log("✨ UI 컴포넌트 시딩 완료!");
      process.exit(0);
    })
    .catch((error) => {
      console.error("💥 시딩 실패:", error);
      process.exit(1);
    });
}

module.exports = { seedUIComponents, uiComponents };