sidechat-demo-inner

+*{
+    margin:0%;
+    padding:0%;
+
+    border-color: black;
+    border-width: 1px;
+}
+
 .SideChat {
-    color: yellow;
+    color: black;
     background-color: gray;
     position: absolute;
     z-index: 999;
-    right:100px;
-    top:0px;
+    right:3%;
+    top:0%;
     transition: 0ms;
+
+    width:20%;
+    min-width: 150px;
+    max-width: 200px;
+    height:35%;
+    min-height: 200px;
+    max-height: 300px;
+
+    display: grid;
+    grid-template-rows: 4.3fr 1fr;
+
+    font-size: 90%;
+    
+    border-color: black;
+    border-radius: 5px;
+
+    align-items: center;
+    justify-items: center;
+}
+
+.SideChat .innerChat1 {
+    background-color: white;
+    width: 87%;
+    height: 90%;
+    margin-top: 3%;
+
+    vertical-align: bottom;
+}
+
+.SideChat .innerChat2 {
+    grid-template-rows: 1fr 2fr;
+    height: 100%;
+    width: 100%;
+    
+    padding-left: 3%;
+    padding-right: 3%;
+}
+
+.SideChat .innerChat2 .innerBtnCover{
+    grid-template-columns: 1fr 1.2fr 1fr;
+    height:30%;
+    padding-left: 0%;
+    padding-right: 0%;
+}
+
+.SideChat .innerChat2 .innerBtnCover .innerBtn{
+    width:33%;
+    height:100%;
+    min-height: 20px;
+    margin-bottom: 4%;
+
+    font-size:70%;
+    overflow: hidden;
 }
 
 .scrollmake{

@@ -3,47 +3,71 @@ import axios from "axios";
 import { useEffect } from 'react';
 import './SideChat.css'
 
-const scrollChat = () => {
-  let scrollY;
-
-  const sideChat = document.getElementsByClassName('SideChat')[0];
-
-  scrollY = window.scrollY + window.outerHeight / 2;
-  sideChat.style.top = scrollY +"px";
-
-  document.addEventListener('scroll', ()=>{
-    sideChat.style.transition = '800ms';
-    scrollY = window.scrollY + window.outerHeight / 2;
-    sideChat.style.top = scrollY +"px";
-
-  });
 
 
-}
-
 function SideChat() {
   const callApi = async()=>{
     axios.get("/api").then((res)=>{console.log(res.data.test)});
+    
   };
 
   useEffect(()=>{
     callApi();
+    //addChat();
     scrollChat();
   }, []);
   
   return (
     <div>
-      <div className='SideChat' height="100px" width="100px" style={{background:"gray"}}>
-        하이
+      <div className='SideChat'>
+        <div className='innerChat1'>
           
         </div>
-
-
-      <div className='scrollmake'>
-      바보
+        <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>
+          </div>
+        </div>
       </div>
+
     </div>
   );
 }
 
+
+//  <div className='scrollmake'>
+//  바보
+//  </div>
+
+
+const scrollChat = () => {
+  let scrollY;
+
+  const sideChat = document.getElementsByClassName('SideChat')[0];
+
+  scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
+  sideChat.style.top = scrollY +"px";
+
+  const reposition =  ()=>{ // 화면 크기 바뀔때도 이래야함--> 추후수정
+    sideChat.style.transition = '800ms';  
+    scrollY = window.scrollY + document.body.scrollHeight / 5 - 50;
+    sideChat.style.top = scrollY +"px";
+  }
+
+  document.addEventListener('scroll', reposition);
+  document.addEventListener('resize', reposition);
+
+
+}
+
+// 각 버튼마다 서버에 알맞은 요청 전송
+// 받아온 응답을 배열에 넣기 --> 채팅창은 한정되어있으므로 배열 크기는 한정
+// 응답은 {id, 대기시간, 현재시간}을 모아놓은 배열로
+// innerChat1은 아래쪽 정렬
+
 export default SideChat;
\ No newline at end of file

@@ -15,16 +15,16 @@ function TopBanner() {
   
   return (
     
-    <Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915'}} >
-            <Container>
+    <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">제2긱 학식 커뮤니티</Navbar.Brand>
+            <Navbar.Brand href="#home"><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">메뉴</Nav.Link>
-                <Nav.Link href="#link">메뉴에 대한 이야기</Nav.Link>
-                <Nav.Link href="#link">글 작성</Nav.Link>
+                <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="#link"><p style={{color:'white'}}>글 작성</p></Nav.Link>
                 </Nav>
             </Navbar.Collapse>
             </Container>

@@ -9,7 +9,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <div className='Screen' style={{width: '100vw', height:'100vh' }}>
+    <div className='Screen' style={{width: '100vw', height:'100vh', margin:'0%', padding:'0%', }}>
       <TopBanner />
       <SideChat />
     </div>