diary_day : ✨ canvas update

src/components/diary/LeftCanvas.tsx

@@ -2,7 +2,7 @@ import { RefObject, useEffect, useRef, useState } from "react";
 import { useRecoilState } from "recoil";
 import { createTextChangeRange } from "typescript";
 import { bgImage } from "../../recoil/diary";
-import Editor from "./Editor";
+import Editor from "./editor/Editor";
 
 interface ILCanvas {
   leftWidth: number;
@@ -107,7 +107,6 @@ const LeftCanvas = ({
 
         <button onClick={toRight}> 옆으로! </button>
       </div>
-      <Editor day={"2023-01-02"} />
     </div>
   );
 };

src/components/diary/SideBar.tsx

@@ -7,9 +7,8 @@ import JuiceFont from "../common/JuiceFont";
 interface ISideBar {
   day: string | undefined; // (yyyy-MM-dd)
 }
-const SideBar = ({ day }: ISideBar) => {
+const SideBar = () => {
   const history = useNavigate();
-  const [canvasMode, setCanvasMode] = useRecoilState<boolean>(isCanvas);
   const [bgImages, setBgImages] = useRecoilState<string>(bgImage);
   const imgRef: any = useRef();
   const readURL = () => {
@@ -21,30 +20,21 @@ const SideBar = ({ day }: ISideBar) => {
     };
   };
   return (
-    <div className="flex flex-col w-60 h-full bg-emerald-300 p-2 gap-4">
-      <div className="w-full h-fit flex items-center justify-between">
+    <div className="flex w-full h-14 p-2 gap-1 ">
+      <div className="h-fit flex items-center justify-between">
         <button
           className="w-10 h-10 border-[1px] border-gray-400 rounded-md shadow-md hover:bg-gray-200 hover:rounded-md duration-500 text-lg"
           onClick={() => history(-1)}
         >
           👈
         </button>
-        <JuiceFont isBold>{day}</JuiceFont>
       </div>
-
-      <button className="bg-cyan-500 p-2 rounded-md shadow-md text-white hover:bg-cyan-700 duration-300">
-        배경 그리기
-      </button>
-
       <input
         type="file"
         accept="image/png, image/jpeg"
         onChange={readURL}
         ref={imgRef}
       />
-      <img src={bgImages} />
-
-      <div></div>
     </div>
   );
 };

src/components/diary/Editor.tsx → src/components/diary/editor/Editor.tsx

@@ -1,28 +1,21 @@
 import { useRecoilValue } from "recoil";
-import { bgImage } from "../../recoil/diary";
-import Divider from "../common/Divider";
+import { bgImage } from "../../../recoil/diary";
+import Divider from "../../common/Divider";
 import EditorHead from "./EditorHead";
 import ItemList from "./ItemList";
 import Title from "./Title";
 
 interface IEditor {
-  day: string;
+  day: string | undefined;
 }
 /**
  * Editor 의 컴포넌트 모음이다.
  * @param day string(yyyy-MM-dd)
  * @returns Editor, 결과적으로 Day의 키를 가진 상태인 diaryContent을 최신화 시킨다.
  */
 const Editor = ({ day }: IEditor) => {
-  const bgImages = useRecoilValue<string>(bgImage);
   return (
-    <div className="gap-1 flex flex-col m-0 p-1">
-      <img
-        src={bgImages}
-        className={` ${
-          bgImages === "" && "hidden"
-        } p-0 m-0  absolute z-[-1] overflow-hidden flex items-center justify-center w-[421px] h-[621px]`}
-      />
+    <div className="gap-1 flex flex-col m-0 p-2">
       <EditorHead day={day} />
       <Title />
       <Divider />

src/components/diary/EditorHead.tsx → src/components/diary/editor/EditorHead.tsx

@@ -7,11 +7,11 @@ import {
   diaryItemType,
   isDisabled,
   titleText,
-} from "../../recoil/diary";
-import JuiceFont from "../common/JuiceFont";
+} from "../../../recoil/diary";
+import JuiceFont from "../../common/JuiceFont";
 
 interface IEditorHead {
-  day: string;
+  day: string | undefined;
 }
 /**
  * Editor 의 최상단부 Save / Edit 기능

src/components/diary/ItemList.tsx → src/components/diary/editor/ItemList.tsx

@@ -14,8 +14,8 @@ import {
   itemTextColorType,
   itemTextSize,
   itemTextSizeType,
-} from "../../recoil/diary";
-import SetBtn from "../common/SetBtn";
+} from "../../../recoil/diary";
+import SetBtn from "../../common/SetBtn";
 
 /**
  * Editor의 중하단부, context의 List를 더하거나 CSS를 수정한다. 내용을 추가 할 수 있다.

src/components/diary/Title.tsx → src/components/diary/editor/Title.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { isDisabled, titleText } from "../../recoil/diary";
-import JuiceFont from "../common/JuiceFont";
+import { isDisabled, titleText } from "../../../recoil/diary";
+import JuiceFont from "../../common/JuiceFont";
 
 /**
  * Editor 의 상단부, title을 입력할 수 있게 된다.

src/components/diary/template/Template.tsx

@@ -0,0 +1,65 @@
+import {
+  MouseEventHandler,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useRecoilState } from "recoil";
+import { bgImage } from "../../../recoil/diary";
+
+interface ITemplate {
+  width: number;
+  height: number;
+}
+const Template = ({ width, height }: ITemplate) => {
+  const canvasRef: RefObject<HTMLCanvasElement> =
+    useRef<HTMLCanvasElement>(null);
+  const [context, setContext] = useState<CanvasRenderingContext2D>();
+  const templateImg = useRecoilState<string>(bgImage);
+  const [isDrawing, SetIsDrawing] = useState<boolean>(false);
+  const [imgg, setImgg] = useState<string>("");
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (ctx) {
+      ctx.strokeStyle = "black";
+      ctx.lineWidth = 2.5;
+      setContext(ctx);
+    }
+
+    const img = new Image();
+    img.onload = () => {
+      context?.drawImage(img, 0, 0, width, height);
+    };
+    img.src = templateImg[0];
+  }, [templateImg]);
+
+  const drawing = (event: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
+    const { offsetX, offsetY } = event.nativeEvent;
+
+    if (!isDrawing) {
+      context?.beginPath();
+      context?.moveTo(offsetX, offsetY);
+    } else {
+      context?.lineTo(offsetX, offsetY);
+      context?.stroke();
+    }
+  };
+
+  return (
+    <div>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        onMouseMove={drawing}
+        onMouseDown={() => SetIsDrawing(true)}
+        onMouseUp={() => SetIsDrawing(false)}
+        onMouseLeave={() => SetIsDrawing(false)}
+      ></canvas>
+    </div>
+  );
+};
+
+export default Template;

src/pages/Diary/DayDiary.tsx

@@ -1,42 +1,51 @@
-import { useEffect, useRef, useState } from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
+import Divider from "../../components/common/Divider";
 import JuiceFont from "../../components/common/JuiceFont";
-import CanvasInput from "../../components/diary/CanvasInput";
-import DiaryInput from "../../components/diary/DiaryInput";
-import LeftCanvas from "../../components/diary/LeftCanvas";
+import Editor from "../../components/diary/editor/Editor";
 import SideBar from "../../components/diary/SideBar";
-import { canvasHeight, canvasWidth } from "../../recoil/diary";
+import Template from "../../components/diary/template/Template";
+import { bgImage } from "../../recoil/diary";
 
-interface ICanvasProps {
-  width: number;
-  height: number;
-}
 const DayDiary = () => {
-  const divRef = useRef<HTMLDivElement>(null);
   const { dayId } = useParams();
-  const history = useNavigate();
 
-  const width = useRecoilValue<number>(canvasWidth);
-  const height = useRecoilValue<number>(canvasHeight);
+  const templateImg = useRecoilValue<string>(bgImage);
 
-  const [rightCanvanWidth, setRightCanvasWidth] = useState<number>(0);
-  const [rightCanvasHeight, setRightCanvasHeight] = useState<number>(0);
+  const divRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+  const [templateWidth, setTemplateWidth] = useState<number>(0);
+  const [templateHeight, setTemplateHeight] = useState<number>(0);
 
+  const handleResize = () => {
+    divRef.current && setTemplateWidth(divRef.current?.offsetWidth);
+    divRef.current && setTemplateHeight(divRef.current?.offsetHeight);
+  };
   useEffect(() => {
-    divRef.current && setRightCanvasHeight(divRef.current?.offsetHeight - 10);
-    divRef.current && setRightCanvasWidth(divRef.current?.offsetWidth - 10);
-  }, [divRef]);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
-    <div className="grid grid-cols-[240px_1fr] w-[100vw] h-[100vh]">
-      <SideBar day={dayId} />
-      <div className="bg-gray-100/[0.7]" ref={divRef}>
-        <LeftCanvas
-          leftWidth={width}
-          leftHeight={height}
-          rightWidth={rightCanvanWidth}
-          rightHeight={rightCanvasHeight}
-        />
+    <div className="flex flex-col w-[100vw] h-[100vh] bg-gray-100/[0.7]">
+      <SideBar />
+      <Divider />
+      <div className="flex divide-x-[1px] w-full h-full">
+        <div className="w-[50vw]" ref={divRef}>
+          <Template width={templateWidth} height={templateHeight} />
+        </div>
+        <div className="w-[calc(50vw-1px)] h-[calc(100vh-57px)]">
+          <img
+            src={templateImg}
+            className={`${
+              templateImg === "" && "hidden"
+            } flex justify-center items-center absolute overflow-hidden z-[-1] w-[inherit] h-[inherit]`}
+          />
+          <Editor day={dayId} />
+        </div>
       </div>
     </div>
   );

src/recoil/diary.ts

@@ -41,7 +41,7 @@ export type itemStyleType = {
   textBg: itemTextBgColorType;
 };
 export type diaryContentType = {
-  day: string;
+  day: string | undefined;
   title: string;
   content: diaryItemType[];
 };