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