최은석 / ossw-project

Go to a project
Toggle navigation Toggle navigation pinning
최은석
8d8547ed 1 parent ffd60628

update front with routing

Expand all
Inline Side-by-side
Showing 11 changed files with 39 additions and 35 deletions
...@@ -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, { Component } from 'react'; 1 +import React from 'react';
2 2
3 function InnerChat(props) { 3 function InnerChat(props) {
4 return ( 4 return (
......
1 +import './App.css';
2 +import axios from "axios";
3 +
4 +function MenuPage() {
5 + return (
6 + <div>
7 + 메뉴 페이지
8 + </div>
9 + );
10 +}
11 +//첫번째: 오늘 메뉴/ 두번째: 오늘 메뉴에 대한 이야기/ 세번째: 어제 메뉴에 대한 이야기
12 +
13 +export default MenuPage;
...\ No newline at end of file ...\ No newline at end of file
...@@ -10,6 +10,7 @@ function SideChat() { ...@@ -10,6 +10,7 @@ function SideChat() {
10 10
11 const getWaiting = () => { 11 const getWaiting = () => {
12 axios.get("/api/waiting").then((res) => { 12 axios.get("/api/waiting").then((res) => {
13 + var newList = [];
13 setList(res.data); 14 setList(res.data);
14 setTimeout(() =>{ 15 setTimeout(() =>{
15 const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight; 16 const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight;
...@@ -32,11 +33,9 @@ function SideChat() { ...@@ -32,11 +33,9 @@ function SideChat() {
32 return ( 33 return (
33 <div className='SideChat'> 34 <div className='SideChat'>
34 <div ref={chatContainer} className='innerChat1'> 35 <div ref={chatContainer} className='innerChat1'>
35 - {list.map(waiting => { 36 + {list.map((item, index) => {
36 return ( 37 return (
37 - <div> 38 + <InnerChat key={index} value={item.value} time={item.time}/>
38 - <InnerChat value={waiting.value} time={waiting.time}/>
39 - </div>
40 ) 39 )
41 })} 40 })}
42 </div> 41 </div>
......
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>
......
...@@ -7,13 +7,9 @@ let today = '~'+'월'+'*'+'일'; // 날짜 받아오기 ...@@ -7,13 +7,9 @@ let today = '~'+'월'+'*'+'일'; // 날짜 받아오기
7 7
8 8
9 function MainPage() { 9 function MainPage() {
10 - const callApi = async()=>{
11 - axios.get("/api").then((res)=>{console.log(res.data.test)});
12 -
13 - };
14 10
15 useEffect(()=>{ 11 useEffect(()=>{
16 - callApi(); 12 +
17 }, []); 13 }, []);
18 14
19 return ( 15 return (
......
...@@ -6,16 +6,27 @@ import SideChat from './Component/SideChat'; ...@@ -6,16 +6,27 @@ 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 <React.StrictMode>
13 - <div className='Screen' style={{borderColor:'blue', width:'100vw', height:'100vh'}}> 19 + <div className='Screen' style={{ borderColor: 'blue', width: '100vw', height: '100vh' }}>
14 <TopBanner /> 20 <TopBanner />
15 21
16 <SideChat /> 22 <SideChat />
17 - <div className='bodyContent' style={{width:'100%', height:'100%'}}> 23 + <div className='bodyContent' style={{ width: '100%', height: '100%' }}>
18 - <MainPage /> 24 + <Router>
25 + <Routes>
26 + <Route path="/" element={<MainPage/>}/>
27 + <Route path="/menu" element={<MenuPage/>}/>
28 + </Routes>
29 + </Router>
19 </div> 30 </div>
20 31
21 32
...@@ -23,11 +34,4 @@ root.render( ...@@ -23,11 +34,4 @@ root.render(
23 </React.StrictMode> 34 </React.StrictMode>
24 ); 35 );
25 36
26 -{/* <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}>
27 -바보
28 -</div> */}
29 -
30 -// If you want to start measuring performance in your app, pass a function
31 -// to log results (for example: reportWebVitals(console.log))
32 -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
33 reportWebVitals(); 37 reportWebVitals();
......
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
1 { 1 {
2 "scripts": { 2 "scripts": {
3 "server": "cd server && nodemon server", 3 "server": "cd server && nodemon server",
4 - "client": "cd client && export PORT=8080 && set PORT=8080 && npm start --port", 4 + "client": "cd client && export PORT=8080 && set PORT=8080 && npm start",
5 "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"" 5 "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
6 }, 6 },
7 "dependencies": { 7 "dependencies": {
......
This diff is collapsed. Click to expand it.