Feat/144 그림 일기 저장 수정

src/apis/image.controller.js

@@ -22,6 +22,13 @@ class ImageController extends Api {
     });
   };
 
+  // 이미지 여러개 한 번에 업로드
+  uploadImgs = async (formData) => {
+    return await this.post("/image/all", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  };
+
   // 키워드 별 이미지 저장
   saveImgByKeyword = async (keywordId, imgUrl) => {
     return await this.post(`/keyword/${keywordId}/image`, {

src/components/diaryDetail/DiaryKeywordImagesSlider.jsx

@@ -1,9 +1,10 @@
 import useFetchDiary from "../../hooks/diary/queries/useFetchDiary";
 import Slider from "react-slick";
-import React from "react";
+import React, { useEffect } from "react";
 import useCreateDiary from "../../hooks/diaryDetail/queries/useCreateDiary";
 import useUpdateDiary from "../../hooks/diaryDetail/queries/useUpdateDiary";
 import useGoDiaryDraw from "../../hooks/canvas/useGoDiaryDraw";
+import "../../styles/diarySliderDots.css";
 
 const settings = {
   infinite: false,
@@ -13,7 +14,11 @@ const settings = {
 };
 
 const DiaryKeywordImagesSlider = () => {
-  let { isDiaryExist, isCanRender, diary } = useFetchDiary();
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  let { isDiaryExist, isCanRender, diary, refetch } = useFetchDiary();
   // console.log(isMutating);
   const create = useCreateDiary();
   const update = useUpdateDiary();

src/hooks/canvas/useSaveCanvas.js

@@ -8,16 +8,16 @@ const useSaveCanvas = () => {
 
   // 그림 저장
   const saveCanvas = async (canvasRefs, canvasBgRefs) => {
-    const imgUrlsOfCanvas = [];
+    const formData = new FormData();
 
     for (let i = 0; i < canvasRefs.length; i++) {
       const resultCanvas = await mergeCanvas(canvasRefs[i], canvasBgRefs[i]);
       const blob = await canvasToBlob(resultCanvas);
-      const imgUrl = await uploadCanvasImgToUrl(blob);
-
-      imgUrlsOfCanvas.push(imgUrl);
+      formData.append("images", blob, `image${i}.png`);
     }
-    await saveCanvasToImg(imgUrlsOfCanvas);
+    const imageUrls = await uploadImages(formData);
+
+    await saveCanvasToImg(imageUrls);
   };
 
   // 그림 그리는 캔버스와 ai 도움 받기 사진을 한 캔버스로 합치기
@@ -52,29 +52,30 @@ const useSaveCanvas = () => {
     });
   };
 
-  // 캔버스를 이미지로 변환 후, imgUrl 반환
-  const uploadCanvasImgToUrl = async (blob) => {
+  const uploadImages = async (formData) => {
     try {
-      const formData = new FormData();
-      formData.append("image", blob, "image.png");
-      const response = await ImageController.uploadImg(formData);
-      return response.data.result.imageUrl;
+      const res = await ImageController.uploadImgs(formData);
+      if (res.data.isSuccess) {
+        return res.data.result.imageUrls;
+      } else {
+        console.error(res.data.message);
+      }
     } catch (error) {
-      console.error("Error uploading canvas image : ", error);
+      console.error("Error uploading images : ", error);
     }
   };
 
   // 변환 된 이미지를 키워드/일기 아이디로 저장
-  const saveCanvasToImg = async (imgUrlsOfCanvas) => {
+  const saveCanvasToImg = async (imageUrls) => {
     try {
       if (isKeywordEmpty) {
-        await ImageController.saveImgByDiaryId(diaryId, imgUrlsOfCanvas[0]);
+        await ImageController.saveImgByDiaryId(diaryId, imageUrls[0]);
       } else {
         await Promise.all(
           keywords.map(({ keywordId }, index) => {
             return ImageController.saveImgByKeyword(
               keywordId,
-              imgUrlsOfCanvas[index]
+              imageUrls[index]
             );
           })
         );

src/hooks/diary/queries/useFetchDiary.js

@@ -4,6 +4,7 @@ import DiaryController from "../../../apis/diary.controller";
 import { dateToDashString, HOUR } from "../../../utils/api/dateConverter";
 import { useCalendarStore } from "../../../stores/CalendarStore";
 import useRequireAuth from "../../auth/useRequireAuth";
+import { useEffect } from "react";
 
 /**
  * @return {{diary: Diary, isFetching: boolean, isDiaryExist: boolean, isCanRender: boolean}}
@@ -17,6 +18,7 @@ const useFetchDiary = () => {
     isFetching,
     isSuccess,
     data: diary,
+    refetch,
   } = useQuery({
     queryKey: diaryQueryKey(selectedDate),
     queryFn: async () => {
@@ -31,7 +33,7 @@ const useFetchDiary = () => {
 
   const isCanRender = !isFetching && isSuccess;
 
-  return { isFetching, isCanRender, diary, isDiaryExist };
+  return { isFetching, isCanRender, diary, isDiaryExist, refetch };
 };
 
 export const diaryQueryKey = (selectedDate) => {

src/styles/diarySliderDots.css

@@ -0,0 +1,16 @@
+.slick-dots li button::before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  background-color: #fff;
+  border-radius: 999px;
+  border: 1px solid #000;
+}
+
+.slick-dots > li {
+  opacity: 50%;
+}
+
+.slick-dots > li.slick-active {
+  opacity: 1;
+}