From 08eb021e567d3f91e9c5392b19b105a784407a9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= Date: Sun, 29 Sep 2024 21:14:47 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=95=8C=EB=A6=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Header/AlarmItem.tsx | 74 +++++++++++++++ .../src/components/Header/AlarmPopover.tsx | 90 +++++-------------- 2 files changed, 94 insertions(+), 70 deletions(-) create mode 100644 frontend/src/components/Header/AlarmItem.tsx diff --git a/frontend/src/components/Header/AlarmItem.tsx b/frontend/src/components/Header/AlarmItem.tsx new file mode 100644 index 0000000..49a565d --- /dev/null +++ b/frontend/src/components/Header/AlarmItem.tsx @@ -0,0 +1,74 @@ +import { cn } from '@/lib/utils'; +import { AlarmResponse } from '@/types'; +import { Mail, MailOpen, Trash2 } from 'lucide-react'; + +export default function AlarmItem({ + alarm, + onRead, + onDelete, +}: { + alarm: AlarmResponse; + onRead: (alarmId: number) => void; + onDelete: (alarmId: number) => void; +}) { + const timeAgo = (date: string | Date) => { + const now = new Date(); + const past = new Date(date); + const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000); + + if (diffInSeconds < 60) return `${Math.max(diffInSeconds, 0)}초 전`; + const diffInMinutes = Math.floor(diffInSeconds / 60); + if (diffInMinutes < 60) return `${diffInMinutes}분 전`; + const diffInHours = Math.floor(diffInMinutes / 60); + if (diffInHours < 24) return `${diffInHours}시간 전`; + const diffInDays = Math.floor(diffInHours / 24); + return `${diffInDays}일 전`; + }; + + const handleRead = () => { + onRead(alarm.id); + }; + + const handleDelete = () => { + onDelete(alarm.id); + }; + + return ( +
+
+
+

+ [{alarm.id}] {alarm.type} 알림입니다. +

+

{timeAgo(alarm.createdAt)}

+
+ {alarm.isRead ? ( + + ) : ( + + )} + +
+ ); +} diff --git a/frontend/src/components/Header/AlarmPopover.tsx b/frontend/src/components/Header/AlarmPopover.tsx index 5f241b8..66108a2 100644 --- a/frontend/src/components/Header/AlarmPopover.tsx +++ b/frontend/src/components/Header/AlarmPopover.tsx @@ -1,7 +1,10 @@ import { useEffect, useState } from 'react'; import { cn } from '@/lib/utils'; +import { Bell } from 'lucide-react'; +import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'; import { onMessage } from 'firebase/messaging'; import { messaging } from '@/api/firebaseConfig'; +import AlarmItem from './AlarmItem'; import useFcmTokenQuery from '@/queries/auth/useFcmTokenQuery'; import useGetAlarmListQuery from '@/queries/alarms/useGetAlarmListQuery'; import useResetAlarmListQuery from '@/queries/alarms/useResetAlarmListQuery'; @@ -9,26 +12,10 @@ import useCreateAlarmTestQuery from '@/queries/alarms/useCreateAlarmTestQuery'; import useReadAlarmQuery from '@/queries/alarms/useReadAlarmQuery'; import useDeleteAlarmQuery from '@/queries/alarms/useDeleteAlarmQuery'; import useDeleteAllAlarmQuery from '@/queries/alarms/useDeleteAllAlarmQuery'; -import { Bell, Mail, MailOpen, Trash2 } from 'lucide-react'; -import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'; export default function AlarmPopover() { const [unread, setUnread] = useState(false); - const timeAgo = (date: string | Date) => { - const now = new Date(); - const past = new Date(date); - const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000); - - if (diffInSeconds < 60) return `${Math.max(diffInSeconds, 0)}초 전`; - const diffInMinutes = Math.floor(diffInSeconds / 60); - if (diffInMinutes < 60) return `${diffInMinutes}분 전`; - const diffInHours = Math.floor(diffInMinutes / 60); - if (diffInHours < 24) return `${diffInHours}시간 전`; - const diffInDays = Math.floor(diffInHours / 24); - return `${diffInDays}일 전`; - }; - const resetAlarmList = useResetAlarmListQuery(); const createAlarmTest = useCreateAlarmTestQuery(); const readAlarm = useReadAlarmQuery(); @@ -101,7 +88,7 @@ export default function AlarmPopover() { > 테스트 - {unread ? ( + {/* {unread ? ( - )} + )} */} - ) : ( - - )} - - - ))} + ))} + + )} );