Feat: (어드민) 게시물 생성 페이지 및 기능 구현

package.json

@@ -24,13 +24,15 @@
     }
   },
   "dependencies": {
+    "@babel/runtime": "^7.26.0",
     "@egjs/react-grid": "^1.16.0",
     "@hello-pangea/dnd": "^17.0.0",
     "@mui/material": "^5.15.9",
     "@next/third-parties": "^14.1.0",
     "@tanstack/react-query": "^5.17.12",
     "@tanstack/react-query-devtools": "^5.17.12",
     "@types/react-lottie": "^1.2.10",
+    "@uiw/react-md-editor": "^4.0.4",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/integration": "^6.2.4",
     "@vanilla-extract/next-plugin": "^2.3.2",

src/app/_api/notice/createNotice.ts

@@ -0,0 +1,14 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { NoticeCreateType } from '@/lib/types/noticeType';
+
+interface ResponseType {
+  id: number;
+}
+
+const createNotice = async (data: NoticeCreateType) => {
+  const response = await axiosInstance.post<ResponseType>('/admin/notices', data);
+
+  return response.data;
+};
+
+export default createNotice;

src/app/_api/notice/getNoticeCategories.ts

@@ -0,0 +1,10 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { NoticeCategoryType } from '@/lib/types/noticeType';
+
+const getNoticeCategories = async () => {
+  const result = await axiosInstance.get<NoticeCategoryType[]>('/admin/notices/categories');
+
+  return result.data;
+};
+
+export default getNoticeCategories;

src/app/_api/notice/uploadNoticeImages.ts

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface UploadImageType {
+  order: number;
+  extension: string;
+}
+
+interface UploadNoticeImagesProps {
+  noticeId: number;
+  imageExtensionData: UploadImageType[];
+  imageFileData: File[];
+}
+
+interface PresignedResponseType {
+  order: number;
+  presignedUrl: string;
+}
+
+const uploadNoticeImages = async ({ noticeId, imageFileData, imageExtensionData }: UploadNoticeImagesProps) => {
+  // 1. Presigned url 발급 요청
+  const presignedResponse = await axiosInstance.post<PresignedResponseType[]>(
+    `/admin/notices/${noticeId}/presigned-url`,
+    imageExtensionData
+  );
+
+  // 2. 발급 받은 Presigned url로 이미지 업로드
+  presignedResponse.data.forEach(async (value, index) => {
+    await axios.put(value.presignedUrl, imageFileData[index], {
+      headers: {
+        'Content-Type': imageFileData[index].type,
+      },
+    });
+  });
+
+  // 3. 이미지 업로드 완료 서버에 알림
+  await axiosInstance.post(`/admin/notices/${noticeId}/upload-complete`, imageExtensionData);
+};
+
+export default uploadNoticeImages;

src/app/admin/notice/create/_components/BlockContainer.css.ts

@@ -0,0 +1,29 @@
+import { BodyRegular } from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: '1rem 1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.5rem',
+});
+
+export const wrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const title = style([BodyRegular]);
+
+export const deleteButton = style({
+  color: vars.color.red,
+});
+
+export const content = style({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+});

src/app/admin/notice/create/_components/BlockContainer.tsx

@@ -0,0 +1,53 @@
+import { FieldArrayWithId } from 'react-hook-form';
+
+import * as styles from './BlockContainer.css';
+
+import { NOTICE_CONTENT } from '@/lib/constants/notice';
+import { NoticeContentsType, NoticeCreateType } from '@/lib/types/noticeType';
+import { BodyContent, ButtonContent, ImageContent, LineContent, NoteContent, SubTitleContent } from './block/index';
+
+interface FormAboutContentProps {
+  type: NoticeContentsType;
+  order: number;
+}
+
+const formAboutContent = ({ type, order }: FormAboutContentProps) => {
+  switch (type) {
+    case 'body':
+      return <BodyContent order={order} />;
+    case 'subtitle':
+      return <SubTitleContent order={order} />;
+    case 'button':
+      return <ButtonContent order={order} />;
+    case 'image':
+      return <ImageContent order={order} />;
+    case 'line':
+      return <LineContent />;
+    case 'note':
+      return <NoteContent order={order} />;
+    default:
+      return null;
+  }
+};
+
+interface ContainerProps {
+  content: FieldArrayWithId<NoticeCreateType, 'contents', 'id'>;
+  handleDeleteBlock: (order: number) => void;
+  order: number;
+}
+
+export default function ContentsContainer({ content, handleDeleteBlock, order }: ContainerProps) {
+  const { type } = content;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <h3 className={styles.title}>{NOTICE_CONTENT[type]}</h3>
+        <button type="button" onClick={() => handleDeleteBlock(order)} className={styles.deleteButton}>
+          삭제
+        </button>
+      </div>
+      <div className={styles.content}>{formAboutContent({ type, order })}</div>
+    </div>
+  );
+}

src/app/admin/notice/create/_components/CategoryDropdown.css.ts

@@ -0,0 +1,10 @@
+import { BodyBold } from '@/styles/font.css';
+import { style } from '@vanilla-extract/css';
+
+export const dropdown = style([
+  BodyBold,
+  {
+    padding: '0.5rem',
+    borderRadius: '8px',
+  },
+]);

