feat: Change title font, Add a toast message when connecting to chat

capstone-maru · May 30, 2024 · 3475e03 · 3475e03
1 parent c5bab7e
commit 3475e03
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 deletions.
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Baloo+2:[email protected]&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap');
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css');
 

diff --git a/src/app/pages/error-page.tsx b/src/app/pages/error-page.tsx
@@ -29,7 +29,7 @@ const styles = {
 
   title: styled.p`
     color: var(--Main-1, #e15637);
-    font-family: 'Baloo 2';
+    font-family: 'Pretendard';
     font-size: 1.875rem;
     font-style: normal;
     font-weight: 700;

diff --git a/src/components/FloatingChatting.tsx b/src/components/FloatingChatting.tsx
@@ -13,6 +13,7 @@ import { ChattingRoom } from './chat/ChattingRoom';
 import { useAuthValue, useUserData } from '@/features/auth';
 import { chatOpenState, type GetChatRoomDTO } from '@/features/chat';
 import { useIsMobile } from '@/shared/mobile';
+import { useToast } from '@/features/toast';
 
 const styles = {
   chattingButton: styled.div`
@@ -74,7 +75,7 @@ const styles = {
     background: var(--background, #f7f6f9);
   `,
   title: styled.span`
-    font-family: 'Baloo 2';
+    font-family: 'Pretendard';
     font-size: 1.575rem;
     font-style: normal;
     font-weight: 700;
@@ -140,6 +141,8 @@ interface Message {
 }
 
 function FloatingChattingBox() {
+  const { createToast } = useToast();
+
   const [isChatRoomOpen, setIsChatRoomOpen] = useState<boolean>(false);
   const [chatRooms, setChatRooms] = useState<ChatRoom[]>([]);
   const [message, setMessage] = useState<Message>();
@@ -170,10 +173,15 @@ function FloatingChattingBox() {
           heartbeatOutgoing: 4000,
         });
         setStompClient(stomp);
-        stomp.activate();
 
         stomp.onConnect = () => {
-          console.log('WebSocket 연결이 열렸습니다.');
+          createToast({
+            message: '채팅 연결에 성공했습니다.',
+            option: {
+              duration: 3000,
+            },
+          });
+
           stomp.subscribe(`/roomList/${userId}`, frame => {
             try {
               const newMessage: Message = JSON.parse(frame.body);
@@ -183,8 +191,19 @@ function FloatingChattingBox() {
             }
           });
         };
+
+        stomp.onWebSocketError = () => {
+          createToast({
+            message: '연결에 실패했습니다. 다시 시도합니다.',
+            option: {
+              duration: 3000,
+            },
+          });
+        };
+
+        stomp.activate();
       } catch (error) {
-        console.error('채팅 룸 생성 중 오류가 발생했습니다:', error);
+        console.error('채팅 방 생성 중 오류가 발생했습니다:', error);
       }
     };
 
@@ -197,7 +216,7 @@ function FloatingChattingBox() {
         stompClient.deactivate();
       }
     };
-  }, [auth?.accessToken, userId]);
+  }, [auth?.accessToken]);
 
   useEffect(() => {
     if (data !== undefined) {

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -99,7 +99,7 @@ const styles = {
   `,
   title: styled.h1`
     color: var(--Main-1, #e15637);
-    font-family: 'Baloo 2';
+    font-family: 'Pretendard';
     font-size: 1.875rem;
     font-style: normal;
     font-weight: 700;

diff --git a/src/components/chat/ChattingRoom.tsx b/src/components/chat/ChattingRoom.tsx
@@ -10,6 +10,7 @@ import { SenderMessage } from './SenderMessage';
 
 import { useAuthValue } from '@/features/auth';
 import { useEnterChatRoom, useExitChatRoom } from '@/features/chat';
+import { useToast } from '@/features/toast';
 
 const styles = {
   container: styled.div`
@@ -187,6 +188,8 @@ export function ChattingRoom({
   lastTime: string;
   onRoomClick: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
+  const { createToast } = useToast();
+
   const [messages, setMessages] = useState<Content[]>([]);
   const [inputMessage, setInputMessage] = useState('');
   const [stompClient, setStompClient] = useState<Client | null>(null);
@@ -234,10 +237,15 @@ export function ChattingRoom({
           heartbeatOutgoing: 4000,
         });
         setStompClient(stomp);
-        stomp.activate();
 
         stomp.onConnect = () => {
-          console.log('WebSocket 연결이 열렸습니다.');
+          createToast({
+            message: `[${roomName}] 방 연결에 성공했습니다.`,
+            option: {
+              duration: 3000,
+            },
+          });
+
           stomp.subscribe(`/room/${roomId}`, frame => {
             try {
               setTime(new Date().toISOString());
@@ -249,6 +257,17 @@ export function ChattingRoom({
             }
           });
         };
+
+        stomp.onWebSocketError = () => {
+          createToast({
+            message: '연결에 실패했습니다. 다시 시도합니다.',
+            option: {
+              duration: 3000,
+            },
+          });
+        };
+
+        stomp.activate();
       } catch (error) {
         console.error('채팅 룸 생성 중 오류가 발생했습니다:', error);
       }

diff --git a/src/components/chat/MobileChattingBox.tsx b/src/components/chat/MobileChattingBox.tsx
@@ -36,7 +36,7 @@ const styles = {
     background: var(--background, #f7f6f9);
   `,
   title: styled.span`
-    font-family: 'Baloo 2';
+    font-family: 'Pretendard';
     font-size: 1.575rem;
     font-style: normal;
     font-weight: 700;