feat: 이상상황 과거이력 css 수정

- 라벨 데이터 유의미하게 전달

src/components/NotificationListComponent.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from "react";
 import '../styles.css';
 import history from "../api/history.js";
-import {datetimeFormat} from "../util/utils.js";
+import {datetimeFormat, replaceOperationType} from "../util/utils.js";
 import {useNavigate} from "react-router-dom";
 
 const NotificationListComponent = () => {
@@ -65,7 +65,7 @@ const NotificationListComponent = () => {
                                 <tr key={alert.id} onClick={()=>handleAlertOnClick(alert.id)}>
                                     <td>{alert.cameraName}</td>
                                     <td>{datetimeFormat(alert.localDateTime)}</td>
-                                    <td style={{whiteSpace: 'pre-wrap'}}>{alert.label}</td>
+                                    <td style={{whiteSpace: 'pre-wrap'}}>{replaceOperationType(alert.label)}</td>
                                 </tr>
                             ))}
                             </tbody>

src/components/SubscriberComponent.css

@@ -1,11 +0,0 @@
-.subscriber-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-}
-
-.subscriber-image {
-    width: 300px;
-    height: auto;
-}

src/pages/Dashboard/Dashboard.jsx

@@ -4,11 +4,11 @@ import SubscriberComponent from "../../components/SubscriberComponent.jsx";
 import {Timeline} from "rsuite";
 import CheckIcon from '@rsuite/icons/legacy/Check';
 import history from "../../api/history.js";
-import {dateFormat, datetimeFormat} from "../../util/utils.js";
+import {dateFormat, datetimeFormat, replaceOperationType} from "../../util/utils.js";
 
 const HistoryTimeLineComponent = ({area, histories}) => {
     const concatTimelineTitle = (history) => {
-        return `${datetimeFormat(history.localDateTime)} 발생 이상현상 : ${history.label}`
+        return `${datetimeFormat(history.localDateTime)} 발생 이상현상 : ${replaceOperationType(history.label)}`
     }
 
     const defineStatusStyle = (status) => {
@@ -31,7 +31,7 @@ const HistoryTimeLineComponent = ({area, histories}) => {
     </>)
 }
 
-const cameraLocations = ['신선대부두', '양곡부두', '감천항', '연합부두'];
+const cameraLocations = ['신선대부두', '양곡부두'];
 
 const Dashboard = () => {
     const [selectedArea, setSelectedArea] = useState(null);

src/pages/HistoryRecord/HistoryRecord.css

@@ -46,7 +46,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 15px;
-    justify-items: center; 
+    justify-items: center;
 }
 
 .incident-card {
@@ -56,7 +56,7 @@
     text-align: center;
     padding: 10px;
     transition: background-color 0.3s ease;
-    width: 150px; 
+    width: 150px;
 }
 
 .incident-card:hover {
@@ -73,6 +73,11 @@
     border-radius: 8px;
 }
 
+.incident-list-img {
+    width: 100%;
+    height: 100%;
+}
+
 .play-icon {
     font-size: 24px;
     color: #555;

src/pages/HistoryRecord/HistoryRecord.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import './HistoryRecord.css';
-import {dateFormat} from "../../util/utils.js";
+import {dateFormat, replaceOperationType} from "../../util/utils.js";
 import history from "../../api/history.js";
 
 const incidentTypes = [
@@ -47,12 +47,13 @@ const HistoryRecord = () => {
 
         try {
             const results = await history.fetchDetectResults({
-                cameraName: cameraLocation, 
-                startDate: startDate, 
+                cameraName: cameraLocation,
+                startDate: startDate,
                 endDate: endDate,
                 incidentType: incidentType
             });
-            setIncidents(results);
+            const sortedByDateTime = results.sort((a, b) => new Date(b.localDateTime) - new Date(a.localDateTime))
+            setIncidents(sortedByDateTime);
         } catch (error) {
             console.error('Error fetching incidents:', error);
         }
@@ -82,8 +83,6 @@ const HistoryRecord = () => {
         setEndDate(event.target.value);
     };
 
-    const formatIncidentTitle = (dateString, description) => `${dateFormat(dateString)}_${description}`;
-
     return (
         <div className="incident-list-container">
             <header className="incident-list-header">
@@ -129,9 +128,10 @@ const HistoryRecord = () => {
                         onClick={() => handleIncidentClick(incident.id)}
                     >
                         <div className="incident-thumbnail">
-                            <span className="play-icon">▶</span>
+                            <img className="incident-list-img" src={incident.imageUrl} alt=""/>
                         </div>
-                        <p className="incident-title">{formatIncidentTitle(incident.localDateTime, incident.label)}</p>
+                        <p className="incident-title">{replaceOperationType(incident.label)}</p>
+                        <p className="incident-title">{dateFormat(incident.localDateTime)}</p>
                     </div>
                 ))}
             </div>

src/pages/HistoryRecord/HistoryRecordDetail.css

@@ -1,7 +1,7 @@
 .container {
-    display: flex; 
+    display: flex;
     max-width: 1000px;
-    min-height: 600px; 
+    min-height: 600px;
     margin: auto;
     position: relative;
     padding-right: 270px;
@@ -17,11 +17,11 @@
     background-color: #f0f0f0;
     border-radius: 8px;
     padding: 10px;
-    position: absolute; 
-    right: 0; 
+    position: absolute;
+    right: 0;
     top: 0;
-    height: auto; 
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
+    height: auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .title {
@@ -31,11 +31,10 @@
 
 .videoContainer {
     background-color: #e0e0e0;
-    height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 10px; 
+    margin-bottom: 10px;
 }
 
 .playIcon {
@@ -44,7 +43,7 @@
 }
 
 .details {
-    margin-bottom: 10px; 
+    margin-bottom: 10px;
 }
 
 .relatedItems {
@@ -55,7 +54,7 @@
 
 .relatedItem {
     background: #e0e0e0;
-    padding: 5px; 
+    padding: 5px;
     border-radius: 5px;
     text-align: center;
     cursor: pointer;
@@ -71,13 +70,13 @@
 }
 
 .backButton {
-    background: none;  
-    border: none; 
-    font-size: 24px; 
-    cursor: pointer;  
-    color: #555; 
-    outline: none;  
-    padding: 0;  
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #555;
+    outline: none;
+    padding: 0;
 }
 
 .backButton:hover {

src/pages/HistoryRecord/HistoryRecordDetail.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import './HistoryRecordDetail.css';
 import history from "../../api/history.js";
+import {replaceOperationType} from "../../util/utils.js";
 
 const HistoryRecordDetail = () => {
     const { incidentId } = useParams();
@@ -31,7 +32,7 @@ const HistoryRecordDetail = () => {
                 </button>
             </div>
             <div className="mainContent">
-                <h1 className="title">{incident.date}_{incident.label}</h1>
+                <h1 className="title">{replaceOperationType(incident.label)}</h1>
                 <div className="videoContainer">
                     {/* 서버에서 가져온 실제 사진을 표시 */}
                     {incident.imageUrl ? (

src/util/utils.js

@@ -17,4 +17,10 @@ const dateFormat = (dateTime) => {
     return `${year}-${month}-${day}`;
 };
 
-export {datetimeFormat, dateFormat};
+const replaceOperationType = (message) => {
+    return message.replace("estimate_distance", "위험물체 접근")
+        .replace("area_intrusion", "위험지역 침입")
+        .replace("custom_model", "")
+}
+
+export {datetimeFormat, dateFormat, replaceOperationType};