From 9af61c01220c59f9e723a38f004a4b19edb9f697 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Thu, 15 Aug 2024 15:59:52 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat(create-post):=20=EA=B2=8C?=
 =?UTF-8?q?=EC=8B=9C=EA=B8=80=20=EB=82=B4=EC=9A=A9=20=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

related to: #169
---
 src/app/(main)/_components/Header/index.tsx   |  2 +-
 .../PostContentFieldEditor/index.tsx          | 42 +++++++++++++++++++
 .../_components/CreatePostForm/index.tsx      | 23 ++++++++--
 .../_components/CreatePostHero/index.tsx      |  2 +-
 .../create-post/_store/post-editor.ts         | 29 +++++++++++++
 .../boards/[boardId]/create-post/page.tsx     |  2 +-
 tsconfig.json                                 |  5 ++-
 7 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/PostContentFieldEditor/index.tsx
 create mode 100644 src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_store/post-editor.ts

diff --git a/src/app/(main)/_components/Header/index.tsx b/src/app/(main)/_components/Header/index.tsx
index 83de75b..82e1099 100644
--- a/src/app/(main)/_components/Header/index.tsx
+++ b/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">
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/PostContentFieldEditor/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/PostContentFieldEditor/index.tsx
new file mode 100644
index 0000000..3aff7ec
--- /dev/null
+++ b/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"
+    />
+  )
+}
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/index.tsx
index 284a76b..37da34b 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostForm/index.tsx
+++ b/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>
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostHero/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostHero/index.tsx
index 4dab9e8..2ba8c67 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreatePostHero/index.tsx
+++ b/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" />
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_store/post-editor.ts b/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_store/post-editor.ts
new file mode 100644
index 0000000..1176ff6
--- /dev/null
+++ b/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),
+    },
+  ),
+)
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/page.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/page.tsx
index 78bca63..eea808e 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/page.tsx
+++ b/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)}
diff --git a/tsconfig.json b/tsconfig.json
index 26f1d7b..abb3267 100644
--- a/tsconfig.json
+++ b/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"],