Feat: 이미지 업로드 2 #65

Author: jiyeeeah

components/pages/main/Feed/FeedHeader/Upload.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import usePostBoard from '@/hooks/mutations/usePostBoard';
 import useImageUpload from '@/hooks/common/useImageUpload';
+import Image from 'next/image';
 import Avatar from '../../../../ui/Avatar';
 import Button from '../../../../ui/Button';
 import FlexBox from '../../../../ui/FlexBox';
@@ -52,6 +53,17 @@ export default function Upload({
           ) : null}
         </div>
       </FlexBox>
+      {imagePreview && (
+        <div className="relative w-full m-5 h-60 ">
+          <Image
+            fill
+            priority
+            alt="image"
+            src={imagePreview}
+            className="rounded-[10px] object-contain"
+          />
+        </div>
+      )}
       <FlexBox justify="end" className="gap-[10px] w-full">
         <label
           htmlFor="image"

hooks/mutations/usePostImageBoard.ts

@@ -0,0 +1,23 @@
+import { postImageBoard } from '@/service/board';
+// import Toast from '@/utils/notification';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+export default function usePostImageBoard(
+  boardId: number,
+  postImageUrl: string[],
+) {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading, isSuccess } = useMutation({
+    mutationFn: () => postImageBoard(boardId, { files: postImageUrl }),
+    onSuccess: () => {
+      // Toast.success('게시글이 성공적으로 업로드 되었습니다.');
+      queryClient.invalidateQueries(['boardList']);
+    },
+    onError: () => {
+      // Toast.error(
+      //   '게시글을 업로드하지 못했습니다. 잠시후 다시 시도해주세요.🥲',
+      // );
+    },
+  });
+  return { mutate, isLoading, isSuccess };
+}

service/board.ts

@@ -1,5 +1,10 @@
 import { AuthError } from '@/lib/error';
-import { CommentList, PostBoardType, PostCommentType } from '@/types/types';
+import {
+  CommentList,
+  PostBoardType,
+  PostCommentType,
+  PostImageType,
+} from '@/types/types';
 
 export async function postBoard(postBoardData: PostBoardType) {
   const url = `endpoint/api/board/register`;
@@ -15,6 +20,22 @@ export async function postBoard(postBoardData: PostBoardType) {
   return response.json();
 }
 
+export async function postImageBoard(
+  boardId: number,
+  postImageData: PostImageType,
+) {
+  const url = `endpoint/api/file/upload?boardId=${boardId}`;
+  const response = await fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(postImageData),
+  });
+  return response.json();
+}
+
 export async function getBoardList(pageParam: number) {
   const url = `/endpoint/api/board/list?pageSize=5&pageNumber=${pageParam}`;
   try {

types/types.ts

@@ -96,6 +96,10 @@ export interface PostBoardType {
   content: string;
 }
 
+export interface PostImageType {
+  files: string[];
+}
+
 export interface PostCommentType {
   boardId: number;
   parentId: number;