149 lines
3.8 KiB
TypeScript
149 lines
3.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|
|
|