최은석 / 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 166 additions and 56 deletions
......@@ -16,6 +16,7 @@
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
......@@ -8257,6 +8258,14 @@
"he": "bin/he"
}
},
"node_modules/history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"dependencies": {
"@babel/runtime": "^7.7.6"
}
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
......@@ -13724,6 +13733,30 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"dependencies": {
"history": "^5.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"dependencies": {
"history": "^5.2.0",
"react-router": "6.3.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......@@ -22430,6 +22463,14 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"history": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
......@@ -26245,6 +26286,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
"requires": {
"history": "^5.2.0",
"react-router": "6.3.0"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
......
......@@ -6,11 +6,12 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......
import React from 'react';
function InnerChat(props) {
return (
<div>
<div style={{fontSize:20, borderWidth:0}}>{props.value}</div>
<div style={{color: 'gray', textAlign: 'right', borderWidth:0}}>{props.time}</div>
</div>
);
}
export default InnerChat;
import './App.css';
import axios from "axios";
import { useEffect } from 'react';
function MenuPage() {
const getMenuList = () => {
axios.get("/api/menuList").then((res) => {
console.log(res.data);
});
}
useEffect(()=>{
getMenuList();
}, []);
return (
<div>
메뉴 페이지
</div>
);
}
//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
export default MenuPage;
\ No newline at end of file
......@@ -40,6 +40,7 @@
width: 87%;
height: 90%;
margin-top: 3%;
overflow: scroll;
vertical-align: bottom;
}
......
import './App.css';
import axios from "axios";
import { useEffect } from 'react';
import { useEffect, useState, useRef } from 'react';
import './SideChat.css'
import InnerChat from './InnerChat';
function SideChat() {
const callApi = async()=>{
axios.get("/api").then((res)=>{console.log(res.data.test)});
const chatContainer = useRef(null);
const [list, setList] = useState([]);
const getWaiting = () => {
axios.get("/api/waiting").then((res) => {
var newList = [];
setList(res.data);
setTimeout(() =>{
const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight;
chatContainer.current.scrollTo(0, scroll);
},100);
});
}
};
const postWaiting = (inp) => {
axios.post("/api/waiting", {value:inp}).then((res) => {
getWaiting();
});
}
useEffect(()=>{
callApi();
//addChat();
useEffect(() => {
getWaiting();
scrollChat();
}, []);
return (
<div className='SideChat'>
<div className='innerChat1'>
<div ref={chatContainer} className='innerChat1'>
{list.map((item, index) => {
return (
<InnerChat key={index} value={item.value} time={item.time}/>
)
})}
</div>
<div className='innerChat2'>
<div>
대기시간
</div>
<div className='innerBtnCover'>
<button className='innerBtn' id='under5'>5분 이내</button>
<button className='innerBtn' id='5to10'>5분~10분</button>
<button className='innerBtn' id='over10'>10분 이상</button>
<button className='innerBtn' id='under5' onClick={()=>postWaiting("5분 이내")}>5분 이내</button>
<button className='innerBtn' id='5to10' onClick={()=>postWaiting("5분~10분")}>5분~10분</button>
<button className='innerBtn' id='over10' onClick={()=>postWaiting("10분 이상")}>10분 이상</button>
</div>
</div>
</div>
......@@ -37,25 +54,18 @@ function SideChat() {
);
}
// <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
// 바보
// </div>
const scrollChat = () => {
let scrollY;
const sideChat = document.getElementsByClassName('SideChat')[0];
scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
sideChat.style.top = scrollY +"px";
sideChat.style.top = scrollY + "px";
const reposition = ()=>{ // 화면 크기 바뀔때도 이래야함--> 추후수정
const reposition = () => { // 화면 크기 바뀔때도 이래야함--> 추후수정
sideChat.style.transition = '800ms';
scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
sideChat.style.top = scrollY +"px";
sideChat.style.top = scrollY + "px";
}
document.addEventListener('scroll', reposition);
......
import './App.css';
import axios from "axios";
import { useEffect } from 'react';
import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
import { Navbar, Container, Nav} from 'react-bootstrap'
import khuimg from '../img/khumeal.png'
function TopBanner() {
const callApi = async()=>{
axios.get("/api").then((res)=>{console.log(res.data.test)});
};
useEffect(()=>{
callApi();
}, []);
return (
<Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915', padding:'0%', margin:'0 auto'}} >
<Container style={{margin:'0 auto'}}>
<img src = {khuimg} height="40px" width="40px" />
<Navbar.Brand href="#home"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand>
<Navbar.Brand href="/"><p style={{color:'white'}}>제2긱 학식 커뮤니티</p></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home"><p style={{color:'white'}}>메뉴</p></Nav.Link>
<Nav.Link href="#link"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
<Nav.Link href="/menu"><p style={{color:'white'}}>메뉴</p></Nav.Link>
<Nav.Link href="/"><p style={{color:'white'}}>메뉴에 대한 이야기</p></Nav.Link>
<Nav.Link href="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link>
</Nav>
</Navbar.Collapse>
......
......@@ -31,3 +31,11 @@
flex-direction: column;
}
.mainpage :nth-child(2){
display: grid;
grid-template-rows: 8% 90%;
padding-left: 2%;
}
......
......@@ -5,7 +5,6 @@ import './mainpage.css'
function MainPage() {
const [lunch, setlunch] = useState("");
const [dinner, setdinner] = useState("");
......@@ -14,13 +13,13 @@ function MainPage() {
let currentDate = new Date().getDate();
let today = currentYear+'/'+currentMonth+'/'+currentDate;
const makeTable = (arr_, dom_) => {
arr_.forEach((elem)=>{
let span_ = document.createElement('div');
span_.innerHTML = elem;
dom_.appendChild(span_);
console.log("하이1");
});
};
......@@ -49,6 +48,8 @@ function MainPage() {
setlunch(lunchArr);
setdinner(dinnerArr);
}
)
}
......@@ -56,8 +57,6 @@ function MainPage() {
useEffect(()=>{
todayMealTable();
}, []);
return (
......@@ -76,7 +75,8 @@ function MainPage() {
<div className='dinnerTable'></div>
</div>
<div>
<div>메뉴에 대한 이야기</div>
<div></div>
</div>
</div>
);
......
......@@ -6,28 +6,31 @@ import SideChat from './Component/SideChat';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import MainPage from './Component/mainpage';
import MenuPage from './Component/MenuPage';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}>
<div className='Screen' style={{ borderColor: 'blue', width: '100vw', height: '100vh' }}>
<TopBanner />
<SideChat />
<div className='bodyContent' style={{width:'100%', height:'80%'}}>
<MainPage />
<div className='bodyContent' style={{ width: '100%', height: '100%' }}>
<Router>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/menu" element={<MenuPage />} />
</Routes>
</Router>
</div>
</div>
</React.StrictMode>
);
{/* <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
바보
</div> */}
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
......
This diff could not be displayed because it is too large.
{
"scripts": {
"server": "cd server && nodemon server",
"client": "cd client && set PORT=8080 && npm start --port",
"client": "cd client && set PORT=8080 && npm start",
"start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
},
"dependencies": {
......
This diff is collapsed. Click to expand it.