[소켓] 모든 창에서 입장 알림 띄우기

[소켓] 모든 창에서 입장 알림 띄우기

src/App.js

@@ -2,12 +2,21 @@ import React from 'react';
 import MainLayout from './components/MainLayout/MainLayout';
 import CheckPage from './components/Tickets/CheckPage/CheckPage';
 import { Routes, Route, useLocation } from 'react-router-dom';
+import { SocketProvider } from './contexts/socketProvider';
 function App({ match }) {
   // const location = useLocation();
   return (
     <>
       <Routes>
-        <Route path="*" element={<MainLayout />} />
+        <Route
+          path="*"
+          element={
+            <SocketProvider>
+              <MainLayout />{' '}
+            </SocketProvider>
+          }
+        />
+
         <Route exact path="/tickets/check" element={<CheckPage />} />
       </Routes>
     </>

src/components/Tickets/EnterPage/EnterList.js

@@ -10,6 +10,7 @@ const ContainerHeight = 800;
 
 function EnterList() {
   const { ticketList } = useSelector(state => state.enterPage);
+  const reverse = [...ticketList].reverse();
 
   const onScroll = e => {
     if (
@@ -31,7 +32,7 @@ function EnterList() {
           <Col span={16}>
             <List>
               <VirtualList
-                data={ticketList}
+                data={reverse}
                 height={ContainerHeight}
                 itemHeight={47}
                 itemKey="email"

src/components/Tickets/EnterPage/EnterPage.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import EnterList from './EnterList';
-import SocketConnect from './SocketConnect';
 
 function EnterPage() {
   return (
     <div>
-      <SocketConnect />
       <EnterList />
     </div>
   );

src/components/Tickets/EnterPage/RecentEnter.js

@@ -7,14 +7,6 @@ import { Card, Tag, Space } from 'antd';
 import moment from 'moment';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components';
-
-styled(Card)`
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  position: relative;
-`;
 
 function RecentEnter() {
   const { enterData } = useSelector(state => state.enterPage);

src/contexts/socketContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SocketContext = createContext({});
+
+export default SocketContext;

src/contexts/socketProvider.js

@@ -0,0 +1,62 @@
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { notification } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { io } from 'socket.io-client';
+import { enterPage } from '../state/actions-creators/enterPage';
+import SocketContext from './socketContext';
+
+const SocketProvider = ({ children }) => {
+  const dispatch = useDispatch();
+  const { accessToken } = useSelector(state => state.auth);
+  const placement = 'bottomRight';
+
+  const socket = io('https://api.gosrock.band/socket/admin', {
+    auth: {
+      token: accessToken
+    }
+  });
+
+  useEffect(() => {
+    socket.on('connect', data => {
+      console.log('connection server', data);
+    });
+    socket.on('enter', data => {
+      dispatch(
+        enterPage({
+          data: data,
+          enterTime: new Date()
+        })
+      );
+
+      notification.open({
+        message: `[${moment(new Date())
+          .utc(true)
+          .format('HH:mm')}] 입장 알림 🔔 `,
+        description: `${data.name}, ${data.phoneNumber}`,
+        placement,
+        icon:
+          data.success === true ? (
+            <CheckCircleOutlined style={{ color: '#89cc8a' }} />
+          ) : (
+            <CloseCircleOutlined style={{ color: '#cc8989' }} />
+          )
+      });
+    });
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  socket.on('connect_error', err => {
+    console.log(err instanceof Error); // true
+    console.log(err.message); // not authorized
+    console.log(err.data); // { content: "Please retry later" }
+  });
+
+  return <SocketContext.Provider>{children}</SocketContext.Provider>;
+};
+
+export { SocketProvider };

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
+
 // pages
 import {
   Routes,