✨ Feat(create-post): 게시글 내용 작성하기 추가

related to: #169

src/app/(main)/_components/Header/index.tsx

@@ -6,7 +6,7 @@ import { ProfileButton } from './ProfileButton/inex'
 
 export const Header = () => {
   return (
-    <header className="flex w-full items-center justify-between gap-10 px-12">
+    <header className="z-10 flex w-full items-center justify-between gap-10 px-12">
       <Logo className="h-7" />
       {/* mobile mode */}
       <div className="flex items-center gap-4 md:hidden">

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/PostContentFieldEditor/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { Block, BlockNoteEditor, PartialBlock } from '@blocknote/core'
+import { BlockNoteView } from '@blocknote/mantine'
+import '@blocknote/mantine/style.css'
+
+import { usePostEditorStore } from '~create-post/_store/post-editor'
+
+export const PostContentFieldEditor = () => {
+  const { setPostContent, getPostContent } = usePostEditorStore()
+  const [initialContent, setInitialContent] = useState<
+    'loading' | PartialBlock[] | undefined
+  >('loading')
+
+  useEffect(() => {
+    const storedBlocks = getPostContent()
+    setInitialContent(storedBlocks)
+  }, [getPostContent])
+
+  const editor = useMemo(() => {
+    if (initialContent === 'loading') {
+      return undefined
+    }
+    return BlockNoteEditor.create({ initialContent })
+  }, [initialContent])
+
+  if (editor === undefined) {
+    return <div>글 불러오는 중...</div>
+  }
+
+  return (
+    <BlockNoteView
+      editor={editor}
+      onChange={() => {
+        setPostContent(editor.document as Block[])
+      }}
+      className="h-96 overflow-auto rounded-md border pt-4"
+    />
+  )
+}

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/index.tsx

@@ -12,10 +12,14 @@ import { CreatePost, CreatePostSchema } from '@/schema/post'
 
 import { ActivityFormField } from '~activity/_components/ActivityFormField'
 import { ActivityImageInput } from '~activity/_components/ActivityImageInput'
+import { usePostEditorStore } from '~create-post/_store/post-editor'
 
 import { ActivityDateFieldDialog } from './ActivityDateFieldDialog'
+import { PostContentFieldEditor } from './PostContentFieldEditor'
 
 export const CreatePostForm = () => {
+  const getPostContent = usePostEditorStore((state) => state.getPostContent)
+  const clearPostContent = usePostEditorStore((state) => state.clearPostContent)
   const form = useForm<CreatePost>({
     resolver: zodResolver(CreatePostSchema),
     defaultValues: {
@@ -29,14 +33,22 @@ export const CreatePostForm = () => {
     },
   })
 
-  const onSubmit = (form: CreatePost) => {
-    console.log(form)
+  const onSubmit = (values: CreatePost) => {
+    console.log(values)
+  }
+
+  const onClick = () => {
+    const storedContent = getPostContent()
+    form.setValue('postContent', JSON.stringify(storedContent))
+    clearPostContent()
+
+    form.handleSubmit(onSubmit)()
   }
 
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit(onSubmit)}
+        onSubmit={(e) => e.preventDefault()}
         className="flex flex-col gap-4"
       >
         <ActivityFormField name="postTitle" label="게시글 제목">
@@ -45,12 +57,15 @@ export const CreatePostForm = () => {
         <ActivityDateFieldDialog />
         <Seperator />
         <div>게시글 내용 작성하기</div>
+        <PostContentFieldEditor />
         <Seperator />
         <ActivityFormField name="imageFile" label="게시글 대표 사진">
           {(field) => <ActivityImageInput field={field} />}
         </ActivityFormField>
         <div className="flex justify-end">
-          <Button type="submit">게시글 업로드</Button>
+          <Button type="submit" onClick={onClick}>
+            게시글 업로드
+          </Button>
         </div>
       </form>
     </Form>

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostHero/index.tsx

@@ -30,7 +30,7 @@ export const CreatePostHero = ({
   ]
 
   return (
-    <div className="py-6">
+    <div>
       <Seperator variant="dark" />
       <ActivityBreadcrumb navLinks={navLinks} pageName="게시글 생성하기" />
       <Seperator variant="dark" />

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_store/post-editor.ts

@@ -0,0 +1,29 @@
+import { Block } from '@blocknote/core'
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+interface PostEditorProps {
+  postContent?: Block[]
+  setPostContent: (blocks: Block[]) => void
+  getPostContent: () => Block[] | undefined
+  clearPostContent: () => void
+}
+
+export const usePostEditorStore = create(
+  persist<PostEditorProps>(
+    (set, get) => ({
+      postContent: undefined,
+      setPostContent: (block) => {
+        set({ postContent: block })
+      },
+      getPostContent: () => get().postContent,
+      clearPostContent: () => {
+        set({ postContent: undefined })
+      },
+    }),
+    {
+      name: 'post-editor',
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+)

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/page.tsx

@@ -10,7 +10,7 @@ type CreatePostPageParams = {
 
 const CreatePostPage = ({ params }: CreatePostPageParams) => {
   return (
-    <div className="gap-10">
+    <div className="flex flex-col gap-6 py-10">
       <CreatePostHero
         activityId={Number(params.activityId)}
         boardId={Number(params.boardId)}

tsconfig.json

@@ -20,7 +20,10 @@
     "paths": {
       "@/*": ["./src/*"],
       "~auth/*": ["./src/app/auth/*"],
-      "~activity/*": ["./src/app/(main)/activity/*"]
+      "~activity/*": ["./src/app/(main)/activity/*"],
+      "~create-post/*": [
+        "./src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/*"
+      ]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],