[Feat] 숫자 + 코, 숫자 + 단 입력시 텍스트에 스타일 적용되도록

src/pages/CreateDesign/Pattern/index.tsx

@@ -1,7 +1,29 @@
-import React from 'react';
+import Editor from '@draft-js-plugins/editor';
+import { EditorState } from 'draft-js';
+import { useRef, useState } from 'react';
 
 const Pattern = (): React.ReactElement => {
-  return <div>도안 작성 페이지</div>;
+  const [editorState, setEditorState] = useState<EditorState>(
+    EditorState.createEmpty(),
+  );
+  const editor = useRef<Editor | null>(null);
+
+  const focusEditor = (): void => {
+    editor?.current?.focus();
+  };
+
+  return (
+    <div>
+      <div onClick={focusEditor}>
+        <Editor
+          ref={editor}
+          editorState={editorState}
+          onChange={setEditorState}
+          placeholder="도안을 입력하세요"
+        />
+      </div>
+    </div>
+  );
 };
 
 export default Pattern;