+ {PreviewComponent ? (
+
{/* 위치 정보 표시 (유효 위치 사용) */}
diff --git a/frontend/components/pop/designer/types/pop-layout.ts b/frontend/components/pop/designer/types/pop-layout.ts
index 146af62c..1a8335ec 100644
--- a/frontend/components/pop/designer/types/pop-layout.ts
+++ b/frontend/components/pop/designer/types/pop-layout.ts
@@ -9,7 +9,7 @@
/**
* POP 컴포넌트 타입
*/
-export type PopComponentType = "pop-sample"; // 테스트용 샘플 박스
+export type PopComponentType = "pop-sample" | "pop-text"; // 테스트용 샘플 박스, 텍스트 컴포넌트
/**
* 데이터 흐름 정의
@@ -341,6 +341,7 @@ export const isV5Layout = (layout: any): layout is PopLayoutDataV5 => {
*/
export const DEFAULT_COMPONENT_GRID_SIZE: Record
+
+ );
+ }
+
+ // 실제 렌더링
+ switch (textType) {
+ case "datetime":
+ return
+
+ );
+ case "image":
+ // 이미지 미리보기
+ if (!config?.imageUrl) {
+ return (
+
+ 이미지 URL 없음
+
+ );
+ }
+ // 이미지도 정렬 래퍼 적용
+ return (
+
+ 
+
+ );
+ case "title":
+ // 제목 미리보기
+ return (
+
+
+ {config?.content || label || "제목"}
+
+
+ );
+ default:
+ // 일반 텍스트 미리보기
+ return (
+
+
+ {config?.content || label || "텍스트"}
+
+
+ );
+ }
+}
+
+// 디자인 모드용 시간 미리보기 (실시간)
+function DateTimePreview({ config }: { config?: PopTextConfig }) {
+ const [now, setNow] = useState(new Date());
+
+ useEffect(() => {
+ // 디자인 모드에서도 실시간 업데이트 (간격 늘림)
+ const timer = setInterval(() => setNow(new Date()), 1000);
+ return () => clearInterval(timer);
+ }, []);
+
+ // 빌더 설정 또는 기존 dateFormat 사용 (하위 호환)
+ const dateFormat = config?.dateTimeConfig
+ ? buildDateTimeFormat(config.dateTimeConfig)
+ : config?.dateFormat || "HH:mm:ss";
+
+ return (
+
+ {format(now, dateFormat, { locale: ko })}
+
+ );
+}
+
+// 시간/날짜 (실시간 지원)
+function DateTimeDisplay({ config }: { config?: PopTextConfig }) {
+ const [now, setNow] = useState(new Date());
+
+ useEffect(() => {
+ if (!config?.isRealtime) return;
+ const timer = setInterval(() => setNow(new Date()), 1000);
+ return () => clearInterval(timer);
+ }, [config?.isRealtime]);
+
+ // 빌더 설정 또는 기존 dateFormat 사용 (하위 호환)
+ const dateFormat = config?.dateTimeConfig
+ ? buildDateTimeFormat(config.dateTimeConfig)
+ : config?.dateFormat || "HH:mm:ss";
+
+ // 정렬 래퍼 클래스
+ const alignWrapperClass = cn(
+ "flex w-full h-full",
+ VERTICAL_ALIGN_CLASSES[config?.verticalAlign || "center"],
+ JUSTIFY_CLASSES[config?.textAlign || "left"]
+ );
+
+ return (
+
+
+ {format(now, dateFormat, { locale: ko })}
+
+
+ );
+}
+
+// 이미지
+function ImageDisplay({ config }: { config?: PopTextConfig }) {
+ if (!config?.imageUrl) {
+ return (
+
+ 이미지 URL 필요
+
+ );
+ }
+
+ // 정렬 래퍼 클래스
+ const alignWrapperClass = cn(
+ "flex w-full h-full",
+ VERTICAL_ALIGN_CLASSES[config?.verticalAlign || "center"],
+ JUSTIFY_CLASSES[config?.textAlign || "left"]
+ );
+
+ return (
+
+
+
+ );
+}
+
+// 제목
+function TitleDisplay({
+ config,
+ label,
+}: {
+ config?: PopTextConfig;
+ label?: string;
+}) {
+ const sizeClass = FONT_SIZE_CLASSES[config?.fontSize || "base"];
+ const weightClass = FONT_WEIGHT_CLASSES[config?.fontWeight || "normal"];
+
+ // 정렬 래퍼 클래스
+ const alignWrapperClass = cn(
+ "flex w-full h-full",
+ VERTICAL_ALIGN_CLASSES[config?.verticalAlign || "center"],
+ JUSTIFY_CLASSES[config?.textAlign || "left"]
+ );
+
+ return (
+
+
+ {config?.content || label || "제목"}
+
+
+ );
+}
+
+// 일반 텍스트
+function TextDisplay({
+ config,
+ label,
+}: {
+ config?: PopTextConfig;
+ label?: string;
+}) {
+ const sizeClass = FONT_SIZE_CLASSES[config?.fontSize || "base"];
+
+ // 정렬 래퍼 클래스
+ const alignWrapperClass = cn(
+ "flex w-full h-full",
+ VERTICAL_ALIGN_CLASSES[config?.verticalAlign || "center"],
+ JUSTIFY_CLASSES[config?.textAlign || "left"]
+ );
+
+ return (
+
+
+ {config?.content || label || "텍스트"}
+
+
+ );
+}
+
+// ========================================
+// 설정 패널
+// ========================================
+interface PopTextConfigPanelProps {
+ config: PopTextConfig;
+ onUpdate: (config: PopTextConfig) => void;
+}
+
+export function PopTextConfigPanel({
+ config,
+ onUpdate,
+}: PopTextConfigPanelProps) {
+ const textType = config?.textType || "text";
+
+ return (
+
+ {/* 텍스트 타입 선택 */}
+
+
+
+
+
+ {/* 서브타입별 설정 */}
+ {textType === "text" && (
+ <>
+
+
+