feat: Implement Mold Management API and Frontend Integration

- Added new API endpoints for mold management, including CRUD operations for molds, mold serials, inspections, and parts.
- Created the `moldRoutes` to handle requests related to mold management.
- Developed the `moldController` to manage the business logic for mold operations, ensuring proper company code filtering for data access.
- Integrated frontend API calls for mold management, allowing users to interact with the mold data seamlessly.
- Introduced a new component for displaying status counts, enhancing the user interface for monitoring mold statuses.

These additions improve the overall functionality and user experience in managing molds within the application.

frontend/lib/registry/components/v2-status-count/StatusCountComponent.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { ComponentRendererProps } from "@/types/component";
+import { StatusCountConfig, StatusCountItem, STATUS_COLOR_MAP } from "./types";
+import { apiClient } from "@/lib/api/client";
+
+export interface StatusCountComponentProps extends ComponentRendererProps {}
+
+export const StatusCountComponent: React.FC<StatusCountComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  formData,
+  ...props
+}) => {
+  const config = (component.componentConfig || {}) as StatusCountConfig;
+  const [counts, setCounts] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState(false);
+
+  const {
+    title,
+    tableName,
+    statusColumn = "status",
+    relationColumn,
+    parentColumn,
+    items = [],
+    cardSize = "md",
+  } = config;
+
+  const parentValue = formData?.[parentColumn || relationColumn];
+
+  const fetchCounts = useCallback(async () => {
+    if (!tableName || !parentValue || isDesignMode) return;
+
+    setLoading(true);
+    try {
+      const res = await apiClient.get(`/table-management/data/${tableName}`, {
+        params: {
+          autoFilter: "true",
+          [relationColumn]: parentValue,
+        },
+      });
+
+      const rows: any[] = res.data?.data || res.data?.rows || res.data || [];
+      const grouped: Record<string, number> = {};
+
+      for (const row of rows) {
+        const val = row[statusColumn] || "UNKNOWN";
+        grouped[val] = (grouped[val] || 0) + 1;
+      }
+
+      setCounts(grouped);
+    } catch (err) {
+      console.error("[v2-status-count] 데이터 조회 실패:", err);
+      setCounts({});
+    } finally {
+      setLoading(false);
+    }
+  }, [tableName, statusColumn, relationColumn, parentValue, isDesignMode]);
+
+  useEffect(() => {
+    fetchCounts();
+  }, [fetchCounts]);
+
+  const getColorClasses = (color: string) => {
+    if (STATUS_COLOR_MAP[color]) return STATUS_COLOR_MAP[color];
+    return { bg: "bg-gray-50", text: "text-gray-600", border: "border-gray-200" };
+  };
+
+  const getCount = (item: StatusCountItem) => {
+    if (item.value === "__TOTAL__") {
+      return Object.values(counts).reduce((sum, c) => sum + c, 0);
+    }
+    const values = item.value.split(",").map((v) => v.trim());
+    return values.reduce((sum, v) => sum + (counts[v] || 0), 0);
+  };
+
+  const sizeClasses = {
+    sm: { card: "px-3 py-2", number: "text-xl", label: "text-[10px]" },
+    md: { card: "px-4 py-3", number: "text-2xl", label: "text-xs" },
+    lg: { card: "px-6 py-4", number: "text-3xl", label: "text-sm" },
+  };
+
+  const sz = sizeClasses[cardSize] || sizeClasses.md;
+
+  if (isDesignMode && !parentValue) {
+    return (
+      <div className="flex h-full w-full flex-col gap-2 rounded-lg border border-dashed border-gray-300 p-3">
+        {title && <div className="text-xs font-medium text-muted-foreground">{title}</div>}
+        <div className="flex flex-1 items-center justify-center gap-2">
+          {(items.length > 0 ? items : [{ label: "상태1", color: "green" }, { label: "상태2", color: "blue" }, { label: "상태3", color: "orange" }]).map(
+            (item: any, i: number) => {
+              const colors = getColorClasses(item.color || "gray");
+              return (
+                <div
+                  key={i}
+                  className={`flex flex-1 flex-col items-center rounded-lg border ${colors.border} ${colors.bg} ${sz.card}`}
+                >
+                  <span className={`font-bold ${colors.text} ${sz.number}`}>0</span>
+                  <span className={`${colors.text} ${sz.label}`}>{item.label}</span>
+                </div>
+              );
+            }
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col gap-2">
+      {title && <div className="text-sm font-medium text-foreground">{title}</div>}
+      <div className="flex flex-1 items-stretch gap-2">
+        {items.map((item, i) => {
+          const colors = getColorClasses(item.color);
+          const count = getCount(item);
+
+          return (
+            <div
+              key={item.value + i}
+              className={`flex flex-1 flex-col items-center justify-center rounded-lg border ${colors.border} ${colors.bg} ${sz.card} transition-shadow hover:shadow-sm`}
+            >
+              <span className={`font-bold ${colors.text} ${sz.number}`}>
+                {loading ? "-" : count}
+              </span>
+              <span className={`mt-0.5 ${colors.text} ${sz.label}`}>{item.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const StatusCountWrapper: React.FC<StatusCountComponentProps> = (props) => {
+  return <StatusCountComponent {...props} />;
+};