V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다.

2026-01-19 14:52:11 +09:00
parent 901cb04a88
commit 338f3c27fd
116 changed files with 48850 additions and 61 deletions
--- a/frontend/lib/registry/components/v2-section-paper/SectionPaperComponent.tsx
+++ b/frontend/lib/registry/components/v2-section-paper/SectionPaperComponent.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SectionPaperProps {
+  component?: {
+    id: string;
+    componentConfig?: {
+      backgroundColor?: "default" | "muted" | "accent" | "primary" | "custom";
+      customColor?: string;
+      showBorder?: boolean;
+      borderStyle?: "none" | "subtle";
+      padding?: "none" | "sm" | "md" | "lg";
+      roundedCorners?: "none" | "sm" | "md" | "lg";
+      shadow?: "none" | "sm" | "md";
+    };
+    style?: React.CSSProperties;
+  };
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (e?: React.MouseEvent) => void;
+  isSelected?: boolean;
+  isDesignMode?: boolean;
+}
+
+/**
+ * Section Paper 컴포넌트
+ * 배경색만 있는 미니멀한 그룹화 컨테이너 (색종이 컨셉)
+ */
+export function SectionPaperComponent({
+  component,
+  children,
+  className,
+  onClick,
+  isSelected = false,
+  isDesignMode = false,
+}: SectionPaperProps) {
+  const config = component?.componentConfig || {};
+
+  // 배경색 매핑
+  const backgroundColorMap = {
+    default: "bg-muted/40",
+    muted: "bg-muted/50",
+    accent: "bg-accent/30",
+    primary: "bg-primary/10",
+    custom: "",
+  };
+
+  // 패딩 매핑
+  const paddingMap = {
+    none: "p-0",
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-6",
+  };
+
+  // 둥근 모서리 매핑
+  const roundedMap = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+  };
+
+  // 그림자 매핑
+  const shadowMap = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+  };
+
+  const backgroundColor = config.backgroundColor || "default";
+  const padding = config.padding || "md";
+  const rounded = config.roundedCorners || "md";
+  const shadow = config.shadow || "none";
+  const showBorder = config.showBorder !== undefined ? config.showBorder : true;
+  const borderStyle = config.borderStyle || "subtle";
+
+  // 커스텀 배경색 처리
+  const customBgStyle =
+    backgroundColor === "custom" && config.customColor
+      ? { backgroundColor: config.customColor }
+      : {};
+
+  // 선택 상태 테두리 처리 (outline 사용하여 크기 영향 없음)
+  const selectionStyle = isDesignMode && isSelected
+    ? {
+        outline: "2px solid #3b82f6",
+        outlineOffset: "0px", // 크기에 영향 없이 딱 맞게 표시
+      }
+    : {};
+
+  return (
+    <div
+      className={cn(
+        // 기본 스타일
+        "relative transition-colors",
+        
+        // 높이 고정을 위한 overflow 처리
+        "overflow-auto",
+
+        // 배경색
+        backgroundColor !== "custom" && backgroundColorMap[backgroundColor],
+
+        // 패딩
+        paddingMap[padding],
+
+        // 둥근 모서리
+        roundedMap[rounded],
+
+        // 그림자
+        shadowMap[shadow],
+
+        // 테두리 (선택 상태가 아닐 때만)
+        !isSelected && showBorder &&
+          borderStyle === "subtle" &&
+          "border border-border/30",
+
+        // 디자인 모드에서 빈 상태 표시 (테두리만, 최소 높이 제거)
+        isDesignMode && !children && "border-2 border-dashed border-muted-foreground/30",
+
+        className
+      )}
+      style={{
+        // 크기를 100%로 설정하여 부모 크기에 맞춤
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box", // padding과 border를 크기에 포함
+        ...customBgStyle,
+        ...selectionStyle,
+        ...component?.style, // 사용자 설정이 최종 우선순위
+      }}
+      onClick={onClick}
+    >
+      {/* 자식 컴포넌트들 */}
+      {children || (isDesignMode && (
+        <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+          <div className="text-center">
+            <div className="mb-1">📄 Section Paper</div>
+            <div className="text-xs">컴포넌트를 이곳에 배치하세요</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+