Merge pull request #75 from Strong-Potato/70-feat-create-before-days-…

…function #70 feat create before days function
Strong-Potato · Jan 12, 2024 · 24a4136 · 24a4136
2 parents 966383d + 0dc09a4
commit 24a4136
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 36 deletions.
diff --git a/src/components/Alarm/TabCapsule/Content/Content.module.scss b/src/components/Alarm/TabCapsule/Content/Content.module.scss
@@ -1,35 +1,45 @@
 @use "@/sass" as *;
 
-.container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  width: 100%;
-  border-bottom: 1px solid $neutral100;
-
-  &__thumbnail {
-    width: 4rem;
-    height: 4rem;
-    border-radius: 50%;
+.page {
+  height: calc(100vh - 86px);
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
   }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 
-  &__wrapper {
+  .container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    width: 100%;
+    border-bottom: 1px solid $neutral100;
 
-    &__title {
-      @include typography(tabLabel);
-      text-align: left;
+    &__thumbnail {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
     }
 
-    &__time {
-      color: $neutral400;
-      @include typography(captionSmall);
-      letter-spacing: -0.12px;
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      &__title {
+        @include typography(tabLabel);
+        text-align: left;
+      }
+
+      &__time {
+        color: $neutral400;
+        @include typography(captionSmall);
+        letter-spacing: -0.12px;
+      }
     }
   }
 }
diff --git a/src/components/Alarm/TabCapsule/Content/Content.tsx b/src/components/Alarm/TabCapsule/Content/Content.tsx
@@ -1,20 +1,24 @@
 import styles from "./Content.module.scss";
 
+import formatTimeAgo from "@/utils/formatTimeAgo";
+
 import { ContentProps } from "@/types/alarm";
 
 function Content({ contents }: ContentProps) {
   return (
-    <>
+    <div className={styles.page}>
       {contents.map((content, index) => (
-        <button key={index} className={styles.container}>
+        <div key={index} className={styles.container}>
           <img src={content.url} className={styles.container__thumbnail} />
           <div className={styles.container__wrapper}>
             <p className={styles.container__wrapper__title}>{content.title}</p>
-            <p className={styles.container__wrapper__time}>{content.time}</p>
+            <p className={styles.container__wrapper__time}>
+              {formatTimeAgo(new Date(content.time))}
+            </p>
           </div>
-        </button>
+        </div>
       ))}
-    </>
+    </div>
   );
 }
 

diff --git a/src/components/Alarm/TabCapsule/TabCapsule.tsx b/src/components/Alarm/TabCapsule/TabCapsule.tsx
@@ -15,45 +15,45 @@ const AllContents = [
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
-    time: "1분전",
+    time: "2024-01-11T23:09:00",
   },
   {
     url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
     title: "개인정보 보호정책이 변경되었습니다.",
-    time: "2분전",
+    time: "2024-01-11T20:00:00",
   },
   {
     url: "https://private-user-images.githubusercontent.com/120024673/294744934-6e80734e-61fc-46e5-abb4-3d26bad5f1ea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ2MTQzNDYsIm5iZiI6MTcwNDYxNDA0NiwicGF0aCI6Ii8xMjAwMjQ2NzMvMjk0NzQ0OTM0LTZlODA3MzRlLTYxZmMtNDZlNS1hYmI0LTNkMjZiYWQ1ZjFlYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTA3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEwN1QwNzU0MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMGRlZGI3ZjRiZTRkZDY4YTJjNTQxMWNkNmI5YWI5ZDExNzU3OWEwNjJhNTA1NTgzNDQxYWY3MDMyYmVkYmIyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QMy2zh7OIc5uzN7W7qhAr540FtZN7YbaZ4k0z9Ajmws",
     title: "개인정보 보호정책이 변경되었습니다.",
-    time: "2분전",
+    time: "2024-01-10T10:00:00",
   },
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
-    time: "4분전",
+    time: "2024-01-03T12:00:00",
   },
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
-    time: "5분전",
+    time: "2023-12-31T12:00:00",
   },
 ];
 
 const SpaceTravelContents = [
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "밥집 어디갈꺼야" 투표를 만들었어요.`,
-    time: "1분전",
+    time: "2024-01-11T23:05:00",
   },
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "카페 어디갈꺼야" 투표를 만들었어요.`,
-    time: "4분전",
+    time: "2024-01-03T12:00:00",
   },
   {
     url: "https://m.eejmall.com/web/product/big/201708/211_shop1_627935.jpg",
     title: `[강릉 여행]강자밭님이 "숙소 어디갈꺼야" 투표를 만들었어요.`,
-    time: "5분전",
+    time: "2023-12-31T12:00:00",
   },
 ];
 

diff --git a/src/utils/formatTimeAgo.ts b/src/utils/formatTimeAgo.ts
@@ -0,0 +1,29 @@
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds,
+  format,
+} from "date-fns";
+
+function formatTimeAgo(date: Date) {
+  const now = new Date();
+  const secondsAgo = differenceInSeconds(now, date);
+  const minutesAgo = differenceInMinutes(now, date);
+  const hoursAgo = differenceInHours(now, date);
+  const daysAgo = differenceInDays(now, date);
+
+  if (secondsAgo < 60) {
+    return `${secondsAgo}초 전`;
+  } else if (minutesAgo < 60) {
+    return `${minutesAgo}분 전`;
+  } else if (hoursAgo < 24) {
+    return `${hoursAgo}시간 전`;
+  } else if (daysAgo < 7) {
+    return `${daysAgo}일 전`;
+  } else {
+    return format(date, "yy.MM.dd");
+  }
+}
+
+export default formatTimeAgo;
diff --git a/src/utils/test.ts b/src/utils/test.ts