[FEAT] 채팅 페이지 및 로직 구현

package.json

@@ -14,7 +14,11 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@stomp/stompjs": "^7.3.0",
     "axios": "^1.6.2",
+    "baseline-browser-mapping": "^2.9.19",
+    "caniuse-lite": "^1.0.30001769",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "firebase": "^10.14.1",
@@ -25,6 +29,7 @@
     "react-hot-toast": "^2.5.2",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.20.1",
+    "sockjs-client": "^1.6.1",
     "tailwind-merge": "^2.0.0",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"

public/sw.js

@@ -29,7 +29,12 @@ self.addEventListener('push', (event) => {
         const image = notification.image;
         const icon = notification.icon || '/vite.svg';
         const badge = notification.badge || '/vite.svg';
-        const clickAction = data.clickAction || notification.clickAction || '/';
+        const messageRoomId =
+          data.messageRoomId || data.messageRoomNo || data.roomId || data.roomNo;
+        const clickAction =
+          data.clickAction ||
+          notification.clickAction ||
+          (messageRoomId ? `/chats/${messageRoomId}` : '/');
         const tag = data.tag || notification.tag || 'dorumdorum';
 
         await self.registration.showNotification(title, {

src/App.tsx

@@ -11,15 +11,31 @@ import IntroPage from '@/pages/IntroPage'
 import SignupFlowPage from '@/pages/SignupFlowPage'
 import LoginPage from '@/pages/LoginPage'
 import ChatPage from '@/pages/ChatPage'
+import ChatRoomPage from '@/pages/ChatRoomPage'
+import ChatRequestsPage from '@/pages/ChatRequestsPage'
 import NotificationsPage from '@/pages/NotificationsPage'
 import { useFcmToken } from '@/hooks/useFcmToken'
+import { useChatConnections } from '@/hooks/useChatConnections'
+import { Toaster } from 'react-hot-toast'
 
 function App() {
   // 앱 시작 시 한 번 FCM 토큰을 수집하고 서버에 등록
   useFcmToken()
 
+  // 채팅 SSE/WebSocket 연결 관리 (로그인 후)
+  useChatConnections()
+
   return (
     <div className="h-screen bg-white">
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          duration: 4000,
+          style: {
+            marginTop: '8px',
+          },
+        }}
+      />
       <Routes>
         <Route path="/" element={<SplashPage />} />
         <Route path="/intro" element={<IntroPage />} />
@@ -31,6 +47,8 @@ function App() {
 
         {/* 채팅 */}
         <Route path="/chats" element={<ChatPage />} />
+        <Route path="/chats/:roomId" element={<ChatRoomPage />} />
+        <Route path="/chats/requests" element={<ChatRequestsPage />} />
 
         {/* 알림 */}
         <Route path="/notifications" element={<NotificationsPage />} />