상세페이지 이미지 추가

.env

@@ -1,4 +1,4 @@
-VITE_HISTORY_API_URL=http://3.34.196.131:8080
+VITE_HISTORY_API_URL=http://43.200.2.79:8080
 VITE_AI_API_URL=http://localhost:8000
 VITE_WS_PUBLISHER=ws://localhost:8000/ws/publishers
 VITE_WS_SUBSCRIBER=ws://localhost:8000/ws/subscribers

src/pages/HistoryRecord/HistoryRecord.css

@@ -20,11 +20,26 @@
 
 .incident-list-filters input,
 .incident-list-filters select {
-    padding: 10px;
+    padding: 5px; /* 여백을 줄여서 글씨가 가로로 보이도록 조정 */
     border-radius: 5px;
     border: 1px solid #ccc;
     background-color: white;
     font-size: 14px;
+    min-width: 150px; /* 최소 너비를 설정하여 글씨가 가로로 나오도록 */
+}
+
+.search-button {
+    padding: 8px 16px; /* 버튼 박스의 여백을 조정 */
+    border-radius: 5px;
+    background-color: #007bff; /* 파란색 배경 */
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.search-button:hover {
+    background-color: #0056b3; /* 호버 시 색상 */
 }
 
 .incident-list-grid {

src/pages/HistoryRecord/HistoryRecord.jsx

@@ -1,11 +1,25 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import './HistoryRecord.css';
 import {dateFormat} from "../../util/utils.js";
 import history from "../../api/history.js";
 
-const incidentTypes = ["화재", "전기", "가스 유출"];
-const cameraLocations = ["A-101", "A-102", "C-394", "E-132"];
+const incidentTypes = [
+    "개인 보호 장비(PPE) 미착용",
+    "안전 수칙 무시 및 부적절한 작업 방식",
+    "기계 고장 시 임시로 부적절한 수리 후 사용",
+    "정비되지 않은 장비 사용",
+    "과적재 혹은 불안정한 하역 작업",
+    "크레인, 지게차, 컨테이너 트럭 등의 비정상 운행",
+    "보안 구역 무단 침입",
+    "화학물질이나 위험물 취급 시 안전 절차 미준수",
+    "위험물 저장 및 운반 시 적절한 표기 및 관리 미흡",
+    "화재 및 폭발 위험이 있는 작업장에서의 부적절한 행위",
+    "음주, 약물 사용 후 작업",
+    "작업 중 휴대전화 사용 등 주의 산만",
+    "태풍, 지진 등 자연재해 시 대피 및 안전 조치 미흡"
+];
+const cameraLocations = ["신선대부두", "양곡부두", "감천항 입구", "연합부두 선착장"];
 
 const HistoryRecord = () => {
     const [incidents, setIncidents] = useState([]);
@@ -16,13 +30,13 @@ const HistoryRecord = () => {
 
     const navigate = useNavigate();
 
-    const isOnlyOneTruthy = (startDate, endDate) => (!startDate && endDate) || (startDate && !endDate)
+    const isOnlyOneTruthy = (startDate, endDate) => (!startDate && endDate) || (startDate && !endDate);
 
     const fetchIncidents = async () => {
         const start = new Date(startDate);
         const end = new Date(endDate);
 
-        if (isOnlyOneTruthy(startDate, endDate)){
+        if (isOnlyOneTruthy(startDate, endDate)) {
             return;
         }
 
@@ -31,15 +45,22 @@ const HistoryRecord = () => {
             return;
         }
 
-        const results = await history.fetchDetectResults({
-            cameraName: cameraLocation, startDate: startDate, endDate: endDate
-        });
-        setIncidents(results)
+        try {
+            const results = await history.fetchDetectResults({
+                cameraName: cameraLocation, 
+                startDate: startDate, 
+                endDate: endDate,
+                incidentType: incidentType
+            });
+            setIncidents(results);
+        } catch (error) {
+            console.error('Error fetching incidents:', error);
+        }
     };
 
-    useEffect(() => {
+    const handleSearchClick = () => {
         fetchIncidents();
-    }, [incidentType, cameraLocation, startDate, endDate]);
+    };
 
     const handleIncidentClick = (incidentId) => {
         navigate(`/history/${incidentId}`);
@@ -63,50 +84,59 @@ const HistoryRecord = () => {
 
     const formatIncidentTitle = (dateString, description) => `${dateFormat(dateString)}_${description}`;
 
-    return (<div className="incident-list-container">
-        <header className="incident-list-header">
-            <h1>이상상황 과거이력 리스트</h1>
-        </header>
-        <div className="incident-list-filters">
-            <input
-                type="date"
-                id="dateInput"
-                value={startDate}
-                onChange={handleStartDateChange}
-            />
-            ~
-            <input
-                type="date"
-                id="dateInput"
-                value={endDate}
-                onChange={handleEndDateChange}
-            />
-            <select value={cameraLocation} onChange={handleCameraLocationChange}>
-                <option value="">카메라 위치를 선택해주세요</option>
-                {cameraLocations.map((location, index) => (<option key={index} value={location}>
-                    {location}
-                </option>))}
-            </select>
-            <select value={incidentType} onChange={handleIncidentTypeChange}>
-                <option value="">이상상황을 선택해주세요</option>
-                {incidentTypes.map((type, index) => (<option key={index} value={type}>
-                    {type}
-                </option>))}
-            </select>
-        </div>
-        <div className="incident-list-grid">
-            {incidents.map((incident, index) => (<div
-                key={index}
-                className="incident-card"
-                onClick={() => handleIncidentClick(incident.id)}
-            >
-                <div className="incident-thumbnail">
-                    <span className="play-icon">▶</span>
-                </div>
-                <p className="incident-title">{formatIncidentTitle(incident.localDateTime, incident.label)}</p>
-            </div>))}
+    return (
+        <div className="incident-list-container">
+            <header className="incident-list-header">
+                <h1>이상상황 과거이력 리스트</h1>
+            </header>
+            <div className="incident-list-filters">
+                <input
+                    type="date"
+                    id="dateInput"
+                    value={startDate}
+                    onChange={handleStartDateChange}
+                />
+                ~
+                <input
+                    type="date"
+                    id="dateInput"
+                    value={endDate}
+                    onChange={handleEndDateChange}
+                />
+                <select value={cameraLocation} onChange={handleCameraLocationChange}>
+                    <option value="">카메라 위치를 선택해주세요</option>
+                    {cameraLocations.map((location, index) => (
+                        <option key={index} value={location}>
+                            {location}
+                        </option>
+                    ))}
+                </select>
+                <select value={incidentType} onChange={handleIncidentTypeChange}>
+                    <option value="">이상상황을 선택해주세요</option>
+                    {incidentTypes.map((type, index) => (
+                        <option key={index} value={type}>
+                            {type}
+                        </option>
+                    ))}
+                </select>
+                <button onClick={handleSearchClick} className="search-button">검색</button>
+            </div>
+            <div className="incident-list-grid">
+                {incidents.map((incident, index) => (
+                    <div
+                        key={index}
+                        className="incident-card"
+                        onClick={() => handleIncidentClick(incident.id)}
+                    >
+                        <div className="incident-thumbnail">
+                            <span className="play-icon">▶</span>
+                        </div>
+                        <p className="incident-title">{formatIncidentTitle(incident.localDateTime, incident.label)}</p>
+                    </div>
+                ))}
+            </div>
         </div>
-    </div>);
+    );
 };
 
 export default HistoryRecord;

src/pages/HistoryRecord/HistoryRecordDetail.css

@@ -65,3 +65,21 @@
 .relatedItem:hover {
     background: #d4d4d4;
 }
+
+.backButtonContainer {
+    margin-bottom: 15px;
+}
+
+.backButton {
+    background: none;  
+    border: none; 
+    font-size: 24px; 
+    cursor: pointer;  
+    color: #555; 
+    outline: none;  
+    padding: 0;  
+}
+
+.backButton:hover {
+    color: #333;
+}

src/pages/HistoryRecord/HistoryRecordDetail.jsx

@@ -1,31 +1,46 @@
-import React, {useEffect, useState} from 'react';
-import {useParams} from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import './HistoryRecordDetail.css';
 import history from "../../api/history.js";
 
 const HistoryRecordDetail = () => {
-    const {incidentId} = useParams();
+    const { incidentId } = useParams();
     const [incident, setIncident] = useState(null);
+    const navigate = useNavigate();
 
     const fetchIncidentDetail = async () => {
         const result = await history.fetchDetectResult(incidentId);
-        setIncident(result)
+        setIncident(result);
     };
 
     useEffect(() => {
         fetchIncidentDetail();
     }, [incidentId]);
 
+    const handleBackClick = () => {
+        navigate(-1);
+    };
+
     if (!incident) return <p>해당 사건을 찾을 수 없습니다.</p>;
 
     return (
         <div className="container">
+            <div className="backButtonContainer">
+                <button className="backButton" onClick={handleBackClick}>
+                    ←
+                </button>
+            </div>
             <div className="mainContent">
                 <h1 className="title">{incident.date}_{incident.label}</h1>
                 <div className="videoContainer">
-                    <div className="videoPlaceholder">
-                        <span className="playIcon">▶</span>
-                    </div>
+                    {/* 서버에서 가져온 실제 사진을 표시 */}
+                    {incident.imageUrl ? (
+                        <img src={incident.imageUrl} alt="사고 이미지" className="incident-image" />
+                    ) : (
+                        <div className="videoPlaceholder">
+                            <span className="playIcon">▶</span>
+                        </div>
+                    )}
                 </div>
                 <div className="details">
                     <h2>발생시간</h2>

src/pages/Report/Report.css

@@ -1,6 +1,8 @@
 .reportContainer {
     padding: 20px;
     font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 20px;
 }
 
 .calendarGrid {
@@ -44,3 +46,28 @@
 .downloadButton:hover {
     background-color: #0097a7;
 }
+
+.monthSelector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.arrowButton {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: 1;
+}
+
+.arrowButton:hover {
+    color: #0056b3;
+}
+
+.monthLabel {
+    margin: 0 10px;
+    font-size: 32px;
+}

src/pages/Report/Report.jsx

@@ -3,7 +3,7 @@ import './Report.css';
 
 const Report = () => {
     const [selectedDate, setSelectedDate] = useState(null);
-    const [selectedMonth, setSelectedMonth] = useState(6); // 기본값: 7월 (0-11로 표현)
+    const [selectedMonth, setSelectedMonth] = useState(6);
     const months = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
 
     const handleDateClick = (date) => {
@@ -18,8 +18,19 @@ const Report = () => {
         }
     };
 
+    const handleMonthChange = (direction) => {
+        setSelectedMonth((prevMonth) => {
+            if (direction === 'prev') {
+                return prevMonth === 0 ? 11 : prevMonth - 1;
+            } else {
+                return prevMonth === 11 ? 0 : prevMonth + 1;
+            }
+        });
+        setSelectedDate(null);
+    };
+
     const renderCalendar = () => {
-        const daysInMonth = new Date(2024, selectedMonth + 1, 0).getDate(); // 선택한 월의 마지막 날
+        const daysInMonth = new Date(2024, selectedMonth + 1, 0).getDate();
         const calendarDays = [];
 
         for (let i = 1; i <= daysInMonth; i++) {
@@ -39,14 +50,16 @@ const Report = () => {
 
     return (
         <div className="reportContainer">
-            <h1>보고서</h1>
-            <h3>날짜를 선택해주세요.</h3>
-            <select value={selectedMonth} onChange={(e) => setSelectedMonth(Number(e.target.value))}>
-                {months.map((month, index) => (
-                    <option key={index} value={index}>{month}</option>
-                ))}
-            </select>
-            <h3>{months[selectedMonth]}</h3>
+            {selectedDate ? (
+                <h3>선택한 날짜: {selectedMonth + 1}월 {selectedDate}일</h3>
+            ) : (
+                <h3> </h3>
+            )}
+            <div className="monthSelector">
+                <button className="arrowButton" onClick={() => handleMonthChange('prev')}>^</button>
+                <h3 className="monthLabel">{months[selectedMonth]}</h3>
+                <button className="arrowButton" onClick={() => handleMonthChange('next')}>v</button>
+            </div>
             <div className="calendarGrid">
                 {renderCalendar()}
             </div>