[feature]/#3/front

프론트2명 코드 합침

client/greenday_front/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

client/greenday_front/src/App.css

@@ -75,7 +75,6 @@ h1{
   position: absolute;
   font-size: 65px;
   top: -30px;
-  /* padding:30px 30px; */
   text-align: center;
   left: 700px;
 }
@@ -84,7 +83,6 @@ h4{
   position: absolute;
   font-size: 17px;
   top: 110px;
-  /* padding:30px 30px; */
   text-align: center;
   left: 550px;
 }
@@ -100,16 +98,16 @@ h5 {
   height: 1px;
   border-bottom-style: solid;
   border-bottom-color:#b5b5b5;
-  /* margin: 10px; */
 }
+
 .live_list{
   background-color: rgb(192, 192, 192);
 }
 
 .tree_image{
   background-color: transparent;
   border: none; 
-  cursor: pointer; /* 커서모양변경 */
+  cursor: pointer;
 }
 
 .tree_image img{
@@ -132,6 +130,7 @@ h5 {
   height:500px;
   border-radius: 15px;
 }
+
 .login_button_content img{
   position:absolute;
   left: 1064px;
@@ -170,3 +169,55 @@ h5 {
   width:200px;
 
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
+
+.input{
+  position:absolute;
+  left: 275px;
+  top:40px;
+  width: 1025px;
+  padding: 60px;
+  padding-bottom: 100px;
+  border : 2px solid grey;
+  border-radius: 15px;
+  font-size: 30px;
+  font-family: "Nanum Pen Script", cursive;
+
+}
+
+.input1{
+  border-bottom: 2px solid grey;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  font-weight: bold;
+  padding-left: 15px;
+}
+.input2{
+  font-size: 25px;
+  font-family: "Nanum Pen Script", cursive;
+  padding-top: 20px;
+}
+
+.input_data_list{
+  position:absolute;
+  left:275px;
+  border-bottom : 2px solid grey;
+  border-top : 2px solid grey;
+  top: 300px;
+  width: 1150px;
+  text-align: left;
+  padding-bottom: 60px;
+}
+
+.backrock_button{
+  border: none;
+}
+
+.backrock_button img{
+  position: absolute;
+  left:1300px;
+  width:90px;
+  top:180px;
+  border:none;
+}

client/greenday_front/src/App.js

@@ -6,6 +6,7 @@ import Home from "./Home.js";
 import Notice from "./Notice.js";
 import History from "./History.js";
 import Xlog from "./xlog.js";
+// import HistoryList from "./routes/HistoryList";
 
 
 import { useState ,useEffect} from "react";

client/greenday_front/src/HistoryList.js

@@ -0,0 +1,31 @@
+import React, {useEffect, useState} from "react"
+import axios from "axios"
+
+
+const HistoryList = () => {
+    const [HistoryList, setHistoryList] = useState([]);
+
+    const getBoardList = async () => {
+      const resp = (await axios.get('//localhost:8080/history')).data
+      setHistoryList(resp.date)
+
+      const pngn = resp.pagination;
+      console.log(HistoryList);
+    }
+
+    useEffect(() => {
+        getHistoryList();
+    }, []);
+
+    return (
+        <div>
+            <ul>
+                {HistoryList.map((board) => (
+                    <li key={board.idx}><board.title></board.title></li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default HistoryList;

client/greenday_front/src/Home.js

@@ -94,8 +94,6 @@ Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들
             />
         </button>
       ))}
-
-      {/* 모달 컴포넌트 */}
       <Modal isOpen={isModalOpen} onClose={closeModal} />
     </div>
 

client/greenday_front/src/history.js

@@ -1,80 +1,86 @@
 import logo from './logo.svg';
 import './App.css';
 import {Routes, Route,Link, useNavigate} from "react-router-dom";
-import Modal from './modiary';
+import Modal from './modiary.js';
 import Home from "./Home.js";
 import Notice from "./Notice.js";
-import History7day from "./History7day.js";
-import { useState } from "react";
+import React, {useEffect, useState} from "react"
+import axios from "axios"
+
+
 
 function History() {
-  //   useEffect(() => {
-  //   fetchData();
-  // }, []); 
-
-  // async function fetchData() {
-  //   try {
-  //     const response = await fetch('https://api.example.com/visitor');
-  //     const data = await response.json();
-  //     setVisitorData(data); // 서버에서 받아온 데이터를 상태에 저장
-  //   } catch (error) {
-  //     console.error('데이터를 가져오는 중 오류 발생:', error);
+
+  // let[diary, setDiary] = useState(date)
+  let[diary, setDiary] = useState()
+  let navigate = useNavigate();
+
+  // const HistoryList = () => {
+  //   const [HistoryList, setHistoryList] = useState([]);
+
+  //   const getBoardList = async () => {
+  //     const resp = (await axios.get('//localhost:8080/modiary')).data
+  //     setHistoryList(resp.date)
+
+  //     const pngn = resp.pagination;
+  //     console.log(HistoryList);
   //   }
-  // }
-  const applebox = [
-    { id: 1, src: 'applebox.png', style: { top: '25%', left: '30%' } },
-    { id: 2, src: 'applebox.png', style: { top: '25%', left: '50%' } },
-    { id: 3, src: 'applebox.png', style: { top: '25%', left: '70%' } },
-    { id: 4, src: 'applebox.png', style: { top: '55%', left: '30%' } },
-    { id: 5, src: 'applebox.png', style: { top: '55%', left: '50%' } },
-    { id: 6, src: 'applebox.png', style: { top: '55%', left: '70%' } },
-  ];
-
-  return (
-    <>
-    <div className="App">
-      <div>
-        <h5>
-           방문자님,<br />
-          환영합니다.<br /><br />
-          <div className="one"></div>
-        </h5>
+
+    return (
+      <>
+      <div className="App">
+        <div>
+          <h5>
+             방문자님,<br />
+            환영합니다.<br /><br />
+            <div className="one"></div>
+          </h5>
+
+          <ul className="navigation-menu">
+            <li><Link to="/Home">홈</Link></li><br />
+            <li><Link to="/Notice">게시판</Link></li><br />
+            <li><div className="click">히스토리</div></li><br />
+          </ul>
+
+          <Routes>
+            <Route path="/Home" element={<Home />}></Route>
+            <Route path="/Notice" element={<Notice />}></Route>
+          </Routes>
+        </div>
+
+        <h1>
+          your history!
+        </h1>
+        </div>
+
 
-        <ul className="navigation-menu">
-          <li><Link to="/Home">홈</Link></li><br />
-          <li><Link to="/Notice">게시판</Link></li><br />
-          <li><div className="click">히스토리</div></li><br />
-        </ul>
+        {/* {diary.map((a, i) => {
+            return <Card diary ={i} key={i}></Card>
+          })} */}
+
+
 
-        <Routes>
-          <Route path="/Home" element={<Home />}></Route>
-          <Route path="/Notice" element={<Notice />}></Route>
-          <Route path="/History7day" element={<History7day />}></Route>
-        </Routes>
-      </div>
-    <div className="Applebox">
-      {applebox.map(applebox => (
-        <button 
-        key={applebox.id}
-        className="applebox_image"
-        style={{position: 'absolute', ...applebox.style}}
-        >
-          번호순
-          <img 
-          src={applebox.src}
-          alt={'Apple ${applebox.id}'}
-          style={{ border:'none', width:'130px'}}
-          />
-        </button>
-
-      ))}
-
-    </div>
-
-      </div>
-    </>
-  );
-}
+
+        {/* <button onClick={() => {
+                        axios.get('url주소적기') //데이터 요청하는 백 url넣어야함 
+                        .then((결과) => {
+                            console.log(결과.data)
+                            let copy = [...diary, ...결과.data]; //리스트 [] 벗기고 {}만 정렬해줌
+                            setDiary(copy); 
+                        })
+                        .catch (() => {
+                            console.log(결과.data)
+                        })
+                    }   
+
+                    } >
+        자료 받기 
+        </button>               */}
+      </>
+    );
+  }
+
+
 
 
 

client/greenday_front/src/index.js

@@ -4,6 +4,8 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
+// import HistoryList from "./layout/HistoryList";
+// import Footer from "./layout/HistoryList";
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

client/greenday_front/src/modiary.css

@@ -13,6 +13,7 @@
     vertical-align: top;
     text-align: center; 
     border: 1px;
+    z-index:1;
 }
 
 .Close-button {