[featuer]/#3/diary(+total)

- 중간까지 했던 코드 전체 수정
- 페이지전환문제 해결
- 로그인 전 메인페이지를 구현하는 js 전체 수정하고 파일 나눔(상단바 기능만 넣는 app.js파일과 나머지기능을 구현하는 xlog.js파일)
- 로그인 전 화면에서 기능 막기 및 로그인 해달라는 알림 뜨게 하기
- 로그인 후 메인페이지에 등장하는 나무와 글자, 제목 등 css영역 전체 수정함(사과 7개 넣다보니 수정했어야함)
- 그린일기 모달위치 변경하기
- 메인페이지에 그린데이 로고 넣기

client/greenday_front/package.json

@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
+    "react-script": "^2.0.5",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

client/greenday_front/src/App.css

@@ -1,3 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 body {
   background-image: linear-gradient(to right, white 250px,#d7eec4 250px);
   width: 150px;
@@ -22,7 +61,12 @@ li a {
   font-weight: bold;
 }
 
-li a:hover {
+.click {
+  display: block;
+  color: #000000;
+  padding: 8px;
+  text-decoration: none;
+  font-weight: bold;
   color: #71885e;
   background-color: rgb(192, 192, 192);
 }
@@ -71,14 +115,14 @@ h5 {
 .tree_image img{
   position: absolute;
   left: 700px;
-  top: 213px;
-  width: 360px;
-  height: 500px;
+  top: 183px;
+  width: 400px;
+  height: 530px;
   z-index: -1;
 }
 
 
-.button img{
+.login_button img{
   position:absolute;
   left: 600px;
   top: 105px;
@@ -88,7 +132,7 @@ h5 {
   height:500px;
   border-radius: 15px;
 }
-.button_content img{
+.login_button_content img{
   position:absolute;
   left: 1064px;
   top: 111px;
@@ -97,3 +141,22 @@ h5 {
   width: 30px;
   height:30px;
 }
+
+.apple_image{
+  position:absolute;
+  border: none; 
+  background-color: transparent;
+  cursor: pointer;
+  z-index: -1;
+}
+
+.apple_image img{
+  width: 50px;
+  height:50px;
+}
+
+.xlog-navigation-menu{
+  font-weight: bold;
+  cursor: pointer;
+  color: #444444;
+}

client/greenday_front/src/App.js

@@ -1,25 +1,20 @@
 import logo from './logo.svg';
 import './App.css';
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {Routes, Route,Link, useNavigate} from "react-router-dom";
 import Modal from './modiary';
-import Home from "./App";
-import Notice from "./notice.js";
-import History from "./history.js";
-import Greenmate from "./greenmate.js";
-import Login from "./login.js";
-import React,{ useState } from "react";
+import Home from "./Home.js";
+import Notice from "./Notice.js";
+import History from "./History.js";
+import Xlog from "./xlog.js";
 
 
-function App() {
-  const [buttonOpen,setButtonOpen]=useState(false); 
+import { useState ,useEffect} from "react";
 
-  const openButton=()=>{ 
-    setButtonOpen(true);
-  };
 
-  const closeButton=()=>{ 
-    setButtonOpen(false);
-  };
+function App() {
+  let [buttonOpen,setButtonOpen]=useState(false);
+  /*let [shouldRenderApp,setShouldRenderApp]=useState(true);*/
+
 
   const [isModalOpen, setModalOpen] = useState(false);//useState사용하여 상태 초기화 및 모달의 열림/닫힘 상태관리
 
@@ -47,57 +42,36 @@ function App() {
   //     console.error('데이터를 가져오는 중 오류 발생:', error);
   //   }
   // }
-
+  /*  useEffect(() => {
+      const path = window.location.pathname;
+      const excludedPaths = ['/History', '/Notice',"/Home"]; // 제외할 경로들
+      setShouldRenderApp(!excludedPaths.includes(path));
+    }, []);
+  
+    if (!shouldRenderApp) {
+      return null; 
+    };
+  */
   return (
-    <Router>
-      <h1>Green Day!</h1>
-      <h4>Q. 여러분은 평소에 환경을 얼마큼 생각하시나요?<br />
-Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들을 위한 공간입니다.</h4>
-  <title>네이버 로그인</title>
-    <div className="App">
+    <>
       <div>
-        <h5>
-           방문자님,<br />
-          환영합니다.<br /><br />
-          <div className="one"></div>
-        </h5>
-
-        <ul className="navigation-menu">
-          <li><a href="App.js">홈</a></li><br />
-          <li><a href="notice.js">게시판</a></li><br />
-          <li><a href="history.js">히스토리</a></li><br />
-          <li><a href="greenmate.js">그린메이트</a></li><br />
-          <li><a href="#" onClick={openModal}>그린일기</a></li><br />
-        </ul>
-
+
         <Routes>
-          <Route path="/home" element={<Home />}></Route>
-          <Route path="/notice" element={<Notice />}></Route>
-          <Route path="/history" element={<History />}></Route>
-          <Route path="/greenmate" element={<Greenmate />}></Route>
+          <Route path="/Home" element={<Home />}></Route>
+          <Route path="/Notice" element={<Notice />}></Route>
+          <Route path="/History" element={<History />}></Route>
+          <Route path="/Xlog" element={<Xlog />}></Route>
         </Routes>
 
-        <Modal isOpen={isModalOpen} onClose={closeModal} /> {/* 모달을 닫기 위한 콜백 전달 */}
+        <Modal isOpen={isModalOpen} onClose={closeModal} /> 
 
 
       </div>
 
-      {buttonOpen && (
-        <div>
-          <div className="button">
-          <img src="a.png" /></div>
-          <button onClick={closeButton}>
-            <div className="button_content">
-              <img src='x.png' />
-            </div>
-          </button>
-        </div>
-      )}
-      </div>
-      <button className="tree_image" onClick={openButton}>
-        <img src='tree.png'a href="APIExamNaverLogin.html" /></button>
-    </Router>
+    </>
   );
 }
 
+
+
 export default App;

client/greenday_front/src/Home.js

@@ -0,0 +1,115 @@
+import logo from './logo.svg';
+import './App.css';
+import {Routes, Route,Link, useNavigate} from "react-router-dom";
+import Modal from './modiary';
+import Notice from "./Notice.js";
+import History from "./History.js";
+import Xlog from "./xlog.js";
+import { useState } from "react";
+
+
+function Home() {
+  // let [buttonOpen,setButtonOpen]=useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);//useState사용하여 상태 초기화 및 모달의 열림/닫힘 상태관리
+  const [buttonOpen, setButtonOpen] = useState(false);
+
+  //모달열기
+  const openModal = (event) => {
+    event.preventDefault(); // 링크의 기본 동작 방지
+    setModalOpen(true); //setModalOpen(true)를 호출하여 isModalOpen 상태를 true로 설정해 모달 열기
+  };
+
+  //모달닫기함수
+  const closeModal = () => {
+    setModalOpen(false); // 모달 닫기
+  };
+
+  //   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);
+  //   }
+  // }
+
+  const apples = [
+    { id: 1, src: 'apple.png', style: { top: '31%', left: '56%' } },
+    { id: 2, src: 'apple.png', style: { top: '38%', left: '63%' } },
+    { id: 3, src: 'apple.png', style: { top: '38%', left: '49%' } },
+    { id: 4, src: 'apple.png', style: { top: '44%', left: '59%' } },
+    { id: 5, src: 'apple.png', style: { top: '51%', left: '65%' } },
+    { id: 6, src: 'apple.png', style: { top: '53%', left: '48%' } },
+    { id: 7, src: 'apple.png', style: { top: '49%', left: '54%' } },
+  ];
+
+  return (
+    <>
+
+    <div className="App">
+      <div>
+      <h1>Green Day!</h1>
+      <h4>Q. 여러분은 평소에 환경을 얼마큼 생각하시나요?<br />
+Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들을 위한 공간입니다.</h4>
+        <h5>
+           방문자님,<br />
+          환영합니다.<br /><br />
+          <div className="one"></div>
+        </h5>
+
+        <ul className="navigation-menu">
+          <li><div className="click">홈</div></li><br />
+          <li><Link to="/Notice">게시판</Link></li><br />
+          <li><Link to ='/History'>히스토리</Link></li><br />
+        </ul>
+
+        <Routes>
+          <Route path="/Notice" element={<Notice />}></Route>
+          <Route path="/History" element={<History />}></Route>
+        </Routes>
+
+      </div>
+
+
+      </div>
+      <button className="tree_image" onClick={()=>{setButtonOpen(true)}}>
+        <img src='tree.png'a href="APIExamNaverLogin.html" /></button>
+
+        <div className="App">
+      {/* 사과 그림 버튼 추가 부분 */}
+      {apples.map(apple => (
+        <button
+          key={apple.id}
+          className="apple_image"
+          onClick={openModal}
+          style={{ position: 'absolute', ...apple.style }}
+        >
+          <img 
+            src={apple.src} 
+            alt={`Apple ${apple.id}`} 
+            style={{ border: 'none', backgroundcolor: 'transparent', width: '56px', height: '56px' }}
+            />
+        </button>
+      ))}
+
+      {/* 모달 컴포넌트 */}
+      <Modal isOpen={isModalOpen} onClose={closeModal} />
+    </div>
+
+
+
+
+
+
+    </>
+  );
+}
+
+
+
+export default Home;