From 82f0900ec990442d01f41247a3b2b9dc8a74f753 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sat, 11 Jan 2025 18:10:10 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Feat(post):=20=EA=B2=8C=EC=8B=9C=EA=B8=80?=
 =?UTF-8?q?=20=EC=97=90=EB=94=94=ED=84=B0=EC=97=90=20=EB=A1=9C=EC=BB=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-post-form/editor/EditorField.tsx   | 23 ++++++++-
 src/service/api/post/image-upload.ts          | 10 ++++
 src/service/models/PostImages.ts              | 47 +++++++++++++++++++
 src/service/models/data-contracts.ts          | 21 +++++++++
 4 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 src/service/api/post/image-upload.ts
 create mode 100644 src/service/models/PostImages.ts

diff --git a/src/components/feature/post/create-post-form/editor/EditorField.tsx b/src/components/feature/post/create-post-form/editor/EditorField.tsx
index 5b14d5ae..65248984 100644
--- a/src/components/feature/post/create-post-form/editor/EditorField.tsx
+++ b/src/components/feature/post/create-post-form/editor/EditorField.tsx
@@ -5,14 +5,35 @@ import { useFormContext } from 'react-hook-form'
 import { BlockNoteView } from '@blocknote/mantine'
 import '@blocknote/mantine/style.css'
 import { useCreateBlockNote } from '@blocknote/react'
+import { useMutation } from '@tanstack/react-query'
 
 import { FormField, FormItem, FormMessage } from '@/components/ui'
 import { CreateActivityPost } from '@/schema/post'
