[feature]/#3/front(diary,history)

- 일기모달에 주제 랜덤으로 뜨게 구현
- 히스토리페이지에 사과박스 넣기 구현

client/greenday_front/src/App.css

@@ -160,3 +160,13 @@ h5 {
   cursor: pointer;
   color: #444444;
 }
+
+.applebox_image{
+  position:absolute;
+  border: none; 
+  background-color: transparent;
+  cursor: pointer;
+  z-index: -1;
+  width:200px;
+
+}

client/greenday_front/src/Home.js

@@ -50,7 +50,6 @@ function Home() {
 
   return (
     <>
-
     <div className="App">
       <div>
       <h1>Green Day!</h1>
@@ -81,7 +80,6 @@ Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들
         <img src='tree.png'a href="APIExamNaverLogin.html" /></button>
 
         <div className="App">
-      {/* 사과 그림 버튼 추가 부분 */}
       {apples.map(apple => (
         <button
           key={apple.id}

client/greenday_front/src/history.js

@@ -4,29 +4,10 @@ import {Routes, Route,Link, useNavigate} from "react-router-dom";
 import Modal from './modiary';
 import Home from "./Home.js";
 import Notice from "./Notice.js";
-
-
-
+import History7day from "./History7day.js";
 import { useState } from "react";
 
-
 function History() {
-  let [buttonOpen,setButtonOpen]=useState(false);
-
-
-  const [isModalOpen, setModalOpen] = useState(false);//useState사용하여 상태 초기화 및 모달의 열림/닫힘 상태관리
-
-  //모달열기
-  const openModal = (event) => {
-    event.preventDefault(); // 링크의 기본 동작 방지
-    setModalOpen(true); //setModalOpen(true)를 호출하여 isModalOpen 상태를 true로 설정해 모달 열기
-  };
-
-  //모달닫기함수
-  const closeModal = () => {
-    setModalOpen(false); // 모달 닫기
-  };
-
   //   useEffect(() => {
   //   fetchData();
   // }, []); 
@@ -40,7 +21,15 @@ function History() {
   //     console.error('데이터를 가져오는 중 오류 발생:', error);
   //   }
   // }
-
+  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">
@@ -60,11 +49,28 @@ function History() {
         <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>
     </>
   );

client/greenday_front/src/modiary.js

@@ -27,16 +27,34 @@ import './modiary.css';
 //       .then((data) => console.log('Received response:', data))
 //       .catch((error) => console.error('Error sending data:', error)); // 에러 처리
 //   };
-
 //   }
 const Modal = ({ isOpen, onClose, onSubmit }) => {
     const [text, setText] = useState(''); //text가 값 추적하고 setText함수 통해 상태
     const [message, setMessage] = useState('');
+    const [placeholder, setPlaceholder] = useState('');
+    const [title, setTitle] = useState('오늘의 그린일기');
+
+const proverbs = [
+    "일회용품", "재활용", "물", "전기", "배달", "걷기", "카페-텀블러", "분리수거", "제로웨이스트쇼핑", "친환경", 
+    "멸종위기", "에코백", "설거지", "자전거", "대중교통", "미세먼지", "식물키우기", "손빨래", 
+    "플로깅", "봉사활동", "포장", "헌옷수거"
+    ];
 
     const handleInputChange = (event) => { //입력필드의 값이 변경될때 호출되는 함수
         setText(event.target.value); //setText통해 text에 저장하는데 event를 인자로 받아event.target.value를 통해 입력 필드의 현재값을 받아 setText를 사용하여 업데이트
     };
 
+    const getRandomIndex = (length) => {
+        return Math.floor(Math.random() * length)
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+        setPlaceholder(proverbs[getRandomIndex(proverbs.length)]);
+        setTitle(proverbs[getRandomIndex(proverbs.length)]);
+        }
+    }, [isOpen]);
+
     const handleSubmit = () => { //입력 필드에서 입력이 변경될 때마다 호출되며, 입력된 값을 setText를 통해 상태 text에 저장
         if (text.trim() === '') { //입력필드가 비어있는지 검사, 공백이나 빈칸 제출 못하게함
             setMessage('입력된 내용이 없습니다.');
@@ -46,25 +64,17 @@ const Modal = ({ isOpen, onClose, onSubmit }) => {
         onSubmit(text); // 글 등록 버튼 클릭 시 동작
         setText(''); // 텍스트 입력칸을 초기화=> 다음 입력위해 빈필드갖게함
         setMessage('저장됐습니다.');
-
         onClose(); //저장하면 하로 닫기게함 지체ㄴㄴ
     };
 
     if (!isOpen) {
         return null; // 모달이 닫혀 있을 때는 렌더링하지 않음
     }
-
-    // const handleOverlayClick = (event) => { // 모달 외부를 클릭했을 때 닫기
-    //     if (event.target === event.currentTarget) {
-    //         onClose(); //이걸 호출해서 닫음 
-    //     }
-    // };
 
     return (
-        // <div className="modal-overlay" onClick={handleOverlayClick}>
             <div className="modal">
                     <button className="Close-button" onClick={onClose}>close</button>  /*모달닫는버튼*/
-                    <h3>오늘의 그린일기</h3>
+                    <h3>{title}</h3>
                     <div style={{ display: isOpen ? 'block' : 'none' }}> //isOpen이'block'이면 요소가 보이고, 'none'이면 요소가 보이지 않음
                     <textarea
                         value={text} //입력된 값을 text와 연결
@@ -73,10 +83,10 @@ const Modal = ({ isOpen, onClose, onSubmit }) => {
                     ></textarea>
                     </div>
                     <button className="Save-button" onSubmit={handleSubmit} onClick={onClose} >
+                    {/* onSubmit 이벤트는 form 요소에서 사용되어야 하므로, button 요소에서는 제거 */}
+                    {/* <button className="Save-button" onClick={handleSubmit} > */}
                         <img src='apple.png'/></button>
-                        {/* {message && <p>{message}</p>} */}
              </div>
-        // </div>
     );
 };
 

client/greenday_front/src/xlog.js

@@ -32,16 +32,16 @@ Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들
     <div className="App">
       <div>
         <h5>
-           방문자님,<br />
-          환영합니다.<br /><br />
+               그리너님,<br />
+              환영합니다.<br /><br />
           <div className="one"></div>
         </h5>
 
         <ul className="xlog-navigation-menu">
-          <li><div onClick={() =>alert('사과나무를 눌러서 로그인을 해주세요')}> 홈 </div></li><br /><br />
-          <li><div onClick={() =>alert('사과나무를 눌러서 로그인을 해주세요')}>게시판</div></li><br /><br />
-          <li><div onClick={() =>alert('사과나무를 눌러서 로그인을 해주세요')}>히스토리</div></li><br /><br />
-          <li><div onClick={() =>alert('사과나무를 눌러서 로그인을 해주세요')}>그린일기</div></li><br /><br />
+          <li><div onClick={() =>alert('나무를 눌러서 로그인을 해주세요')}> 홈 </div></li><br /><br />
+          <li><div onClick={() =>alert('나무를 눌러서 로그인을 해주세요')}>게시판</div></li><br /><br />
+          <li><div onClick={() =>alert('나무를 눌러서 로그인을 해주세요')}>히스토리</div></li><br /><br />
+          <li><div onClick={() =>alert('나무를 눌러서 로그인을 해주세요')}>그린일기</div></li><br /><br />
           <li><Link to ='/home'>로그인 후 화면</Link></li><br />
         </ul>