src/app/admin/notice/create/_components/CategoryDropdown.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { useFormContext } from 'react-hook-form';
+
+import * as styles from './CategoryDropdown.css';
+
+import getNoticeCategories from '@/app/_api/notice/getNoticeCategories';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+
+export default function CategoryDropdown() {
+  const { register } = useFormContext();
+
+  /** 게시물 카테고리 조회 */
+  const { data: categories } = useQuery({
+    queryKey: [QUERY_KEYS.getNoticeCategories],
+    queryFn: getNoticeCategories,
+    staleTime: Infinity,
+  });
+
+  return (
+    <div>
+      <select {...register('categoryCode')} className={styles.dropdown}>
+        {categories?.map((category) => (
+          <option key={category.code} value={category.code}>
+            {category.viewName}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/app/admin/notice/create/_components/ContentsBody.css.ts

@@ -0,0 +1,16 @@
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const contents = style({
+  padding: '1rem 1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
+});
+
+export const block = style({
+  padding: '0.5rem',
+  borderRadius: 4,
+  background: vars.color.bluegray6,
+  fontSize: 14,
+});

src/app/admin/notice/create/_components/ContentsBody.tsx

@@ -0,0 +1,74 @@
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+import * as styles from './ContentsBody.css';
+
+import { NOTICE_CONTENT } from '@/lib/constants/notice';
+import { ItemsType, NoticeContentsType } from '@/lib/types/noticeType';
+
+import ContentsContainer from './BlockContainer';
+
+/** 타입에 따른 Contents 블럭 포멧 지정 유틸 함수 */
+const itemDataFormatByType = (type: NoticeContentsType) => {
+  const data: ItemsType = {
+    order: 0,
+    type,
+  };
+
+  switch (type) {
+    case 'body':
+    case 'subtitle':
+    case 'note':
+      data.description = '';
+      break;
+    case 'button':
+      data.buttonName = '';
+      data.buttonLink = '';
+      break;
+    case 'image':
+      data.imageUrl = '';
+    default:
+      data;
+  }
+  return data;
+};
+
+export default function ContentsBody() {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    name: 'contents',
+    control,
+  });
+
+  const handleAddBlock = (type: NoticeContentsType) => () => {
+    append(itemDataFormatByType(type));
+  };
+
+  const handleDeleteBlock = (order: number) => {
+    remove(order);
+  };
+
+  return (
+    <>
+      <section>
+        {fields.map((field, index) => (
+          <ContentsContainer
+            key={field.id}
+            content={field as ItemsType & { id: string }}
+            order={index}
+            handleDeleteBlock={handleDeleteBlock}
+          />
+        ))}
+      </section>
+      <section className={styles.contents}>
+        {Object.entries(NOTICE_CONTENT).map(([key, value], index) => (
+          <button
+            key={index}
+            className={styles.block}
+            onClick={handleAddBlock(key as NoticeContentsType)}
+            type="button"
+          >{`+ ${value} 추가`}</button>
+        ))}
+      </section>
+    </>
+  );
+}

src/app/admin/notice/create/_components/block/BodyContent.tsx

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+import MDEditor from '@uiw/react-md-editor';
+import { useFormContext } from 'react-hook-form';
+
+import * as styles from './index.css';
+
+interface BodyContentProps {
+  order: number;
+}
+
+// TODO security
+export default function BodyContent({ order }: BodyContentProps) {
+  const { setValue } = useFormContext();
+  const [text, setText] = useState('');
+
+  const handleChange = useCallback((value?: string) => {
+    setText(value as string);
+  }, []);
+
+  const addContentsBody = () => {
+    setValue(`contents.${order}.description`, text);
+    alert('본문을 저장했습니다.');
+  };
+
+  return (
+    <>
+      <MDEditor
+        value={text}
+        onChange={handleChange}
+        textareaProps={{ placeholder: 'Please enter Markdown text' }}
+        height={200}
+      />
+      <button onClick={addContentsBody} type="button" className={styles.contentButton}>
+        등록
+      </button>
+      <span className={styles.comment}>* 본문을 작성하는 경우 반드시 등록 버튼을 눌러 내용을 저장해주세요.</span>
+    </>
+  );
+}

src/app/admin/notice/create/_components/block/ButtonContent.tsx

@@ -0,0 +1,34 @@
+import { useFormContext } from 'react-hook-form';
+
+import * as styles from './index.css';
+
+interface ButtonContentProps {
+  order: number;
+}
+
+// TODO 버튼 링크 유효성 검사 추가
+export default function ButtonContent({ order }: ButtonContentProps) {
+  const { register } = useFormContext();
+
+  return (
+    <>
+      <div>
+        <span className={styles.buttonTitle}>버튼명</span>
+        <input
+          className={styles.input}
+          placeholder="버튼명을 입력해주세요."
+          {...register(`contents.${order}.buttonName`)}
+        />
+      </div>
+      <div>
+        <span className={styles.buttonTitle}>링크</span>
+        <input
+          className={styles.input}
+          placeholder="버튼에 연결할 링크를 입력해주세요."
+          {...register(`contents.${order}.buttonLink`)}
+        />
+        <p></p>
+      </div>
+    </>
+  );
+}