+import { uploadPostImageApi } from '@/service/api/post/image-upload'
 
 const PostContentFieldEditor = () => {
+  const { mutateAsync: uploadPostImage } = useMutation({
+    mutationFn: uploadPostImageApi,
+    onSuccess: (data) => onSuccess(data.postImageId),
+  })
   const { control } = useFormContext<CreateActivityPost>()
 
-  const editor = useCreateBlockNote()
+  const uploadFile = async (file: File): Promise<string> => {
+    const data = await uploadPostImage({ data: { file } })
+
+    return data.postImageUrl.replace(
+      '/upload',
+      'https://www.knu-haedal.com/api/upload',
+    )
+  }
+
+  const editor = useCreateBlockNote({
+    uploadFile,
+  })
+
+  const onSuccess = (imageId: number) => {
+    console.log(imageId)
+  }
 
   return (
     <FormField
diff --git a/src/service/api/post/image-upload.ts b/src/service/api/post/image-upload.ts
new file mode 100644
index 00000000..b75897fa
--- /dev/null
+++ b/src/service/api/post/image-upload.ts
@@ -0,0 +1,10 @@
+import { AUTHORIZATION_API } from '@/service/config'
+import { UploadPostImageRequest } from '@/service/models'
+import { PostImages } from '@/service/models/PostImages'
+
+export const uploadPostImageApi = async ({ data }: UploadPostImageRequest) => {
+  const postImageClient = new PostImages(AUTHORIZATION_API)
+  const response = await postImageClient.registerPostImage(data)
+
+  return response.data
+}
diff --git a/src/service/models/PostImages.ts b/src/service/models/PostImages.ts
new file mode 100644
index 00000000..42936260
--- /dev/null
+++ b/src/service/models/PostImages.ts
@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+/* tslint:disable */
+
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+import { CustomHttpClient } from '../config'
+import {
+  RegisterPostImageData,
+  RegisterPostImagePayload,
+} from './data-contracts'
+import { ContentType, RequestParams } from './http-client'
+
+export class PostImages<
+  SecurityDataType = unknown,
+> extends CustomHttpClient<SecurityDataType> {
+  /**
+   * No description
+   *
+   * @tags 게시글 API
+   * @name RegisterPostImage
+   * @summary 게시글 이미지 등록
+   * @request POST:/post-images
+   * @secure
+   * @response `200` `RegisterPostImageData` OK
+   * @response `400` `void`
+   * @response `401` `void`
+   */
+  registerPostImage = (
+    data: RegisterPostImagePayload,
+    params: RequestParams = {},
+  ) =>
+    this.request<RegisterPostImageData, void>({
+      path: `/post-images`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.FormData,
+      ...params,
+    })
+}
diff --git a/src/service/models/data-contracts.ts b/src/service/models/data-contracts.ts
index 1e499f27..d80a9e33 100644
--- a/src/service/models/data-contracts.ts
+++ b/src/service/models/data-contracts.ts
@@ -711,6 +711,13 @@ export interface UpdateBoardImagePayload {
   file: File
 }
 
+export interface RegisterPostImagePayload {
+  /** @format binary */
+  file: File
+}
+
+export type RegisterPostImageData = PostImageResponseDto
+
 export type GetPostWithBoardData = PostWithBoardResponseDto
 
 export type GetNoticePostData = BasePostResponseDto
@@ -842,6 +849,16 @@ export interface GetAdminUsersRequest {
   active: boolean
 }
 
+export interface PostImageResponseDto {
+  /**
+   * 게시글 이미지 id
+   * @format int64
+   */
+  postImageId: number
+  /** 게시글 이미지 파일 Url */
+  postImageUrl: string
+}
+
 export interface LoginRequest {
   data: LoginRequestDto
 }
@@ -928,3 +945,7 @@ export interface GetUserRequest {
 export interface GetNoticePostDetailRequest {
   postId: number
 }
+
+export interface UploadPostImageRequest {
+  data: RegisterPostImagePayload
+}

From 1a753e779cd725534aa289d365aaadbb70a5cfbb Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sun, 12 Jan 2025 13:04:43 +0900
Subject: [PATCH 2/5] =?UTF-8?q?Feat(post):=20=EA=B2=8C=EC=8B=9C=ED=8C=90?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EC=82=AC=EC=9A=A9=EB=90=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20id=20=EC=B6=94=EC=B6=9C=20?=
 =?UTF-8?q?=ED=9B=84=20form=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-post/_components/form/Form.tsx     | 37 +++++++--
 .../notice/create-post/_components/Form.tsx   | 82 +++++++++++++++++--
 .../create-post-form/editor/EditorField.tsx   | 20 +++--
 3 files changed, 119 insertions(+), 20 deletions(-)

diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
index f85196be..3bcb8e60 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
@@ -1,12 +1,14 @@
 'use client'
 
+import { useRef } from 'react'
 import { useForm } from 'react-hook-form'
 
+import { Block } from '@blocknote/core'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
 
-import { PostContentFieldEditor } from '@/components/feature/post/create-post-form/editor'
+import { PostContentFieldEditor } from '@/components/feature'
 import {
   Button,
   Form,
@@ -52,6 +54,31 @@ export const CreateActivityPostForm = ({
     },
   })
 
+  const imageMapRef = useRef<Map<string, number>>(new Map())
+
+  const addImageId = (url: string, id: number) => {
+    imageMapRef.current.set(url, id)
+  }
+
+  const onSubmit = (values: CreateActivityPost) => {
+    const imageIds: number[] = []
+
+    JSON.parse(values.postContent)
+      .filter((block: Block) => block.type === 'image')
+      .forEach((block: Block) => {
+        if (block.type === 'image') {
+          const url = block.props.url.split('/').pop() ?? ''
+          const imageId = imageMapRef.current.get(url)
+
+          if (imageId) imageIds.push(imageId)
+        }
+      })
+
+    form.setValue('postImageIds', imageIds)
+
+    addActivityPost({ boardId, data: values })
+  }
+
   const onSuccess = (message?: string) => {
     toast({
       title: message,
@@ -69,9 +96,7 @@ export const CreateActivityPostForm = ({
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit((values) =>
-          addActivityPost({ boardId, data: values }),
-        )}
+        onSubmit={form.handleSubmit(onSubmit)}
         className="flex flex-col gap-4"
       >
         <FormField
@@ -94,7 +119,9 @@ export const CreateActivityPostForm = ({
         <ActivityDateFieldDialog />
         <Separator />
         <div>게시글 내용 작성하기</div>
-        <PostContentFieldEditor />
+        <PostContentFieldEditor
+          addImageId={(url: string, id: number) => addImageId(url, id)}
+        />
         <div className="flex justify-end">
           <Button type="submit" disabled={isPending}>
             게시글 업로드
diff --git a/src/app/(main)/notice/create-post/_components/Form.tsx b/src/app/(main)/notice/create-post/_components/Form.tsx
index 56fe3360..f72cc593 100644
--- a/src/app/(main)/notice/create-post/_components/Form.tsx
+++ b/src/app/(main)/notice/create-post/_components/Form.tsx
@@ -1,13 +1,26 @@
 'use client'
 
+import { useRef } from 'react'
 import { useForm } from 'react-hook-form'
 
+import { Block } from '@blocknote/core'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
 
-import { CreatePostForm } from '@/components/feature'
-import { useToast } from '@/components/ui'
+import { PostContentFieldEditor } from '@/components/feature'
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  Input,
+  Label,
+  Separator,
+  useToast,
+} from '@/components/ui'
 import { queryClient } from '@/lib/query-client'
 import { CreateNoticePost, CreateNoticePostSchema } from '@/schema/post'
 import { NoticePostQuries, addNoticePostApi } from '@/service/api'
@@ -31,6 +44,31 @@ export const CreateNoticePostForm = () => {
     },
   })
 
+  const imageMapRef = useRef<Map<string, number>>(new Map())
+
+  const addImageId = (url: string, id: number) => {
+    imageMapRef.current.set(url, id)
+  }
+
+  const onSubmit = (values: CreateNoticePost) => {
+    const imageIds: number[] = []
+
+    JSON.parse(values.postContent)
+      .filter((block: Block) => block.type === 'image')
+      .forEach((block: Block) => {
+        if (block.type === 'image') {
+          const url = block.props.url.split('/').pop() ?? ''
+          const imageId = imageMapRef.current.get(url)
+
+          if (imageId) imageIds.push(imageId)
+        }
+      })
+
+    form.setValue('postImageIds', imageIds)
+
+    addNoticePost({ data: values })
+  }
+
   const onSuccess = (message?: string) => {
     toast({
       title: message,
@@ -44,11 +82,39 @@ export const CreateNoticePostForm = () => {
   }
 
   return (
-    <CreatePostForm
-      form={form}
-      onSubmit={(values) => addNoticePost({ data: values })}
-      isExecuting={isPending}
-      isImageRequired={false}
-    />
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-4"
+      >
+        <FormField
+          control={form.control}
+          name="postTitle"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <div className="flex flex-col md:flex-row md:items-center">
+                <Label className="text-md w-40">게시글 제목</Label>
+                <FormControl>
+                  <Input value={field.value} onChange={field.onChange} />
+                </FormControl>
+              </div>
+              <div className="flex justify-end">
+                <FormMessage />
+              </div>
+            </FormItem>
+          )}
+        />
+        <Separator />
+        <div>게시글 내용 작성하기</div>
+        <PostContentFieldEditor
+          addImageId={(url: string, id: number) => addImageId(url, id)}
+        />
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isPending}>
+            게시글 업로드
+          </Button>
+        </div>
+      </form>
+    </Form>
   )
 }
diff --git a/src/components/feature/post/create-post-form/editor/EditorField.tsx b/src/components/feature/post/create-post-form/editor/EditorField.tsx
index 65248984..148aafda 100644
--- a/src/components/feature/post/create-post-form/editor/EditorField.tsx
+++ b/src/components/feature/post/create-post-form/editor/EditorField.tsx
@@ -11,30 +11,36 @@ import { FormField, FormItem, FormMessage } from '@/components/ui'
 import { CreateActivityPost } from '@/schema/post'
 import { uploadPostImageApi } from '@/service/api/post/image-upload'
 
-const PostContentFieldEditor = () => {
+interface PostContentFieldEditorProps {
+  addImageId: (url: string, id: number) => void
+}
+
+const PostContentFieldEditor = ({
+  addImageId,
+}: PostContentFieldEditorProps) => {
   const { mutateAsync: uploadPostImage } = useMutation({
     mutationFn: uploadPostImageApi,
-    onSuccess: (data) => onSuccess(data.postImageId),
   })
   const { control } = useFormContext<CreateActivityPost>()
 
   const uploadFile = async (file: File): Promise<string> => {
     const data = await uploadPostImage({ data: { file } })
 
-    return data.postImageUrl.replace(
+    const url = data.postImageUrl.split('/').pop() ?? ''
+    addImageId(url, data.postImageId)
+
+    const imageUrl = data.postImageUrl.replace(
       '/upload',
       'https://www.knu-haedal.com/api/upload',
     )
+
+    return imageUrl
   }
 
   const editor = useCreateBlockNote({
     uploadFile,
   })
 
-  const onSuccess = (imageId: number) => {
-    console.log(imageId)
-  }
-
   return (
     <FormField
       control={control}

From cca89ad9c635cc7c7a1772f26670a1521aad0d09 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sun, 12 Jan 2025 13:28:34 +0900
Subject: [PATCH 3/5] =?UTF-8?q?Rename:=20post=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-board/_components/Skeleton.tsx     | 15 -----
 .../_components/{ => detail}/BoardDetail.tsx  |  0
 .../create-board/_components/detail/index.ts  |  1 +
 .../create-board/_components/form/Form.tsx    |  8 +--
 .../form}/form-field/FormField.tsx            |  6 +-
 .../_components/form/form-field/index.ts      |  1 +
 .../SelectMemberInput.tsx                     |  2 +-
 .../form/select-member-input/index.ts         |  1 +
 .../MultipleMemberSelect.tsx                  |  0
 .../multiple-member-select/index.ts           |  1 +
 .../_components/{ => hero}/BoardHero.tsx      |  0
 .../create-board/_components/hero/index.ts    |  1 +
 .../create-board/_components/index.ts         |  5 +-
 .../[activityId]/create-board/page.tsx        | 16 ++++-
 .../create-post/_components/form/Form.tsx     | 13 ++---
 .../post/create-post-form/CreatePostForm.tsx  | 58 -------------------
 .../feature/post/create-post-form/index.ts    |  1 -
 .../feature/post/form-field/index.ts          |  1 -
 src/components/feature/post/index.ts          |  3 +-
 .../editor => post-editor}/EditorField.tsx    |  0
 .../editor => post-editor}/index.ts           |  0
 src/service/api/post/image-upload.ts          |  2 +
 22 files changed, 38 insertions(+), 97 deletions(-)
 delete mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/Skeleton.tsx
 rename src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/{ => detail}/BoardDetail.tsx (100%)
 create mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/index.ts
 rename src/{components/feature/post => app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form}/form-field/FormField.tsx (90%)
 create mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/index.ts
 rename src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/{ => select-member-input}/SelectMemberInput.tsx (93%)
 create mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/index.ts
 rename src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/{ => select-member-input/multiple-member-select}/MultipleMemberSelect.tsx (100%)
 create mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/index.ts
 rename src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/{ => hero}/BoardHero.tsx (100%)
 create mode 100644 src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/index.ts
 delete mode 100644 src/components/feature/post/create-post-form/CreatePostForm.tsx
 delete mode 100644 src/components/feature/post/create-post-form/index.ts
 delete mode 100644 src/components/feature/post/form-field/index.ts
 rename src/components/feature/post/{create-post-form/editor => post-editor}/EditorField.tsx (100%)
 rename src/components/feature/post/{create-post-form/editor => post-editor}/index.ts (100%)

diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/Skeleton.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/Skeleton.tsx
deleted file mode 100644
index 1286caee..00000000
--- a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/Skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Spinner } from '@/components/common'
-import { Separator, Skeleton } from '@/components/ui'
-
-export const CreateBoardSkeleton = () => {
-  return (
-    <div className="w-full pt-10">
-      <div>
-        <Separator variant="dark" />
-        <Skeleton className="my-4 h-5 w-full" />
-        <Separator variant="dark" />
-      </div>
-      <Spinner />
-    </div>
-  )
-}
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/BoardDetail.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/BoardDetail.tsx
similarity index 100%
rename from src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/BoardDetail.tsx
rename to src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/BoardDetail.tsx
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/index.ts
new file mode 100644
index 00000000..18f078b4
--- /dev/null
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/detail/index.ts
@@ -0,0 +1 @@
+export { CreateBoardDetail } from './BoardDetail'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/Form.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/Form.tsx
index 7200832e..d804c267 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/Form.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/Form.tsx
@@ -9,17 +9,15 @@ import { useMutation } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 import { usePathname, useRouter } from 'next/navigation'
 
-import {
-  PostFormField as BoardFormField,
-  ImageInput,
-} from '@/components/feature'
+import { ImageInput } from '@/components/feature'
 import { Button, Form, Input, Textarea, useToast } from '@/components/ui'
 import { queryClient } from '@/lib/query-client'
 import { CreateBoard, CreateBoardSchema } from '@/schema/board'
 import { addBoardApi, boardQueries } from '@/service/api'
 import { UserResponseDto } from '@/service/models'
 
-import { SelectMemberInput } from './SelectMemberInput'
+import { BoardFormField } from './form-field'
+import { SelectMemberInput } from './select-member-input'
 
 type CreateBoardFromProps = {
   activityId: number
diff --git a/src/components/feature/post/form-field/FormField.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/FormField.tsx
similarity index 90%
rename from src/components/feature/post/form-field/FormField.tsx
rename to src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/FormField.tsx
index a9aca92d..4a38cb4c 100644
--- a/src/components/feature/post/form-field/FormField.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/FormField.tsx
@@ -11,17 +11,17 @@ import {
   Label,
 } from '@/components/ui'
 
-type PostFormFieldProps = {
+type BoardFormFieldProps = {
   name: string
   label: string
   children: (field: ControllerRenderProps) => ReactNode
 }
 
-export const PostFormField = ({
+export const BoardFormField = ({
   name,
   label,
   children,
-}: PostFormFieldProps) => {
+}: BoardFormFieldProps) => {
   const form = useFormContext()
 
   return (
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/index.ts
new file mode 100644
index 00000000..d93eeb8f
--- /dev/null
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/form-field/index.ts
@@ -0,0 +1 @@
+export { BoardFormField } from './FormField'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/SelectMemberInput.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/SelectMemberInput.tsx
similarity index 93%
rename from src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/SelectMemberInput.tsx
rename to src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/SelectMemberInput.tsx
index aedc3b38..371c63e4 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/SelectMemberInput.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/SelectMemberInput.tsx
@@ -8,7 +8,7 @@ import { Skeleton } from '@/components/ui'
 import { UserQuries } from '@/service/api'
 import { UserResponseDto } from '@/service/models'
 
-import { MultipleMemberSelect } from './MultipleMemberSelect'
+import { MultipleMemberSelect } from './multiple-member-select'
 
 type SelectMemberInputProps = {
   selectedMember: UserResponseDto[]
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/index.ts
new file mode 100644
index 00000000..f05e9287
--- /dev/null
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/index.ts
@@ -0,0 +1 @@
+export { SelectMemberInput } from './SelectMemberInput'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/MultipleMemberSelect.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/MultipleMemberSelect.tsx
similarity index 100%
rename from src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/MultipleMemberSelect.tsx
rename to src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/MultipleMemberSelect.tsx
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/index.ts
new file mode 100644
index 00000000..02dd0d8c
--- /dev/null
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/form/select-member-input/multiple-member-select/index.ts
@@ -0,0 +1 @@
+export { MultipleMemberSelect } from './MultipleMemberSelect'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/BoardHero.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/BoardHero.tsx
similarity index 100%
rename from src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/BoardHero.tsx
rename to src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/BoardHero.tsx
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/index.ts
new file mode 100644
index 00000000..e2d84422
--- /dev/null
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/hero/index.ts
@@ -0,0 +1 @@
+export { CreateBoardHero } from './BoardHero'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/index.ts b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/index.ts
index 6308b8f8..c04b0617 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/index.ts
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/_components/index.ts
@@ -1,4 +1,3 @@
-export { CreateBoardDetail } from './BoardDetail'
-export { CreateBoardHero } from './BoardHero'
-export { CreateBoardSkeleton } from './Skeleton'
+export * from './hero'
+export * from './detail'
 export * from './form'
diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/page.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/page.tsx
index ed34183a..97a39d23 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/create-board/page.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/create-board/page.tsx
@@ -2,6 +2,8 @@
 
 import { useQuery } from '@tanstack/react-query'
 
+import { Spinner } from '@/components/common'
+import { Separator, Skeleton } from '@/components/ui'
 import { activityQueries, semesterQueries } from '@/service/api'
 import { useMyInfoStore } from '@/store/myInfo'
 
@@ -9,7 +11,6 @@ import {
   CreateBoardDetail,
   CreateBoardForm,
   CreateBoardHero,
-  CreateBoardSkeleton,
 } from './_components'
 
 type CreateBoardPageParams = {
@@ -60,3 +61,16 @@ const CreateBoardPage = ({ params }: CreateBoardPageParams) => {
 }
 
 export default CreateBoardPage
+
+const CreateBoardSkeleton = () => {
+  return (
+    <div className="w-full pt-10">
+      <div>
+        <Separator variant="dark" />
+        <Skeleton className="my-4 h-5 w-full" />
+        <Separator variant="dark" />
+      </div>
+      <Spinner />
+    </div>
+  )
+}
diff --git a/src/app/(main)/event/board/create-post/_components/form/Form.tsx b/src/app/(main)/event/board/create-post/_components/form/Form.tsx
index 224e18d0..b63dac12 100644
--- a/src/app/(main)/event/board/create-post/_components/form/Form.tsx
+++ b/src/app/(main)/event/board/create-post/_components/form/Form.tsx
@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 
-import { CreatePostForm } from '@/components/feature'
+import { Form } from '@/components/ui'
 import { CreateEventPost, CreateEventPostSchema } from '@/schema/post'
 
 export const CreateEventPostForm = () => {
@@ -17,11 +17,10 @@ export const CreateEventPostForm = () => {
   })
 
   return (
-    <CreatePostForm
-      form={form}
-      onSubmit={() => {}}
-      isExecuting={false}
-      isImageRequired={false}
-    />
+    <Form {...form}>
+      <form>
+        <div>temp form ui</div>
+      </form>
+    </Form>
   )
 }
diff --git a/src/components/feature/post/create-post-form/CreatePostForm.tsx b/src/components/feature/post/create-post-form/CreatePostForm.tsx
deleted file mode 100644
index beb756f7..00000000
--- a/src/components/feature/post/create-post-form/CreatePostForm.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  ControllerRenderProps,
-  FieldValues,
-  UseFormReturn,
-} from 'react-hook-form'
-
-import dynamic from 'next/dynamic'
-
-import { ImageInput, PostFormField } from '@/components/feature'
-import { Button, Form, Input, Separator, Skeleton } from '@/components/ui'
-
-const PostContentFieldEditor = dynamic(() => import('./editor/EditorField'), {
-  ssr: false,
-  loading: () => <Skeleton className="h-[500px] w-full bg-slate-100" />,
-})
-
-type CreatePostFormProps<T extends FieldValues> = {
-  form: UseFormReturn<T>
-  onSubmit: (values: T) => void
-  isExecuting: boolean
-  isImageRequired?: boolean
-}
-
-export const CreatePostForm = <T extends FieldValues>({
-  form,
-  onSubmit,
-  isExecuting,
-  isImageRequired = true,
-}: CreatePostFormProps<T>) => {
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-4"
-      >
-        <PostFormField name="postTitle" label="게시글 제목">
-          {(field: ControllerRenderProps) => <Input {...field} />}
-        </PostFormField>
-        <Separator />
-        <div>게시글 내용 작성하기</div>
-        <PostContentFieldEditor />
-        {isImageRequired && (
-          <div className="flex flex-col gap-4">
-            <Separator />
-            <PostFormField name="imageFile" label="게시글 대표 사진">
-              {(field) => <ImageInput field={field} />}
-            </PostFormField>
-          </div>
-        )}
-        <div className="flex justify-end">
-          <Button type="submit" disabled={isExecuting}>
-            게시글 업로드
-          </Button>
-        </div>
-      </form>
-    </Form>
-  )
-}
diff --git a/src/components/feature/post/create-post-form/index.ts b/src/components/feature/post/create-post-form/index.ts
deleted file mode 100644
index 223cc79f..00000000
--- a/src/components/feature/post/create-post-form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CreatePostForm } from './CreatePostForm'
diff --git a/src/components/feature/post/form-field/index.ts b/src/components/feature/post/form-field/index.ts
deleted file mode 100644
index 55da74e9..00000000
--- a/src/components/feature/post/form-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { PostFormField } from './FormField'
diff --git a/src/components/feature/post/index.ts b/src/components/feature/post/index.ts
index 4ec20f9e..c57c9b72 100644
--- a/src/components/feature/post/index.ts
+++ b/src/components/feature/post/index.ts
@@ -1,5 +1,4 @@
-export * from './create-post-form'
-export * from './form-field'
+export * from './post-editor'
 export * from './table'
 export * from './content'
 export * from './image-input'
diff --git a/src/components/feature/post/create-post-form/editor/EditorField.tsx b/src/components/feature/post/post-editor/EditorField.tsx
similarity index 100%
rename from src/components/feature/post/create-post-form/editor/EditorField.tsx
rename to src/components/feature/post/post-editor/EditorField.tsx
diff --git a/src/components/feature/post/create-post-form/editor/index.ts b/src/components/feature/post/post-editor/index.ts
similarity index 100%
rename from src/components/feature/post/create-post-form/editor/index.ts
rename to src/components/feature/post/post-editor/index.ts
diff --git a/src/service/api/post/image-upload.ts b/src/service/api/post/image-upload.ts
index b75897fa..026c6590 100644
--- a/src/service/api/post/image-upload.ts
+++ b/src/service/api/post/image-upload.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { AUTHORIZATION_API } from '@/service/config'
 import { UploadPostImageRequest } from '@/service/models'
 import { PostImages } from '@/service/models/PostImages'

From b6f9d386a865fdcbb3ca43f5794b0e014ad650b6 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sun, 12 Jan 2025 14:12:53 +0900
Subject: [PATCH 4/5] =?UTF-8?q?Fix:=20=EC=97=90=EB=94=94=ED=84=B0=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20fal?=
 =?UTF-8?q?se=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[boardId]/create-post/_components/form/Form.tsx   | 11 ++++++++++-
 .../(main)/notice/create-post/_components/Form.tsx    | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx b/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
index 3bcb8e60..c6a23f05 100644
--- a/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
+++ b/src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/create-post/_components/form/Form.tsx
@@ -6,9 +6,9 @@ import { useForm } from 'react-hook-form'
 import { Block } from '@blocknote/core'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
+import dynamic from 'next/dynamic'
 import { usePathname, useRouter } from 'next/navigation'
 
-import { PostContentFieldEditor } from '@/components/feature'
 import {
   Button,
   Form,
@@ -19,6 +19,7 @@ import {
   Input,
   Label,
   Separator,
+  Skeleton,
   useToast,
 } from '@/components/ui'
 import { queryClient } from '@/lib/query-client'
@@ -27,6 +28,14 @@ import { activityPostQuries, addActivityPostApi } from '@/service/api'
 
 import { ActivityDateFieldDialog } from './date-field-dialog'
 
+const PostContentFieldEditor = dynamic(
+  () => import('@/components/feature/post/post-editor/EditorField'),
+  {
+    ssr: false,
+    loading: () => <Skeleton className="h-[500px] w-full bg-slate-100" />,
+  },
+)
+
 interface CreateActivityPostFormProps {
   boardId: number
 }
diff --git a/src/app/(main)/notice/create-post/_components/Form.tsx b/src/app/(main)/notice/create-post/_components/Form.tsx
index f72cc593..956033c7 100644
--- a/src/app/(main)/notice/create-post/_components/Form.tsx
+++ b/src/app/(main)/notice/create-post/_components/Form.tsx
@@ -6,9 +6,9 @@ import { useForm } from 'react-hook-form'
 import { Block } from '@blocknote/core'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
+import dynamic from 'next/dynamic'
 import { usePathname, useRouter } from 'next/navigation'
 
-import { PostContentFieldEditor } from '@/components/feature'
 import {
   Button,
   Form,
@@ -19,12 +19,21 @@ import {
   Input,
   Label,
   Separator,
+  Skeleton,
   useToast,
 } from '@/components/ui'
 import { queryClient } from '@/lib/query-client'
 import { CreateNoticePost, CreateNoticePostSchema } from '@/schema/post'
 import { NoticePostQuries, addNoticePostApi } from '@/service/api'
 
+const PostContentFieldEditor = dynamic(
+  () => import('@/components/feature/post/post-editor/EditorField'),
+  {
+    ssr: false,
+    loading: () => <Skeleton className="h-[500px] w-full bg-slate-100" />,
+  },
+)
+
 export const CreateNoticePostForm = () => {
   const { toast } = useToast()
   const router = useRouter()

From 06fc89f3e134df8a1beb8fecc68521deb95eb2f6 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sun, 12 Jan 2025 22:06:32 +0900
Subject: [PATCH 5/5] =?UTF-8?q?Fix:=20base=20url=20=EC=83=81=EC=88=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feature/post/post-editor/EditorField.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/feature/post/post-editor/EditorField.tsx b/src/components/feature/post/post-editor/EditorField.tsx
index 148aafda..820217b2 100644
--- a/src/components/feature/post/post-editor/EditorField.tsx
+++ b/src/components/feature/post/post-editor/EditorField.tsx
@@ -10,6 +10,7 @@ import { useMutation } from '@tanstack/react-query'
 import { FormField, FormItem, FormMessage } from '@/components/ui'
 import { CreateActivityPost } from '@/schema/post'
 import { uploadPostImageApi } from '@/service/api/post/image-upload'
+import { BASE_URL } from '@/service/config/instance'
 
 interface PostContentFieldEditorProps {
   addImageId: (url: string, id: number) => void
@@ -29,10 +30,7 @@ const PostContentFieldEditor = ({
     const url = data.postImageUrl.split('/').pop() ?? ''
     addImageId(url, data.postImageId)
 
-    const imageUrl = data.postImageUrl.replace(
-      '/upload',
-      'https://www.knu-haedal.com/api/upload',
-    )
+    const imageUrl = data.postImageUrl.replace('/upload', `${BASE_URL}/upload`)
 
     return imageUrl
   }