Merge pull request #72 from sayyyho/dev

Fix: 각종수정

src/pages/ChatPage/ChatPage.jsx

@@ -6,11 +6,9 @@ import CHATTING_LAYOUT from "@/assets/chatLayout.svg";
 import { useRef, useEffect, useState } from "react";
 import useSpeechToText from "@/hooks/useSpeechToText";
 import { useNavigate, useParams } from "react-router-dom";
-
-import * as Stomp from "@stomp/stompjs";
+import { Client } from "@stomp/stompjs";
 import SockJS from "sockjs-client";
 
-// 나머지 코드 그대로 유지
 export const ChatPage = () => {
   const customInput = useRef();
   const recommendZone = useRef();
@@ -44,21 +42,35 @@ export const ChatPage = () => {
     } else {
       // WebSocket 및 STOMP 클라이언트 설정
       const sock = new SockJS(`https://api.golang-ktb.site/chat/ws`);
-      const stompClient = Stomp.over(sock);
+      const stompClient = new Client({
+        webSocketFactory: () => sock,
+        debug: function (str) {
+          console.log(str);
+        },
+        reconnectDelay: 5000,
+        heartbeatIncoming: 4000,
+        heartbeatOutgoing: 4000,
+      });
 
-      stompClient.connect({}, () => {
+      stompClient.onConnect = () => {
         stompClient.subscribe(`/sub/chatrooms/${params.room}`, (message) => {
           setMessages((prevMessages) => [
             ...prevMessages,
             JSON.parse(message.body),
           ]);
         });
-      });
+      };
+
+      stompClient.onDisconnect = () => {
+        console.log("Disconnected");
+      };
+
+      stompClient.activate();
 
       socketRef.current = stompClient;
 
       return () => {
-        stompClient.disconnect();
+        stompClient.deactivate();
       };
     }
   }, [navigate, params.room]);
@@ -70,7 +82,10 @@ export const ChatPage = () => {
       setMessages((prevMessages) => [...prevMessages, newMessage]);
 
       if (socketRef.current && socketRef.current.connected) {
-        socketRef.current.send("/pub/messages", {}, JSON.stringify(newMessage));
+        socketRef.current.publish({
+          destination: "/pub/messages",
+          body: JSON.stringify(newMessage),
+        });
       }
 
       customInput.current.value = "";

src/pages/Evaluation/EvaluationPage.main.jsx

@@ -1,73 +1,71 @@
 import React from "react";
-import {useLocation, useNavigate} from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import * as style from "./styled/EvaluationPage.style.js";
 import { Header } from "../../components/Header/Header.jsx";
 import { DoughnutChartComponent } from "./DoughnutChart.jsx";
 import { ProgressBar } from "./BarChart.jsx";
 
 export const EvaluationPage = () => {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const handleNavigate = (path) => {
-        navigate(path);
-    };
+  const location = useLocation();
 
-    const mockData = [
-        {
-            person: '홍창기',
-            date: '2024.09.07',
-            pieData: { '응': 10, '그래': 9, '가보자고': 8, '싫어': 7 ,'먹자': 4},
-            score: { positive: 50, neutral: 20, negative: 30 },
-            result: { message: "이번 채팅은 누가 고집이 더 셌어요 그만 좀 부리세요." }
-        },
-        {
-            person: '문보경',
-            date: '2024.09.07',
-            pieData: { '좋다': 7, '사랑해': 10, '잘자': 6, '안녕': 9, '할것이다': 8 },
-            score: { positive: 60, neutral: 25, negative: 15 },
-            result: { message: "긍정적인 대화가 많았습니다!" }
-        },
-        {
-            person: '김현수',
-            date: '2024.09.07',
-            pieData: { '꺼져': 9, '새끼': 8, '싫어': 7, '그만해': 6 ,'개':2},
-            score: { positive: 40, neutral: 30, negative: 30 },
-            result: { message: "대화가 약간 부정적이었습니다." }
-        }
-    ];
+  const mockData = [
+    {
+      person: "홍창기",
+      date: "2024.09.07",
+      pieData: { 응: 10, 그래: 9, 가보자고: 8, 싫어: 7, 먹자: 4 },
+      score: { positive: 50, neutral: 20, negative: 30 },
+      result: {
+        message: "이번 채팅은 누가 고집이 더 셌어요 그만 좀 부리세요.",
+      },
+    },
+    {
+      person: "문보경",
+      date: "2024.09.07",
+      pieData: { 좋다: 7, 사랑해: 10, 잘자: 6, 안녕: 9, 할것이다: 8 },
+      score: { positive: 60, neutral: 25, negative: 15 },
+      result: { message: "긍정적인 대화가 많았습니다!" },
+    },
+    {
+      person: "김현수",
+      date: "2024.09.07",
+      pieData: { 꺼져: 9, 새끼: 8, 싫어: 7, 그만해: 6, 개: 2 },
+      score: { positive: 40, neutral: 30, negative: 30 },
+      result: { message: "대화가 약간 부정적이었습니다." },
+    },
+  ];
 
-    const { person = "익명" } = location.state || {};
-    const selectedData = mockData.find((data) => data.person === person) || {};
+  const { person = "익명" } = location.state || {};
+  const selectedData = mockData.find((data) => data.person === person) || {};
 
-    const { pieData = {}, score = { positive: 0, neutral: 0, negative: 0 }, result = { message: "" }, date = "알 수 없음" } = selectedData;
-   console.log('전달할',mockData);
-    return (
-        <style.Frame>
-            <style.Wrapper>
-                <Header color={"#1B536B"}>
-                    <h3>{`${person}`} 님과의 대화 평가</h3>
+  const {
+    pieData = {},
+    score = { positive: 0, neutral: 0, negative: 0 },
+    result = { message: "" },
+    date = "알 수 없음",
+  } = selectedData;
+  console.log("전달할", mockData);
+  return (
+    <style.Frame>
+      <style.Wrapper>
+        <Header color={"#1B536B"} isBack={true}>
+          <h2>{`${person}`} 님과의 대화 평가</h2>
+        </Header>
 
-                    <style.HomeButton onClick={() => handleNavigate("/home")}>홈으로 이동</style.HomeButton>
-                </Header>
-                <style.ScrollWrapper>
-                    <style.ContentWrapper>
-                        <h3>{`${date} 대화 분석`}</h3>
+        <style.ContentWrapper>
+          <h3>{`${date} 대화 분석`}</h3>
 
+          <DoughnutChartComponent pieData={pieData} />
+          <style.SecondWrapper>
+            <ProgressBar
+              positive={score.positive}
+              neutral={score.neutral}
+              negative={score.negative}
+            />
+          </style.SecondWrapper>
 
-                        <DoughnutChartComponent pieData={pieData}/>
-                        <style.SecondWrapper>
-                            <ProgressBar positive={score.positive} neutral={score.neutral} negative={score.negative}/>
-                        </style.SecondWrapper>
-
-
-                        <style.ThirdWrapper>
-                            {result.message}
-                        </style.ThirdWrapper>
-                    </style.ContentWrapper>
-                </style.ScrollWrapper>
-
-
-            </style.Wrapper>
-        </style.Frame>
-    );
+          <style.ThirdWrapper>{result.message}</style.ThirdWrapper>
+        </style.ContentWrapper>
+      </style.Wrapper>
+    </style.Frame>
+  );
 };