diff --git a/client/greenday_front/package-lock.json b/client/greenday_front/package-lock.json index 77fd86c3..ea848d4e 100644 --- a/client/greenday_front/package-lock.json +++ b/client/greenday_front/package-lock.json @@ -14,6 +14,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" } @@ -15129,6 +15130,11 @@ "react-dom": ">=16.8" } }, + "node_modules/react-script": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/react-script/-/react-script-2.0.5.tgz", + "integrity": "sha512-hLFLMFAH3Rr0VJisBz/bPyaJxMEimQGvuVOBXyn3t/nmlbV6mF+nghCPoY1V4dzIi+M1A8iyyXId1cgg8eS6XA==" + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/client/greenday_front/package.json b/client/greenday_front/package.json index be6d2f7d..ba320d93 100644 --- a/client/greenday_front/package.json +++ b/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" }, diff --git a/client/greenday_front/public/applebox.png b/client/greenday_front/public/applebox.png new file mode 100644 index 00000000..257e4513 Binary files /dev/null and b/client/greenday_front/public/applebox.png differ diff --git a/client/greenday_front/public/grayapple.png b/client/greenday_front/public/grayapple.png new file mode 100644 index 00000000..89ea80e6 Binary files /dev/null and b/client/greenday_front/public/grayapple.png differ diff --git a/client/greenday_front/src/App.css b/client/greenday_front/src/App.css index 721c12ef..72f3b6fe 100644 --- a/client/greenday_front/src/App.css +++ b/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; +} diff --git a/client/greenday_front/src/App.js b/client/greenday_front/src/App.js index 04a884dd..f27e460c 100644 --- a/client/greenday_front/src/App.js +++ b/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 ( - -

Green Day!

-

Q. 여러분은 평소에 환경을 얼마큼 생각하시나요?
-Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들을 위한 공간입니다.

- 네이버 로그인 -
+ <>
-
- 방문자님,
- 환영합니다.

-
-
- - - + - }> - }> - }> - }> + }> + }> + }> + }> - {/* 모달을 닫기 위한 콜백 전달 */} +
- {buttonOpen && ( -
-
-
- -
- )} -
- - + ); } + + export default App; \ No newline at end of file diff --git a/client/greenday_front/src/Home.js b/client/greenday_front/src/Home.js new file mode 100644 index 00000000..aed2a9e7 --- /dev/null +++ b/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 ( + <> + +
+
+

Green Day!

+

Q. 여러분은 평소에 환경을 얼마큼 생각하시나요?
+Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들을 위한 공간입니다.

+
+ 방문자님,
+ 환영합니다.

+
+
+ + + + + }> + }> + + +
+ + +
+ + +
+ {/* 사과 그림 버튼 추가 부분 */} + {apples.map(apple => ( + + ))} + + {/* 모달 컴포넌트 */} + +
+ + + + + + + + ); +} + + + +export default Home; \ No newline at end of file diff --git a/client/greenday_front/src/greenmate.css b/client/greenday_front/src/greenmate.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/greenday_front/src/greenmate.js b/client/greenday_front/src/greenmate.js deleted file mode 100644 index e69de29b..00000000 diff --git a/client/greenday_front/src/history.css b/client/greenday_front/src/history.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/greenday_front/src/history.js b/client/greenday_front/src/history.js index e69de29b..d0df0882 100644 --- a/client/greenday_front/src/history.js +++ b/client/greenday_front/src/history.js @@ -0,0 +1,75 @@ +import logo from './logo.svg'; +import './App.css'; +import {Routes, Route,Link, useNavigate} from "react-router-dom"; +import Modal from './modiary'; +import Home from "./Home.js"; +import Notice from "./Notice.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(); + // }, []); + + // 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); + // } + // } + + return ( + <> +
+
+
+ 방문자님,
+ 환영합니다.

+
+
+ + + + + }> + }> + + +
+ + +
+ + ); +} + + + +export default History; \ No newline at end of file diff --git a/client/greenday_front/src/index.js b/client/greenday_front/src/index.js index ab43f9c4..e9306f51 100644 --- a/client/greenday_front/src/index.js +++ b/client/greenday_front/src/index.js @@ -5,11 +5,14 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( + + ); // If you want to start measuring performance in your app, pass a function diff --git a/client/greenday_front/src/login.css b/client/greenday_front/src/login.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/greenday_front/src/modiary.css b/client/greenday_front/src/modiary.css index 602c83e3..bf415f17 100644 --- a/client/greenday_front/src/modiary.css +++ b/client/greenday_front/src/modiary.css @@ -1,7 +1,7 @@ .modal { position:fixed; - transform: translate(74%, -3%); - left: 300x; + transform: translate(75%, -3%); + top: 70px; background-color: white; width: 300px; diff --git a/client/greenday_front/src/notice.css b/client/greenday_front/src/notice.css deleted file mode 100644 index e69de29b..00000000 diff --git a/client/greenday_front/src/notice.js b/client/greenday_front/src/notice.js index e69de29b..08260aa2 100644 --- a/client/greenday_front/src/notice.js +++ b/client/greenday_front/src/notice.js @@ -0,0 +1,74 @@ +import logo from './logo.svg'; +import './App.css'; +import {Routes, Route,Link, useNavigate} from "react-router-dom"; +import Modal from './modiary'; +import Home from "./Home.js"; +import History from "./History.js"; + + +import { useState } from "react"; + + +function Notice() { + 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(); + // }, []); + + // 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); + // } + // } + + return ( + <> + +
+
+
+ 방문자님,
+ 환영합니다.

+
+
+ + + + + }> + }> + +
+ + +
+ + ); +} + + + +export default Notice; \ No newline at end of file diff --git a/client/greenday_front/src/xlog.js b/client/greenday_front/src/xlog.js new file mode 100644 index 00000000..371d1a08 --- /dev/null +++ b/client/greenday_front/src/xlog.js @@ -0,0 +1,81 @@ +import logo from './logo.svg'; +import React, { useState } from 'react'; +import {Routes, Route,Link, useNavigate} from "react-router-dom"; +import './App.css'; +import Modal from './modiary'; +import Notice from "./Notice.js"; +import History from "./History.js"; +import Home from "./Home.js"; + + +function Xlog() { + const [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); // 모달 닫기 + }; + + return ( + <> +

Green Day!

+

Q. 여러분은 평소에 환경을 얼마큼 생각하시나요?
+Green Day는 제로-웨이스트 시도 또는 습관을 기르려는 사람들을 위한 공간입니다.

+ 네이버 로그인 +
+
+
+ 방문자님,
+ 환영합니다.

+
+
+ + + + + }> + }> + }> + }> + + + +
+ +
+ + + { + buttonOpen == true ?
+
+ +
+ + +
: null + } + + + ); +} +export default Xlog; \ No newline at end of file