diary_day : ✨ background Image 추가하기

onejuice98 · Feb 3, 2023 · 9006402 · 9006402
1 parent 495126c
commit 9006402
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 28 deletions.
diff --git a/src/components/diary/Editor.tsx b/src/components/diary/Editor.tsx
@@ -1,3 +1,5 @@
+import { useRecoilValue } from "recoil";
+import { bgImage } from "../../recoil/diary";
 import Divider from "../common/Divider";
 import EditorHead from "./EditorHead";
 import ItemList from "./ItemList";
@@ -12,8 +14,15 @@ interface IEditor {
  * @returns Editor, 결과적으로 Day의 키를 가진 상태인 diaryContent을 최신화 시킨다.
  */
 const Editor = ({ day }: IEditor) => {
+  const bgImages = useRecoilValue<string>(bgImage);
   return (
-    <div className="p-4 gap-1 flex flex-col">
+    <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]`}
+      />
       <EditorHead day={day} />
       <Title />
       <Divider />

diff --git a/src/components/diary/LeftCanvas.tsx b/src/components/diary/LeftCanvas.tsx
@@ -1,5 +1,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";
 
 interface ILCanvas {
@@ -20,7 +22,7 @@ const LeftCanvas = ({
     useRef<HTMLCanvasElement>(null);
   const [context, setContext] = useState<CanvasRenderingContext2D>();
   const [context2, setContext2] = useState<CanvasRenderingContext2D>();
-
+  const bgImages = useRecoilState<string>(bgImage);
   const [isDrawing, setIsDrawing] = useState<boolean>(false);
   const [leftToRight, setLeftToRight] = useState(false);
   useEffect(() => {
@@ -48,7 +50,7 @@ const LeftCanvas = ({
   }, [leftToRight]);
   const drawing = (nativeEvent: any) => {
     const { offsetX, offsetY } = nativeEvent.nativeEvent;
-    if (isDrawing) {
+    if (!isDrawing) {
       context?.beginPath();
       context?.moveTo(offsetX, offsetY);
     } else {
@@ -71,19 +73,38 @@ const LeftCanvas = ({
         className="border-2 border-gray-400 rounded-md"
       ></canvas>
    */
+  useEffect(() => {
+    const canvas2 = canvasRef2.current;
+    const ctx2 = canvas2?.getContext("2d");
+
+    ctx2 && setContext2(ctx2);
+
+    const img = new Image();
+    img.onload = () => {
+      context2?.drawImage(img, 0, 0, 435, 662);
+    };
+    img.src = bgImages[0];
+  }, [bgImages]);
   return (
     <div className="grid grid-cols-2 h-full divide-x-2">
       <div>
         <canvas
           ref={canvasRef}
-          width={leftWidth}
-          height={leftHeight}
-          onMouseEnter={startDrawing}
+          width="435px"
+          height="662px"
           onMouseDown={stopDrawing}
           onMouseUp={startDrawing}
           onMouseMove={drawing}
-          className="border-2 border-gray-400 rounded-md"
-        ></canvas>
+          onMouseLeave={stopDrawing}
+        >
+          <canvas
+            ref={canvasRef2}
+            width="435px"
+            height="662px"
+            className="z-2 bg-blue-500"
+          ></canvas>
+        </canvas>
+
         <button onClick={toRight}> 옆으로! </button>
       </div>
       <Editor day={"2023-01-02"} />

diff --git a/src/components/diary/SideBar.tsx b/src/components/diary/SideBar.tsx
@@ -0,0 +1,52 @@
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useRecoilState, useSetRecoilState } from "recoil";
+import { bgImage, isCanvas } from "../../recoil/diary";
+import JuiceFont from "../common/JuiceFont";
+
+interface ISideBar {
+  day: string | undefined; // (yyyy-MM-dd)
+}
+const SideBar = ({ day }: ISideBar) => {
+  const history = useNavigate();
+  const [canvasMode, setCanvasMode] = useRecoilState<boolean>(isCanvas);
+  const [bgImages, setBgImages] = useRecoilState<string>(bgImage);
+  const imgRef: any = useRef();
+  const readURL = () => {
+    const file = imgRef.current.files[0];
+    const reader: any = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      setBgImages(reader.result);
+    };
+  };
+  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">
+        <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>
+  );
+};
+
+export default SideBar;
diff --git a/src/pages/Diary/DayDiary.tsx b/src/pages/Diary/DayDiary.tsx
@@ -5,6 +5,7 @@ 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 SideBar from "../../components/diary/SideBar";
 import { canvasHeight, canvasWidth } from "../../recoil/diary";
 
 interface ICanvasProps {
@@ -28,26 +29,7 @@ const DayDiary = () => {
   }, [divRef]);
   return (
     <div className="grid grid-cols-[240px_1fr] w-[100vw] h-[100vh]">
-      <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">
-          <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>{dayId}</JuiceFont>
-        </div>
-        <DiaryInput />
-        <CanvasInput
-          maxWidth={divRef.current?.offsetWidth}
-          maxHeight={divRef.current?.offsetHeight}
-        />
-        <button className="bg-violet-500 p-2 rounded-md shadow-md text-white">
-          네모 넣기
-        </button>
-        <div></div>
-      </div>
+      <SideBar day={dayId} />
       <div className="bg-gray-100/[0.7]" ref={divRef}>
         <LeftCanvas
           leftWidth={width}

diff --git a/src/recoil/diary.ts b/src/recoil/diary.ts
@@ -155,3 +155,14 @@ export const diaryContent = atom<diaryContentType[]>({
     },
   ],
 });
+
+// template types
+export const isCanvas = atom<boolean>({
+  key: "isCanvasState",
+  default: false,
+});
+
+export const bgImage = atom<string>({
+  key: "bgImageState",
+  default: "",
+});