Merge pull request #105 from MoneyMakersClub/feat/#104

Feat/#104 | 메인페이지, 리딩스페이스 수정 및 타유저페이지 1차
MoneyMakersClub · Nov 26, 2024 · 0699e86 · 0699e86
2 parents 62b8ce4 + 05301a0
commit 0699e86
Show file tree

Hide file tree

Showing 55 changed files with 2,390 additions and 546 deletions.
diff --git a/bookduck/index.html b/bookduck/index.html
@@ -9,6 +9,7 @@
   <body>
     <div id="root"></div>
     <div id="modal"></div>
+    <div id="toast-root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/bookduck/package.json b/bookduck/package.json
@@ -17,11 +17,14 @@
     "@tanstack/react-query": "^5.60.2",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
+    "event-source-polyfill": "^1.0.31",
+    "firebase": "^11.0.2",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "react-slick": "^0.30.2",
+    "react-toastify": "^10.0.6",
     "react-use-gesture": "^9.1.3",
     "slick-carousel": "^1.8.1",
     "three": "^0.169.0",

diff --git a/bookduck/public/firebase-messaging-sw.js b/bookduck/public/firebase-messaging-sw.js
@@ -0,0 +1,41 @@
+importScripts(
+  "https://www.gstatic.com/firebasejs/9.20.0/firebase-app-compat.js"
+);
+importScripts(
+  "https://www.gstatic.com/firebasejs/9.20.0/firebase-messaging-compat.js"
+);
+
+// Firebase 초기화
+const firebaseConfig = {
+  apiKey: "AIzaSyDobXyNl2FmQpOJTcdu0cU6lIw6jZ4V4Dw",
+  authDomain: "bookduck-3654b.firebaseapp.com",
+  projectId: "bookduck-3654b",
+  storageBucket: "bookduck-3654b.firebasestorage.app",
+  messagingSenderId: "259472501168",
+  appId: "1:259472501168:web:f0ce654387126e1f458e75",
+  measurementId: "G-XNN57JYCHJ",
+};
+firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage((payload) => {
+  console.log("백그라운드 메시지 수신:", payload);
+
+  const notificationTitle = payload.notification.title || "알림 제목 없음";
+  const notificationOptions = {
+    body: payload.notification.body || "알림 내용 없음",
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});
+
+self.addEventListener("install", (event) => {
+  console.log("Service Worker 설치됨");
+  self.skipWaiting(); // 새 Service Worker를 즉시 활성화
+});
+
+self.addEventListener("activate", (event) => {
+  console.log("Service Worker 활성화됨");
+  return self.clients.claim(); // 기존 클라이언트 제어
+});
diff --git a/bookduck/src/App.jsx b/bookduck/src/App.jsx
@@ -1,4 +1,8 @@
 import { Routes, Route, Navigate } from "react-router-dom";
+import { requestFcmToken } from "./api/fcm";
+import { useEffect } from "react";
+import { messaging } from "./api/firebase";
+import { onMessage } from "firebase/messaging";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import SigninPage from "./pages/LoginPage/SigninPage";
 import SearchMainPage from "./pages/SearchPage/SearchMainPage";
@@ -27,8 +31,25 @@ import SelectCustomPage from "./pages/MainPage/SelectCustomPage";
 import SettingPage from "./pages/SettingPage/SettingPage";
 import FriendListPage from "./pages/FriendPage/FriendListPage";
 import OAuthRedierctPage from "./pages/LoginPage/OAuthRedierctPage";
+import OtherMainPage from "./pages/OtherUserPage/OtherMainPage";
 
 function App() {
+  useEffect(() => {
+    const fetchFcmToken = async () => {
+      const token = await requestFcmToken();
+      if (token) {
+        console.log("FCM 토큰을 서버로 전송하거나 저장:", token);
+      }
+    };
+    fetchFcmToken();
+  }, []);
+  useEffect(() => {
+    // 포그라운드 메시지 수신 처리
+    onMessage(messaging, (payload) => {
+      console.log("포그라운드 메시지 수신:", payload);
+    });
+  }, []);
+
   return (
     <Routes>
       <Route path="/selectBook" element={<SelectBookPage />} />
@@ -57,6 +78,7 @@ function App() {
       <Route path="/" element={<Navigate to="/home" replace />} />
       <Route path="/api/oauth" element={<OAuthRedierctPage />} />
       <Route path="/home" element={<MainPage />} />
+      <Route path="/user/:id" element={<OtherMainPage />} />
       <Route path="/friend" element={<FriendListPage />} />
       <Route path="/search" element={<SearchMainPage />} />
       <Route path="/recording" element={<RecordingPage />} />

diff --git a/bookduck/src/api/fcm.js b/bookduck/src/api/fcm.js
@@ -0,0 +1,35 @@
+import { getToken } from "firebase/messaging";
+import { messaging } from "./firebase";
+
+export const requestFcmToken = async () => {
+  try {
+    // 서비스 워커 등록
+    if ("serviceWorker" in navigator) {
+      const registration = await navigator.serviceWorker.register(
+        "/firebase-messaging-sw.js"
+      );
+      console.log("서비스 워커 등록 성공:", registration);
+
+      // FCM 토큰 가져오기
+      const fcmToken = await getToken(messaging, {
+        vapidKey:
+          "BNgk_Ef8j0KFLabeiH5K7GGsHz4BC00C05R3hzNA20CXGQ7YCCfCe0fx9FCHSdhlRj6DNlC90IrCqBiQW8_6KKw", // Firebase 콘솔에서 발급받은 VAPID 키
+        serviceWorkerRegistration: registration,
+      });
+
+      if (fcmToken) {
+        console.log("FCM 토큰:", fcmToken);
+        return fcmToken;
+      } else {
+        console.error("FCM 토큰을 가져오지 못했습니다.");
+        return null;
+      }
+    } else {
+      console.error("Service Worker가 지원되지 않는 환경입니다.");
+      return null;
+    }
+  } catch (error) {
+    console.error("FCM 토큰 요청 중 오류 발생:", error);
+    return null;
+  }
+};
diff --git a/bookduck/src/api/fcmApi.js b/bookduck/src/api/fcmApi.js
@@ -0,0 +1,12 @@
+import { post } from "./example";
+export const sendFcmToken = async (userId, fcmToken) => {
+  try {
+    // POST 요청으로 FCM 토큰 전송
+    const response = await post(`/fcm/${userId}/token`, { fcmToken });
+    console.log("FCM 토큰 전송 성공:", response);
+    return response;
+  } catch (error) {
+    console.error("FCM 토큰 전송 실패:", error);
+    throw error;
+  }
+};
diff --git a/bookduck/src/api/firebase.js b/bookduck/src/api/firebase.js
@@ -0,0 +1,18 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging } from "firebase/messaging";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyDobXyNl2FmQpOJTcdu0cU6lIw6jZ4V4Dw",
+  authDomain: "bookduck-3654b.firebaseapp.com",
+  projectId: "bookduck-3654b",
+  storageBucket: "bookduck-3654b.firebasestorage.app",
+  messagingSenderId: "259472501168",
+  appId: "1:259472501168:web:f0ce654387126e1f458e75",
+  measurementId: "G-XNN57JYCHJ",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const messaging = getMessaging(app);
+
+export { messaging };
diff --git a/bookduck/src/api/friend.js b/bookduck/src/api/friend.js
@@ -0,0 +1 @@
+
diff --git a/bookduck/src/assets/mainPage/bookcard.svg b/bookduck/src/assets/mainPage/bookcard.svg
diff --git a/bookduck/src/assets/mainPage/cancel.svg b/bookduck/src/assets/mainPage/cancel.svg