);
}
+
+// ========================================
+// 모달 사이즈 설정 패널
+// ========================================
+
+const SIZE_PRESET_ORDER: ModalSizePreset[] = ["sm", "md", "lg", "xl", "full"];
+
+const MODE_LABELS: { mode: GridMode; label: string; icon: typeof Smartphone; width: number }[] = [
+ { mode: "mobile_portrait", label: "모바일 세로", icon: Smartphone, width: 375 },
+ { mode: "mobile_landscape", label: "모바일 가로", icon: Smartphone, width: 667 },
+ { mode: "tablet_portrait", label: "태블릿 세로", icon: Tablet, width: 768 },
+ { mode: "tablet_landscape", label: "태블릿 가로", icon: Monitor, width: 1024 },
+];
+
+function ModalSizeSettingsPanel({
+ modal,
+ currentMode,
+ onUpdate,
+}: {
+ modal: PopModalDefinition;
+ currentMode: GridMode;
+ onUpdate: (updates: Partial
) => void;
+}) {
+ const [isExpanded, setIsExpanded] = useState(false);
+ const sizeConfig = modal.sizeConfig || { default: "md" };
+ const usePerMode = !!sizeConfig.modeOverrides && Object.keys(sizeConfig.modeOverrides).length > 0;
+
+ const currentModeInfo = MODE_LABELS.find(m => m.mode === currentMode)!;
+ const currentModeWidth = currentModeInfo.width;
+ const currentModalWidth = resolveModalWidth(
+ { default: sizeConfig.default, modeOverrides: sizeConfig.modeOverrides as Record | undefined },
+ currentMode,
+ currentModeWidth,
+ );
+
+ const handleDefaultChange = (preset: ModalSizePreset) => {
+ onUpdate({
+ sizeConfig: {
+ ...sizeConfig,
+ default: preset,
+ },
+ });
+ };
+
+ const handleTogglePerMode = () => {
+ if (usePerMode) {
+ onUpdate({
+ sizeConfig: {
+ default: sizeConfig.default,
+ },
+ });
+ } else {
+ onUpdate({
+ sizeConfig: {
+ ...sizeConfig,
+ modeOverrides: {
+ mobile_portrait: sizeConfig.default,
+ mobile_landscape: sizeConfig.default,
+ tablet_portrait: sizeConfig.default,
+ tablet_landscape: sizeConfig.default,
+ },
+ },
+ });
+ }
+ };
+
+ const handleModeChange = (mode: GridMode, preset: ModalSizePreset) => {
+ onUpdate({
+ sizeConfig: {
+ ...sizeConfig,
+ modeOverrides: {
+ ...sizeConfig.modeOverrides,
+ [mode]: preset,
+ },
+ },
+ });
+ };
+
+ return (
+
+ {/* 헤더 (항상 표시) */}
+
+
+ {/* 펼침 영역 */}
+ {isExpanded && (
+
+ {/* 기본 사이즈 선택 */}
+
+
모달 사이즈
+
+ {SIZE_PRESET_ORDER.map(preset => {
+ const info = MODAL_SIZE_PRESETS[preset];
+ return (
+
+ );
+ })}
+
+
+
+ {/* 모드별 개별 설정 토글 */}
+
+ 모드별 개별 사이즈
+
+
+
+ {/* 모드별 설정 */}
+ {usePerMode && (
+
+ {MODE_LABELS.map(({ mode, label, icon: Icon }) => {
+ const modePreset = sizeConfig.modeOverrides?.[mode] ?? sizeConfig.default;
+ return (
+
+
+
+ {label}
+
+
+ {SIZE_PRESET_ORDER.map(preset => (
+
+ ))}
+
+
+ );
+ })}
+
+ )}
+
+ {/* 캔버스 축소판 미리보기 */}
+
+
+ )}
+
+
+
미리보기
+
+
+ {modeInfo.label}
+
+
+
+
+ {/* 반투명 배경 오버레이 (모달이 열렸을 때의 딤 효과) */}
+
+
+ {/* 모달 영역 (가운데 정렬, FULL이면 전체 채움) */}
+
+
+ {/* 하단 수치 표시 */}
+
+ {isFull ? "FULL" : `${modalWidth}px`} / {modeWidth}px
+
+
+
{/* 헤더 */}
@@ -645,6 +765,9 @@ export default function PopDesigner({
onResetOverride={handleResetOverride}
onChangeGapPreset={handleChangeGapPreset}
previewPageIndex={previewPageIndex}
+ activeCanvasId={activeCanvasId}
+ onActiveCanvasChange={navigateToCanvas}
+ onUpdateModal={handleUpdateModal}
/>
@@ -670,5 +793,6 @@ export default function PopDesigner({
+
);
}
diff --git a/frontend/components/pop/designer/PopDesignerContext.tsx b/frontend/components/pop/designer/PopDesignerContext.tsx
new file mode 100644
index 00000000..8af42d64
--- /dev/null
+++ b/frontend/components/pop/designer/PopDesignerContext.tsx
@@ -0,0 +1,35 @@
+/**
+ * PopDesignerContext - 디자이너 전역 컨텍스트
+ *
+ * ConfigPanel 등 하위 컴포넌트에서 디자이너 레벨 동작을 트리거하기 위한 컨텍스트.
+ * 예: pop-button 설정 패널에서 "모달 캔버스 생성" 버튼 클릭 시
+ * 디자이너의 activeCanvasId를 변경하고 새 모달을 생성.
+ *
+ * Provider: PopDesigner.tsx
+ * Consumer: pop-button ConfigPanel (ModalCanvasButton)
+ */
+
+"use client";
+
+import { createContext, useContext } from "react";
+
+export interface PopDesignerContextType {
+ /** 새 모달 캔버스 생성하고 해당 탭으로 전환 (모달 ID 반환) */
+ createModalCanvas: (buttonComponentId: string, title: string) => string;
+ /** 특정 캔버스(메인 또는 모달)로 전환 */
+ navigateToCanvas: (canvasId: string) => void;
+ /** 현재 활성 캔버스 ID ("main" 또는 모달 ID) */
+ activeCanvasId: string;
+ /** 현재 선택된 컴포넌트 ID */
+ selectedComponentId: string | null;
+}
+
+export const PopDesignerContext = createContext(null);
+
+/**
+ * 디자이너 컨텍스트 사용 훅
+ * 뷰어 모드에서는 null 반환 (Provider 없음)
+ */
+export function usePopDesignerContext(): PopDesignerContextType | null {
+ return useContext(PopDesignerContext);
+}
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index d4933443..0620b783 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -277,6 +277,7 @@ export default function PopRenderer({
effectivePosition={position}
isDesignMode={false}
isSelected={false}
+ screenId={String(currentScreenId || "")}
/>