최은석 / ossw-project

Go to a project
Toggle navigation Toggle navigation pinning
채지성
65a693bc 2 parents 22e78017 5fbe6c72

mainpage_

Expand all
Inline Side-by-side
Showing 13 changed files with 190 additions and 80 deletions
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
16 "react": "^18.1.0", 16 "react": "^18.1.0",
17 "react-bootstrap": "^2.4.0", 17 "react-bootstrap": "^2.4.0",
18 "react-dom": "^18.1.0", 18 "react-dom": "^18.1.0",
19 + "react-router-dom": "^6.3.0",
19 "react-scripts": "5.0.1", 20 "react-scripts": "5.0.1",
20 "web-vitals": "^2.1.4" 21 "web-vitals": "^2.1.4"
21 } 22 }
...@@ -8257,6 +8258,14 @@ ...@@ -8257,6 +8258,14 @@
8257 "he": "bin/he" 8258 "he": "bin/he"
8258 } 8259 }
8259 }, 8260 },
8261 + "node_modules/history": {
8262 + "version": "5.3.0",
8263 + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
8264 + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
8265 + "dependencies": {
8266 + "@babel/runtime": "^7.7.6"
8267 + }
8268 + },
8260 "node_modules/hoopy": { 8269 "node_modules/hoopy": {
8261 "version": "0.1.4", 8270 "version": "0.1.4",
8262 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", 8271 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
...@@ -13724,6 +13733,30 @@ ...@@ -13724,6 +13733,30 @@
13724 "node": ">=0.10.0" 13733 "node": ">=0.10.0"
13725 } 13734 }
13726 }, 13735 },
13736 + "node_modules/react-router": {
13737 + "version": "6.3.0",
13738 + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
13739 + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
13740 + "dependencies": {
13741 + "history": "^5.2.0"
13742 + },
13743 + "peerDependencies": {
13744 + "react": ">=16.8"
13745 + }
13746 + },
13747 + "node_modules/react-router-dom": {
13748 + "version": "6.3.0",
13749 + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
13750 + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
13751 + "dependencies": {
13752 + "history": "^5.2.0",
13753 + "react-router": "6.3.0"
13754 + },
13755 + "peerDependencies": {
13756 + "react": ">=16.8",
13757 + "react-dom": ">=16.8"
13758 + }
13759 + },
13727 "node_modules/react-scripts": { 13760 "node_modules/react-scripts": {
13728 "version": "5.0.1", 13761 "version": "5.0.1",
13729 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", 13762 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
...@@ -22430,6 +22463,14 @@ ...@@ -22430,6 +22463,14 @@
22430 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 22463 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
22431 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" 22464 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
22432 }, 22465 },
22466 + "history": {
22467 + "version": "5.3.0",
22468 + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
22469 + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
22470 + "requires": {
22471 + "@babel/runtime": "^7.7.6"
22472 + }
22473 + },
22433 "hoopy": { 22474 "hoopy": {
22434 "version": "0.1.4", 22475 "version": "0.1.4",
22435 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", 22476 "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
...@@ -26245,6 +26286,23 @@ ...@@ -26245,6 +26286,23 @@
26245 "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", 26286 "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
26246 "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" 26287 "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
26247 }, 26288 },
26289 + "react-router": {
26290 + "version": "6.3.0",
26291 + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
26292 + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
26293 + "requires": {
26294 + "history": "^5.2.0"
26295 + }
26296 + },
26297 + "react-router-dom": {
26298 + "version": "6.3.0",
26299 + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
26300 + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
26301 + "requires": {
26302 + "history": "^5.2.0",
26303 + "react-router": "6.3.0"
26304 + }
26305 + },
26248 "react-scripts": { 26306 "react-scripts": {
26249 "version": "5.0.1", 26307 "version": "5.0.1",
26250 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", 26308 "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
...@@ -6,11 +6,12 @@ ...@@ -6,11 +6,12 @@
6 "@testing-library/jest-dom": "^5.16.4", 6 "@testing-library/jest-dom": "^5.16.4",
7 "@testing-library/react": "^13.3.0", 7 "@testing-library/react": "^13.3.0",
8 "@testing-library/user-event": "^13.5.0", 8 "@testing-library/user-event": "^13.5.0",
9 - "bootstrap": "^5.1.3",
10 "axios": "^0.27.2", 9 "axios": "^0.27.2",
10 + "bootstrap": "^5.1.3",
11 "react": "^18.1.0", 11 "react": "^18.1.0",
12 "react-bootstrap": "^2.4.0", 12 "react-bootstrap": "^2.4.0",
13 "react-dom": "^18.1.0", 13 "react-dom": "^18.1.0",
14 + "react-router-dom": "^6.3.0",
14 "react-scripts": "5.0.1", 15 "react-scripts": "5.0.1",
15 "web-vitals": "^2.1.4" 16 "web-vitals": "^2.1.4"
16 }, 17 },
......
1 +import React from 'react';
2 +
3 +function InnerChat(props) {
4 + return (
5 + <div>
6 + <div style={{fontSize:20, borderWidth:0}}>{props.value}</div>
7 + <div style={{color: 'gray', textAlign: 'right', borderWidth:0}}>{props.time}</div>
8 + </div>
9 + );
10 +}
11 +
12 +export default InnerChat;
1 +import './App.css';
2 +import axios from "axios";
3 +import { useEffect } from 'react';
4 +
5 +function MenuPage() {
6 +
7 + const getMenuList = () => {
8 + axios.get("/api/menuList").then((res) => {
9 + console.log(res.data);
10 + });
11 + }
12 +
13 + useEffect(()=>{
14 + getMenuList();
15 + }, []);
16 +
17 + return (
18 + <div>
19 + 메뉴 페이지
20 + </div>
21 + );
22 +}
23 +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
24 +
25 +export default MenuPage;
...\ No newline at end of file ...\ No newline at end of file
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
40 width: 87%; 40 width: 87%;
41 height: 90%; 41 height: 90%;
42 margin-top: 3%; 42 margin-top: 3%;
43 + overflow: scroll;
43 44
44 vertical-align: bottom; 45 vertical-align: bottom;
45 } 46 }
......
1 import './App.css'; 1 import './App.css';
2 import axios from "axios"; 2 import axios from "axios";
3 -import { useEffect } from 'react'; 3 +import { useEffect, useState, useRef } from 'react';
4 import './SideChat.css' 4 import './SideChat.css'
5 - 5 +import InnerChat from './InnerChat';
6 -
7 6
8 function SideChat() { 7 function SideChat() {
9 - const callApi = async()=>{ 8 + const chatContainer = useRef(null);
10 - axios.get("/api").then((res)=>{console.log(res.data.test)}); 9 + const [list, setList] = useState([]);
11 - 10 +
12 - }; 11 + const getWaiting = () => {
12 + axios.get("/api/waiting").then((res) => {
13 + var newList = [];
14 + setList(res.data);
15 + setTimeout(() =>{
16 + const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight;
17 + chatContainer.current.scrollTo(0, scroll);
18 + },100);
19 + });
20 + }
13 21
14 - useEffect(()=>{ 22 + const postWaiting = (inp) => {
15 - callApi(); 23 + axios.post("/api/waiting", {value:inp}).then((res) => {
16 - //addChat(); 24 + getWaiting();
25 + });
26 + }
27 +
28 + useEffect(() => {
29 + getWaiting();
17 scrollChat(); 30 scrollChat();
18 }, []); 31 }, []);
19 - 32 +
20 return ( 33 return (
21 - <div className='SideChat'> 34 + <div className='SideChat'>
22 - <div className='innerChat1'> 35 + <div ref={chatContainer} className='innerChat1'>
23 - 36 + {list.map((item, index) => {
37 + return (
38 + <InnerChat key={index} value={item.value} time={item.time}/>
39 + )
40 + })}
41 + </div>
42 + <div className='innerChat2'>
43 + <div>
44 + 대기시간
24 </div> 45 </div>
25 - <div className='innerChat2'> 46 + <div className='innerBtnCover'>
26 - <div> 47 + <button className='innerBtn' id='under5' onClick={()=>postWaiting("5분 이내")}>5분 이내</button>
27 - 대기시간 48 + <button className='innerBtn' id='5to10' onClick={()=>postWaiting("5분~10분")}>5분~10분</button>
28 - </div> 49 + <button className='innerBtn' id='over10' onClick={()=>postWaiting("10분 이상")}>10분 이상</button>
29 - <div className='innerBtnCover'>
30 - <button className='innerBtn' id='under5'>5분 이내</button>
31 - <button className='innerBtn' id='5to10'>5분~10분</button>
32 - <button className='innerBtn' id='over10'>10분 이상</button>
33 - </div>
34 </div> 50 </div>
35 </div> 51 </div>
36 - 52 + </div>
53 +
37 ); 54 );
38 } 55 }
39 56
40 -
41 -
42 -// <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
43 -// 바보
44 -// </div>
45 -
46 -
47 const scrollChat = () => { 57 const scrollChat = () => {
48 let scrollY; 58 let scrollY;
49 59
50 const sideChat = document.getElementsByClassName('SideChat')[0]; 60 const sideChat = document.getElementsByClassName('SideChat')[0];
51 61
52 scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; 62 scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
53 - sideChat.style.top = scrollY +"px"; 63 + sideChat.style.top = scrollY + "px";
54 64
55 - const reposition = ()=>{ // 화면 크기 바뀔때도 이래야함--> 추후수정 65 + const reposition = () => { // 화면 크기 바뀔때도 이래야함--> 추후수정
56 - sideChat.style.transition = '800ms'; 66 + sideChat.style.transition = '800ms';
57 scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; 67 scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
58 - sideChat.style.top = scrollY +"px"; 68 + sideChat.style.top = scrollY + "px";
59 } 69 }
60 70
61 document.addEventListener('scroll', reposition); 71 document.addEventListener('scroll', reposition);
......
1 import './App.css'; 1 import './App.css';
2 -import axios from "axios"; 2 +import { Navbar, Container, Nav} from 'react-bootstrap'
3 -import { useEffect } from 'react';
4 -import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
5 import khuimg from '../img/khumeal.png' 3 import khuimg from '../img/khumeal.png'
6 4
7 function TopBanner() { 5 function TopBanner() {
8 - const callApi = async()=>{
9 - axios.get("/api").then((res)=>{console.log(res.data.test)});
10 - };
11 -
12 - useEffect(()=>{
13 - callApi();
14 - }, []);
15 6
16 return ( 7 return (
17 8
18 <Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915', padding:'0%', margin:'0 auto'}} > 9 <Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915', padding:'0%', margin:'0 auto'}} >
19 <Container style={{margin:'0 auto'}}> 10 <Container style={{margin:'0 auto'}}>
20 <img src = {khuimg} height="40px" width="40px" /> 11 <img src = {khuimg} height="40px" width="40px" />
21 - <Navbar.Brand href="#home"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand> 12 + <Navbar.Brand href="/"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand>
22 <Navbar.Toggle aria-controls="basic-navbar-nav" /> 13 <Navbar.Toggle aria-controls="basic-navbar-nav" />
23 <Navbar.Collapse id="basic-navbar-nav"> 14 <Navbar.Collapse id="basic-navbar-nav">
24 <Nav className="me-auto"> 15 <Nav className="me-auto">
25 - <Nav.Link href="#home"><p style={{color:'white'}}>메뉴</p></Nav.Link> 16 + <Nav.Link href="/menu"><p style={{color:'white'}}>메뉴</p></Nav.Link>
26 - <Nav.Link href="#link"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link> 17 + <Nav.Link href="/"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
27 <Nav.Link href="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link> 18 <Nav.Link href="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link>
28 </Nav> 19 </Nav>
29 </Navbar.Collapse> 20 </Navbar.Collapse>
......
...@@ -31,3 +31,11 @@ ...@@ -31,3 +31,11 @@
31 flex-direction: column; 31 flex-direction: column;
32 32
33 } 33 }
34 +
35 +.mainpage :nth-child(2){
36 + display: grid;
37 + grid-template-rows: 8% 90%;
38 + padding-left: 2%;
39 +}
40 +
41 +
......
...@@ -5,7 +5,6 @@ import './mainpage.css' ...@@ -5,7 +5,6 @@ import './mainpage.css'
5 5
6 6
7 7
8 -
9 function MainPage() { 8 function MainPage() {
10 const [lunch, setlunch] = useState(""); 9 const [lunch, setlunch] = useState("");
11 const [dinner, setdinner] = useState(""); 10 const [dinner, setdinner] = useState("");
...@@ -13,16 +12,16 @@ function MainPage() { ...@@ -13,16 +12,16 @@ function MainPage() {
13 let currentMonth = new Date().getMonth(); 12 let currentMonth = new Date().getMonth();
14 let currentDate = new Date().getDate(); 13 let currentDate = new Date().getDate();
15 let today = currentYear+'/'+currentMonth+'/'+currentDate; 14 let today = currentYear+'/'+currentMonth+'/'+currentDate;
15 +
16 16
17 const makeTable = (arr_, dom_) => { 17 const makeTable = (arr_, dom_) => {
18 - 18 +
19 - arr_.forEach((elem)=>{ 19 + arr_.forEach((elem)=>{
20 - let span_ = document.createElement('div'); 20 + let span_ = document.createElement('div');
21 - span_.innerHTML = elem; 21 + span_.innerHTML = elem;
22 - dom_.appendChild(span_); 22 + dom_.appendChild(span_);
23 - console.log("하이1"); 23 + });
24 - }); 24 +
25 -
26 }; 25 };
27 26
28 const todayMealTable = async()=>{ 27 const todayMealTable = async()=>{
...@@ -48,6 +47,8 @@ function MainPage() { ...@@ -48,6 +47,8 @@ function MainPage() {
48 makeTable(dinnerArr, dinnerDom); 47 makeTable(dinnerArr, dinnerDom);
49 setlunch(lunchArr); 48 setlunch(lunchArr);
50 setdinner(dinnerArr); 49 setdinner(dinnerArr);
50 +
51 +
51 52
52 } 53 }
53 ) 54 )
...@@ -56,8 +57,6 @@ function MainPage() { ...@@ -56,8 +57,6 @@ function MainPage() {
56 57
57 useEffect(()=>{ 58 useEffect(()=>{
58 todayMealTable(); 59 todayMealTable();
59 -
60 -
61 }, []); 60 }, []);
62 61
63 return ( 62 return (
...@@ -76,7 +75,8 @@ function MainPage() { ...@@ -76,7 +75,8 @@ function MainPage() {
76 <div className='dinnerTable'></div> 75 <div className='dinnerTable'></div>
77 </div> 76 </div>
78 <div> 77 <div>
79 - 78 + <div>메뉴에 대한 이야기</div>
79 + <div></div>
80 </div> 80 </div>
81 </div> 81 </div>
82 ); 82 );
......
...@@ -6,28 +6,31 @@ import SideChat from './Component/SideChat'; ...@@ -6,28 +6,31 @@ import SideChat from './Component/SideChat';
6 import reportWebVitals from './reportWebVitals'; 6 import reportWebVitals from './reportWebVitals';
7 import 'bootstrap/dist/css/bootstrap.min.css'; 7 import 'bootstrap/dist/css/bootstrap.min.css';
8 import MainPage from './Component/mainpage'; 8 import MainPage from './Component/mainpage';
9 +import MenuPage from './Component/MenuPage';
10 +import {
11 + BrowserRouter as Router,
12 + Routes,
13 + Route,
14 +} from "react-router-dom";
9 15
10 const root = ReactDOM.createRoot(document.getElementById('root')); 16 const root = ReactDOM.createRoot(document.getElementById('root'));
11 root.render( 17 root.render(
12 - <React.StrictMode> 18 + <div className='Screen' style={{ borderColor: 'blue', width: '100vw', height: '100vh' }}>
13 - <div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}> 19 + <TopBanner />
14 - <TopBanner /> 20 +
15 - 21 + <SideChat />
16 - <SideChat /> 22 + <div className='bodyContent' style={{ width: '100%', height: '100%' }}>
17 - <div className='bodyContent' style={{width:'100%', height:'80%'}}> 23 + <Router>
18 - <MainPage /> 24 + <Routes>
19 - </div> 25 + <Route path="/" element={<MainPage />} />
20 - 26 + <Route path="/menu" element={<MenuPage />} />
21 - 27 + </Routes>
28 + </Router>
22 </div> 29 </div>
23 - </React.StrictMode>
24 -);
25 30
26 -{/* <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
27 -바보
28 -</div> */}
29 31
30 -// If you want to start measuring performance in your app, pass a function 32 + </div>
31 -// to log results (for example: reportWebVitals(console.log)) 33 +
32 -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 34 +);
35 +
33 reportWebVitals(); 36 reportWebVitals();
......
This diff could not be displayed because it is too large.
1 { 1 {
2 "scripts": { 2 "scripts": {
3 "server": "cd server && nodemon server", 3 "server": "cd server && nodemon server",
4 - "client": "cd client && set PORT=8080 && npm start --port", 4 +
5 + "client": "cd client && set PORT=8080 && npm start",
5 "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"" 6 "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
6 }, 7 },
7 "dependencies": { 8 "dependencies": {
......
This diff is collapsed. Click to expand it.