feat: implement review write page

ui/src/app/(board)/review/write/page.tsx

@@ -1,3 +1,58 @@
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+
+import { UserSelfChip } from '@/components/auth/client/user-self-chip';
+import Text from '@/components/common/server/text';
+import { BoardHeader } from '@/components/common/server/board-header';
+import Time from '@/components/common/server/time';
+import { CreateReviewButton } from '@/components/review/client/create-review-button';
+import ReviewTitle from '@/components/review/client/review-title';
+
+import { EditorRefProvider } from '@/context/editor/editor-ref-context';
+import { ReviewProvider } from '@/context/review/review-context';
+
+const Editor = dynamic(() => import('@/editor'), {
+  ssr: false,
+  loading: () => <div className="mx-auto my-5 h-[9.4rem] w-full"></div>,
+});
+
+function EditorHeader() {
+  return (
+    <BoardHeader>
+      <Link href="/review" className="rounded-full border bg-white px-2 py-1">
+        <Text>목록으로</Text>
+      </Link>
+      <CreateReviewButton />
+    </BoardHeader>
+  );
+}
+
 export default function Page() {
-  return <>write review</>;
+  return (
+    <EditorRefProvider>
+      <ReviewProvider>
+        <main className="container mx-auto flex max-w-5xl flex-col items-center">
+          <EditorHeader />
+
+          <section className="w-full p-4">
+            <div className="my-2 flex items-center gap-1">
+              <Text size="sm" weight="bold">
+                by
+              </Text>
+              <UserSelfChip />
+            </div>
+
+            <Time dateStr={new Date().toISOString()} />
+
+            <div className="flex w-full flex-col gap-4 pt-4">
+              <ReviewTitle placeholder="Title" />
+              <ReviewTitle isMovieName placeholder="Movie" />
+            </div>
+
+            <Editor namespace="review-editor" isNew />
+          </section>
+        </main>
+      </ReviewProvider>
+    </EditorRefProvider>
+  );
 }

ui/src/editor/editor.stories.tsx

@@ -16,7 +16,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: { namespace: 'test', isNew: true },
 
   decorators: [
     (Story) => (

ui/src/editor/index.tsx

@@ -1,20 +1,22 @@
 'use client';
 
 import { LexicalComposer, type InitialConfigType } from '@lexical/react/LexicalComposer';
+
 import { Plugins } from '@/editor/plugins';
 import nodes from '@/editor/nodes';
 import theme from '@/editor/theme';
 import '@/styles/editor.css';
 
 // This has to be rendered on client side only (no ssr!)
-export default function Editor() {
+export default function Editor({ namespace, isNew }: { namespace: string; isNew: boolean }) {
   const initialConfig: InitialConfigType = {
     nodes: [...nodes],
-    namespace: 'review-editor',
+    namespace,
     onError: (error: Error) => {
       throw error;
     },
-    theme: theme,
+    theme,
+    editable: isNew,
   };
 
   return (