Merge branch 'main' into develop

Author: rong5026

package.json

@@ -55,5 +55,8 @@
     "http-proxy-middleware": "^2.0.6",
     "kakao.maps.d.ts": "^0.1.39",
     "tailwindcss": "^3.3.3"
+  },
+
+  "proxy": "http://172.16.20.209:8080/"
   }
 }

src/App.js

@@ -14,8 +14,8 @@ import CropListComponent from './components/Dictionary/CropListComponent';
 import MapComponent from './components/Map/MapComponent';
 import ForcastPage from './pages/Forcast/ForcastPage';
 import DetailComponent from './components/Dictionary/DetailComponent';
-import Test from './test.js'
-import Test2 from './test2.js'
+import MonthPage from './pages/test';
+import HistoryPage from './pages/HistoryPage/HistoryPage';
 
 function App() {
 
@@ -81,8 +81,7 @@ function App() {
           <Route path = "/declaration" Component = {DeclarationPage} />
           <Route path = "/location" Component = {LocationSettingComponent} />
           <Route path = "/detail" Component = {DetailComponent} />
-          <Route path = "/test" Component= {Test}></Route>
-          <Route path = "/test2" Component= {Test2}></Route>
+          <Route path = "/history" Component = {HistoryPage} />
         </Routes>
     </div>
   );

src/components/MyPage/AccountComponent.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-
+import {Link} from 'react-router-dom'
 
 const AccountComponent = () => {
     return(
@@ -15,7 +15,7 @@ const AccountComponent = () => {
                         {/**왼쪽에 이미지 + 글 */}
                         <div className = "w-24 h-full flex items-center justify-between">
                             <img src = "https://img.icons8.com/?size=512&id=44020&format=png" className = "h-8 w-8"/>
-                            <div className = "font-semibold text-gray-500">신고내역</div>
+                            <Link to='/history' className = "font-semibold text-gray-500">신고내역</Link> 
                         </div>
                         {/**오른쪽 꺽쇠 svg */}
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">

src/config/config.js

@@ -1,5 +1,6 @@
 const config = {
-    baseURL: 'http://ec2-54-180-99-185.ap-northeast-2.compute.amazonaws.com:8080',
+    //aseURL: 'http://ec2-54-180-99-185.ap-northeast-2.compute.amazonaws.com:8080',
+    aseURL : '172.16.20.209:8080'
   };
 
   export default config;

src/config/history.json

@@ -0,0 +1,15 @@
+[ 
+    {
+        "crop" : "tomato", 
+        "disease" : "disease1", 
+        "symptoms" : "ㅋㅌㅊㅋㅌㅊㅋㅌㅊ",
+        "address" : "서울 광진구 군자동 98"
+    },
+    {
+        "crop" : "cucumber", 
+        "disease" : "disease4", 
+        "symptoms" : "병해", 
+        "address": 
+        "서울 광진구 군자동 98"
+    }
+]

src/pages/HistoryPage/HistoryPage.js

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import HistoryData from '../../config/history.json';
+import MoveBackComponent from '../../components/common/MoveBackComponent';
+
+const ConfirmationModal = ({ isOpen, onClose, onConfirm }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal">
+      <div className="h-32 bg-white rounded-2xl flex flex-col p-4 justify-between">
+        <div>신고 내역을 삭제하시겠습니까?</div>
+            <div className = "flex justify-around px-2">
+                <button onClick={onConfirm} className="w-20 rounded-xl border border-black">네</button>
+                <button onClick={onClose} className="w-20 rounded-xl border border-black">아니요</button>
+            </div>
+      </div>
+    </div>
+  );
+};
+
+const Pagination = ({ reportsPerPage, totalReports, paginate }) => {
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(totalReports / reportsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
+  return (
+    <nav>
+      <ul className='pagination'>
+        {pageNumbers.map(number => (
+          <li key={number} className='page-item'>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+const HistoryPage = () => {
+  const [reports, setReports] = useState([]);
+  const [editIndex, setEditIndex] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [deletingIndex, setDeletingIndex] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [reportsPerPage] = useState(5);
+
+  useEffect(() => {
+    setReports(HistoryData);
+  }, []);
+
+  const openDeleteModal = (index) => {
+    setIsModalOpen(true);
+    setDeletingIndex(index);
+  };
+
+  const closeDeleteModal = () => {
+    setIsModalOpen(false);
+    setDeletingIndex(null);
+  };
+
+  const confirmDelete = () => {
+    const updatedReports = reports.filter((_, idx) => idx !== deletingIndex);
+    setReports(updatedReports);
+    localStorage.setItem('reports', JSON.stringify(updatedReports));
+    closeDeleteModal();
+  };
+
+  const handleSymptomsChange = (e, index) => {
+    const updatedReports = [...reports];
+    updatedReports[index].symptoms = e.target.value;
+    setReports(updatedReports);
+  };
+
+  const saveEditedReport = () => {
+    localStorage.setItem('reports', JSON.stringify(reports));
+    setEditIndex(null);
+  };
+
+  const paginate = pageNumber => setCurrentPage(pageNumber);
+
+
+ 
+  return (
+    <>
+    <MoveBackComponent/>
+    <div className="p-4">
+      <h1 className="w-full h-12 flex justify-center items-start font-semibold text-2xl">신고 내역 조회</h1>
+      {reports.slice((currentPage - 1) * reportsPerPage, currentPage * reportsPerPage).map((report, index) => (
+        <div key={index} className={`bg-white w-full h-44 rounded-xl mt-2 p-3 drop-shadow-md ... ${editIndex === index ? 'editing' : ''}`}>
+          <div className="report-item-content">
+            {/* Display details here */}
+            <div>작물: {report.crop}</div>
+            <div>병해: {report.disease}</div>
+            {editIndex === index ? (
+              <textarea
+                className="edit-input"
+                value={report.symptoms}
+                onChange={(e) => handleSymptomsChange(e, index)}
+              />
+            ) : (
+              <div>증상: {report.symptoms}</div>
+            )}
+            <div>주소: {report.address}</div>
+            <div>날짜: {report.date}</div>
+          </div>
+          <div className="report-item-controls">
+            {editIndex === index ? (
+              <button onClick={() => saveEditedReport(index)} className="save-button">저장</button>
+            ) : (
+                <></>
+            )}
+            <button onClick={() => openDeleteModal(index)} className="w-full flex justify-end">
+                <div class="bg-gray-200 w-20 h-8 rounded-lg flex justify-center items-center">
+                    <div class="font-semibold text-gray-500">삭제하기</div>
+                </div>
+            </button>
+          </div>
+        </div>
+      ))}
+      <Pagination 
+        reportsPerPage={reportsPerPage}
+        totalReports={reports.length}
+        paginate={paginate}
+      />
+      <ConfirmationModal 
+        isOpen={isModalOpen}
+        onClose={closeDeleteModal}
+        onConfirm={() => confirmDelete(deletingIndex)}
+      />
+    </div>
+    </>
+  );
+};
+
+export default HistoryPage;
+