Refactor/143 그림일기 상태 저장 및 ai 크게보기 수정 (#155)

* [feat] 다른 페이지 다녀와도 그림 상태 유지

* [feat] ai 그림 선택 시, 해당 키워드의 캔버스에 그려진 그림 삭제

* [feat] 크게 보기 선택 시, 크게 보이도록 수정

Author: heedong12

src/components/helpWithAi/chat/ImageBlock.jsx

@@ -29,6 +29,13 @@ const SuggestImage = ({ imageSrc }) => {
         preview={{
           mask: <span className={"text-xl font-bold"}>크게 보기</span>,
           toolbarRender: () => {},
+          imageRender: (_, { image }) => (
+            <img
+              className={"scale-150 tablet:scale-[2]"}
+              src={image.url}
+              alt=""
+            />
+          ),
         }}
         className={"object-cover"}
         rootClassName={"block"}

src/hooks/canvas/useDrawEvents.js

@@ -3,7 +3,7 @@ import { useDrawStateStore } from "../../stores/DrawState";
 import { useDrawingToolStore } from "../../stores/DrawingToolStore";
 
 export const useDrawEvents = (canvasRef, keyword) => {
-  const { setDrawState } = useDrawStateStore();
+  const { setDrawState, drawState } = useDrawStateStore();
   const { drawingTools } = useDrawingToolStore();
 
   const { brushSize, color, drawingMode } = drawingTools;
@@ -21,6 +21,11 @@ export const useDrawEvents = (canvasRef, keyword) => {
         setContext(ctx);
       }, 0);
     }
+    if (drawState[keyword]) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      ctx.putImageData(drawState[keyword].canvasState, 0, 0);
+    }
   }, [canvasRef]);
 
   // 색과 두께 변경 시 마다 호출

src/hooks/canvas/useResetCanvas.js

@@ -1,11 +1,14 @@
 import { useEffect } from "react";
 import { useAiImageStore } from "../../stores/AiImagesStore";
 import { useKeywordStore } from "../../stores/KeywordStore";
+import { useDrawStateStore } from "../../stores/DrawState";
 const useResetCanvas = () => {
   const { resetAiImages } = useAiImageStore();
   const { resetSelectedKeyword } = useKeywordStore();
+  const { resetCanvasState } = useDrawStateStore();
 
   useEffect(() => {
+    resetCanvasState();
     resetAiImages();
     resetSelectedKeyword();
   }, []);

src/pages/draws/ControlPhotoOpacity.jsx

@@ -4,6 +4,7 @@ import { AiProfile } from "../../components/helpWithAi/chat/Chat";
 import { useAiImageStore } from "../../stores/AiImagesStore";
 import { useKeywordStore } from "../../stores/KeywordStore";
 import { useNavigate } from "react-router-dom";
+import { useDrawStateStore } from "../../stores/DrawState";
 import useGoDiaryDraw from "../../hooks/canvas/useGoDiaryDraw";
 
 export const CONTROL_PHOTO_OPACITY_PAGE_PATH = "/diary/draw/ai/edit";
@@ -97,6 +98,7 @@ const Buttons = ({ selectedOpacity }) => {
 
   const { AiImages, setAiImages, removeAiImage } = useAiImageStore();
   const { goDiaryDraw } = useGoDiaryDraw();
+  const { resetOneCavnasState } = useDrawStateStore();
 
   const handleClickCancelButton = () => {
     removeAiImage(selectedKeyword.keywordId);
@@ -108,6 +110,7 @@ const Buttons = ({ selectedOpacity }) => {
       AiImages[selectedKeyword.keywordId].imageUrl,
       OPACITY_BUTTON[selectedOpacity].value
     );
+    resetOneCavnasState(selectedKeyword.keywordId);
     goDiaryDraw();
   };
   return (

src/stores/DrawState.js

@@ -119,4 +119,15 @@ export const useDrawStateStore = create((set) => ({
       };
     });
   },
+
+  resetCanvasState: () => {
+    set({ drawState: {} });
+  },
+
+  resetOneCavnasState: (keyword) => {
+    set((state) => {
+      const { [keyword]: _, ...newDrawState } = state.drawState; // keyword를 제외한 나머지 속성으로 새로운 객체를 생성합니다.
+      return { drawState: newDrawState };
+    });
+  },
 }));