diff --git a/src/components/Alarm/TabCapsule/Content/Content.module.scss b/src/components/Alarm/TabCapsule/Content/Content.module.scss
index 75c997b1..16bbfce3 100644
--- 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
index c53efea7..32585e16 100644
--- 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 (
- <>
+
{contents.map((content, index) => (
-
);
}
diff --git a/src/components/Alarm/TabCapsule/TabCapsule.tsx b/src/components/Alarm/TabCapsule/TabCapsule.tsx
index 1920e07c..3e753c2c 100644
--- a/src/components/Alarm/TabCapsule/TabCapsule.tsx
+++ b/src/components/Alarm/TabCapsule/TabCapsule.tsx
@@ -15,27 +15,27 @@ 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",
},
];
@@ -43,17 +43,17 @@ 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
new file mode 100644
index 00000000..97eccb88
--- /dev/null
+++ 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
deleted file mode 100644
index e69de29b..00000000