diary_da :

onejuice98 · Feb 6, 2023 · 927cb85 · 927cb85
1 parent b753f95
commit 927cb85
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 85 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ const App = () => {
       <Route path="/" element={<Main />} />
       <Route path="/diary" element={<Diary />} />
       <Route path="/diary/:dayId" element={<DayDiary />} />
+      <Route path="/diary/show/:dayId" />
     </Routes>
   );
 };

diff --git a/src/components/diary/editor/ItemList.tsx b/src/components/diary/editor/ItemList.tsx
@@ -1,6 +1,7 @@
 import { Reorder } from "framer-motion";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
 import {
   diaryContent,
@@ -26,8 +27,8 @@ interface IEditor {
   day: string | undefined; // yyyy-MM-dd
 }
 /**
- * Editor의 중하단부, context의 List를 더하거나 CSS를 수정한다. 내용을 추가 할 수 있다.
- * @returns Item List 가 출력 (Item -> 내용)
+ * Editor의 핵심!, context의 List를 더하거나 CSS를 수정한다. 내용을 추가 할 수 있다.
+ * @returns Item List 가 출력 (Item -> 내용) / Save button(twice) -> 메인 페이지로
  */
 const ItemList = ({ day }: IEditor) => {
   const { register, setValue, handleSubmit, getValues } = useForm();
@@ -43,7 +44,7 @@ const ItemList = ({ day }: IEditor) => {
   const template = useRecoilValue<string | undefined>(resultTemplate);
   const [diary, setDiary] = useRecoilState<diaryContentType[]>(diaryContent);
   const [submitNums, setSubmitNums] = useState(0);
-
+  const navigate = useNavigate();
   const onPlusClick = () => {
     setItemId((prev) => prev + 1);
     setStyle([...style, { textSize: "text-base", textColor: "", textBg: "" }]);
@@ -96,8 +97,12 @@ const ItemList = ({ day }: IEditor) => {
         template: template,
       };
       setDiary(copyDiary);
+      console.log(diary);
+    }
+    if (submitNums > 1) {
+      setSubmitNums(0);
+      navigate("/diary");
     }
-    if (submitNums > 1) setSubmitNums(0);
   };
   return (
     <form onSubmit={handleSubmit(onValid)} className="flex flex-col gap-2">

diff --git a/src/pages/Diary/DayDiary.tsx b/src/pages/Diary/DayDiary.tsx
@@ -35,9 +35,9 @@ const DayDiary = () => {
         </div>
         <div className="w-[calc(50vw-1px)] h-[calc(100vh-64px)]">
           <img
-            src={isApply ? template : templateImg}
+            src={template}
             className={`${
-              templateImg === "" && "hidden"
+              !isApply && "hidden"
             } flex justify-center items-center absolute overflow-hidden z-[-1] w-[inherit] h-[inherit]`}
           />
           <Editor day={dayId} />

diff --git a/src/pages/Diary/index.tsx b/src/pages/Diary/index.tsx
@@ -1,89 +1,83 @@
-import {
-  addDays,
-  addMonths,
-  format,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-  subMonths,
-} from "date-fns";
-import { endOfMonth } from "date-fns";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useRecoilState } from "recoil";
+import Divider from "../../components/common/Divider";
+import GrayText from "../../components/common/GrayText";
+import JuiceFont from "../../components/common/JuiceFont";
+import { diaryContent, diaryContentType } from "../../recoil/diary";
 
 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));
-  };
+  const [isPlusButton, setIsPlusButton] = useState(false);
+  const [date, setDate] = useState<string>("");
+  const diary = useRecoilState<diaryContentType[]>(diaryContent);
+  const navigate = useNavigate();
   return (
-    <div>
-      <div>
-        {YEAR}년 {MONTH}월
+    <div className="h-full bg-gray-300/[0.4]">
+      <div className="flex h-[100vh] gap-6 justify-center items-center">
+        {diary[0].map((value) => (
+          <div
+            className="flex flex-col w-[calc(25vw-1px)] h-[calc(68vh)] rounded-lg bg-white shadow-lg p-4"
+            key={value.day}
+          >
+            <JuiceFont isBig isBold>
+              {value.day}
+            </JuiceFont>
+            <Divider />
+            <JuiceFont isSmall isBold others="my-2">
+              {value.title}
+            </JuiceFont>
+            <img
+              src={value.template}
+              className={`${
+                !value.template && "hidden"
+              } flex justify-center items-center overflow-hidden w-[inherit] h-[inhrerit] rounded-sm shadow-md`}
+            />
+            <div className="flex flex-col mt-2 px-2">
+              {value.content.map(
+                (context, idx) =>
+                  idx < 3 && (
+                    <GrayText key={context.id}>{context.context}</GrayText>
+                  )
+              )}
+              {value.content && (
+                <Link to={`/diary/${value.day}`}>
+                  <JuiceFont isSmall isBold>
+                    자세히
+                  </JuiceFont>
+                </Link>
+              )}
+            </div>
+          </div>
+        ))}
       </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}
+
+      <button
+        onClick={() => {
+          setIsPlusButton((prev) => !prev);
+        }}
+        className="absolute flex justify-center items-center z-2 bottom-2 right-2 w-12 h-12 rounded-full bg-gradient-to-r from-green-200 to-green-500  text-white text-xl"
+      >
+        +
+      </button>
+      {isPlusButton && (
+        <div className="absolute w-40 h-30 rounded-md bg-gray-400/[0.5] bottom-16 right-2">
+          <form className="flex flex-col p-2 gap-2">
+            <GrayText> 날짜 입력 </GrayText>
+            <input
+              type="date"
+              required
+              onChange={(event) => setDate(event.currentTarget.value)}
+              className="border-none rounded-md shadow-sm h-6 w-full"
+            />
+            <button
+              onClick={() => navigate(`/diary/${date}`)}
+              className="w-full h-8 bg-green-200 rounded-md shadow-md hover:bg-green-400"
             >
-              <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`}
-                >
-                  {format(day, "dd")}
-                </div>
-              </Link>
-            </div>
-          ))}
+              생성
+            </button>
+          </form>
         </div>
-      ))}
+      )}
     </div>
   );
 };