From 7b9d40277adfbe0606f5e96738e2d463cc1fc8c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B1=EC=97=B4?= <yeolyi1310@gmail.com>
Date: Thu, 24 Aug 2023 23:00:07 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EC=84=B8=EB=AF=B8=EB=82=98=20?=
 =?UTF-8?q?=ED=8E=B8=EC=A7=91=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 세미나 편집 page들 추가

* footer text 크기 수정

* BasicTextInput 추가

* Fieldset에 required prop 추가

* 세미나 편집 UI 구현

* SeminarEditor 관련 타입 정리

* 내비바 디자인 리뷰 반영

* 세미나 글 작성 및 수정 페이지 틀 작성

* SeminarEditor mock 데이터 작성

* 일정 제외 세미나 편집 로직 구현

* SeminarEditor 리팩토링

* DatePicker 추가

* StaticDateTimePicker 추가

* editor 폴더 정리

* ActionButton관련 타입 이동

* 리팩토링

* ScheduleFieldset 토글 반영

* 슬라이드 쇼 관련 안내 문구 추가

* 리뷰 반영
---
 app/community/news/[id]/edit/page.tsx         |   6 +-
 app/community/news/create/page.tsx            |   4 +-
 app/community/seminar/[id]/edit/page.tsx      |  59 ++
 app/community/seminar/create/page.tsx         |  23 +
 components/editor/Fieldset.tsx                |  17 -
 components/editor/PostEditor.tsx              | 208 +---
 components/editor/PostEditorProp.ts           |  30 -
 components/editor/PostEditorProps.ts          |  31 +
 components/editor/SeminarEditor.tsx           | 304 ++++++
 components/editor/SeminarEditorProps.ts       |  58 ++
 components/editor/common/ActionButtons.tsx    | 133 +++
 components/editor/common/BasicTextInput.tsx   |  24 +
 components/editor/common/DateSelector.tsx     | 118 +++
 components/editor/common/Fieldset.tsx         |  29 +
 components/editor/{ => common}/FilePicker.tsx |   0
 .../editor/{ => common}/FilePickerRow.tsx     |   6 +-
 .../editor/{ => common}/ImagePicker.tsx       |   0
 .../editor/{ => common}/SunEditorWrapper.tsx  |   3 +
 components/layout/footer/Footer.tsx           |  12 +-
 components/layout/navbar/NavbarRoot.tsx       |   2 +-
 package-lock.json                             | 983 ++++++++++++++++--
 package.json                                  |   5 +
 22 files changed, 1752 insertions(+), 303 deletions(-)
 create mode 100644 app/community/seminar/[id]/edit/page.tsx
 create mode 100644 app/community/seminar/create/page.tsx
 delete mode 100644 components/editor/Fieldset.tsx
 delete mode 100644 components/editor/PostEditorProp.ts
 create mode 100644 components/editor/PostEditorProps.ts
 create mode 100644 components/editor/SeminarEditor.tsx
 create mode 100644 components/editor/SeminarEditorProps.ts
 create mode 100644 components/editor/common/ActionButtons.tsx
 create mode 100644 components/editor/common/BasicTextInput.tsx
 create mode 100644 components/editor/common/DateSelector.tsx
 create mode 100644 components/editor/common/Fieldset.tsx
 rename components/editor/{ => common}/FilePicker.tsx (100%)
 rename components/editor/{ => common}/FilePickerRow.tsx (85%)
 rename components/editor/{ => common}/ImagePicker.tsx (100%)
 rename components/editor/{ => common}/SunEditorWrapper.tsx (92%)

diff --git a/app/community/news/[id]/edit/page.tsx b/app/community/news/[id]/edit/page.tsx
index c988fe2d..20998cd0 100644
--- a/app/community/news/[id]/edit/page.tsx
+++ b/app/community/news/[id]/edit/page.tsx
@@ -3,13 +3,13 @@
 import { getMockNewsPostDetail } from '@/apis/news';
 
 import PostEditor from '@/components/editor/PostEditor';
