Showing
3 changed files
with
48 additions
and
24 deletions
client/src/Component/InnerChat.js
0 → 100644
1 | +import React, { Component } 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'; | 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([]); |
10 | + | ||
11 | + const getWaiting = () => { | ||
12 | + axios.get("/api/waiting").then((res) => { | ||
13 | + setList(res.data); | ||
14 | + setTimeout(() =>{ | ||
15 | + const scroll = chatContainer.current.scrollHeight - chatContainer.current.clientHeight; | ||
16 | + chatContainer.current.scrollTo(0, scroll); | ||
17 | + },100); | ||
18 | + }); | ||
19 | + } | ||
11 | 20 | ||
12 | - }; | 21 | + const postWaiting = (inp) => { |
22 | + axios.post("/api/waiting", {value:inp}).then((res) => { | ||
23 | + getWaiting(); | ||
24 | + }); | ||
25 | + } | ||
13 | 26 | ||
14 | - useEffect(()=>{ | 27 | + useEffect(() => { |
15 | - callApi(); | 28 | + getWaiting(); |
16 | - //addChat(); | ||
17 | scrollChat(); | 29 | scrollChat(); |
18 | }, []); | 30 | }, []); |
19 | 31 | ||
20 | return ( | 32 | return ( |
21 | <div className='SideChat'> | 33 | <div className='SideChat'> |
22 | - <div className='innerChat1'> | 34 | + <div ref={chatContainer} className='innerChat1'> |
23 | - | 35 | + {list.map(waiting => { |
36 | + return ( | ||
37 | + <div> | ||
38 | + <InnerChat value={waiting.value} time={waiting.time}/> | ||
39 | + </div> | ||
40 | + ) | ||
41 | + })} | ||
24 | </div> | 42 | </div> |
25 | <div className='innerChat2'> | 43 | <div className='innerChat2'> |
26 | <div> | 44 | <div> |
27 | 대기시간 | 45 | 대기시간 |
28 | </div> | 46 | </div> |
29 | <div className='innerBtnCover'> | 47 | <div className='innerBtnCover'> |
30 | - <button className='innerBtn' id='under5'>5분 이내</button> | 48 | + <button className='innerBtn' id='under5' onClick={()=>postWaiting("5분 이내")}>5분 이내</button> |
31 | - <button className='innerBtn' id='5to10'>5분~10분</button> | 49 | + <button className='innerBtn' id='5to10' onClick={()=>postWaiting("5분~10분")}>5분~10분</button> |
32 | - <button className='innerBtn' id='over10'>10분 이상</button> | 50 | + <button className='innerBtn' id='over10' onClick={()=>postWaiting("10분 이상")}>10분 이상</button> |
33 | </div> | 51 | </div> |
34 | </div> | 52 | </div> |
35 | </div> | 53 | </div> |
... | @@ -37,25 +55,18 @@ function SideChat() { | ... | @@ -37,25 +55,18 @@ function SideChat() { |
37 | ); | 55 | ); |
38 | } | 56 | } |
39 | 57 | ||
40 | - | ||
41 | - | ||
42 | -// <div className='scrollmake' style={{height:'1200px', width:'100px',backgroundColor:'red' }}> | ||
43 | -// 바보 | ||
44 | -// </div> | ||
45 | - | ||
46 | - | ||
47 | const scrollChat = () => { | 58 | const scrollChat = () => { |
48 | let scrollY; | 59 | let scrollY; |
49 | 60 | ||
50 | const sideChat = document.getElementsByClassName('SideChat')[0]; | 61 | const sideChat = document.getElementsByClassName('SideChat')[0]; |
51 | 62 | ||
52 | scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; | 63 | scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; |
53 | - sideChat.style.top = scrollY +"px"; | 64 | + sideChat.style.top = scrollY + "px"; |
54 | 65 | ||
55 | - const reposition = ()=>{ // 화면 크기 바뀔때도 이래야함--> 추후수정 | 66 | + const reposition = () => { // 화면 크기 바뀔때도 이래야함--> 추후수정 |
56 | sideChat.style.transition = '800ms'; | 67 | sideChat.style.transition = '800ms'; |
57 | scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; | 68 | scrollY = window.scrollY + document.body.scrollHeight / 5 - 50; |
58 | - sideChat.style.top = scrollY +"px"; | 69 | + sideChat.style.top = scrollY + "px"; |
59 | } | 70 | } |
60 | 71 | ||
61 | document.addEventListener('scroll', reposition); | 72 | document.addEventListener('scroll', reposition); | ... | ... |
-
Please register or login to post a comment