sidechat-demo-positioning

+.SideChat {
+    color: yellow;
+    background-color: gray;
+    position: absolute;
+    z-index: 999;
+    right:100px;
+    top:0px;
+    transition: 0ms;
+}
+
+.scrollmake{
+    height:1200px;
+    width:100px;
+    background-color: red;
+}
\ No newline at end of file

+import './App.css';
+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();
+    scrollChat();
+  }, []);
+  
+  return (
+    <div>
+      <div className='SideChat' height="100px" width="100px" style={{background:"gray"}}>
+        하이
+        
+      </div>
+
+
+      <div className='scrollmake'>
+      바보
+      </div>
+    </div>
+  );
+}
+
+export default SideChat;
\ No newline at end of file

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
 import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
 import khuimg from '../img/khumeal.png'
 import khuimg from '../img/khumeal.png'
 
 
-function App() {
+function TopBanner() {
   const callApi = async()=>{
   const callApi = async()=>{
     axios.get("/api").then((res)=>{console.log(res.data.test)});
     axios.get("/api").then((res)=>{console.log(res.data.test)});
   };
   };
@@ -32,4 +32,4 @@ function App() {
   );
   );
 }
 }
 
 
-export default App;
\ No newline at end of file
+export default TopBanner;
\ No newline at end of file

 import React from 'react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import './index.css';
-import App from './Component/App';
+import TopBanner from './Component/TopBanner';
+import SideChat from './Component/SideChat';
 import reportWebVitals from './reportWebVitals';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 root.render(
   <React.StrictMode>
   <React.StrictMode>
-    <App />
+    <div className='Screen' style={{width: '100vw', height:'100vh' }}>
+      <TopBanner />
+      <SideChat />
+    </div>
   </React.StrictMode>
   </React.StrictMode>
 );
 );