Merge branch 'part2-고학영' into part2-고학영-week11

src/App.jsx

@@ -1,6 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./assets/styles/global.css";
-import "./assets/styles/reset.css";
+import "./assets/styles/reset.css";]
 import Shared from "./pages/Shared";
 import Folder from "./pages/Folder";
 

src/api/Api.jsx

@@ -0,0 +1,31 @@
+const URL = "https://bootcamp-api.codeit.kr";
+
+export async function getUserData() {
+  try {
+    const response = await fetch(`${URL}/api/sample/user`, {
+      method: "GET",
+    });
+    if (!response.ok) {
+      throw new Error("이용자정보 불러오기 실패!");
+    }
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export async function getFolderData() {
+  try {
+    const response = await fetch(`${URL}/api/sample/folder`, {
+      method: "GET",
+    });
+    if (!response.ok) {
+      throw new Error("내용 불러오기 실패!");
+    }
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.log(error);
+  }
+}

src/components/CardList.css

@@ -1,9 +1,9 @@
-.CardLinkList {
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(3, 340px);
-  place-items: center;
-  justify-content: center;
-  grid-gap: 25px 20px;
-  list-style: none;
-}
+  .CardLinkList {
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 340px);
+    place-items: center;
+    justify-content: center;
+    grid-gap: 25px 20px;
+    list-style: none;
+  }

src/components/PostDateUtility.js

@@ -0,0 +1,32 @@
+export function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+const HOURS = 60;
+const DAYS = HOURS * 24;
+const MONTH = DAYS * 30;
+const YEARS = MONTH * 12;
+
+export function calculatePostTimeElapsed(value) {
+  const now = new Date();
+  const date = new Date(value);
+  const timeDifference = (now - date) / (1000 * 60);
+  if (timeDifference < 2) {
+    return "1 minute ago";
+  } else if (timeDifference < HOURS) {
+    return `${Math.floor(timeDifference)} minutes ago`;
+  } else if (timeDifference < DAYS) {
+    const hours = Math.floor(timeDifference / HOURS);
+    return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
+  } else if (timeDifference < MONTH) {
+    const days = Math.floor(timeDifference / DAYS);
+    return `${days} ${days === 1 ? "day" : "days"} ago`;
+  } else if (timeDifference < YEARS) {
+    const months = Math.floor(timeDifference / MONTH);
+    return `${months} ${months === 1 ? "month" : "months"} ago`;
+  } else {
+    const years = Math.floor(timeDifference / YEARS);
+    return `${years} ${years === 1 ? "year" : "years"} ago`;
+  }
+}

src/components/PostDateUtility.jsx

@@ -0,0 +1,41 @@
+export function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+export function calculatePostTimeElapsed(value) {
+  const now = new Date();
+  const date = new Date(value);
+  const timeDifference = (now - date) / (1000 * 60);
+  if (timeDifference < 2) {
+    return "1 minute ago";
+  } else if (timeDifference <= 59) {
+    return `${Math.floor(timeDifference)} minutes ago`;
+  } else if (timeDifference < 60 * 24) {
+    if (Math.floor(timeDifference / 60) === 1) {
+      return "1 hour ago";
+    } else {
+      return `${Math.floor(timeDifference / 60)} hours ago`;
+    }
+  } else if (timeDifference <= 60 * 24 * 30) {
+    if (Math.floor(timeDifference / (60 * 24)) === 1) {
+      return "1 day ago";
+    } else {
+      return `${Math.floor(timeDifference / (60 * 24))} days ago`;
+    }
+  } else if (timeDifference < 60 * 24 * 30 * 12) {
+    if (Math.floor(timeDifference / (60 * 24 * 30)) === 1) {
+      return "1 month ago";
+    } else {
+      return `${Math.floor(timeDifference / (60 * 24 * 30))} months ago`;
+    }
+  } else if (timeDifference <= 60 * 24 * 30 * 12 * 11) {
+    if (Math.floor(timeDifference / (60 * 24 * 30 * 12)) === 1) {
+      return "1 year ago";
+    } else {
+      return `${Math.floor(timeDifference / (60 * 24 * 30 * 12))} years ago`;
+    }
+  } else {
+    return `${Math.floor(timeDifference / (60 * 24 * 30 * 12))} years ago`;
+  }
+}