913 lines
27 KiB
TypeScript
913 lines
27 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo, useState, useCallback, useRef } from "react";
|
|
import { useDrag, useDrop } from "react-dnd";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
PopLayoutDataV4,
|
|
PopContainerV4,
|
|
PopComponentDefinitionV4,
|
|
PopResponsiveRuleV4,
|
|
PopSizeConstraintV4,
|
|
PopComponentType,
|
|
} from "../types/pop-layout";
|
|
|
|
// 드래그 아이템 타입
|
|
const DND_COMPONENT_REORDER = "POP_COMPONENT_REORDER";
|
|
|
|
interface DragItem {
|
|
type: string;
|
|
componentId: string;
|
|
containerId: string;
|
|
index: number;
|
|
}
|
|
|
|
// ========================================
|
|
// Props 정의
|
|
// ========================================
|
|
|
|
interface PopFlexRendererProps {
|
|
/** v4 레이아웃 데이터 */
|
|
layout: PopLayoutDataV4;
|
|
/** 현재 뷰포트 너비 (반응형 규칙 적용용) */
|
|
viewportWidth: number;
|
|
/** 현재 뷰포트 모드 (오버라이드 병합용) */
|
|
currentMode?: "mobile_portrait" | "mobile_landscape" | "tablet_portrait" | "tablet_landscape";
|
|
/** 임시 레이아웃 (고정 전 미리보기) */
|
|
tempLayout?: PopContainerV4 | null;
|
|
/** 디자인 모드 여부 */
|
|
isDesignMode?: boolean;
|
|
/** 선택된 컴포넌트 ID */
|
|
selectedComponentId?: string | null;
|
|
/** 컴포넌트 클릭 */
|
|
onComponentClick?: (componentId: string) => void;
|
|
/** 컨테이너 클릭 */
|
|
onContainerClick?: (containerId: string) => void;
|
|
/** 배경 클릭 */
|
|
onBackgroundClick?: () => void;
|
|
/** 컴포넌트 크기 변경 */
|
|
onComponentResize?: (componentId: string, size: Partial<PopSizeConstraintV4>) => void;
|
|
/** 컴포넌트 순서 변경 */
|
|
onReorderComponent?: (containerId: string, fromIndex: number, toIndex: number) => void;
|
|
/** 추가 className */
|
|
className?: string;
|
|
}
|
|
|
|
// ========================================
|
|
// 컴포넌트 타입별 라벨
|
|
// ========================================
|
|
const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
|
|
"pop-field": "필드",
|
|
"pop-button": "버튼",
|
|
"pop-list": "리스트",
|
|
"pop-indicator": "인디케이터",
|
|
"pop-scanner": "스캐너",
|
|
"pop-numpad": "숫자패드",
|
|
"pop-spacer": "스페이서",
|
|
"pop-break": "줄바꿈",
|
|
};
|
|
|
|
// ========================================
|
|
// v4 Flexbox 렌더러
|
|
//
|
|
// 핵심 역할:
|
|
// - v4 레이아웃을 Flexbox CSS로 렌더링
|
|
// - 제약조건(fill/fixed/hug) 기반 크기 계산
|
|
// - 반응형 규칙(breakpoint) 자동 적용
|
|
// ========================================
|
|
|
|
export function PopFlexRenderer({
|
|
layout,
|
|
viewportWidth,
|
|
currentMode = "tablet_landscape",
|
|
tempLayout,
|
|
isDesignMode = false,
|
|
selectedComponentId,
|
|
onComponentClick,
|
|
onContainerClick,
|
|
onBackgroundClick,
|
|
onComponentResize,
|
|
onReorderComponent,
|
|
className,
|
|
}: PopFlexRendererProps) {
|
|
const { root, components, settings, overrides } = layout;
|
|
|
|
// 오버라이드 병합 로직 (컨테이너) 🔥
|
|
const getMergedRoot = (): PopContainerV4 => {
|
|
// 1. 임시 레이아웃이 있으면 최우선 (고정 전 미리보기)
|
|
if (tempLayout) {
|
|
return tempLayout;
|
|
}
|
|
|
|
// 2. 기본 모드면 root 그대로 반환
|
|
if (currentMode === "tablet_landscape") {
|
|
return root;
|
|
}
|
|
|
|
// 3. 다른 모드면 오버라이드 병합
|
|
const override = overrides?.[currentMode]?.containers?.root;
|
|
if (override) {
|
|
return {
|
|
...root,
|
|
...override, // 오버라이드 속성으로 덮어쓰기
|
|
};
|
|
}
|
|
|
|
// 4. 오버라이드 없으면 기본값
|
|
return root;
|
|
};
|
|
|
|
// visibility 체크 함수 🆕
|
|
const isComponentVisible = (component: PopComponentDefinitionV4): boolean => {
|
|
if (!component.visibility) return true; // 기본값: 표시
|
|
const modeVisibility = component.visibility[currentMode as keyof typeof component.visibility];
|
|
return modeVisibility !== false; // undefined도 true로 취급
|
|
};
|
|
|
|
// 컴포넌트 오버라이드 병합 🆕
|
|
const getMergedComponent = (baseComponent: PopComponentDefinitionV4): PopComponentDefinitionV4 => {
|
|
if (currentMode === "tablet_landscape") return baseComponent;
|
|
|
|
const componentOverride = overrides?.[currentMode]?.components?.[baseComponent.id];
|
|
if (!componentOverride) return baseComponent;
|
|
|
|
// 깊은 병합 (config, size)
|
|
return {
|
|
...baseComponent,
|
|
...componentOverride,
|
|
size: { ...baseComponent.size, ...componentOverride.size },
|
|
config: { ...baseComponent.config, ...componentOverride.config },
|
|
};
|
|
};
|
|
|
|
const effectiveRoot = getMergedRoot();
|
|
|
|
// 빈 상태는 PopCanvasV4에서 표시하므로 여기서는 투명 배경만 렌더링
|
|
if (effectiveRoot.children.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn("h-full w-full", className)}
|
|
onClick={onBackgroundClick}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn("relative min-h-full w-full bg-white", className)}
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
onBackgroundClick?.();
|
|
}
|
|
}}
|
|
>
|
|
{/* 루트 컨테이너 렌더링 (병합된 레이아웃 사용) */}
|
|
<ContainerRenderer
|
|
container={effectiveRoot}
|
|
components={components}
|
|
viewportWidth={viewportWidth}
|
|
settings={settings}
|
|
currentMode={currentMode}
|
|
overrides={overrides}
|
|
isDesignMode={isDesignMode}
|
|
selectedComponentId={selectedComponentId}
|
|
onComponentClick={onComponentClick}
|
|
onContainerClick={onContainerClick}
|
|
onComponentResize={onComponentResize}
|
|
onReorderComponent={onReorderComponent}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 컨테이너 렌더러 (재귀)
|
|
// ========================================
|
|
|
|
interface ContainerRendererProps {
|
|
container: PopContainerV4;
|
|
components: Record<string, PopComponentDefinitionV4>;
|
|
viewportWidth: number;
|
|
settings: PopLayoutDataV4["settings"];
|
|
currentMode: string;
|
|
overrides: PopLayoutDataV4["overrides"];
|
|
isDesignMode?: boolean;
|
|
selectedComponentId?: string | null;
|
|
onComponentClick?: (componentId: string) => void;
|
|
onContainerClick?: (containerId: string) => void;
|
|
onComponentResize?: (componentId: string, size: Partial<PopSizeConstraintV4>) => void;
|
|
onReorderComponent?: (containerId: string, fromIndex: number, toIndex: number) => void;
|
|
depth?: number;
|
|
}
|
|
|
|
function ContainerRenderer({
|
|
container,
|
|
components,
|
|
viewportWidth,
|
|
settings,
|
|
currentMode,
|
|
overrides,
|
|
isDesignMode = false,
|
|
selectedComponentId,
|
|
onComponentClick,
|
|
onContainerClick,
|
|
onComponentResize,
|
|
onReorderComponent,
|
|
depth = 0,
|
|
}: ContainerRendererProps) {
|
|
// visibility 체크 함수
|
|
const isComponentVisible = (component: PopComponentDefinitionV4): boolean => {
|
|
if (!component.visibility) return true; // 기본값: 표시
|
|
const modeVisibility = component.visibility[currentMode as keyof typeof component.visibility];
|
|
return modeVisibility !== false; // undefined도 true로 취급
|
|
};
|
|
|
|
// 컴포넌트 오버라이드 병합
|
|
const getMergedComponent = (baseComponent: PopComponentDefinitionV4): PopComponentDefinitionV4 => {
|
|
if (currentMode === "tablet_landscape") return baseComponent;
|
|
|
|
const componentOverride = overrides?.[currentMode as keyof typeof overrides]?.components?.[baseComponent.id];
|
|
if (!componentOverride) return baseComponent;
|
|
|
|
// 깊은 병합 (config, size)
|
|
return {
|
|
...baseComponent,
|
|
...componentOverride,
|
|
size: { ...baseComponent.size, ...componentOverride.size },
|
|
config: { ...baseComponent.config, ...componentOverride.config },
|
|
};
|
|
};
|
|
// 반응형 규칙 적용
|
|
const effectiveContainer = useMemo(() => {
|
|
return applyResponsiveRules(container, viewportWidth);
|
|
}, [container, viewportWidth]);
|
|
|
|
// 비율 스케일 계산 (디자인 모드에서는 1, 뷰어에서는 실제 비율 적용)
|
|
const scale = isDesignMode ? 1 : viewportWidth / BASE_VIEWPORT_WIDTH;
|
|
|
|
// Flexbox 스타일 계산 (useMemo는 조건문 전에 호출해야 함)
|
|
const containerStyle = useMemo((): React.CSSProperties => {
|
|
const { direction, wrap, gap, alignItems, justifyContent, padding } = effectiveContainer;
|
|
|
|
// gap과 padding도 스케일 적용
|
|
const scaledGap = gap * scale;
|
|
const scaledPadding = padding ? padding * scale : undefined;
|
|
|
|
return {
|
|
display: "flex",
|
|
flexDirection: direction === "horizontal" ? "row" : "column",
|
|
flexWrap: wrap ? "wrap" : "nowrap",
|
|
gap: `${scaledGap}px`,
|
|
alignItems: mapAlignment(alignItems),
|
|
justifyContent: mapJustify(justifyContent),
|
|
padding: scaledPadding ? `${scaledPadding}px` : undefined,
|
|
width: "100%",
|
|
minHeight: depth === 0 ? "100%" : undefined,
|
|
};
|
|
}, [effectiveContainer, depth, scale]);
|
|
|
|
// 숨김 처리
|
|
if (effectiveContainer.hidden) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative",
|
|
isDesignMode && depth > 0 && "border border-dashed border-gray-300 rounded"
|
|
)}
|
|
style={containerStyle}
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
onContainerClick?.(container.id);
|
|
}
|
|
}}
|
|
>
|
|
{effectiveContainer.children.map((child, index) => {
|
|
// 중첩 컨테이너인 경우
|
|
if (typeof child === "object") {
|
|
return (
|
|
<ContainerRenderer
|
|
key={child.id}
|
|
container={child}
|
|
components={components}
|
|
viewportWidth={viewportWidth}
|
|
settings={settings}
|
|
currentMode={currentMode}
|
|
overrides={overrides}
|
|
isDesignMode={isDesignMode}
|
|
selectedComponentId={selectedComponentId}
|
|
onComponentClick={onComponentClick}
|
|
onContainerClick={onContainerClick}
|
|
onComponentResize={onComponentResize}
|
|
onReorderComponent={onReorderComponent}
|
|
depth={depth + 1}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 컴포넌트 ID인 경우
|
|
const componentId = child;
|
|
const baseComponent = components[componentId];
|
|
if (!baseComponent) return null;
|
|
|
|
// visibility 체크 (모드별 숨김)
|
|
if (!isComponentVisible(baseComponent)) {
|
|
return null;
|
|
}
|
|
|
|
// 반응형 숨김 처리 (픽셀 기반)
|
|
if (baseComponent.hideBelow && viewportWidth < baseComponent.hideBelow) {
|
|
return null;
|
|
}
|
|
|
|
// 오버라이드 병합
|
|
const mergedComponent = getMergedComponent(baseComponent);
|
|
|
|
// pop-break 특수 처리
|
|
if (mergedComponent.type === "pop-break") {
|
|
return (
|
|
<div
|
|
key={componentId}
|
|
className={cn(
|
|
"w-full",
|
|
isDesignMode
|
|
? "h-4 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400"
|
|
: "h-0"
|
|
)}
|
|
style={{ flexBasis: "100%" }}
|
|
onClick={() => onComponentClick?.(componentId)}
|
|
>
|
|
{isDesignMode && (
|
|
<span className="text-xs text-gray-400">줄바꿈</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DraggableComponentWrapper
|
|
key={componentId}
|
|
componentId={componentId}
|
|
containerId={container.id}
|
|
index={index}
|
|
isDesignMode={isDesignMode}
|
|
onReorder={onReorderComponent}
|
|
>
|
|
<ComponentRendererV4
|
|
componentId={componentId}
|
|
component={mergedComponent}
|
|
settings={settings}
|
|
viewportWidth={viewportWidth}
|
|
isDesignMode={isDesignMode}
|
|
isSelected={selectedComponentId === componentId}
|
|
onClick={() => onComponentClick?.(componentId)}
|
|
onResize={onComponentResize}
|
|
/>
|
|
</DraggableComponentWrapper>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 드래그 가능한 컴포넌트 래퍼
|
|
// ========================================
|
|
|
|
interface DraggableComponentWrapperProps {
|
|
componentId: string;
|
|
containerId: string;
|
|
index: number;
|
|
isDesignMode: boolean;
|
|
onReorder?: (containerId: string, fromIndex: number, toIndex: number) => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function DraggableComponentWrapper({
|
|
componentId,
|
|
containerId,
|
|
index,
|
|
isDesignMode,
|
|
onReorder,
|
|
children,
|
|
}: DraggableComponentWrapperProps) {
|
|
// 디자인 모드가 아니면 그냥 children 반환 (훅 호출 전에 체크)
|
|
// DndProvider가 없는 환경에서 useDrag/useDrop 훅 호출 방지
|
|
if (!isDesignMode) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
// 디자인 모드일 때만 드래그 기능 활성화
|
|
return (
|
|
<DraggableComponentWrapperInner
|
|
componentId={componentId}
|
|
containerId={containerId}
|
|
index={index}
|
|
onReorder={onReorder}
|
|
>
|
|
{children}
|
|
</DraggableComponentWrapperInner>
|
|
);
|
|
}
|
|
|
|
// 디자인 모드 전용 내부 컴포넌트 (DndProvider 필요)
|
|
function DraggableComponentWrapperInner({
|
|
componentId,
|
|
containerId,
|
|
index,
|
|
onReorder,
|
|
children,
|
|
}: Omit<DraggableComponentWrapperProps, "isDesignMode">) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const [{ isDragging }, drag] = useDrag({
|
|
type: DND_COMPONENT_REORDER,
|
|
item: (): DragItem => ({
|
|
type: DND_COMPONENT_REORDER,
|
|
componentId,
|
|
containerId,
|
|
index,
|
|
}),
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
});
|
|
|
|
const [{ isOver, canDrop }, drop] = useDrop({
|
|
accept: DND_COMPONENT_REORDER,
|
|
canDrop: (item: DragItem) => {
|
|
// 같은 컨테이너 내에서만 이동 가능 (일단은)
|
|
return item.containerId === containerId && item.index !== index;
|
|
},
|
|
drop: (item: DragItem) => {
|
|
if (item.index !== index && onReorder) {
|
|
onReorder(containerId, item.index, index);
|
|
}
|
|
},
|
|
collect: (monitor) => ({
|
|
isOver: monitor.isOver(),
|
|
canDrop: monitor.canDrop(),
|
|
}),
|
|
});
|
|
|
|
// drag와 drop 합치기
|
|
drag(drop(ref));
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"relative",
|
|
isDragging && "opacity-50",
|
|
isOver && canDrop && "ring-2 ring-blue-500 ring-offset-2"
|
|
)}
|
|
style={{ cursor: isDragging ? "grabbing" : "grab" }}
|
|
>
|
|
{children}
|
|
{/* 드롭 인디케이터 */}
|
|
{isOver && canDrop && (
|
|
<div className="absolute inset-0 bg-blue-500/10 pointer-events-none rounded" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// v4 컴포넌트 렌더러 (리사이즈 핸들 포함)
|
|
// ========================================
|
|
|
|
interface ComponentRendererV4Props {
|
|
componentId: string;
|
|
component: PopComponentDefinitionV4;
|
|
settings: PopLayoutDataV4["settings"];
|
|
viewportWidth: number;
|
|
isDesignMode?: boolean;
|
|
isSelected?: boolean;
|
|
onClick?: () => void;
|
|
onResize?: (componentId: string, size: Partial<PopSizeConstraintV4>) => void;
|
|
}
|
|
|
|
function ComponentRendererV4({
|
|
componentId,
|
|
component,
|
|
settings,
|
|
viewportWidth,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
onClick,
|
|
onResize,
|
|
}: ComponentRendererV4Props) {
|
|
const { size, alignSelf, type, label } = component;
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 비율 스케일 계산 (디자인 모드에서는 1, 뷰어에서는 실제 비율 적용)
|
|
const scale = isDesignMode ? 1 : viewportWidth / BASE_VIEWPORT_WIDTH;
|
|
|
|
// 리사이즈 상태
|
|
const [isResizing, setIsResizing] = useState(false);
|
|
const [resizeDirection, setResizeDirection] = useState<"width" | "height" | "both" | null>(null);
|
|
const resizeStartRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
|
|
|
|
// 크기 스타일 계산 (스케일 적용)
|
|
const sizeStyle = useMemo((): React.CSSProperties => {
|
|
return calculateSizeStyle(size, settings, scale);
|
|
}, [size, settings, scale]);
|
|
|
|
// alignSelf 스타일
|
|
const alignStyle: React.CSSProperties = alignSelf
|
|
? { alignSelf: mapAlignment(alignSelf) }
|
|
: {};
|
|
|
|
const typeLabel = COMPONENT_TYPE_LABELS[type] || type;
|
|
|
|
// 리사이즈 시작
|
|
const handleResizeStart = useCallback((
|
|
e: React.MouseEvent,
|
|
direction: "width" | "height" | "both"
|
|
) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
if (!containerRef.current) return;
|
|
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
resizeStartRef.current = {
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
};
|
|
setIsResizing(true);
|
|
setResizeDirection(direction);
|
|
}, []);
|
|
|
|
// 리사이즈 중
|
|
useCallback((e: MouseEvent) => {
|
|
if (!isResizing || !resizeStartRef.current || !onResize) return;
|
|
|
|
const deltaX = e.clientX - resizeStartRef.current.x;
|
|
const deltaY = e.clientY - resizeStartRef.current.y;
|
|
|
|
const updates: Partial<PopSizeConstraintV4> = {};
|
|
|
|
if (resizeDirection === "width" || resizeDirection === "both") {
|
|
const newWidth = Math.max(48, Math.round(resizeStartRef.current.width + deltaX));
|
|
updates.width = "fixed";
|
|
updates.fixedWidth = newWidth;
|
|
}
|
|
|
|
if (resizeDirection === "height" || resizeDirection === "both") {
|
|
const newHeight = Math.max(settings.touchTargetMin, Math.round(resizeStartRef.current.height + deltaY));
|
|
updates.height = "fixed";
|
|
updates.fixedHeight = newHeight;
|
|
}
|
|
|
|
onResize(componentId, updates);
|
|
}, [isResizing, resizeDirection, componentId, onResize, settings.touchTargetMin]);
|
|
|
|
// 리사이즈 종료 및 이벤트 등록
|
|
React.useEffect(() => {
|
|
if (!isResizing) return;
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!resizeStartRef.current || !onResize) return;
|
|
|
|
const deltaX = e.clientX - resizeStartRef.current.x;
|
|
const deltaY = e.clientY - resizeStartRef.current.y;
|
|
|
|
const updates: Partial<PopSizeConstraintV4> = {};
|
|
|
|
if (resizeDirection === "width" || resizeDirection === "both") {
|
|
const newWidth = Math.max(48, Math.round(resizeStartRef.current.width + deltaX));
|
|
updates.width = "fixed";
|
|
updates.fixedWidth = newWidth;
|
|
}
|
|
|
|
if (resizeDirection === "height" || resizeDirection === "both") {
|
|
const newHeight = Math.max(settings.touchTargetMin, Math.round(resizeStartRef.current.height + deltaY));
|
|
updates.height = "fixed";
|
|
updates.fixedHeight = newHeight;
|
|
}
|
|
|
|
onResize(componentId, updates);
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
setIsResizing(false);
|
|
setResizeDirection(null);
|
|
resizeStartRef.current = null;
|
|
};
|
|
|
|
window.addEventListener("mousemove", handleMouseMove);
|
|
window.addEventListener("mouseup", handleMouseUp);
|
|
|
|
return () => {
|
|
window.removeEventListener("mousemove", handleMouseMove);
|
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
};
|
|
}, [isResizing, resizeDirection, componentId, onResize, settings.touchTargetMin]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className={cn(
|
|
"relative flex flex-col overflow-visible rounded-lg border-2 bg-white transition-all",
|
|
isSelected
|
|
? "border-primary ring-2 ring-primary/30 z-10"
|
|
: "border-gray-200",
|
|
isDesignMode && !isResizing && "cursor-pointer hover:border-gray-300",
|
|
isResizing && "select-none"
|
|
)}
|
|
style={{
|
|
...sizeStyle,
|
|
...alignStyle,
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (!isResizing) {
|
|
onClick?.();
|
|
}
|
|
}}
|
|
>
|
|
{/* 컴포넌트 라벨 (디자인 모드에서만) */}
|
|
{isDesignMode && (
|
|
<div
|
|
className={cn(
|
|
"flex h-5 shrink-0 items-center border-b px-2",
|
|
isSelected ? "bg-primary/10" : "bg-gray-50"
|
|
)}
|
|
>
|
|
<span className="text-[10px] font-medium text-gray-600">
|
|
{label || typeLabel}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 컴포넌트 내용 */}
|
|
<div className="flex flex-1 items-center justify-center p-2 overflow-hidden">
|
|
{renderComponentContent(component, isDesignMode, settings)}
|
|
</div>
|
|
|
|
{/* 리사이즈 핸들 (디자인 모드 + 선택 시에만) */}
|
|
{isDesignMode && isSelected && onResize && (
|
|
<>
|
|
{/* 오른쪽 핸들 (너비 조정) */}
|
|
<div
|
|
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-3 h-8 bg-primary rounded cursor-ew-resize hover:bg-primary/80 flex items-center justify-center z-20"
|
|
onMouseDown={(e) => handleResizeStart(e, "width")}
|
|
title="너비 조정"
|
|
>
|
|
<div className="w-0.5 h-4 bg-white rounded" />
|
|
</div>
|
|
|
|
{/* 아래쪽 핸들 (높이 조정) */}
|
|
<div
|
|
className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 h-3 w-8 bg-primary rounded cursor-ns-resize hover:bg-primary/80 flex items-center justify-center z-20"
|
|
onMouseDown={(e) => handleResizeStart(e, "height")}
|
|
title="높이 조정"
|
|
>
|
|
<div className="h-0.5 w-4 bg-white rounded" />
|
|
</div>
|
|
|
|
{/* 오른쪽 아래 핸들 (너비 + 높이 동시 조정) */}
|
|
<div
|
|
className="absolute right-0 bottom-0 translate-x-1/2 translate-y-1/2 w-4 h-4 bg-primary rounded cursor-nwse-resize hover:bg-primary/80 flex items-center justify-center z-20"
|
|
onMouseDown={(e) => handleResizeStart(e, "both")}
|
|
title="크기 조정"
|
|
>
|
|
<div className="w-2 h-2 border-r-2 border-b-2 border-white" />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========================================
|
|
// 헬퍼 함수들
|
|
// ========================================
|
|
|
|
/**
|
|
* 반응형 규칙 적용
|
|
*/
|
|
function applyResponsiveRules(
|
|
container: PopContainerV4,
|
|
viewportWidth: number
|
|
): PopContainerV4 & { hidden?: boolean } {
|
|
if (!container.responsive || container.responsive.length === 0) {
|
|
return container;
|
|
}
|
|
|
|
// 현재 뷰포트에 적용되는 규칙 찾기 (가장 큰 breakpoint부터)
|
|
const sortedRules = [...container.responsive].sort((a, b) => b.breakpoint - a.breakpoint);
|
|
const applicableRule = sortedRules.find((rule) => viewportWidth <= rule.breakpoint);
|
|
|
|
if (!applicableRule) {
|
|
return container;
|
|
}
|
|
|
|
return {
|
|
...container,
|
|
direction: applicableRule.direction ?? container.direction,
|
|
gap: applicableRule.gap ?? container.gap,
|
|
hidden: applicableRule.hidden ?? false,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 기준 뷰포트 너비 (10인치 태블릿 가로)
|
|
* 이 크기를 기준으로 컴포넌트 크기가 비율 조정됨
|
|
*/
|
|
const BASE_VIEWPORT_WIDTH = 1024;
|
|
|
|
/**
|
|
* 크기 제약 → CSS 스타일 변환
|
|
* @param scale - 뷰포트 비율 (viewportWidth / BASE_VIEWPORT_WIDTH)
|
|
*/
|
|
function calculateSizeStyle(
|
|
size: PopSizeConstraintV4,
|
|
settings: PopLayoutDataV4["settings"],
|
|
scale: number = 1
|
|
): React.CSSProperties {
|
|
const style: React.CSSProperties = {};
|
|
|
|
// 스케일된 터치 최소 크기
|
|
const scaledTouchMin = settings.touchTargetMin * scale;
|
|
|
|
// 너비
|
|
switch (size.width) {
|
|
case "fixed":
|
|
// fixed 크기도 비율에 맞게 스케일
|
|
style.width = size.fixedWidth ? `${size.fixedWidth * scale}px` : "auto";
|
|
style.flexShrink = 0;
|
|
break;
|
|
case "fill":
|
|
style.flex = 1;
|
|
style.minWidth = size.minWidth ? `${size.minWidth * scale}px` : 0;
|
|
style.maxWidth = size.maxWidth ? `${size.maxWidth * scale}px` : undefined;
|
|
break;
|
|
case "hug":
|
|
style.width = "auto";
|
|
style.flexShrink = 0;
|
|
break;
|
|
}
|
|
|
|
// 높이
|
|
switch (size.height) {
|
|
case "fixed":
|
|
const scaledFixedHeight = (size.fixedHeight || settings.touchTargetMin) * scale;
|
|
const minHeight = Math.max(scaledFixedHeight, scaledTouchMin);
|
|
style.height = `${minHeight}px`;
|
|
break;
|
|
case "fill":
|
|
style.flexGrow = 1;
|
|
style.minHeight = size.minHeight
|
|
? `${Math.max(size.minHeight * scale, scaledTouchMin)}px`
|
|
: `${scaledTouchMin}px`;
|
|
break;
|
|
case "hug":
|
|
style.height = "auto";
|
|
style.minHeight = `${scaledTouchMin}px`;
|
|
break;
|
|
}
|
|
|
|
return style;
|
|
}
|
|
|
|
/**
|
|
* alignItems 값 변환
|
|
*/
|
|
function mapAlignment(value: string): React.CSSProperties["alignItems"] {
|
|
switch (value) {
|
|
case "start":
|
|
return "flex-start";
|
|
case "end":
|
|
return "flex-end";
|
|
case "center":
|
|
return "center";
|
|
case "stretch":
|
|
return "stretch";
|
|
default:
|
|
return "stretch";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* justifyContent 값 변환
|
|
*/
|
|
function mapJustify(value: string): React.CSSProperties["justifyContent"] {
|
|
switch (value) {
|
|
case "start":
|
|
return "flex-start";
|
|
case "end":
|
|
return "flex-end";
|
|
case "center":
|
|
return "center";
|
|
case "space-between":
|
|
return "space-between";
|
|
default:
|
|
return "flex-start";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 컴포넌트별 내용 렌더링
|
|
*/
|
|
function renderComponentContent(
|
|
component: PopComponentDefinitionV4,
|
|
isDesignMode: boolean,
|
|
settings: PopLayoutDataV4["settings"]
|
|
): React.ReactNode {
|
|
const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
|
|
|
|
// 디자인 모드에서는 플레이스홀더 표시
|
|
if (isDesignMode) {
|
|
// Spacer는 디자인 모드에서 점선 배경으로 표시
|
|
if (component.type === "pop-spacer") {
|
|
return (
|
|
<div className="h-full w-full flex items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50/50 rounded">
|
|
<span className="text-xs text-gray-400">빈 공간</span>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="text-xs text-gray-400 text-center">
|
|
{typeLabel}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 뷰어 모드: 실제 컴포넌트 렌더링
|
|
switch (component.type) {
|
|
case "pop-field":
|
|
return (
|
|
<input
|
|
type="text"
|
|
placeholder={component.label || "입력하세요"}
|
|
className="w-full h-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
);
|
|
|
|
case "pop-button":
|
|
return (
|
|
<button className="w-full h-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors">
|
|
{component.label || "버튼"}
|
|
</button>
|
|
);
|
|
|
|
case "pop-list":
|
|
return (
|
|
<div className="w-full h-full overflow-auto p-2">
|
|
<div className="text-xs text-gray-500 text-center">
|
|
리스트 (데이터 연결 필요)
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "pop-indicator":
|
|
return (
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-primary">0</div>
|
|
<div className="text-xs text-gray-500">{component.label || "지표"}</div>
|
|
</div>
|
|
);
|
|
|
|
case "pop-scanner":
|
|
return (
|
|
<div className="text-center text-gray-500">
|
|
<div className="text-xs">스캐너</div>
|
|
<div className="text-[10px]">탭하여 스캔</div>
|
|
</div>
|
|
);
|
|
|
|
case "pop-numpad":
|
|
return (
|
|
<div className="grid grid-cols-3 gap-1 p-1 w-full">
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
|
|
<button
|
|
key={key}
|
|
className="aspect-square text-xs font-medium bg-gray-100 rounded hover:bg-gray-200"
|
|
>
|
|
{key}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case "pop-spacer":
|
|
// 실제 모드에서 Spacer는 완전히 투명 (공간만 차지)
|
|
return null;
|
|
|
|
default:
|
|
return (
|
|
<div className="text-xs text-gray-400">
|
|
{typeLabel}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PopFlexRenderer;
|