new : 거의 다 완성! 반응형, 다이어리 다운 기능

package.json

@@ -15,6 +15,8 @@
     "axios": "^1.2.2",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
     "framer-motion": "^8.5.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
@@ -55,6 +57,8 @@
     ]
   },
   "devDependencies": {
+    "@types/dom-to-image": "^2.6.4",
+    "@types/file-saver": "^2.0.5",
     "autoprefixer": "^10.4.13",
     "gh-pages": "^4.0.0",
     "postcss": "^8.4.21",

src/App.tsx

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

src/components/DDay/DDayBox.tsx

@@ -35,8 +35,8 @@ const DDayBox = ({ dDayName, date, isSetBtn, isFirst, isDelete }: IDDAYS) => {
 
   return (
     <>
-      <div className="flex justify-between w-full bg-gradient-to-r from-yellow-200 via-green-200 to-green-500 rounded-md shadow-md p-2 ">
-        <div className="flex flex-col">
+      <div className="flex justify-between w-full h-full bg-gradient-to-b from-rose-100 to-teal-100 rounded-md shadow-md p-2 ">
+        <div className="flex flex-col justify-between">
           <JuiceFont isBold others="mb-4">
             {isFirst === 0 && `⭐️ `}
 

src/components/common/BackSpace.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from "react-router-dom";
+
+interface IBackspace {
+  isHome?: boolean;
+}
+const BackSpace = ({ isHome }: IBackspace) => {
+  const history = useNavigate();
+
+  return (
+    <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={() => (isHome ? history("/") : history(-1))}
+    >
+      👈
+    </button>
+  );
+};
+
+export default BackSpace;

src/components/common/Tooltip.tsx

@@ -8,7 +8,7 @@ const Tooltip = ({ children, message }: ITooltip) => {
   return (
     <div className="relative group w-fit h-fit">
       {children}
-      <div className="pointer-events-none font-mono transition duration-500 text-xs bg-black rounded-md p-1 text-white top-[110%] -left-2 w-fit whitespace-nowrap opacity-0 group-hover:opacity-100 absolute z-100">
+      <div className="pointer-events-none font-mono transition duration-500 text-xs bg-black rounded-md p-1 text-white top-[110%] -left-2 w-fit whitespace-nowrap opacity-0 group-hover:opacity-100 absolute z-2">
         {message}
       </div>
     </div>

src/components/diary/DiaryCard.tsx

@@ -0,0 +1,51 @@
+import { Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { diaryContent, diaryContentType } from "../../recoil/diary";
+import Divider from "../common/Divider";
+import GrayText from "../common/GrayText";
+import JuiceFont from "../common/JuiceFont";
+
+const DiaryCard = () => {
+  const diary = useRecoilValue<diaryContentType[]>(diaryContent);
+  return (
+    <div className="flex flex-col gap-6 justify-center items-center md:grid md:grid-cols-2 lg:grid-cols-3 bg-gray-300/[0.3]">
+      {diary.map((value) => (
+        <div
+          className="flex flex-col w-full 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/display/${value.day}`}>
+                <JuiceFont isSmall isBold>
+                  자세히
+                </JuiceFont>
+              </Link>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DiaryCard;

src/components/diary/Display.tsx

@@ -0,0 +1,71 @@
+import { motion } from "framer-motion";
+import { diaryItemType } from "../../recoil/diary";
+import domtoimage from "dom-to-image";
+import { saveAs } from "file-saver";
+import { RefObject, useRef } from "react";
+interface IDisplay {
+  template?: string;
+  title: string;
+  day: string | undefined;
+  content: diaryItemType[];
+  isDisplay?: boolean;
+}
+const diaryVariants = {
+  normal: {
+    scale: 1,
+  },
+  hover: {
+    scale: 1.025,
+    transition: {
+      duration: 0.3,
+    },
+  },
+};
+
+const Display = ({ template, title, day, content }: IDisplay) => {
+  const diaryRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+  // 컴포넌트 다운로드 함수
+  const onDownload = () => {
+    const diary = diaryRef.current;
+    if (!diary) return;
+    domtoimage.toBlob(diary).then((blob) => {
+      saveAs(blob, `${day}_${title}`);
+    });
+  };
+  return (
+    <motion.div
+      ref={diaryRef}
+      variants={diaryVariants}
+      whileHover="hover"
+      initial="normal"
+      onClick={onDownload}
+      className={`${
+        template === "" && "bg-white"
+      } w-[calc(75vw)] md:w-[calc(48vw)] h-[calc(80vh)] flex flex-col rounded-md shadow-lg `}
+    >
+      <img
+        src={template}
+        className={`${
+          template === "" && "hidden"
+        } absolute flex overflow-hidden z-[-1] w-[inherit] h-[inherit] rounded-md `}
+      />
+      <div className="flex justify-between p-2">
+        <div className="text-2xl font-bold">{title}</div>
+        <div className="text-2xl font-bold">{day}</div>
+      </div>
+
+      <div className="p-2">
+        {content.map((context) => (
+          <div
+            key={context.id}
+            className={`w-fit h-fit p-1 rounded-md ${context.style.textBg} ${context.style.textColor} ${context.style.textSize}`}
+          >
+            {context.context}
+          </div>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+export default Display;

src/components/diary/MenuBar.tsx

@@ -2,6 +2,7 @@ import { RefObject, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { apply, bgImage, strokeColor, strokeWidth } from "../../recoil/diary";
+import BackSpace from "../common/BackSpace";
 
 /**
  * 뒤로가기 버튼, background Image을 넣을 input(type="file"), canvas 도구, template에 그린 것을 적용시킬 버튼
@@ -28,12 +29,7 @@ const MenuBar = () => {
   return (
     <div className="flex w-full h-16 p-2 gap-4 items-center">
       <div className="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>
+        <BackSpace />
       </div>
       <div>
         <input

src/components/diary/editor/ItemList.tsx

@@ -97,7 +97,6 @@ const ItemList = ({ day }: IEditor) => {
         template: template,
       };
       setDiary(copyDiary);
-      console.log(diary);
     }
     if (submitNums > 1) {
       setSubmitNums(0);

src/components/layout/Footer.tsx

@@ -1,10 +1,20 @@
 const Footer = () => {
   return (
-    <footer className="w-full bottom-0 left-0 bg-white dark:bg-gray-900 mt-4">
-      <div className="px-4 py-6 bg-gray-100 dark:bg-gray-700 md:flex md:items-center md:justify-between">
+    <footer className="relative w-full h-12 bottom-0 left-0 bg-white dark:bg-gray-900">
+      <div className="px-4 py-6 bg-gray-100/[0.6] dark:bg-gray-700 md:flex md:items-center md:justify-between">
         <span className="text-sm text-gray-500 dark:text-gray-300 sm:text-center ">
-          © Juice. All Rights Reserved. 박필빈
+          © Juice. All Rights Reserved.
         </span>
+        <div className="flex gap-2 items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            className="w-4 h-4 opacity-30"
+          >
+            <path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z" />
+          </svg>
+          <span className="text-sm text-gray-500">waterpurifier@khu.ac.kr</span>
+        </div>
       </div>
     </footer>
   );