chore: sync local workspace changes

src/views/play/LayoutPreviewWidgets.tsx

@@ -2,6 +2,7 @@ import {
   CheckOutlined,
   DeleteOutlined,
   LeftOutlined,
+  PlayCircleOutlined,
   PlusOutlined,
   RightOutlined,
   UnorderedListOutlined,
@@ -60,6 +61,8 @@ const EMPTY_PANE_READINESS_META: Record<
 
 export function LayoutPreviewTextMemoPane({
   state,
+  skin = 'note',
+  title = '메모 본문',
   onStartDraft,
   onToggleList,
   onDeleteSelection,
@@ -69,6 +72,8 @@ export function LayoutPreviewTextMemoPane({
   onDraftChange,
 }: {
   state: LayoutPreviewMemoState;
+  skin?: 'flat' | 'note';
+  title?: string;
   onStartDraft: () => void;
   onToggleList: () => void;
   onDeleteSelection: () => void;
@@ -80,9 +85,21 @@ export function LayoutPreviewTextMemoPane({
   const selectedIndex = state.selectedId ? state.notes.findIndex((note) => note.id === state.selectedId) : -1;
   const selectedNote = selectedIndex >= 0 ? state.notes[selectedIndex] : null;
   const hasDraft = state.draftBody.trim().length > 0;
+  const isFlat = skin === 'flat';
 
   return (
-    <div className="layout-playground__memo-widget-preview" onClick={stopPreviewEvent}>
+    <div
+      className={`layout-playground__memo-widget-preview${
+        isFlat ? ' layout-playground__memo-widget-preview--flat' : ''
+      }`}
+      onClick={stopPreviewEvent}
+    >
+      {isFlat ? (
+        <div className="layout-playground__memo-widget-preview-head">
+          <Text strong>{title}</Text>
+          <Text type="secondary">{selectedNote ? '선택 항목 편집 중' : '새 항목 작성 가능'}</Text>
+        </div>
+      ) : null}
       <div className="layout-playground__memo-widget-preview-toolbar" role="toolbar" aria-label="메모 도구">
         <div className="layout-playground__memo-widget-preview-toolbar-group">
             <Button type="text" shape="circle" htmlType="button" icon={<PlusOutlined />} aria-label="새 메모" onClick={onStartDraft} />
@@ -216,6 +233,35 @@ export function LayoutPreviewBaseInputPane({
   );
 }
 
+export function LayoutPreviewActionPane({
+  label = 'Codex 실행',
+  description = '선택한 레이아웃과 기능설명 조합 기준으로 실행합니다.',
+  onClick,
+}: {
+  label?: string;
+  description?: string;
+  onClick?: () => void;
+}) {
+  return (
+    <div className="layout-playground__action-preview" onClick={stopPreviewEvent}>
+      <div className="layout-playground__action-preview-copy">
+        <span className="layout-playground__action-preview-kicker">전역 실행</span>
+        <Text strong>{label}</Text>
+        <Text type="secondary">{description}</Text>
+      </div>
+      <Button
+        type="primary"
+        size="large"
+        icon={<PlayCircleOutlined />}
+        className="layout-playground__action-preview-button"
+        onClick={onClick}
+      >
+        {label}
+      </Button>
+    </div>
+  );
+}
+
 export function LayoutPreviewSelectPane({
   state,
   data,