diary_day : 웹에디터 70%

onejuice98 · Jan 30, 2023 · c134281 · c134281
1 parent a24171a
commit c134281
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.0",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
     "react-xml-parser": "^1.1.8",

diff --git a/src/components/DDay/DDayInput.tsx b/src/components/DDay/DDayInput.tsx
@@ -18,7 +18,6 @@ const DayInput = () => {
       ...userInputs,
       [event.currentTarget.name]: event.currentTarget.value,
     });
-    console.log(userInputs);
   };
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();

diff --git a/src/components/common/SetBtn.tsx b/src/components/common/SetBtn.tsx
@@ -3,20 +3,20 @@ import { DragControls } from "framer-motion";
 interface ISetBtn {
   onClick?: () => void;
   isHover?: boolean;
-  dragControls?: DragControls;
+  isWeakGray?: boolean;
+  others?: string;
 }
-const SetBtn = ({ onClick, isHover, dragControls }: ISetBtn) => {
+const SetBtn = ({ onClick, isHover, isWeakGray, others }: ISetBtn) => {
   return (
     <button
       data-collapse-toggle="navbar-sticky"
       type="button"
-      className={`inline-flex items-center p-2 text-sm text-gray-500 rounded-lg focus:outline-none dark:text-gray-400 ${
+      className={`inline-flex items-center p-2 text-sm rounded-lg focus:outline-none dark:text-gray-400 ${
         isHover && `dark:hover:bg-gray-700 hover:bg-gray-100`
-      }`}
+      } ${isWeakGray ? `text-gray-400` : "text-gray-500"} ${others}`}
       aria-controls="navbar-sticky"
       aria-expanded="false"
       onClick={onClick}
-      onPointerDown={(event) => dragControls?.start(event)}
     >
       <svg
         className="w-4 h-4"
@@ -26,9 +26,9 @@ const SetBtn = ({ onClick, isHover, dragControls }: ISetBtn) => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         ></path>
       </svg>
     </button>

diff --git a/src/components/common/Skeleton.tsx b/src/components/common/Skeleton.tsx
@@ -29,9 +29,9 @@ const Skeleton = () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
           <div>

diff --git a/src/components/common/Toast.tsx b/src/components/common/Toast.tsx
@@ -18,9 +18,9 @@ const Toast = () => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           ></path>
         </svg>
       </div>
@@ -43,9 +43,9 @@ const Toast = () => {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           ></path>
         </svg>
       </button>

diff --git a/src/components/diary/Editor.tsx b/src/components/diary/Editor.tsx
@@ -0,0 +1,79 @@
+import e from "express";
+import { Reorder, useDragControls } from "framer-motion";
+import React, {
+  ChangeEvent,
+  InputHTMLAttributes,
+  MouseEventHandler,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useForm } from "react-hook-form";
+import SetBtn from "../common/SetBtn";
+
+interface ILineBreak {
+  textLength: boolean;
+}
+interface ITextarea {
+  rows: number;
+  lineBreak: {};
+}
+const Editor = () => {
+  const dragControls = useDragControls();
+
+  const { register, watch } = useForm();
+  const [contextList, setContextList] = useState<string[]>(["context"]);
+  const [isEnter, setIsEnter] = useState(false);
+  const [contextNumber, setContextNumber] = useState(0);
+
+  const onKeyEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      setIsEnter(true);
+    }
+
+    return isEnter;
+  };
+
+  useEffect(() => {
+    if (isEnter) {
+      console.log("Hello!");
+      setContextNumber((num) => num + 1);
+      setContextList([...contextList, "context" + contextNumber]);
+      setIsEnter(false);
+    }
+  }, [isEnter]);
+
+  return (
+    <div className="p-4 gap-2 flex flex-col">
+      <Reorder.Group values={contextList} onReorder={setContextList} axis="y">
+        {contextList.map((val, idx) => (
+          // key 는 number 면 이거 작동안함 ㅋㅋ;; 완전 핵 어이 없음
+          <Reorder.Item value={val} key={val} dragControls={dragControls}>
+            <div className="flex gap-2 group relative items-center">
+              <button
+                onClick={() => setIsEnter(true)}
+                className="group-hover:opacity-100 relative opacity-0 hover:opacity-100 hover:bg-gray-200 w-8 h-8 rounded-md duration-500 text-gray-400"
+              >
+                +
+              </button>
+              <SetBtn
+                isWeakGray
+                others="relative opacity-0 group-hover:opacity-100 hover:opacity-100 hover:bg-gray-200 duration-500"
+              />
+              <input
+                {...register(idx + "", {})}
+                onKeyUp={onKeyEnter}
+                autoComplete="off"
+                className={`font-mono border-none bg-gray-100/[0.1] text-base w-full px-1 active:bg-blue-200 duration-150 whitespace-pre-line resize-none`}
+                placeholder="내용을 입력하세요. 다음 줄 입력시 'Enter' 입니다."
+              />
+            </div>
+          </Reorder.Item>
+        ))}
+      </Reorder.Group>
+    </div>
+  );
+};
+
+export default Editor;
diff --git a/src/components/diary/LeftCanvas.tsx b/src/components/diary/LeftCanvas.tsx
@@ -1,5 +1,6 @@
 import { RefObject, useEffect, useRef, useState } from "react";
 import { createTextChangeRange } from "typescript";
+import Editor from "./Editor";
 
 interface ILCanvas {
   leftWidth: number;
@@ -62,8 +63,16 @@ const LeftCanvas = ({
     setIsDrawing(false);
   };
 
+  /**
+   * <canvas
+        ref={canvasRef2}
+        width={rightWidth}
+        height={rightHeight}
+        className="border-2 border-gray-400 rounded-md"
+      ></canvas>
+   */
   return (
-    <div className="grid grid-cols-2">
+    <div className="grid grid-cols-2 h-full divide-x-2">
       <div>
         <canvas
           ref={canvasRef}
@@ -77,13 +86,7 @@ const LeftCanvas = ({
         ></canvas>
         <button onClick={toRight}> 옆으로! </button>
       </div>
-
-      <canvas
-        ref={canvasRef2}
-        width={rightWidth}
-        height={rightHeight}
-        className="border-2 border-gray-400 rounded-md"
-      ></canvas>
+      <Editor />
     </div>
   );
 };

diff --git a/src/pages/Diary/DayDiary.tsx b/src/pages/Diary/DayDiary.tsx
@@ -49,7 +49,7 @@ const DayDiary = () => {
         </button>
         <div></div>
       </div>
-      <div className="bg-gray-100/[0.7] p-4" ref={divRef}>
+      <div className="bg-gray-100/[0.7]" ref={divRef}>
         <LeftCanvas
           leftWidth={width}
           leftHeight={height}