diary_day : 삭제예정

src/components/diary/CanvasInput.tsx

@@ -0,0 +1,54 @@
+import { FormEvent, useState } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
+import { canvasHeight, canvasWidth, diaryText } from "../../recoil/diary";
+
+interface ICanvasLimit {
+  maxWidth: number | undefined;
+  maxHeight: number | undefined;
+}
+const CanvasInput = ({ maxWidth, maxHeight }: ICanvasLimit) => {
+  const [width, setWidth] = useRecoilState<number>(canvasWidth);
+  const [height, setHeight] = useRecoilState<number>(canvasHeight);
+  const handleWidthChange = (event: FormEvent<HTMLInputElement>) => {
+    setWidth(+event.currentTarget.value);
+  };
+  const handleHeightChange = (event: FormEvent<HTMLInputElement>) => {
+    setHeight(+event.currentTarget.value);
+  };
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    event.currentTarget.reset();
+  };
+  return (
+    <div>
+      <p>
+        {maxWidth} {maxHeight}
+      </p>
+      <form onSubmit={handleSubmit} className="flex justify-between">
+        <input
+          onChange={handleWidthChange}
+          className="w-[80%] rounded-md shadow-md"
+          type="number"
+          min={1}
+          max={maxWidth}
+        />
+        <input
+          onChange={handleHeightChange}
+          className="w-[80%] rounded-md shadow-md"
+          type="number"
+          min={1}
+          max={maxHeight}
+        />
+        <button
+          type="submit"
+          className="border-[0.5px] bg-white w-10 h-10 justify-center items-center rounded-md shadow-md"
+        >
+          +
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default CanvasInput;

src/components/diary/LeftCanvas.tsx

@@ -0,0 +1,91 @@
+import { RefObject, useEffect, useRef, useState } from "react";
+import { createTextChangeRange } from "typescript";
+
+interface ILCanvas {
+  leftWidth: number;
+  leftHeight: number;
+  rightWidth: number;
+  rightHeight: number;
+}
+const LeftCanvas = ({
+  leftWidth,
+  leftHeight,
+  rightWidth,
+  rightHeight,
+}: ILCanvas) => {
+  const canvasRef: RefObject<HTMLCanvasElement> =
+    useRef<HTMLCanvasElement>(null);
+  const canvasRef2: RefObject<HTMLCanvasElement> =
+    useRef<HTMLCanvasElement>(null);
+  const [context, setContext] = useState<CanvasRenderingContext2D>();
+  const [context2, setContext2] = useState<CanvasRenderingContext2D>();
+
+  const [isDrawing, setIsDrawing] = useState<boolean>(false);
+  const [leftToRight, setLeftToRight] = useState(false);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+
+    if (ctx) {
+      ctx.strokeStyle = "black"; // 선 색
+      ctx.lineWidth = 2.5; // 선 굵기
+      setContext(ctx);
+    }
+  });
+  const toRight = () => {
+    setLeftToRight(true);
+  };
+  useEffect(() => {
+    const canvas2 = canvasRef2.current;
+    const ctx2 = canvas2?.getContext("2d");
+
+    if (ctx2 && leftWidth > 0 && leftHeight > 0) {
+      const content2 = context?.getImageData(0, 0, leftWidth, leftHeight);
+      content2 && ctx2.putImageData(content2, 0, 0);
+      setLeftToRight(false);
+    }
+  }, [leftToRight]);
+  const drawing = (nativeEvent: any) => {
+    const { offsetX, offsetY } = nativeEvent.nativeEvent;
+    if (isDrawing) {
+      context?.beginPath();
+      context?.moveTo(offsetX, offsetY);
+    } else {
+      context?.lineTo(offsetX, offsetY);
+      context?.stroke();
+    }
+  };
+  const startDrawing = () => {
+    setIsDrawing(true);
+  };
+  const stopDrawing = () => {
+    setIsDrawing(false);
+  };
+
+  return (
+    <div className="grid grid-cols-2">
+      <div>
+        <canvas
+          ref={canvasRef}
+          width={leftWidth}
+          height={leftHeight}
+          onMouseEnter={startDrawing}
+          onMouseDown={stopDrawing}
+          onMouseUp={startDrawing}
+          onMouseMove={drawing}
+          className="border-2 border-gray-400 rounded-md"
+        ></canvas>
+        <button onClick={toRight}> 옆으로! </button>
+      </div>
+
+      <canvas
+        ref={canvasRef2}
+        width={rightWidth}
+        height={rightHeight}
+        className="border-2 border-gray-400 rounded-md"
+      ></canvas>
+    </div>
+  );
+};
+
+export default LeftCanvas;

src/hooks/useClientWidthHeight.tsx

@@ -0,0 +1,20 @@
+import { RefObject, useEffect, useState } from "react";
+
+export const useClientWidthHeight = (ref: RefObject<HTMLDivElement>) => {
+  const [canvasProps, setCanvasProps] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    const setClientWidthHeight = () => {
+      ref.current &&
+        setCanvasProps({
+          width: ref.current.clientWidth,
+          height: ref.current.clientHeight,
+        });
+    };
+    setClientWidthHeight();
+  }, []);
+
+  return canvasProps;
+};

src/pages/Diary/DayDiary.tsx

@@ -1,14 +1,32 @@
+import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import JuiceFont from "../../components/common/JuiceFont";
+import CanvasInput from "../../components/diary/CanvasInput";
 import DiaryInput from "../../components/diary/DiaryInput";
-import { diaryText } from "../../recoil/diary";
+import LeftCanvas from "../../components/diary/LeftCanvas";
+import { canvasHeight, canvasWidth, diaryText } from "../../recoil/diary";
 
+interface ICanvasProps {
+  width: number;
+  height: number;
+}
 const DayDiary = () => {
+  const divRef = useRef<HTMLDivElement>(null);
   const { dayId } = useParams();
   const history = useNavigate();
   const list = useRecoilValue<string[]>(diaryText);
 
+  const width = useRecoilValue<number>(canvasWidth);
+  const height = useRecoilValue<number>(canvasHeight);
+
+  const [rightCanvanWidth, setRightCanvasWidth] = useState<number>(0);
+  const [rightCanvasHeight, setRightCanvasHeight] = useState<number>(0);
+
+  useEffect(() => {
+    divRef.current && setRightCanvasHeight(divRef.current?.offsetHeight - 10);
+    divRef.current && setRightCanvasWidth(divRef.current?.offsetWidth - 10);
+  }, [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">
@@ -22,16 +40,22 @@ const DayDiary = () => {
           <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>
-      <div className="bg-gray-100/[0.7] p-4">
-        <canvas></canvas>
-        {list.map((value, idx) => (
-          <div key={idx}> {value} </div>
-        ))}
+      <div className="bg-gray-100/[0.7] p-4" ref={divRef}>
+        <LeftCanvas
+          leftWidth={width}
+          leftHeight={height}
+          rightWidth={rightCanvanWidth}
+          rightHeight={rightCanvasHeight}
+        />
       </div>
     </div>
   );

src/recoil/diary.ts

@@ -4,3 +4,17 @@ export const diaryText = atom<string[]>({
   key: "diaryTextState",
   default: [],
 });
+
+export const canvasWidth = atom<number>({
+  key: "canvasWidth",
+  default: 0,
+});
+
+export const canvasHeight = atom<number>({
+  key: "canvasHeight",
+  default: 0,
+});
+
+export const leftContext = atom<CanvasRenderingContext2D>({
+  key: "leftContext",
+});