From 6b1a1a713ab6342b12005ce0966b8c6e2f6a0658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=95=9C=EC=9E=88=EB=8A=94-=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84?= <myungsoocc@gmail.com>
Date: Thu, 16 Oct 2025 16:56:41 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20select=20info=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=20=EC=A4=91=EC=95=99=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SelectInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/SelectInfo.tsx b/src/pages/SelectInfo.tsx
index df3a944..9555f1b 100644
--- a/src/pages/SelectInfo.tsx
+++ b/src/pages/SelectInfo.tsx
@@ -337,7 +337,7 @@ const SelectInfo = () => {
         />
       </Helmet>
 
-      <div className="flex min-h-screen w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+      <div className="mx-auto flex min-h-screen w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
         <Header title={headerTitle} showShareIcon={false} />
 
         <div className="mx-auto w-[320px]">

From e02f644a81bec4ead68251d28a4695a479f56fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=95=9C=EC=9E=88=EB=8A=94-=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84?= <myungsoocc@gmail.com>
Date: Thu, 16 Oct 2025 18:02:03 +0900
Subject: [PATCH 2/2] =?UTF-8?q?bugfix:=20openchat=20=EB=82=B4=EC=9A=A9=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chat.tsx | 136 +++++++++++++++++++++++++--------------------
 1 file changed, 75 insertions(+), 61 deletions(-)

diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx
index 3cf27e7..1a13a45 100644
--- a/src/pages/Chat.tsx
+++ b/src/pages/Chat.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useRef, useState, ChangeEvent, KeyboardEvent } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  ChangeEvent,
+  KeyboardEvent
+} from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { authInstance } from "@/api/axios";
@@ -67,6 +74,65 @@ const Chat = () => {
 
   const isTopicChat = mode === "topicChat";
 
+  const handleWebSocketMessage = useCallback(
+    (wsMessage: WebSocketMessage) => {
+      if (wsMessage.type === "ERROR") {
+        // 에러 메시지 처리
+        const errorMessage: Message = {
+          role: "assistant",
+          content: wsMessage.message,
+          messageType: "system"
+        };
+
+        // 중복 시스템 메시지 방지
+        setMessages((prev) => {
+          const lastMessage = prev[prev.length - 1];
+          if (
+            lastMessage?.messageType === "system" &&
+            lastMessage.content === wsMessage.message
+          ) {
+            return prev;
+          }
+          return [...prev, errorMessage];
+        });
+      } else if (wsMessage.type === "NOTICE") {
+        // 시스템 알림 메시지 처리 (입장/퇴장)
+        const systemMessage: Message = {
+          role: "assistant",
+          content: wsMessage.message,
+          messageType: "system"
+        };
+
+        // 중복 시스템 메시지 방지
+        setMessages((prev) => {
+          const lastMessage = prev[prev.length - 1];
+          if (
+            lastMessage?.messageType === "system" &&
+            lastMessage.content === wsMessage.message
+          ) {
+            return prev;
+          }
+          return [...prev, systemMessage];
+        });
+      } else if (
+        wsMessage.type === null &&
+        wsMessage.nickname &&
+        wsMessage.message
+      ) {
+        // 일반 채팅 메시지 처리
+        const newMessage: Message = {
+          role: wsMessage.nickname === nickname ? "user" : "assistant",
+          content: wsMessage.message,
+          nickname: wsMessage.nickname,
+          mbti: wsMessage.mbti || undefined,
+          messageType: "text"
+        };
+        setMessages((prev) => [...prev, newMessage]);
+      }
+    },
+    [nickname]
+  );
+
   useEffect(() => {
     if (!isTopicChat) {
       return;
@@ -111,9 +177,6 @@ const Chat = () => {
         }
 
         // WebSocket 연결 시도
-        const wsUrl =
-          import.meta.env.VITE_WEBSOCKET_URL || "ws://localhost:8080";
-
         try {
           const connected = await websocketService.connect({
             nickname,
@@ -166,7 +229,14 @@ const Chat = () => {
         websocketService.disconnect();
       }
     };
-  }, [isTopicChat, openChatId, nickname, mbti, navigate]);
+  }, [
+    isTopicChat,
+    openChatId,
+    nickname,
+    mbti,
+    navigate,
+    handleWebSocketMessage
+  ]);
 
   useEffect(() => {
     const fetchMessages = async () => {
@@ -217,62 +287,6 @@ const Chat = () => {
     setIsOpen(nextState);
   };
 
-  const handleWebSocketMessage = (wsMessage: WebSocketMessage) => {
-    if (wsMessage.type === "ERROR") {
-      // 에러 메시지 처리
-      const errorMessage: Message = {
-        role: "assistant",
-        content: wsMessage.message,
-        messageType: "system"
-      };
-
-      // 중복 시스템 메시지 방지
-      setMessages((prev) => {
-        const lastMessage = prev[prev.length - 1];
-        if (
-          lastMessage?.messageType === "system" &&
-          lastMessage.content === wsMessage.message
-        ) {
-          return prev;
-        }
-        return [...prev, errorMessage];
-      });
-    } else if (wsMessage.type === "NOTICE") {
-      // 시스템 알림 메시지 처리 (입장/퇴장)
-      const systemMessage: Message = {
-        role: "assistant",
-        content: wsMessage.message,
-        messageType: "system"
-      };
-
-      // 중복 시스템 메시지 방지
-      setMessages((prev) => {
-        const lastMessage = prev[prev.length - 1];
-        if (
-          lastMessage?.messageType === "system" &&
-          lastMessage.content === wsMessage.message
-        ) {
-          return prev;
-        }
-        return [...prev, systemMessage];
-      });
-    } else if (
-      wsMessage.type === null &&
-      wsMessage.nickname &&
-      wsMessage.message
-    ) {
-      // 일반 채팅 메시지 처리
-      const newMessage: Message = {
-        role: wsMessage.nickname === nickname ? "user" : "assistant",
-        content: wsMessage.message,
-        nickname: wsMessage.nickname,
-        mbti: wsMessage.mbti || undefined,
-        messageType: "text"
-      };
-      setMessages((prev) => [...prev, newMessage]);
-    }
-  };
-
   const handleSend = async (messageToSend: string) => {
     if (!messageToSend.trim()) return;