diary_day : 사이드바 및 구성 생각

src/components/diary/DiaryInput.tsx

@@ -0,0 +1,34 @@
+import { FormEvent, useState } from "react";
+import { useRecoilState } from "recoil";
+import { diaryText } from "../../recoil/diary";
+
+const DiaryInput = () => {
+  const [text, setText] = useState("");
+  const [textList, setTextList] = useRecoilState<string[]>(diaryText);
+  const handleChange = (event: FormEvent<HTMLInputElement>) => {
+    setText(event.currentTarget.value);
+  };
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setTextList([...textList, text]);
+    event.currentTarget.reset();
+  };
+  return (
+    <div>
+      <form onSubmit={handleSubmit} className="flex justify-between">
+        <input
+          onChange={handleChange}
+          className="w-[80%] rounded-md shadow-md"
+        />
+        <button
+          type="submit"
+          className="border-[1px] bg-white w-10 h-10 justify-center items-center rounded-md shadow-md"
+        >
+          +
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default DiaryInput;

src/pages/Diary/DayDiary.tsx

@@ -1,32 +1,38 @@
-import { FormEvent, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import JuiceFont from "../../components/common/JuiceFont";
+import DiaryInput from "../../components/diary/DiaryInput";
+import { diaryText } from "../../recoil/diary";
 
 const DayDiary = () => {
   const { dayId } = useParams();
   const history = useNavigate();
-  const [text, setText] = useState("");
-  const [list, setList] = useState<string[]>([]);
-  const handleChange = (event: FormEvent<HTMLInputElement>) => {
-    setText(event.currentTarget.value);
-  };
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setList([...list, text]);
-    event.currentTarget.reset();
-  };
+  const list = useRecoilValue<string[]>(diaryText);
+
   return (
-    <div>
-      <div onClick={() => history(-1)}>back Arrow</div>
-      Its {dayId}Day Diary
-      <div>
-        <form onSubmit={handleSubmit}>
-          <input onChange={handleChange} />
-          <button type="submit"> + </button>
-        </form>
+    <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 />
+        <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>
-      {list.map((value, idx) => (
-        <div key={idx}> {value} </div>
-      ))}
     </div>
   );
 };

src/pages/Diary/index.tsx

@@ -73,7 +73,9 @@ const Diary = () => {
               className={`h-28 flex flex-col items-center border-b border-r`}
               key={dayIdx}
             >
-              <Link to={format(currentDate, "yy-MM") + "-" + format(day, "dd")}>
+              <Link
+                to={format(currentDate, "yyyy-MM") + "-" + format(day, "dd")}
+              >
                 <div
                   className={`flex text-xs font-bold  h-6 w-6 justify-center items-center cursor-pointer`}
                 >

src/recoil/diary.ts

@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const diaryText = atom<string[]>({
+  key: "diaryTextState",
+  default: [],
+});