최은석

update front with routing

......@@ -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, { Component } from 'react';
import React from 'react';
function InnerChat(props) {
return (
......
import './App.css';
import axios from "axios";
function MenuPage() {
return (
<div>
메뉴 페이지
</div>
);
}
//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
export default MenuPage;
\ No newline at end of file
......@@ -10,6 +10,7 @@ function SideChat() {
const getWaiting = () => {
axios.get("/api/waiting").then((res) => {
var newList = [];
setList(res.data);
setTimeout(() =>{
const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight;
......@@ -32,11 +33,9 @@ function SideChat() {
return (
<div className='SideChat'>
<div ref={chatContainer} className='innerChat1'>
{list.map(waiting => {
{list.map((item, index) => {
return (
<div>
<InnerChat value={waiting.value} time={waiting.time}/>
</div>
<InnerChat key={index} value={item.value} time={item.time}/>
)
})}
</div>
......
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>
......
......@@ -7,13 +7,9 @@ let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
function MainPage() {
const callApi = async()=>{
axios.get("/api").then((res)=>{console.log(res.data.test)});
};
useEffect(()=>{
callApi();
}, []);
return (
......
......@@ -6,28 +6,32 @@ 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:'100%'}}>
<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.
This diff is collapsed. Click to expand it.
{
"scripts": {
"server": "cd server && nodemon server",
"client": "cd client && export PORT=8080 && set PORT=8080 && npm start --port",
"client": "cd client && export PORT=8080 && 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.