diary_day : Save Button, text font size 조절, 제목

src/components/common/JuiceFont.tsx

@@ -8,6 +8,7 @@
 interface IJuiceFont {
   isBold?: boolean;
   isSmall?: boolean;
+  isBig?: boolean;
   others?: string;
   isTooltip?: boolean;
   children: React.ReactNode;
@@ -17,13 +18,14 @@ const JuiceFont = ({
   isSmall = false,
   others = "none",
   children,
+  isBig = false,
 }: IJuiceFont) => {
   return (
     <>
       <div
         className={`font-mono ${isBold && `font-bold`} ${
           isSmall && `text-sm`
-        } ${others} `}
+        } ${isBig && `text-lg`} ${others} `}
       >
         {children}
       </div>

src/components/common/SetBtn.tsx

@@ -1,37 +1,67 @@
 import { DragControls } from "framer-motion";
+import React, { useState } from "react";
+import { useSetRecoilState } from "recoil";
+import { textSize, textSizeType } from "../../recoil/diary";
 
 interface ISetBtn {
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   isHover?: boolean;
   isWeakGray?: boolean;
   others?: string;
+  isSettingBox?: boolean;
 }
-const SetBtn = ({ onClick, isHover, isWeakGray, others }: ISetBtn) => {
+const SetBtn = ({
+  onClick,
+  isHover,
+  isWeakGray,
+  others,
+  isSettingBox,
+}: ISetBtn) => {
+  const [hover, setHover] = useState(false);
+  const setTextSize = useSetRecoilState<textSizeType>(textSize);
+  const handleTextSize = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value: textSizeType = event.currentTarget.value;
+    setTextSize(value);
+  };
   return (
-    <button
-      data-collapse-toggle="navbar-sticky"
-      type="button"
-      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}
-    >
-      <svg
-        className="w-4 h-4"
-        aria-hidden="true"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
+    <>
+      <button
+        data-collapse-toggle="navbar-sticky"
+        type="button"
+        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"
+        onMouseUp={() => setHover(true)}
+        onClick={onClick}
       >
-        <path
-          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"
-          clipRule="evenodd"
-        ></path>
-      </svg>
-    </button>
+        <svg
+          className="w-4 h-4"
+          aria-hidden="true"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            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"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      {isSettingBox && hover && (
+        <div className="w-32 h-72 bg-amber-200 absolute translate-y-[45%] duration-300 z-[999]">
+          <button onClick={() => setHover(false)}> X </button>
+          <select onChange={handleTextSize}>
+            <option value="text-base"> 적당히 </option>
+            <option value="text-sm"> 작게 </option>
+            <option value="text-lg"> 크게 </option>
+          </select>
+          <button onClick={onClick}> 적용 </button>
+        </div>
+      )}
+    </>
   );
 };
 

src/components/diary/Editor.tsx

@@ -1,77 +1,123 @@
-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 { useParams } from "react-router-dom";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { dDayListState, UserInput } from "../../recoil/dDay";
+import {
+  DiaryContext,
+  diaryContextState,
+  textSize,
+  textSizeType,
+} from "../../recoil/diary";
+import Divider from "../common/Divider";
+import JuiceFont from "../common/JuiceFont";
 import SetBtn from "../common/SetBtn";
 
-interface ILineBreak {
-  textLength: boolean;
+interface IEditor {
+  day: string;
 }
-interface ITextarea {
-  rows: number;
-  lineBreak: {};
-}
-const Editor = () => {
-  const dragControls = useDragControls();
-
+const Editor = ({ day }: IEditor) => {
   const { register, watch } = useForm();
-  const [contextList, setContextList] = useState<string[]>(["context"]);
+  const [contextList, setContextList] =
+    useRecoilState<DiaryContext[]>(diaryContextState);
+  const contextRef = useRef<(HTMLInputElement | null)[]>([]);
   const [isEnter, setIsEnter] = useState(false);
-  const [contextNumber, setContextNumber] = useState(0);
-
+  const [contextNumber, setContextNumber] = useState(1);
+  const [makeDisable, setMakeDisable] = useState(false);
+  const [onSetting, setOnSetting] = useState(false);
+  const [inputTextSize, setInputTextSize] = useState<string[]>([]);
+  const [fontSize, setFontSize] = useRecoilState<textSizeType>(textSize);
   const onKeyEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
       setIsEnter(true);
     }
-
     return isEnter;
   };
+  const onContextClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    index: number
+  ) => {
+    console.log(index);
+    let copiedInputTextSize = [...inputTextSize];
+    copiedInputTextSize[index] = fontSize;
+    setInputTextSize(copiedInputTextSize);
+  };
+
+  const onSettingClick = (index: number) => {
+    let copiedInputTextSize = [...inputTextSize];
+    copiedInputTextSize[index] = fontSize;
+    setInputTextSize(copiedInputTextSize);
+    setFontSize("");
+  };
 
   useEffect(() => {
     if (isEnter) {
-      console.log("Hello!");
       setContextNumber((num) => num + 1);
-      setContextList([...contextList, "context" + contextNumber]);
+      setContextList([
+        ...contextList,
+        {
+          id: "context" + contextNumber,
+          context: watch("context" + contextNumber),
+        },
+      ]);
+      setInputTextSize([...inputTextSize, ""]);
       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 className="p-4 gap-1 flex flex-col">
+      <div className="flex justify-between items-center">
+        <JuiceFont>{day}</JuiceFont>
+        <button
+          onClick={() => setMakeDisable((prev) => !prev)}
+          className="font-mono bg-emerald-400 p-1 rounded-md shadow-md text-white hover:bg-emerald-600 duration-300"
+        >
+          {makeDisable ? "Edit" : "Save"}
+        </button>
+      </div>
+      <div className="flex gap-4 items-center">
+        <JuiceFont isBold isBig others="whitespace-nowrap">
+          제목
+        </JuiceFont>
+        <input
+          disabled={makeDisable}
+          className="p-2 font-bold text-lg border-none w-full rounded-md  bg-gray-100/[0.1]"
+        />
+      </div>
+      <Divider />
+
+      {contextList.map((value, idx) => (
+        <div key={value.id} className="flex gap-1 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
+            isSettingBox
+            onClick={() => onSettingClick(idx)}
+            others="relative opacity-0 group-hover:opacity-100 hover:opacity-100 hover:bg-gray-200 duration-500"
+          />
+          <input
+            {...register("context" + idx, {})}
+            onKeyUp={onKeyEnter}
+            autoComplete="off"
+            disabled={makeDisable}
+            key={value.id}
+            className={`font-mono border-none bg-gray-100/[0.1] w-full px-1 active:bg-blue-200 active:rounded-sm duration-150 whitespace-pre-line resize-none ${inputTextSize[idx]}`}
+            placeholder="내용을 입력하세요. 다음 줄 입력시 'Enter' 입니다."
+          />
+        </div>
+      ))}
     </div>
   );
 };

src/components/diary/LeftCanvas.tsx

@@ -86,7 +86,7 @@ const LeftCanvas = ({
         ></canvas>
         <button onClick={toRight}> 옆으로! </button>
       </div>
-      <Editor />
+      <Editor day={"2023-01-02"} />
     </div>
   );
 };

src/recoil/diary.ts

@@ -18,3 +18,19 @@ export const canvasHeight = atom<number>({
 export const leftContext = atom<CanvasRenderingContext2D>({
   key: "leftContext",
 });
+
+export interface DiaryContext {
+  id: string;
+  context: string;
+}
+
+export const diaryContextState = atom<DiaryContext[]>({
+  key: "diaryContextState",
+  default: [{ id: "context0", context: "" }],
+});
+
+export type textSizeType = "text-base" | "text-sm" | "text-lg" | string;
+export const textSize = atom<textSizeType>({
+  key: "textSize",
+  default: "text-base",
+});