feat(pop-text): POP 텍스트 컴포넌트 추가

- pop-text 컴포넌트 구현 (텍스트/시간/이미지/제목 타입)
- PopComponentRegistry에 preview 속성 추가
- ComponentEditorPanel에서 configPanel 동적 렌더링
- PopRenderer에서 preview 컴포넌트 렌더링 지원
- ComponentPalette에 텍스트 컴포넌트 추가

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/pop/designer/panels/ComponentEditorPanel.tsx

@@ -21,6 +21,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
+import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
 
 // ========================================
 // Props
@@ -315,6 +316,15 @@ interface ComponentSettingsFormProps {
 }
 
 function ComponentSettingsForm({ component, onUpdate }: ComponentSettingsFormProps) {
+  // PopComponentRegistry에서 configPanel 가져오기
+  const registeredComp = PopComponentRegistry.getComponent(component.type);
+  const ConfigPanel = registeredComp?.configPanel;
+
+  // config 업데이트 핸들러
+  const handleConfigUpdate = (newConfig: any) => {
+    onUpdate?.({ config: newConfig });
+  };
+
   return (
     <div className="space-y-4">
       {/* 라벨 */}
@@ -329,12 +339,19 @@ function ComponentSettingsForm({ component, onUpdate }: ComponentSettingsFormPro
         />
       </div>
 
-      {/* 컴포넌트 타입별 설정 (추후 구현) */}
-      <div className="rounded-lg bg-gray-50 p-3">
-        <p className="text-xs text-muted-foreground">
-          {component.type} 전용 설정은 Phase 4에서 구현 예정
-        </p>
-      </div>
+      {/* 컴포넌트 타입별 설정 패널 */}
+      {ConfigPanel ? (
+        <ConfigPanel
+          config={component.config || {}}
+          onUpdate={handleConfigUpdate}
+        />
+      ) : (
+        <div className="rounded-lg bg-gray-50 p-3">
+          <p className="text-xs text-muted-foreground">
+            {component.type} 전용 설정이 없습니다
+          </p>
+        </div>
+      )}
     </div>
   );
 }

frontend/components/pop/designer/panels/ComponentPalette.tsx

@@ -3,7 +3,7 @@
 import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
 import { PopComponentType } from "../types/pop-layout";
-import { Square } from "lucide-react";
+import { Square, FileText } from "lucide-react";
 import { DND_ITEM_TYPES } from "../constants";
 
 // 컴포넌트 정의
@@ -21,6 +21,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
     icon: Square,
     description: "크기 조정 테스트용",
   },
+  {
+    type: "pop-text",
+    label: "텍스트",
+    icon: FileText,
+    description: "텍스트, 시간, 이미지 표시",
+  },
 ];
 
 // 드래그 가능한 컴포넌트 아이템