우측 사이드바 구현

apps/editor/src/app/editor/page.tsx

@@ -2,6 +2,7 @@ import getNodesFromDB from "@/actions/editor/getNodesFromDB";
 import Canvas from "@/components/editor/Canvas";
 import EditorStoreInitializer from "@/components/editor/EditorStoreInitializer";
 import { LeftSidebar } from "@/widgets/left-sidebar";
+import { RightSidebar } from "@/widgets/right-sidebar";
 import { RuntimeProvider } from "@repo/ui/context/runtimeContext";
 
 export default async function EditorPage() {
@@ -18,6 +19,7 @@ export default async function EditorPage() {
           <div className="flex h-full w-full border-2">
             <LeftSidebar />
             <Canvas />
+            <RightSidebar />
           </div>
         </RuntimeProvider>
       </EditorStoreInitializer>

apps/editor/src/entities/section/model/store.ts

@@ -10,7 +10,7 @@ interface SectionState {
   selectSection: (id: string) => void;
 }
 
-export const useSectionStore = create<SectionState>((set) => ({
+export const useSectionStore = create<SectionState>(() => ({
   sections: [
     { id: 's1', name: '히어로 섹션' },
     { id: 's2', name: '특징 소개' },

apps/editor/src/shared/lib/component-defaults.ts

@@ -9,20 +9,38 @@ export interface ComponentDefaults {
   layout: WcxNode['layout']; // x, y, width, height, zIndex
 }
 
+// 모든 컴포넌트의 기본 레이아웃 스타일 (Flex Row 중앙 정렬)
+const DEFAULT_FLEX_STYLE: NodeStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const DEFAULT_LAYOUT_MODE = {
+  widthMode: 'fixed' as const,
+  heightMode: 'fixed' as const,
+  widthUnit: 'px' as const,
+  heightUnit: 'px' as const,
+};
+
 export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
   Image: {
     props: {
       src: "https://via.placeholder.com/400x300",
       alt: "Image",
       caption: "Image Caption",
     },
-    style: {},
+    style: {
+      ...DEFAULT_FLEX_STYLE,
+    },
     layout: {
       x: 0,
       y: 0,
       width: 400,
       height: 300,
       zIndex: 0,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
   Heading: {
@@ -31,16 +49,18 @@ export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
       level: "h2",
     },
     style: {
+      ...DEFAULT_FLEX_STYLE,
       color: "#000000",
       fontSize: "24px",
-      fontWeight: "bold",
+      fontWeight: "700",
     },
     layout: {
       x: 0,
       y: 0,
       width: 200,
       height: 50,
       zIndex: 1,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
   Text: {
@@ -49,42 +69,46 @@ export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
       level: "h5",
     },
     style: {
+      ...DEFAULT_FLEX_STYLE,
       color: "#333333",
       fontSize: "16px",
+      background: 'white',
+      border: '1px solid #ccc',
     },
     layout: {
       x: 0,
       y: 0,
       width: 300,
       height: 100,
       zIndex: 1,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
   Button: {
     props: {
       text: "Button",
     },
     style: {
+      ...DEFAULT_FLEX_STYLE,
       backgroundColor: "#007bff",
       color: "#ffffff",
       borderRadius: "4px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
     },
     layout: {
       x: 0,
       y: 0,
       width: 120,
       height: 40,
       zIndex: 2,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
   Container: {
     props: {
       tagName: "div",
     },
     style: {
+      ...DEFAULT_FLEX_STYLE,
       border: "1px dashed #ccc",
       backgroundColor: "#ffffff",
     },
@@ -94,6 +118,7 @@ export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
       width: 500,
       height: 200,
       zIndex: 0,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
   Modal: {
@@ -114,14 +139,13 @@ export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
       width: 400,
       height: 300,
       zIndex: 100,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
-  // Stack 추가
   Stack: {
     props: {},
     style: {
-      display: "flex",
-      flexDirection: "column",
+      ...DEFAULT_FLEX_STYLE,
       gap: "10px",
       padding: "20px",
       backgroundColor: "#f9fafb",
@@ -133,18 +157,21 @@ export const COMPONENT_DEFAULTS: Record<WcxNode['type'], ComponentDefaults> = {
       width: 300,
       height: 300,
       zIndex: 0,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
-  // Group 추가
   Group: {
     props: {},
-    style: {},
+    style: {
+      ...DEFAULT_FLEX_STYLE,
+    },
     layout: {
       x: 0,
       y: 0,
       width: 200,
       height: 200,
       zIndex: 0,
+      ...DEFAULT_LAYOUT_MODE,
     },
   },
 };

apps/editor/src/stores/useEditorStore.ts

@@ -128,7 +128,8 @@ const useEditorStore = create(
 
               // 1. 최상위 속성 업데이트 (type 등)
               // (주의: 객체 타입인 style, props, layout을 통째로 덮어쓰지 않도록 별도 처리)
-              const { style, props, layout, ...rest } = updates;
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              const { style, props, layout: _layout, ...rest } = updates;
               Object.assign(targetNode, rest);
 
               // 2. 하위 객체 병합 업데이트

apps/editor/src/widgets/left-sidebar/model/constants.ts

@@ -3,7 +3,8 @@ import {
   File,
   PanelsTopLeft,
   PlusCircle,
-  AppWindow
+  AppWindow,
+  Plus
 } from 'lucide-react';
 
 export const STATIC_PANEL_DATA = {
@@ -32,7 +33,8 @@ export const STATIC_PANEL_DATA = {
 };
 
 export const NAV_ITEMS = [
-  { id: 'component', label: '컴포넌트', icon: Layers },
+  { id: 'layer', label: '레이어', icon: Layers },
+  { id: 'component', label: '컴포넌트', icon: Plus },
   { id: 'page', label: '페이지', icon: File },
   { id: 'section', label: '섹션', icon: PanelsTopLeft },
   { id: 'widget', label: '위젯', icon: PlusCircle },

apps/editor/src/widgets/left-sidebar/model/types.ts

@@ -1,4 +1,4 @@
-export type NavTabId = 'component' | 'page' | 'section' | 'widget' | 'modal';
+export type NavTabId = 'layer' | 'component' | 'page' | 'section' | 'widget' | 'modal';
 
 export interface NavigationState {
   activeTab: NavTabId | null;

apps/editor/src/widgets/left-sidebar/ui/SubPanel.tsx

@@ -1,10 +1,11 @@
 import { useNavigationStore } from '../model/store';
-import { 
-  ComponentPanel, 
-  PagePanel, 
-  SectionPanel, 
-  WidgetPanel, 
-  ModalPanel 
+import {
+  ComponentPanel,
+  LayerPanel,
+  PagePanel,
+  SectionPanel,
+  WidgetPanel,
+  ModalPanel
 } from './sub-panels';
 
 export const SubPanel = () => {
@@ -15,11 +16,12 @@ export const SubPanel = () => {
   const renderContent = () => {
     switch (activeTab) {
       case 'component': return <ComponentPanel />;
-      case 'page':      return <PagePanel />;
-      case 'section':   return <SectionPanel />;
-      case 'widget':    return <WidgetPanel />;
-      case 'modal':     return <ModalPanel />;
-      default:          return null;
+      case 'layer': return <LayerPanel />;
+      case 'page': return <PagePanel />;
+      case 'section': return <SectionPanel />;
+      case 'widget': return <WidgetPanel />;
+      case 'modal': return <ModalPanel />;
+      default: return null;
     }
   };