Diary 시작

1. 캘린더
2. 다이어리 페이지

package.json

@@ -14,6 +14,7 @@
     "assert": "^2.0.0",
     "axios": "^1.2.2",
     "buffer": "^6.0.3",
+    "date-fns": "^2.29.3",
     "framer-motion": "^8.5.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",

src/App.tsx

@@ -1,11 +1,15 @@
 import { Route, Routes } from "react-router-dom";
+import Diary from "./pages/Diary";
+import DayDiary from "./pages/Diary/DayDiary";
 import Login from "./pages/Login";
 import Main from "./pages/Main";
 const App = () => {
   return (
     <Routes>
       <Route path="/login" element={<Login />} />
       <Route path="/" element={<Main />} />
+      <Route path="/diary" element={<Diary />} />
+      <Route path="/diary/:dayId" element={<DayDiary />} />
     </Routes>
   );
 };

src/components/diary/Body.tsx

@@ -0,0 +1,5 @@
+const Body = () => {
+  return;
+};
+
+export default Body;

src/components/diary/Head.tsx

@@ -0,0 +1,25 @@
+interface IHead {
+  year: string;
+  month: string;
+  goToday: () => void;
+  setMonth: () => void;
+}
+const Head = ({ year, month, goToday, setMonth }: IHead) => {
+  return (
+    <div>
+      <div>
+        <div>
+          {year} 년 {month} 월
+        </div>
+        <div>
+          <button> &lt; </button>
+          <button> 오늘</button>
+          <button> &gt;</button>
+        </div>
+      </div>
+      <div>Days</div>
+    </div>
+  );
+};
+
+export default Head;

src/pages/Diary/DayDiary.tsx

@@ -0,0 +1,34 @@
+import { FormEvent, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+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();
+  };
+  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>
+      {list.map((value, idx) => (
+        <div key={idx}> {value} </div>
+      ))}
+    </div>
+  );
+};
+
+export default DayDiary;

src/pages/Diary/index.tsx

@@ -0,0 +1,91 @@
+import {
+  addDays,
+  addMonths,
+  endOfWeek,
+  format,
+  lastDayOfDecade,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+} from "date-fns";
+import { endOfMonth } from "date-fns";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+const Diary = () => {
+  const today = new Date();
+  const YEAR = today.getFullYear();
+  const MONTH = today.getMonth() + 1;
+
+  const monthSP = startOfMonth(today);
+  const monthRP = endOfMonth(monthSP);
+
+  const addWeek = (today: Date) => {
+    let date = startOfWeek(startOfDay(today));
+
+    return () => {
+      const week = [...Array(7)].map((_, index) => addDays(date, index));
+      date = addDays(week[6], 1);
+      return week;
+    };
+  };
+  const addMonth = (today: Date) => {
+    let month = [];
+    let date = today;
+
+    const weekGen = addWeek(startOfMonth(date));
+    const endDate = startOfDay(endOfMonth(date));
+    month.push(weekGen());
+
+    while (lastDayOfRange(month) < endDate) {
+      month.push(weekGen());
+    }
+    const range = month;
+    month = [];
+    date = addDays(lastDayOfRange(range), 1);
+    return range;
+  };
+  const lastDayOfRange = (range: any) => {
+    return range[range.length - 1][6];
+  };
+
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const data = addMonth(currentDate);
+
+  const nextMonth = () => {
+    setCurrentDate(addMonths(currentDate, 1));
+  };
+  const prevMonth = () => {
+    setCurrentDate(subMonths(currentDate, 1));
+  };
+  return (
+    <div>
+      <div>
+        {YEAR}년 {MONTH}월
+      </div>
+      {data.map((week, weekIdx) => (
+        <div className="grid grid-cols-7" key={weekIdx}>
+          {week.map((day, dayIdx) => (
+            <div
+              onClick={() => setSelectedDate(day)}
+              className={`h-28 flex flex-col items-center border-b border-r`}
+              key={dayIdx}
+            >
+              <Link to={format(currentDate, "yy-MM") + "-" + format(day, "dd")}>
+                <div
+                  className={`flex text-xs font-bold  h-6 w-6 justify-center items-center cursor-pointer`}
+                >
+                  {format(day, "dd")}
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Diary;