add options to modal component

apps/app/src/components/PageEditor/Editor.tsx

@@ -14,10 +14,11 @@ import { toastError, toastSuccess } from '~/client/util/toastr';
 import { IEditorSettings } from '~/interfaces/editor-settings';
 import { useDefaultIndentSize } from '~/stores/context';
 import { useEditorSettings } from '~/stores/editor';
+import { useParentPageSelectModal } from '~/stores/modal';
 import { useIsMobile } from '~/stores/ui';
 
 import { IEditorMethods } from '../../interfaces/editor-methods';
-import { ModalForParentPageSelection } from '../ParentPageSelectModal';
+import { ParentPageSelectModal } from '../ParentPageSelectModal';
 
 import AbstractEditor from './AbstractEditor';
 import { Cheatsheet } from './Cheatsheet';
@@ -68,6 +69,9 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
   const { data: editorSettings } = useEditorSettings();
   const { data: defaultIndentSize } = useDefaultIndentSize();
   const { data: isMobile } = useIsMobile();
+  const {
+    open: openModal,
+  } = useParentPageSelectModal();
 
   const dropzoneRef = useRef<DropzoneRef>(null);
   // CodeMirrorEditor ref
@@ -337,7 +341,8 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
           }}
         </Dropzone>
 
-        <ModalForParentPageSelection></ModalForParentPageSelection>
+        <Button onClick={() => openModal()}>起動！</Button>
+        <ParentPageSelectModal></ParentPageSelectModal>
 
         { isUploadable
           && (

apps/app/src/components/ParentPageSelectModal.tsx

@@ -28,16 +28,14 @@ export const ParentPageSelectModal = () => {
   // modalが開いている時の処理
   return (
     <>
-      <Modal isOpen={isOpened} toggle={() => closeModal()}>
-        <ModalHeader>Modal title</ModalHeader>
-        <ModalBody>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-        aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
+      <Modal
+        isOpen={isOpened}
+        toggle={() => closeModal()}
+        centered={true}
+      >
+        <ModalHeader toggle={() => closeModal()}>モーダル</ModalHeader>
+        <ModalBody >
+        少年老い易く学成り難し
         </ModalBody>
         <ModalFooter>
           <Button color="primary">