diff --git a/frontend/src/components/Header/AlarmItem.tsx b/frontend/src/components/Header/AlarmItem.tsx index bde1d2a..81b3172 100644 --- a/frontend/src/components/Header/AlarmItem.tsx +++ b/frontend/src/components/Header/AlarmItem.tsx @@ -12,6 +12,25 @@ export default function AlarmItem({ onRead: (alarmId: number) => void; onDelete: (alarmId: number) => void; }) { + const alarmTypeToMessage = (alarmType: string) => { + switch (alarmType) { + case 'PREDICT': + return '오토 레이블링이 완료되었습니다.'; + case 'TRAIN': + return '학습이 완료되었습니다.'; + case 'IMAGE': + return '이미지 업로드가 완료되었습니다.'; + case 'COMMENT': + return '새로운 댓글이 추가되었습니다.'; + case 'REVIEW_RESULT': + return '요청한 리뷰에 대한 결과가 등록되었습니다.'; + case 'REVIEW_REQUEST': + return '새로운 리뷰 요청을 받았습니다.'; + default: + return '새로운 알림입니다.'; + } + }; + const handleRead = () => { onRead(alarm.id); }; @@ -21,13 +40,15 @@ export default function AlarmItem({ }; return ( -
-
+
-

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

-

{timeAgo(alarm.createdAt)}

+
+ {!alarm.isRead &&
} +

+ {alarmTypeToMessage(alarm.type)} +

+
+

{timeAgo(alarm.createdAt)}

{alarm.isRead ? ( @@ -96,10 +96,10 @@ export default function AlarmPopover() { sideOffset={14} alignOffset={0} > -
+

알림


- {alarms.length === 0 ? ( -
+ {alarmList.length === 0 ? ( +

알림이 없습니다.

) : (
- {alarms + {alarmList .slice() .reverse() .map((alarm) => ( diff --git a/frontend/src/types/alarmTypes.ts b/frontend/src/types/alarmTypes.ts index af82f5e..6812657 100644 --- a/frontend/src/types/alarmTypes.ts +++ b/frontend/src/types/alarmTypes.ts @@ -2,5 +2,5 @@ export interface AlarmResponse { id: number; isRead: boolean; createdAt: string; - type: string; + type: 'PREDICT' | 'TRAIN' | 'IMAGE' | 'COMMENT' | 'REVIEW_RESULT' | 'REVIEW_REQUEST'; }