-import { EditorContent } from '@/components/editor/PostEditorProp';
+import { PostEditorContent } from '@/components/editor/PostEditorProps';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { NewsTags } from '@/constants/tag';
 
 export default function NewsEditPage() {
-  const handleComplete = async (content: EditorContent) => {
+  const handleComplete = async (content: PostEditorContent) => {
     console.log(content);
     // throw new Error();
   };
@@ -19,7 +19,7 @@ export default function NewsEditPage() {
   const handleDelete = async () => {};
 
   return (
-    <PageLayout title={'새 소식 편집'} titleType="small">
+    <PageLayout title={'새 소식 편집'} titleType="small" titleMargin="mb-6">
       <PostEditor
         tags={NewsTags}
         showMainImage
diff --git a/app/community/news/create/page.tsx b/app/community/news/create/page.tsx
index 8f6b5e4b..0009754b 100644
--- a/app/community/news/create/page.tsx
+++ b/app/community/news/create/page.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import PostEditor from '@/components/editor/PostEditor';
-import { EditorContent } from '@/components/editor/PostEditorProp';
+import { PostEditorContent } from '@/components/editor/PostEditorProps';
 import PageLayout from '@/components/layout/pageLayout/PageLayout';
 
 import { NewsTags } from '@/constants/tag';
 
 export default function NewsCreatePage() {
-  const handleComplete = async (content: EditorContent) => {
+  const handleComplete = async (content: PostEditorContent) => {
     console.log(content);
     // throw new Error();
   };
diff --git a/app/community/seminar/[id]/edit/page.tsx b/app/community/seminar/[id]/edit/page.tsx
new file mode 100644
index 00000000..895d6675
--- /dev/null
+++ b/app/community/seminar/[id]/edit/page.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import useSWR from 'swr';
+
+import SeminarEditor from '@/components/editor/SeminarEditor';
+import {
+  SeminarEditorContent,
+  seminarEditorPlaceholder,
+} from '@/components/editor/SeminarEditorProps';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+
+export default function SeminarEditPage() {
+  //   const { data: currentSeminar } = useSWR('/');
+
+  const handleComplete = async (content: SeminarEditorContent) => {
+    console.log(content);
+    // throw new Error();
+  };
+
+  const handleDelete = async () => {
+    //
+  };
+
+  return (
+    <PageLayout title={'세미나 쓰기'} titleType="small" titleMargin="mb-3">
+      <SeminarEditor
+        actions={{
+          type: 'EDIT',
+          onComplete: handleComplete,
+          onDelete: handleDelete,
+        }}
+        initialContent={mockSeminarContent}
+      />
+    </PageLayout>
+  );
+}
+
+const mockSeminarContent: SeminarEditorContent = {
+  title: '기존 글',
+  description: '<b>기존 글 내용</b>',
+  location: '위치',
+  schedule: {
+    allDay: true,
+    showEndDate: true,
+    startDate: new Date(0),
+    endDate: new Date(1000000000),
+  },
+  host: '주최자 이름',
+  speaker: {
+    name: '연설자 이름',
+    nameURL: '연설자 URL',
+    title: '직함',
+    organization: '소속',
+    organizationURL: '소속 URL',
+    description: '연사 소개개개개개',
+  },
+  attachments: [],
+  isPublic: false,
+};
diff --git a/app/community/seminar/create/page.tsx b/app/community/seminar/create/page.tsx
new file mode 100644
index 00000000..044de541
--- /dev/null
+++ b/app/community/seminar/create/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import SeminarEditor from '@/components/editor/SeminarEditor';
+import { SeminarEditorContent } from '@/components/editor/SeminarEditorProps';
+import PageLayout from '@/components/layout/pageLayout/PageLayout';
+
+export default function SeminarCreatePage() {
+  const handleComplete = async (content: SeminarEditorContent) => {
+    console.log(content);
+    // throw new Error();
+  };
+
+  return (
+    <PageLayout title={'세미나 쓰기'} titleType="small" titleMargin="mb-3">
+      <SeminarEditor
+        actions={{
+          type: 'CREATE',
+          onComplete: handleComplete,
+        }}
+      />
+    </PageLayout>
+  );
+}
diff --git a/components/editor/Fieldset.tsx b/components/editor/Fieldset.tsx
deleted file mode 100644
index cc722358..00000000
--- a/components/editor/Fieldset.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-
-interface FieldsetProps {
-  title: string;
-  mb: 'mb-6' | 'mb-9';
-  titleMb: 'mb-2' | 'mb-3';
-  children: ReactNode;
-}
-
-export default function Fieldset({ title, mb, titleMb, children }: FieldsetProps) {
-  return (
-    <fieldset className={`flex flex-col ${mb}`}>
-      <legend className={`font-yoon text-sm font-medium tracking-wide ${titleMb}`}>{title}</legend>
-      {children}
-    </fieldset>
-  );
-}
diff --git a/components/editor/PostEditor.tsx b/components/editor/PostEditor.tsx
index d0c6555e..ef248ee3 100644
--- a/components/editor/PostEditor.tsx
+++ b/components/editor/PostEditor.tsx
@@ -1,30 +1,21 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { ChangeEventHandler, MouseEventHandler, MutableRefObject, useRef, useState } from 'react';
+import { MutableRefObject, useRef, useState } from 'react';
 import SunEditorCore from 'suneditor/src/lib/core';
 
-import SunEditorWrapper from '@/components/editor/SunEditorWrapper';
+import SunEditorWrapper from '@/components/editor/common/SunEditorWrapper';
 
-import Fieldset from './Fieldset';
-import FilePicker, { FilePickerProps } from './FilePicker';
-import ImagePicker, { ImagePickerProps } from './ImagePicker';
-import { CreateAction, EditAction, EditorContent, EditorProps } from './PostEditorProp';
+import { CreateActionButtons, EditActionButtons } from './common/ActionButtons';
+import BasicTextInput from './common/BasicTextInput';
+import Fieldset from './common/Fieldset';
+import FilePicker, { FilePickerProps } from './common/FilePicker';
+import ImagePicker, { ImagePickerProps } from './common/ImagePicker';
+import { PostEditorContent, PostEditorProps, postEditorDefaultValue } from './PostEditorProps';
 import TagCheckbox from '../common/search/TagCheckbox';
 
 // TODO: 나중에 태그 확정되면 반응형 추가해서 수정
 const gridStyle = 'grid-cols-[repeat(7,_max-content)]';
 
-const placeholderContent: EditorContent = {
-  title: '',
-  description: '',
-  attachments: [],
-  tags: [],
-  isPublic: true,
-  isPinned: false,
-  isSlide: false,
-};
-
 // TODO: 네트워크 에러 처리
 export default function PostEditor({
   tags,
@@ -33,44 +24,40 @@ export default function PostEditor({
   showIsSlide = false,
   actions,
   initialContent,
-}: EditorProps) {
+}: PostEditorProps) {
   const editorRef = useRef<SunEditorCore>();
   // description(HTML)의 경우 useRef를 사용하기에 여기에 최신값이 반영되지 않음 주의
-  const [content, setContent] = useState<EditorContent>({
-    ...placeholderContent,
+  const [content, setContent] = useState<PostEditorContent>({
+    ...postEditorDefaultValue,
     ...initialContent,
   });
 
-  const getContentWithDescription = (): EditorContent => ({
+  const getContentWithDescription = (): PostEditorContent => ({
     ...content,
     description: editorRef.current?.getContents(false) ?? '',
   });
 
-  const setContentByKey = <T extends keyof EditorContent>(key: T, value: EditorContent[T]) => {
-    setContent((content) => ({ ...content, [key]: value }));
-  };
+  const setContentByKey =
+    <T extends keyof PostEditorContent>(key: T) =>
+    (value: PostEditorContent[T]) => {
+      setContent((content) => ({ ...content, [key]: value }));
+    };
 
   const toggleCheck = (tag: string, isChecked: boolean) => {
     let nextTags = [...content.tags];
     if (isChecked) nextTags = nextTags.filter((x) => x !== tag);
     else nextTags.push(tag);
-    setContentByKey('tags', nextTags);
+    setContentByKey('tags')(nextTags);
   };
 
   return (
     <form className="flex flex-col">
-      <TitleFieldset
-        value={content.title}
-        onChange={(e) => setContentByKey('title', e.target.value)}
-      />
+      <TitleFieldset value={content.title} onChange={(e) => setContentByKey('title')} />
 
       <EditorFieldset editorRef={editorRef} />
 
       {showMainImage && (
-        <ImageFieldset
-          file={content.mainImage}
-          setFile={(file) => setContentByKey('mainImage', file)}
-        />
+        <ImageFieldset file={content.mainImage} setFile={setContentByKey('mainImage')} />
       )}
 
       <FileFieldset
@@ -82,7 +69,7 @@ export default function PostEditor({
               attachments: dispatch(content.attachments),
             }));
           } else {
-            setContentByKey('attachments', dispatch);
+            setContentByKey('attachments')(dispatch);
           }
         }}
       />
@@ -105,21 +92,26 @@ export default function PostEditor({
           <TagCheckbox
             tag="비공개 글"
             isChecked={!content.isPublic}
-            toggleCheck={() => setContentByKey('isPublic', !content.isPublic)}
+            toggleCheck={() => setContentByKey('isPublic')(!content.isPublic)}
           />
           {showIsPinned && (
             <TagCheckbox
               tag="목록 상단에 고정"
               isChecked={content.isPinned}
-              toggleCheck={() => setContentByKey('isPinned', !content.isPinned)}
+              toggleCheck={() => setContentByKey('isPinned')(!content.isPinned)}
             />
           )}
           {showIsSlide && (
-            <TagCheckbox
-              tag="슬라이드 쇼에 표시"
-              isChecked={content.isSlide}
-              toggleCheck={() => setContentByKey('isSlide', !content.isSlide)}
-            />
+            <>
+              <TagCheckbox
+                tag="슬라이드 쇼에 표시"
+                isChecked={content.isSlide}
+                toggleCheck={() => setContentByKey('isSlide')(!content.isSlide)}
+              />
+              <p className="font-yoon text-xs text-neutral-700 font-light tracking-wide">
+                * ‘슬라이드쇼에 표시’ 글은 대표이미지가 첨부되어있는지 확인 바랍니다.
+              </p>
+            </>
           )}
         </div>
       </Fieldset>
@@ -136,22 +128,14 @@ export default function PostEditor({
   );
 }
 
-function TitleFieldset({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-}) {
+function TitleFieldset({ value, onChange }: { value: string; onChange: (text: string) => void }) {
   return (
     <Fieldset title="제목" mb="mb-6" titleMb="mb-2">
-      <input
-        type="text"
-        className={`mw-[40rem] rounded-sm border border-neutral-700 h-[1.875rem] 
-            outline-none font-noto text-xs pl-2 font-normal`}
+      <BasicTextInput
         placeholder="제목을 입력하세요."
         value={value}
         onChange={onChange}
+        maxWidth="max-w-[40rem]"
       />
     </Fieldset>
   );
@@ -183,123 +167,3 @@ function FileFieldset({ files, setFiles }: FilePickerProps) {
     </Fieldset>
   );
 }
-
-function EditActionButtons({
-  onDelete,
-  onComplete,
-  getContent,
-}: EditAction & { getContent: () => EditorContent }) {
-  const requesting = useRef(false);
-  const router = useRouter();
-  const cancel = () => {
-    // 정말 취소하시겠습니까? 같은 창을 띄워야할 때는 대비해 router로 처리
-    router.back();
-  };
-  return (
-    <>
-      <GrayButton title="취소" onClick={cancel} />
-      <BlackButton
-        title="삭제"
-        onClick={async (e) => {
-          e.preventDefault();
-          if (requesting.current) return;
-          try {
-            requesting.current = true;
-            await onDelete();
-            router.back();
-          } catch (e) {
-            console.error(e);
-          } finally {
-            requesting.current = false;
-          }
-        }}
-      />
-      <BlackButton
-        title="수정하기"
-        onClick={async (e) => {
-          e.preventDefault();
-          if (requesting.current) return;
-          try {
-            requesting.current = true;
-            await onComplete(getContent());
-            router.back();
-          } catch (e) {
-            console.error(e);
-          } finally {
-            requesting.current = false;
-          }
-        }}
-      />
-    </>
-  );
-}
-
-function CreateActionButtons({
-  onComplete,
-  getContent,
-}: CreateAction & { getContent: () => EditorContent }) {
-  const requesting = useRef(false);
-  const router = useRouter();
-  const cancel = () => {
-    // 정말 취소하시겠습니까? 같은 창을 띄워야할 때는 대비해 router로 처리
-    router.back();
-  };
-  return (
-    <>
-      <GrayButton title="취소" onClick={cancel} />
-      <BlackButton
-        title="게시하기"
-        onClick={(e) => {
-          e.preventDefault();
-          if (requesting.current) return;
-          try {
-            requesting.current = true;
-            onComplete(getContent());
-          } catch (e) {
-            console.error(e);
-          } finally {
-            requesting.current = false;
-          }
-        }}
-      />
-    </>
-  );
-}
-
-const GrayButton = ({
-  title,
-  onClick,
-}: {
-  title: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-}) => (
-  <button
-    className={`
-              px-[.875rem] py-[.1875rem] rounded-[.0625rem] border-neutral-200 border-[1px]
-              bg-neutral-100 hover:bg-neutral-200
-              font-noto text-xs font-medium leading-8 text-neutral-500
-            `}
-    onClick={onClick}
-  >
-    {title}
-  </button>
-);
-
-const BlackButton = ({
-  title,
-  onClick,
-}: {
-  title: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-}) => (
-  <button
-    className={`
-              px-[.875rem] py-[.1875rem] rounded-[.0625rem] 
-              bg-neutral-700 hover:bg-neutral-500
-              font-noto text-xs font-medium leading-8 text-white
-            `}
-    onClick={onClick}
-  >
-    {title}
-  </button>
-);
diff --git a/components/editor/PostEditorProp.ts b/components/editor/PostEditorProp.ts
deleted file mode 100644
index 56ee8514..00000000
--- a/components/editor/PostEditorProp.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export interface EditorContent {
-  title: string;
-  description: string;
-  mainImage?: File;
-  attachments: File[];
-  tags: string[];
-  isPublic: boolean;
-  isPinned: boolean;
-  isSlide: boolean;
-}
-
-export interface EditAction {
-  type: 'EDIT';
-  onDelete: () => Promise<void>;
-  onComplete: (content: EditorContent) => Promise<void>;
-}
-
-export interface CreateAction {
-  type: 'CREATE';
-  onComplete: (content: EditorContent) => Promise<void>;
-}
-
-export interface EditorProps {
-  tags: string[];
-  showMainImage?: boolean;
-  showIsPinned?: boolean;
-  showIsSlide?: boolean;
-  actions: EditAction | CreateAction;
-  initialContent?: EditorContent;
-}
diff --git a/components/editor/PostEditorProps.ts b/components/editor/PostEditorProps.ts
new file mode 100644
index 00000000..b06f9a25
--- /dev/null
+++ b/components/editor/PostEditorProps.ts
@@ -0,0 +1,31 @@
+import { CreateAction, EditAction } from './common/ActionButtons';
+
+export interface PostEditorContent {
+  title: string;
+  description: string;
+  mainImage?: File;
+  attachments: File[];
+  tags: string[];
+  isPublic: boolean;
+  isPinned: boolean;
+  isSlide: boolean;
+}
+
+export interface PostEditorProps {
+  tags: string[];
+  showMainImage?: boolean;
+  showIsPinned?: boolean;
+  showIsSlide?: boolean;
+  actions: EditAction<PostEditorContent> | CreateAction<PostEditorContent>;
+  initialContent?: PostEditorContent;
+}
+
+export const postEditorDefaultValue: PostEditorContent = {
+  title: '',
+  description: '',
+  attachments: [],
+  tags: [],
+  isPublic: true,
+  isPinned: false,
+  isSlide: false,
+};
diff --git a/components/editor/SeminarEditor.tsx b/components/editor/SeminarEditor.tsx
new file mode 100644
index 00000000..ea5df11c
--- /dev/null
+++ b/components/editor/SeminarEditor.tsx
@@ -0,0 +1,304 @@
+'use client';
+
+import { Dispatch, MutableRefObject, SetStateAction, useRef, useState } from 'react';
+import SunEditorCore from 'suneditor/src/lib/core';
+
+import SunEditorWrapper from '@/components/editor/common/SunEditorWrapper';
+
+import { CreateActionButtons, EditActionButtons } from './common/ActionButtons';
+import BasicTextInput from './common/BasicTextInput';
+import DateSelector from './common/DateSelector';
+import Fieldset from './common/Fieldset';
+import FilePicker, { FilePickerProps } from './common/FilePicker';
+import ImagePicker, { ImagePickerProps } from './common/ImagePicker';
+import {
+  SeminarEditorContent,
+  SeminarEditorProps,
+  SeminarSchedule,
+  SeminarSpeaker,
+  seminarEditorPlaceholder,
+} from './SeminarEditorProps';
+import TagCheckbox from '../common/search/TagCheckbox';
+
+export default function SeminarEditor({ actions, initialContent }: SeminarEditorProps) {
+  const summaryEditorRef = useRef<SunEditorCore>();
+  const speakerIntroductionEditorRef = useRef<SunEditorCore>();
+
+  // description(HTML)의 경우 useRef를 사용하기에 여기에 최신값이 반영되지 않음 주의
+  const [content, setContent] = useState<SeminarEditorContent>({
+    ...seminarEditorPlaceholder,
+    ...initialContent,
+  });
+
+  const getContentWithDescription = (): SeminarEditorContent => ({
+    ...content,
+    description: summaryEditorRef.current?.getContents(false) ?? '',
+    speaker: {
+      ...content.speaker,
+      description: speakerIntroductionEditorRef.current?.getContents(false) ?? '',
+    },
+  });
+
+  const setContentByKey =
+    <T extends keyof SeminarEditorContent>(key: T) =>
+    (value: SeminarEditorContent[T]) => {
+      setContent((content) => ({ ...content, [key]: value }));
+    };
+
+  const setScheduleContentByKey =
+    <T extends keyof SeminarEditorContent['schedule']>(key: T) =>
+    (value: SeminarEditorContent['schedule'][T]) => {
+      setContent((content) => ({ ...content, schedule: { ...content.schedule, [key]: value } }));
+    };
+
+  const setSpeakerContentByKey =
+    <T extends keyof SeminarEditorContent['speaker']>(key: T) =>
+    (value: SeminarEditorContent['speaker'][T]) => {
+      setContent((content) => ({ ...content, speaker: { ...content.speaker, [key]: value } }));
+    };
+
+  const setFiles: Dispatch<SetStateAction<File[]>> = (dispatch) => {
+    if (typeof dispatch === 'function') {
+      setContent((content) => ({
+        ...content,
+        attachments: dispatch(content.attachments),
+      }));
+    } else {
+      setContentByKey('attachments')(dispatch);
+    }
+  };
+
+  return (
+    <form className="flex flex-col">
+      <TitleFieldset value={content.title} onChange={setContentByKey('title')} />
+      <SummaryEditorFieldset
+        summaryEditorRef={summaryEditorRef}
+        initialContent={content.description}
+      />
+      <LocationFieldset value={content.location} onChange={setContentByKey('location')} />
+      <ScheduleFieldset values={content.schedule} setValues={setScheduleContentByKey} />
+      <HostFieldset value={content.host} onChange={setContentByKey('host')} />
+      <SpeakerFieldsetGroup values={content.speaker} setValues={setSpeakerContentByKey} />
+      <SpeakerIntroductionEditorFieldset
+        speakerIntroductionEditorRef={speakerIntroductionEditorRef}
+        initialContent={content.speaker.description}
+      />
+      <ImageFieldset file={content.speaker.imageURL} setFile={setSpeakerContentByKey('imageURL')} />
+      <FileFieldset files={content.attachments} setFiles={setFiles} />
+      <IsPublicFieldset isPublic={content.isPublic} setIsPublic={setContentByKey('isPublic')} />
+
+      <div className="self-end flex gap-3">
+        {actions.type === 'CREATE' && (
+          <CreateActionButtons {...actions} getContent={getContentWithDescription} />
+        )}
+        {actions.type === 'EDIT' && (
+          <EditActionButtons {...actions} getContent={getContentWithDescription} />
+        )}
+      </div>
+    </form>
+  );
+}
+
+function TitleFieldset({ value, onChange }: { value: string; onChange: (text: string) => void }) {
+  return (
+    <Fieldset title="제목" mb="mb-10" titleMb="mb-2" required>
+      <BasicTextInput
+        placeholder="제목을 입력하세요."
+        value={value}
+        onChange={onChange}
+        maxWidth="max-w-[40rem]"
+      />
+    </Fieldset>
+  );
+}
+
+function SummaryEditorFieldset({
+  summaryEditorRef,
+  initialContent,
+}: {
+  summaryEditorRef: MutableRefObject<SunEditorCore | undefined>;
+  initialContent?: string;
+}) {
+  return (
+    <Fieldset title="요약" mb="mb-10" titleMb="mb-2">
+      <SunEditorWrapper editorRef={summaryEditorRef} initialContent={initialContent} />
+    </Fieldset>
+  );
+}
+
+function LocationFieldset({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (text: string) => void;
+}) {
+  return (
+    <Fieldset title="장소" mb="mb-4" titleMb="mb-2" required>
+      <BasicTextInput
+        placeholder="제목을 입력하세요."
+        value={value}
+        onChange={onChange}
+        maxWidth="max-w-[24.625rem]"
+      />
+    </Fieldset>
+  );
+}
+
+function ScheduleFieldset({
+  values,
+  setValues,
+}: {
+  values: SeminarSchedule;
+  setValues: <T extends keyof SeminarSchedule>(key: T) => (value: SeminarSchedule[T]) => void;
+}) {
+  return (
+    <div>
+      <div className="flex gap-2 mt-4 mb-2">
+        <TagCheckbox
+          tag="하루 종일"
+          isChecked={values.allDay}
+          toggleCheck={(tag, isChecked) => setValues('allDay')(!isChecked)}
+        />
+        <TagCheckbox
+          tag="종료 일시 표시"
+          isChecked={values.showEndDate}
+          toggleCheck={(tag, isChecked) => setValues('showEndDate')(!isChecked)}
+        />
+      </div>
+      <div className="flex mb-4 gap-8">
+        <Fieldset title="시작 일시" titleMb="mb-[.54rem]" required grow={false}>
+          <DateSelector
+            date={values.startDate}
+            setDate={setValues('startDate')}
+            hideTime={values.allDay}
+          />
+        </Fieldset>
+        {values.showEndDate && (
+          <Fieldset title="종료 일시" titleMb="mb-[.54rem]" required grow={false}>
+            <DateSelector
+              date={values.endDate}
+              setDate={setValues('endDate')}
+              hideTime={values.allDay}
+            />
+          </Fieldset>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function HostFieldset({ value, onChange }: { value: string; onChange: (text: string) => void }) {
+  return (
+    <Fieldset title="주최" mb="mb-10" titleMb="mb-2">
+      <BasicTextInput value={value} onChange={onChange} maxWidth="max-w-[24.625rem]" />
+    </Fieldset>
+  );
+}
+
+function SpeakerFieldsetGroup({
+  values,
+  setValues,
+}: {
+  values: SeminarSpeaker;
+  setValues: <T extends keyof SeminarSpeaker>(key: T) => (value: SeminarSpeaker[T]) => void;
+}) {
+  return (
+    <div className="mb-10">
+      <legend className="font-yoon text-sm font-medium tracking-wide mb-3">연사 정보</legend>
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-5">
+          <Fieldset title="이름" titleMb="mb-2" required>
+            <BasicTextInput
+              maxWidth="max-w-[24.625rem]"
+              value={values.name}
+              onChange={setValues('name')}
+            />
+          </Fieldset>
+          <Fieldset title="이름 링크(url)" titleMb="mb-2">
+            <BasicTextInput
+              maxWidth="max-w-[24.625rem]"
+              value={values.nameURL}
+              onChange={setValues('nameURL')}
+            />
+          </Fieldset>
+        </div>
+        <Fieldset title="직함" titleMb="mb-2">
+          <BasicTextInput
+            maxWidth="max-w-[24.625rem]"
+            value={values.title}
+            onChange={setValues('title')}
+          />
+        </Fieldset>
+        <div className="flex gap-5">
+          <Fieldset title="소속" titleMb="mb-2" required>
+            <BasicTextInput
+              maxWidth="max-w-[24.625rem]"
+              value={values.organization}
+              onChange={setValues('organization')}
+            />
+          </Fieldset>
+          <Fieldset title="소속 링크(url)" titleMb="mb-2">
+            <BasicTextInput
+              maxWidth="max-w-[24.625rem]"
+              value={values.organizationURL}
+              onChange={setValues('organizationURL')}
+            />
+          </Fieldset>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpeakerIntroductionEditorFieldset({
+  speakerIntroductionEditorRef,
+  initialContent,
+}: {
+  speakerIntroductionEditorRef: MutableRefObject<SunEditorCore | undefined>;
+  initialContent?: string;
+}) {
+  return (
+    <Fieldset title="연사 소개" mb="mb-10" titleMb="mb-2">
+      <SunEditorWrapper editorRef={speakerIntroductionEditorRef} initialContent={initialContent} />
+    </Fieldset>
+  );
+}
+
+function ImageFieldset({ file, setFile }: ImagePickerProps) {
+  return (
+    <Fieldset title="연사 사진" mb="mb-6" titleMb="mb-2">
+      <label className="font-yoon text-sm font-normal tracking-wide mb-3 whitespace-pre-wrap">
+        {`필수는 아니지만, 없을 경우 대체 이미지가 표시되니 가급적 첨부 바랍니다.
+이미지는 글 우측 상단에 표시됩니다.`}
+      </label>
+      <ImagePicker file={file} setFile={setFile} />
+    </Fieldset>
+  );
+}
+
+function FileFieldset({ files, setFiles }: FilePickerProps) {
+  return (
+    <Fieldset title="첨부파일" mb="mb-6" titleMb="mb-3">
+      <FilePicker files={files} setFiles={setFiles} />
+    </Fieldset>
+  );
+}
+
+function IsPublicFieldset({
+  isPublic,
+  setIsPublic,
+}: {
+  isPublic: boolean;
+  setIsPublic: (value: boolean) => void;
+}) {
+  return (
+    <Fieldset title="게시 설정" titleMb="mb-3" mb="mb-11">
+      <TagCheckbox
+        tag="비공개 글"
+        isChecked={isPublic}
+        toggleCheck={(tag, isChecked) => setIsPublic(isChecked)}
+      />
+    </Fieldset>
+  );
+}
diff --git a/components/editor/SeminarEditorProps.ts b/components/editor/SeminarEditorProps.ts
new file mode 100644
index 00000000..fb24b807
--- /dev/null
+++ b/components/editor/SeminarEditorProps.ts
@@ -0,0 +1,58 @@
+import { CreateAction, EditAction } from './common/ActionButtons';
+
+export interface SeminarEditorContent {
+  title: string;
+  description: string;
+  location: string;
+  schedule: SeminarSchedule;
+  host: string;
+  speaker: SeminarSpeaker;
+  attachments: File[];
+  isPublic: boolean;
+}
+
+export interface SeminarSchedule {
+  allDay: boolean;
+  showEndDate: boolean;
+  startDate: Date;
+  endDate: Date;
+}
+
+export interface SeminarSpeaker {
+  name: string;
+  nameURL: string;
+  // 직함
+  title: string;
+  organization: string;
+  organizationURL: string;
+  description: string;
+  imageURL?: File;
+}
+
+export interface SeminarEditorProps {
+  actions: EditAction<SeminarEditorContent> | CreateAction<SeminarEditorContent>;
+  initialContent?: SeminarEditorContent;
+}
+
+export const seminarEditorPlaceholder: SeminarEditorContent = {
+  title: '',
+  description: '',
+  location: '',
+  schedule: {
+    allDay: false,
+    showEndDate: false,
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  host: '',
+  speaker: {
+    name: '',
+    nameURL: '',
+    title: '',
+    organization: '',
+    organizationURL: '',
+    description: '',
+  },
+  attachments: [],
+  isPublic: true,
+};
diff --git a/components/editor/common/ActionButtons.tsx b/components/editor/common/ActionButtons.tsx
new file mode 100644
index 00000000..7a15ae66
--- /dev/null
+++ b/components/editor/common/ActionButtons.tsx
@@ -0,0 +1,133 @@
+import { useRouter } from 'next/navigation';
+import { useRef, MouseEventHandler } from 'react';
+
+export interface EditAction<T> {
+  type: 'EDIT';
+  onDelete: () => Promise<void>;
+  onComplete: (content: T) => Promise<void>;
+}
+
+export interface CreateAction<T> {
+  type: 'CREATE';
+  onComplete: (content: T) => Promise<void>;
+}
+
+export function EditActionButtons<T>({
+  onDelete,
+  onComplete,
+  getContent,
+}: EditAction<T> & { getContent: () => T }) {
+  const requesting = useRef(false);
+  const router = useRouter();
+  const cancel = () => {
+    // 정말 취소하시겠습니까? 같은 창을 띄워야할 때는 대비해 router로 처리
+    router.back();
+  };
+  return (
+    <>
+      <GrayButton title="취소" onClick={cancel} />
+      <BlackButton
+        title="삭제"
+        onClick={async (e) => {
+          e.preventDefault();
+          if (requesting.current) return;
+          try {
+            requesting.current = true;
+            await onDelete();
+            router.back();
+          } catch (e) {
+            console.error(e);
+          } finally {
+            requesting.current = false;
+          }
+        }}
+      />
+      <BlackButton
+        title="수정하기"
+        onClick={async (e) => {
+          e.preventDefault();
+          if (requesting.current) return;
+          try {
+            requesting.current = true;
+            await onComplete(getContent());
+            router.back();
+          } catch (e) {
+            console.error(e);
+          } finally {
+            requesting.current = false;
+          }
+        }}
+      />
+    </>
+  );
+}
+
+export function CreateActionButtons<T>({
+  onComplete,
+  getContent,
+}: CreateAction<T> & { getContent: () => T }) {
+  const requesting = useRef(false);
+  const router = useRouter();
+  const cancel = () => {
+    // 정말 취소하시겠습니까? 같은 창을 띄워야할 때는 대비해 router로 처리
+    router.back();
+  };
+  return (
+    <>
+      <GrayButton title="취소" onClick={cancel} />
+      <BlackButton
+        title="게시하기"
+        onClick={(e) => {
+          e.preventDefault();
+          if (requesting.current) return;
+          try {
+            requesting.current = true;
+            onComplete(getContent());
+          } catch (e) {
+            console.error(e);
+          } finally {
+            requesting.current = false;
+          }
+        }}
+      />
+    </>
+  );
+}
+
+const GrayButton = ({
+  title,
+  onClick,
+}: {
+  title: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}) => (
+  <button
+    className={`
+              px-[.875rem] py-[.1875rem] rounded-[.0625rem] border-neutral-200 border-[1px]
+              bg-neutral-100 hover:bg-neutral-200
+              font-noto text-xs font-medium leading-8 text-neutral-500
+            `}
+    onClick={onClick}
+  >
+    {title}
+  </button>
+);
+
+const BlackButton = ({
+  title,
+  onClick,
+}: {
+  title: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}) => (
+  <button
+    className={`
+              px-[.875rem] py-[.1875rem] rounded-[.0625rem] 
+              bg-neutral-700 hover:bg-neutral-500
+              font-noto text-xs font-medium leading-8 text-white
+            `}
+    onClick={onClick}
+  >
+    {title}
+  </button>
+);
diff --git a/components/editor/common/BasicTextInput.tsx b/components/editor/common/BasicTextInput.tsx
new file mode 100644
index 00000000..9b3067ad
--- /dev/null
+++ b/components/editor/common/BasicTextInput.tsx
@@ -0,0 +1,24 @@
+export interface BasicTextInputProps {
+  value: string;
+  onChange: (text: string) => void;
+  maxWidth: string;
+  placeholder?: string;
+}
+
+export default function BasicTextInput({
+  value,
+  onChange,
+  placeholder,
+  maxWidth,
+}: BasicTextInputProps) {
+  return (
+    <input
+      type="text"
+      className={`${maxWidth} rounded-sm border border-neutral-700 h-[1.875rem]
+            outline-none font-noto text-xs pl-2 font-normal`}
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
diff --git a/components/editor/common/DateSelector.tsx b/components/editor/common/DateSelector.tsx
new file mode 100644
index 00000000..16a566e8
--- /dev/null
+++ b/components/editor/common/DateSelector.tsx
@@ -0,0 +1,118 @@
+import { LocalizationProvider, StaticDateTimePicker, StaticDatePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { koKR } from '@mui/x-date-pickers/locales';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ko';
+import { useReducer } from 'react';
+
+import { DAYS } from '@/utils/formatting';
+
+export default function DateSelector({
+  date,
+  setDate,
+  hideTime = false,
+}: {
+  date: Date;
+  setDate: (date: Date) => void;
+  hideTime?: boolean;
+}) {
+  const [expanded, toggleExpanded] = useReducer((x) => !x, false);
+
+  return (
+    <div>
+      <div className="flex gap-[.62rem]">
+        <BorderButton text={formatDate(date)} onClick={toggleExpanded} />
+        {!hideTime && <BorderButton text={formatTime(date)} onClick={toggleExpanded} />}
+      </div>
+      <div className="relative">
+        {expanded && (
+          <DateTimePicker
+            date={date}
+            setDate={setDate}
+            close={toggleExpanded}
+            hideTime={hideTime}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const BorderButton = ({ text, onClick }: { text: string; onClick: () => void }) => {
+  return (
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      className={`rounded-sm border border-neutral-700 h-[1.875rem]
+            outline-none font-noto text-xs font-normal hover:bg-neutral-100 px-4`}
+    >
+      {text}
+    </button>
+  );
+};
+
+const DateTimePicker = ({
+  date,
+  setDate,
+  close,
+  hideTime,
+}: {
+  date: Date;
+  setDate: (date: Date) => void;
+  close: () => void;
+  hideTime: boolean;
+}) => {
+  return (
+    <LocalizationProvider
+      adapterLocale="ko"
+      dateAdapter={AdapterDayjs}
+      localeText={koKR.components.MuiLocalizationProvider.defaultProps.localeText}
+    >
+      <div className="flex flex-col absolute top-1 left-0 z-10 border border-neutral-700 bg-white">
+        {hideTime ? (
+          <StaticDatePicker
+            value={dayjs(date)}
+            onChange={(value) => {
+              const date = value?.toDate();
+              date && setDate(date);
+            }}
+            slotProps={{
+              actionBar: {
+                actions: [],
+              },
+            }}
+          />
+        ) : (
+          <StaticDateTimePicker
+            value={dayjs(date)}
+            onChange={(value) => {
+              const date = value?.toDate();
+              date && setDate(date);
+            }}
+            slotProps={{
+              actionBar: {
+                actions: [],
+              },
+            }}
+          />
+        )}
+
+        <button className="self-end p-4" onClick={close}>
+          완료
+        </button>
+      </div>
+    </LocalizationProvider>
+  );
+};
+
+const formatDate = (date: Date) => {
+  return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ${
+    DAYS[date.getDay()]
+  }요일`;
+};
+
+const formatTime = (date: Date) => {
+  return `${(date.getHours() + '').padStart(2, '0')}:${(date.getMinutes() + '').padStart(2, '0')}`;
+};
diff --git a/components/editor/common/Fieldset.tsx b/components/editor/common/Fieldset.tsx
new file mode 100644
index 00000000..073f1c9a
--- /dev/null
+++ b/components/editor/common/Fieldset.tsx
@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+interface FieldsetProps {
+  title: string;
+  titleMb: string;
+  children: ReactNode;
+  mb?: string;
+  required?: boolean;
+  grow?: boolean;
+}
+
+export default function Fieldset({
+  title,
+  titleMb,
+  children,
+  mb,
+  required = false,
+  grow = true,
+}: FieldsetProps) {
+  return (
+    <fieldset className={`flex flex-col ${mb ?? ''} ${grow && 'flex-1'}`}>
+      <legend className={`font-yoon text-sm font-medium tracking-wide ${titleMb}`}>
+        {title}
+        {required && <span className="text-main-orange">*</span>}
+      </legend>
+      {children}
+    </fieldset>
+  );
+}
diff --git a/components/editor/FilePicker.tsx b/components/editor/common/FilePicker.tsx
similarity index 100%
rename from components/editor/FilePicker.tsx
rename to components/editor/common/FilePicker.tsx
diff --git a/components/editor/FilePickerRow.tsx b/components/editor/common/FilePickerRow.tsx
similarity index 85%
rename from components/editor/FilePickerRow.tsx
rename to components/editor/common/FilePickerRow.tsx
index 3ad93334..ff50e1b7 100644
--- a/components/editor/FilePickerRow.tsx
+++ b/components/editor/common/FilePickerRow.tsx
@@ -1,9 +1,9 @@
 import Image from 'next/image';
 import { MouseEventHandler } from 'react';
 
-import clearIcon from '@/public/image/clear_icon.svg';
+import ClearIcon from '@/public/image/clear_icon.svg';
 
-import useDragDrop from '../../hooks/useDragDrop';
+import useDragDrop from '../../../hooks/useDragDrop';
 
 interface FileRowProps {
   index: number;
@@ -26,7 +26,7 @@ export default function FilePickerRow({ index, url, file, moveFile, deleteFile }
       <span className="material-symbols-rounded text-lg text-neutral-400 mr-2">drag_pan</span>
       <p className="font-noto text-xs font-normal mr-4">{file.name}</p>
       <button className="ml-auto" onClick={deleteFile}>
-        <Image src={clearIcon} alt="삭제 버튼" />
+        <ClearIcon />
       </button>
     </li>
   );
diff --git a/components/editor/ImagePicker.tsx b/components/editor/common/ImagePicker.tsx
similarity index 100%
rename from components/editor/ImagePicker.tsx
rename to components/editor/common/ImagePicker.tsx
diff --git a/components/editor/SunEditorWrapper.tsx b/components/editor/common/SunEditorWrapper.tsx
similarity index 92%
rename from components/editor/SunEditorWrapper.tsx
rename to components/editor/common/SunEditorWrapper.tsx
index 59583703..9fbb2c14 100644
--- a/components/editor/SunEditorWrapper.tsx
+++ b/components/editor/common/SunEditorWrapper.tsx
@@ -10,14 +10,17 @@ import 'suneditor/dist/css/suneditor.min.css';
 
 export default function SunEditorWrapper({
   editorRef,
+  initialContent,
 }: {
   editorRef: MutableRefObject<SunEditorCore | undefined>;
+  initialContent?: string;
 }) {
   return (
     <SunEditor
       getSunEditorInstance={(x) => (editorRef.current = x)}
       height="400px"
       lang={ko}
+      defaultValue={initialContent}
       setOptions={{
         plugins,
         buttonList: [
diff --git a/components/layout/footer/Footer.tsx b/components/layout/footer/Footer.tsx
index 9a7371e6..386836c5 100644
--- a/components/layout/footer/Footer.tsx
+++ b/components/layout/footer/Footer.tsx
@@ -38,10 +38,10 @@ export default function Footer() {
 function FooterTop() {
   return (
     <div className="bg-white px-[3.75rem] py-8 flex">
-      <LinkGroup groupName="About" links={aboutLinks} width="w-[7.5rem]" />
-      <LinkGroup groupName="Resources" links={resourcesLinks} width="w-[8.25rem]" />
-      <LinkGroup groupName="Research" links={researchLinks} width="w-[9rem]" />
-      <LinkGroup groupName="More" links={moreLinks} width="w-[6.5rem]" />
+      <LinkGroup groupName="About" links={aboutLinks} width="w-[7.8rem]" />
+      <LinkGroup groupName="Resources" links={resourcesLinks} width="w-[8.55rem]" />
+      <LinkGroup groupName="Research" links={researchLinks} width="w-[9.3rem]" />
+      <LinkGroup groupName="More" links={moreLinks} width="w-[6.9rem]" />
     </div>
   );
 }
@@ -56,7 +56,7 @@ function LinkGroup({ groupName, links, width }: LinkGroupProps) {
   return (
     <section className={`${width}`}>
       <h3 className={`text-neutral-600 text-xs font-medium mb-2`}>{groupName}</h3>
-      <ul className="text-neutral-500 text-[.625rem] font-normal tracking-[.0125rem]">
+      <ul className="text-neutral-500 text-[.6875rem] font-normal tracking-[.0125rem]">
         {links.map((link, i) => (
           <li key={i} className="mb-2">
             <Link href={link.href}>{link.title}</Link>
@@ -78,7 +78,7 @@ function FooterBottom() {
 
 function FooterBottomLeft() {
   return (
-    <div className="text-neutral-500 font-noto text-[.5625rem] tracking-[.01125rem]">
+    <div className="text-neutral-500 font-noto text-[.6875rem] tracking-[.01125rem]">
       <div className="flex [&>a]:font-bold [&>span]:font-normal gap-1">
         <Link href={privacyPath}>개인정보처리방침</Link>
         <span>|</span>
diff --git a/components/layout/navbar/NavbarRoot.tsx b/components/layout/navbar/NavbarRoot.tsx
index 45c27563..54084e33 100644
--- a/components/layout/navbar/NavbarRoot.tsx
+++ b/components/layout/navbar/NavbarRoot.tsx
@@ -104,7 +104,7 @@ function NavListRow({
   return (
     <li
       className={`text-white font-yoon text-md font-medium ${
-        highlight && 'opacity-60'
+        !highlight && 'opacity-60'
       } cursor-pointer`}
       onMouseEnter={onMouseEnter}
     >
diff --git a/package-lock.json b/package-lock.json
index 68c71032..ffa34dc6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,15 @@
       "name": "csereal",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/material": "^5.14.5",
+        "@mui/x-date-pickers": "^6.11.2",
         "@types/node": "20.4.0",
         "@types/react": "18.2.14",
         "@types/react-dom": "18.2.6",
         "autoprefixer": "10.4.14",
+        "dayjs": "^1.11.9",
         "eslint": "8.44.0",
         "eslint-config-next": "13.4.8",
         "isomorphic-dompurify": "^1.8.0",
@@ -69,7 +74,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
       "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.22.10",
         "chalk": "^2.4.2"
@@ -82,7 +86,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -94,7 +97,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -108,7 +110,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -116,14 +117,12 @@
     "node_modules/@babel/code-frame/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -132,7 +131,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -141,7 +139,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -412,7 +409,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
       "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.5"
       },
@@ -534,7 +530,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
       "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -543,7 +538,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
       "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -589,7 +583,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
       "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.5",
         "chalk": "^2.4.2",
@@ -603,7 +596,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -615,7 +607,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -629,7 +620,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -637,14 +627,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -653,7 +641,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -662,7 +649,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -2091,7 +2077,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
       "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.22.5",
         "@babel/helper-validator-identifier": "^7.22.5",
@@ -2101,6 +2086,139 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2231,6 +2349,302 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.11.tgz",
+      "integrity": "sha512-FdKZGPd8qmC3ZNke7CNhzcEgToc02M6WYZc9hcBsNQ17bgAd3s9F//1bDDYgMVBYxDM71V0sv/hBHlOY4I1ZVA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.5.tgz",
+      "integrity": "sha512-+wpGH1USwPcKMFPMvXqYPC6fEvhxM3FzxC8lyDiNK/imLyyJ6y2DPb1Oue7OGIKJWBmYBqrWWtfovrxd1aJHTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.5.tgz",
+      "integrity": "sha512-4qa4GMfuZH0Ai3mttk5ccXP8a3sf7aPlAJwyMrUSz6h9hPri6BPou94zeu3rENhhmKLby9S/W1y+pmficy8JKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.11",
+        "@mui/core-downloads-tracker": "^5.14.5",
+        "@mui/system": "^5.14.5",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.5.tgz",
+      "integrity": "sha512-cC4C5RrpXpDaaZyH9QwmPhRLgz+f2SYbOty3cPkk4qPSOSfif2ZEcDD9HTENKDDd9deB+xkPKzzZhi8cxIx8Ig==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/utils": "^5.14.5",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.5.tgz",
+      "integrity": "sha512-mextXZHDeGcR7E1kx43TRARrVXy+gI4wzpUgNv7MqZs1dvTVXQGVeAT6ydj9d6FUqHBPMNLGV/21vJOrpqsL+w==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/private-theming": "^5.14.5",
+        "@mui/styled-engine": "^5.13.2",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
+      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz",
+      "integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^18.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.11.2.tgz",
+      "integrity": "sha512-AOmXtnnAhjlku03oqRMOG1oJkxazBTz06A6a0iRz+1sUyBWbqz5kKH9eYUYQC4Tv3j2EciRpwyns5xwX3wpc1A==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/utils": "^5.14.5",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/base": "^5.0.0-alpha.87",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "date-fns": "^2.25.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.4.8",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.8.tgz",
@@ -2430,6 +2844,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -2750,6 +3173,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz",
       "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g=="
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2773,6 +3201,22 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -3176,6 +3620,43 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@@ -3454,6 +3935,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3497,8 +3986,7 @@
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/core-js-compat": {
       "version": "3.32.0",
@@ -3663,6 +4151,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3814,6 +4307,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -3932,7 +4434,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -4591,6 +5092,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -5078,8 +5584,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -5465,8 +5970,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -6075,7 +6579,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -6428,6 +6931,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6847,6 +7365,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6986,6 +7512,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -7217,7 +7748,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7727,7 +8257,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz",
       "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.22.10",
         "chalk": "^2.4.2"
@@ -7737,7 +8266,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -7746,7 +8274,6 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -7757,7 +8284,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -7765,26 +8291,22 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-          "dev": true
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-          "dev": true
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -7995,7 +8517,6 @@
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
       "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.22.5"
       }
@@ -8080,14 +8601,12 @@
     "@babel/helper-string-parser": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "dev": true
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
     },
     "@babel/helper-validator-identifier": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "dev": true
+      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ=="
     },
     "@babel/helper-validator-option": {
       "version": "7.22.5",
@@ -8121,7 +8640,6 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz",
       "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.22.5",
         "chalk": "^2.4.2",
@@ -8132,7 +8650,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -8141,7 +8658,6 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -8152,7 +8668,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -8160,26 +8675,22 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-          "dev": true
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-          "dev": true
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -9143,13 +9654,126 @@
       "version": "7.22.10",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz",
       "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==",
-      "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.22.5",
         "@babel/helper-validator-identifier": "^7.22.5",
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -9245,6 +9869,133 @@
         }
       }
     },
+    "@mui/base": {
+      "version": "5.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.11.tgz",
+      "integrity": "sha512-FdKZGPd8qmC3ZNke7CNhzcEgToc02M6WYZc9hcBsNQ17bgAd3s9F//1bDDYgMVBYxDM71V0sv/hBHlOY4I1ZVA==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/core-downloads-tracker": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.5.tgz",
+      "integrity": "sha512-+wpGH1USwPcKMFPMvXqYPC6fEvhxM3FzxC8lyDiNK/imLyyJ6y2DPb1Oue7OGIKJWBmYBqrWWtfovrxd1aJHTA=="
+    },
+    "@mui/material": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.5.tgz",
+      "integrity": "sha512-4qa4GMfuZH0Ai3mttk5ccXP8a3sf7aPlAJwyMrUSz6h9hPri6BPou94zeu3rENhhmKLby9S/W1y+pmficy8JKA==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/base": "5.0.0-beta.11",
+        "@mui/core-downloads-tracker": "^5.14.5",
+        "@mui/system": "^5.14.5",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.5.tgz",
+      "integrity": "sha512-cC4C5RrpXpDaaZyH9QwmPhRLgz+f2SYbOty3cPkk4qPSOSfif2ZEcDD9HTENKDDd9deB+xkPKzzZhi8cxIx8Ig==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/utils": "^5.14.5",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.13.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
+      "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.5.tgz",
+      "integrity": "sha512-mextXZHDeGcR7E1kx43TRARrVXy+gI4wzpUgNv7MqZs1dvTVXQGVeAT6ydj9d6FUqHBPMNLGV/21vJOrpqsL+w==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/private-theming": "^5.14.5",
+        "@mui/styled-engine": "^5.13.2",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.14.5",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
+      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.5.tgz",
+      "integrity": "sha512-6Hzw63VR9C5xYv+CbjndoRLU6Gntal8rJ5W+GUzkyHrGWIyYPWZPa6AevnyGioySNETATe1H9oXS8f/7qgIHJA==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^18.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/x-date-pickers": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.11.2.tgz",
+      "integrity": "sha512-AOmXtnnAhjlku03oqRMOG1oJkxazBTz06A6a0iRz+1sUyBWbqz5kKH9eYUYQC4Tv3j2EciRpwyns5xwX3wpc1A==",
+      "requires": {
+        "@babel/runtime": "^7.22.6",
+        "@mui/utils": "^5.14.5",
+        "@types/react-transition-group": "^4.4.6",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      }
+    },
     "@next/env": {
       "version": "13.4.8",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.8.tgz",
@@ -9348,6 +10099,11 @@
         "tslib": "^2.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -9539,6 +10295,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz",
       "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g=="
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -9562,6 +10323,22 @@
         "@types/react": "*"
       }
     },
+    "@types/react-is": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+      "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -9826,6 +10603,35 @@
         "dequal": "^2.0.3"
       }
     },
+    "babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+          "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+        }
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@@ -10006,6 +10812,11 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -10040,8 +10851,7 @@
     "convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "core-js-compat": {
       "version": "3.32.0",
@@ -10163,6 +10973,11 @@
         "whatwg-url": "^12.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -10267,6 +11082,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -10355,7 +11179,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -10853,6 +11676,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -11191,8 +12019,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "is-bigint": {
       "version": "1.0.4",
@@ -11440,8 +12267,7 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -11868,7 +12694,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -12071,6 +12896,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12371,6 +13207,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -12457,6 +13298,11 @@
         "client-only": "0.0.1"
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -12624,8 +13470,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
     },
     "to-regex-range": {
       "version": "5.0.1",
diff --git a/package.json b/package.json
index 390d011d..66f88bed 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.5",
+    "@mui/x-date-pickers": "^6.11.2",
     "@types/node": "20.4.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
+    "dayjs": "^1.11.9",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.8",
     "isomorphic-dompurify": "^1.8.0",