Refactor: 메시지 문구 변경, 디자인 개선

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 (
-    <div className="flex w-full items-center bg-white py-2 pr-[18px] duration-150 hover:bg-gray-200">
+    <div className="flex w-full items-center bg-white p-3 duration-150 hover:bg-gray-200">
-      <div className={cn('mx-1.5 h-1.5 w-1.5 rounded-full', alarm.isRead ? 'bg-transparent' : 'bg-blue-500')}></div>
       <div className="flex flex-1 flex-col">
-        <p className={cn('body-small', alarm.isRead ? 'text-gray-400' : 'text-black')}>
+        <div className="flex items-center">
-          [{alarm.id}] {alarm.type} 알림입니다.
+          {!alarm.isRead && <div className="mr-1.5 h-1.5 w-1.5 rounded-full bg-orange-500"></div>}
-        </p>
+          <p className={cn('body-small', alarm.isRead ? 'text-gray-400' : 'text-black')}>
-        <p className="caption text-gray-500">{timeAgo(alarm.createdAt)}</p>
+            {alarmTypeToMessage(alarm.type)}
+          </p>
+        </div>
+        <p className={cn('caption', alarm.isRead ? 'text-gray-400' : 'text-gray-500')}>{timeAgo(alarm.createdAt)}</p>
       </div>
       {alarm.isRead ? (
         <button

frontend/src/components/Header/AlarmPopover.tsx

@@ -41,7 +41,7 @@ export default function AlarmPopover() {
   };
 
   useGetAndSaveFcmTokenQuery();
-  const { data: alarms } = useGetAlarmListQuery();
+  const { data: alarmList } = useGetAlarmListQuery();
 
   onMessage(messaging, (payload) => {
     if (!payload.data) return;
@@ -51,14 +51,14 @@ export default function AlarmPopover() {
   });
 
   useEffect(() => {
-    const unreadCnt = alarms.filter((alarm) => !alarm.isRead).length;
+    const unreadCnt = alarmList.filter((alarm) => !alarm.isRead).length;
 
     if (unreadCnt > 0) {
       setUnread(true);
     } else {
       setUnread(false);
     }
-  }, [alarms]);
+  }, [alarmList]);
 
   useEffect(() => {
     // 현재 창에 포커스 시 실행할 메서드
@@ -86,7 +86,7 @@ export default function AlarmPopover() {
       <PopoverTrigger asChild>
         <button className="flex items-center justify-center p-2">
           <Bell className="h-4 w-4 cursor-pointer text-black sm:h-5 sm:w-5" />
-          <div className={cn('mt-[14px] h-1.5 w-1.5 rounded-full', unread ? 'bg-blue-500' : 'bg-transparent')}></div>
+          <div className={cn('mt-[14px] h-1.5 w-1.5 rounded-full', unread ? 'bg-orange-500' : 'bg-transparent')}></div>
         </button>
       </PopoverTrigger>
 
@@ -96,10 +96,10 @@ export default function AlarmPopover() {
         sideOffset={14}
         alignOffset={0}
       >
-        <div className="flex w-full items-center px-[18px] py-3">
+        <div className="flex w-full items-center p-3">
           <h2 className="body-strong flex-1">알림</h2>
           <button
-            className="body-small p-1 text-blue-500"
+            className="body-small p-1 text-gray-400"
             onClick={handleCreateAlarmTest}
           >
             테스트
@@ -128,13 +128,13 @@ export default function AlarmPopover() {
         </div>
         <hr />
 
-        {alarms.length === 0 ? (
+        {alarmList.length === 0 ? (
-          <div className="flex w-full items-center px-[18px] py-3 duration-150">
+          <div className="flex w-full items-center p-3 duration-150">
             <p className="body-small text-gray-500">알림이 없습니다.</p>
           </div>
         ) : (
           <div className="flex max-h-[500px] w-full flex-col items-center overflow-y-auto">
-            {alarms
+            {alarmList
               .slice()
               .reverse()
               .map((alarm) => (

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';
 }