Feat/Notification 1차 작업 #38

Author: AngelaChaejung

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.2",
+    "event-source-polyfill": "^1.0.31",
     "html-webpack-plugin": "^5.5.0",
     "json-server": "^0.17.1",
     "picker": "^0.1.4",

src/components/notification/NotificationList.jsx

@@ -1,10 +1,12 @@
 import React from "react";
+import NotificationsTest from "./NotificationsTest";
 
 const NotificationList = () => {
   return (
     <>
       {/* 확인안한 것은 볼드처리, 확인한 것은 라이트  */}
       <div className="pt-[50px]">NotificationList</div>
+      <NotificationsTest />
     </>
   );
 };

src/components/notification/NotificationsTest.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { EventSourcePolyfill } from "event-source-polyfill";
+import {
+  addNotification,
+  clearNotifications,
+} from "../../redux/modules/notificationSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+const NotificationsTest = () => {
+  const dispatch = useDispatch();
+  //notifications 를 가져와 notifications 변수에 할당
+  const notifications = useSelector(
+    (state) => state.notification.notifications
+  );
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    // SSE 연결을 위해 EventSource 객체를 생성
+    const eventSource = new EventSourcePolyfill(
+      `http://shinjeong.shop/pushs?token=${accessToken}`
+    );
+    // const eventSource = new EventSourcePolyfill(`/pushs`);
+
+    // SSE 연결 성공 시 호출되는 이벤트 핸들러
+    eventSource.onopen = () => {
+      console.log("SSE 연결완료");
+    };
+    // SSE 메시지 수신 시 호출되는 이벤트 핸들러 함수를 등록하여 SSE 메시지가 도착했을 때의 동작을 정의
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      console.log("알림이 도착했습니다", data);
+      alert("알림이 도착했습니다", data);
+      //addNotification액션 dispatch
+      dispatch(addNotification(data));
+    };
+
+    // SSE 연결 오류 발생 시 호출되는 이벤트 핸들러
+    eventSource.onerror = (error) => {
+      console.error("SSE 에러발생!", error);
+    };
+
+    return () => {
+      eventSource.close();
+      dispatch(clearNotifications());
+    };
+  }, [dispatch]);
+  return (
+    <div>
+      <h2> Notifications List </h2>
+      {notifications.map((notification) => (
+        <div key={notification.id}>
+          <span>{notification.message}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NotificationsTest;

src/redux/config/ConfigStore.jsx

@@ -3,9 +3,16 @@ import LoginSlice from "../modules/LoginSlice";
 import ScheduleSlice from "../modules/ScheduleSlice";
 import SingupSlice from "../modules/SingupSlice";
 import InvitationSlice from "../modules/InvitationSlice";
+import NotificationSlice from "../modules/notificationSlice";
 
 const store = configureStore({
-  reducer: { LoginSlice, SingupSlice, ScheduleSlice, InvitationSlice },
+  reducer: {
+    LoginSlice,
+    SingupSlice,
+    ScheduleSlice,
+    InvitationSlice,
+    NotificationSlice,
+  },
 });
 
 export default store;

src/redux/modules/notificationSlice.jsx

@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  notifications: [],
+};
+
+// 리듀서
+const NotificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    //알림 리스트에 새로운 알림을 추가
+    addNotification: (state, action) => {
+      state.notifications.push(action.payload);
+    },
+    //알림 리스트 비우기
+    clearNotifications: (state) => {
+      state.notifications = [];
+    },
+  },
+});
+
+export const { addNotification, clearNotifications } =
+  NotificationSlice.actions;
+
+export default NotificationSlice.reducer;

yarn.lock

@@ -4395,6 +4395,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+event-source-polyfill@^1.0.31:
+  version "1.0.31"
+  resolved "https://registry.yarnpkg.com/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz#45fb0a6fc1375b2ba597361ba4287ffec5bf2e0c"
+  integrity sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"