From fbcd7e3496c1836c448da8fe218511767fd2d1d4 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 14:44:24 +0900
Subject: [PATCH 1/7] fix: typo

---
 packages/user/src/hooks/socket/useChatSocket.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/user/src/hooks/socket/useChatSocket.ts b/packages/user/src/hooks/socket/useChatSocket.ts
index a76ee866..76b51f7e 100644
--- a/packages/user/src/hooks/socket/useChatSocket.ts
+++ b/packages/user/src/hooks/socket/useChatSocket.ts
@@ -22,16 +22,17 @@ export default function useChatSocket() {
 		[],
 	);
 
-	const handleIncomintBlock: SocketSubscribeCallbackType = useCallback(
+	const handleIncomingBlock: SocketSubscribeCallbackType = useCallback(
 		(data: unknown) => {
 			const { blockId } = data as { blockId: string };
-			setChatMessages(prevMessages => {
+			setChatMessages((prevMessages) => {
 				const tmpMessages = prevMessages.slice();
 				tmpMessages.some((tmpMessage, index) => {
 					if (tmpMessage.id === blockId) {
 						tmpMessages[index].type = 'b';
 						return true;
-					} return false;
+					}
+					return false;
 				});
 				return tmpMessages;
 			});
@@ -58,7 +59,7 @@ export default function useChatSocket() {
 
 	return {
 		onReceiveMessage: handleIncomingMessage,
-		onReceiveBlock: handleIncomintBlock,
+		onReceiveBlock: handleIncomingBlock,
 		onSendMessage: handleSendMessage,
 		messages: chatMessages,
 	};

From f2e2d43d0de67d2213f01b2ab04b4b3aeb6fb180 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 15:08:51 +0900
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=20=EC=86=8C?=
 =?UTF-8?q?=EC=BC=93=EC=9D=B4=20=EC=97=B0=EA=B2=B0=EB=90=98=EC=96=B4?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EC=83=81=ED=83=9C=EB=A9=B4=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=20=EC=97=B0=EA=B2=B0=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/src/components/chat/index.ts | 1 -
 packages/common/src/utils/socket.ts          | 5 +++++
 packages/user/src/hooks/socket/index.ts      | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/components/chat/index.ts b/packages/common/src/components/chat/index.ts
index 2732bb46..8ff0e7a2 100644
--- a/packages/common/src/components/chat/index.ts
+++ b/packages/common/src/components/chat/index.ts
@@ -30,4 +30,3 @@ export { default as BlockedChat } from './BlockedChat.tsx';
 export { default as ChatList } from './ChatList.tsx';
 export { default as Message } from './Message.tsx';
 export { default as Notice } from './Notice.tsx';
-
diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts
index e61e27fd..4d442685 100644
--- a/packages/common/src/utils/socket.ts
+++ b/packages/common/src/utils/socket.ts
@@ -27,6 +27,8 @@ export default class Socket {
 
 	private token?: string | undefined | null = undefined;
 
+	isConnected: boolean = false;
+
 	constructor(url: string, token?: string | null) {
 		let baseUrl = url;
 		if (token) {
@@ -47,10 +49,12 @@ export default class Socket {
 
 	connect(callback?: (props: ConnectProps) => void) {
 		this.client.onConnect = (options) => {
+			this.isConnected = true;
 			callback?.({ isSuccess: true, options });
 		};
 
 		this.client.onStompError = (error) => {
+			this.isConnected = false;
 			callback?.({ isSuccess: false, options: error });
 		};
 
@@ -63,6 +67,7 @@ export default class Socket {
 
 		if (this.client.connected) {
 			this.client.deactivate();
+			this.isConnected = false;
 		}
 	}
 
diff --git a/packages/user/src/hooks/socket/index.ts b/packages/user/src/hooks/socket/index.ts
index fd97f7a1..f043c1e1 100644
--- a/packages/user/src/hooks/socket/index.ts
+++ b/packages/user/src/hooks/socket/index.ts
@@ -16,6 +16,7 @@ export default function useSocket() {
 	const { onReceiveStatus, ...racingSocketProps } = racingSocket;
 
 	useEffect(() => {
+		if (socketManager.getSocketClient().isConnected) return;
 		socketManager.connectSocketClient({ token, onReceiveMessage, onReceiveStatus, onReceiveBlock });
 	}, [socketManager, token]);
 

From d78b357fb89413a9c0f4164f8f09e1f02f7c67be Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 15:11:47 +0900
Subject: [PATCH 3/7] refactor: block chatting

---
 .../user/src/hooks/socket/useChatSocket.ts    | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/user/src/hooks/socket/useChatSocket.ts b/packages/user/src/hooks/socket/useChatSocket.ts
index 76b51f7e..7e3d0dcb 100644
--- a/packages/user/src/hooks/socket/useChatSocket.ts
+++ b/packages/user/src/hooks/socket/useChatSocket.ts
@@ -24,20 +24,13 @@ export default function useChatSocket() {
 
 	const handleIncomingBlock: SocketSubscribeCallbackType = useCallback(
 		(data: unknown) => {
-			const { blockId } = data as { blockId: string };
-			setChatMessages((prevMessages) => {
-				const tmpMessages = prevMessages.slice();
-				tmpMessages.some((tmpMessage, index) => {
-					if (tmpMessage.id === blockId) {
-						tmpMessages[index].type = 'b';
-						return true;
-					}
-					return false;
-				});
-				return tmpMessages;
-			});
+			const { id, blockId } = data as { id: string; blockId: string };
+
+			setChatMessages((prevMessages) =>
+				prevMessages.map((message) => (message.id === blockId ? { id, type: 'b' } : message)),
+			);
 		},
-		[chatMessages],
+		[setChatMessages],
 	);
 
 	const handleSendMessage = useCallback(

From fa592a946b73225f5fbde74700daac14f0d7d389 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 15:12:02 +0900
Subject: [PATCH 4/7] =?UTF-8?q?design:=20=EB=B9=84=EC=86=8D=EC=96=B4=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=95=88=EB=82=B4=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/src/components/event/chatting/inputArea/index.tsx     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/user/src/components/event/chatting/inputArea/index.tsx b/packages/user/src/components/event/chatting/inputArea/index.tsx
index 5c180164..b9d14ad5 100644
--- a/packages/user/src/components/event/chatting/inputArea/index.tsx
+++ b/packages/user/src/components/event/chatting/inputArea/index.tsx
@@ -3,9 +3,8 @@ import { PropsWithChildren } from 'react';
 export default function ChatInputArea({ children }: PropsWithChildren) {
 	return (
 		<div className="mb-[54px] flex flex-col items-center gap-3">
-			{/* Todo: 비속어 작성 횟수 불러오기 */}
 			<p className="text-detail-2 text-[#FF3C76]">
-				비속어 혹은 부적절한 기대평을 5회 이상 작성할 경우, 댓글 작성이 제한됩니다.
+				비속어 혹은 부적절한 기대평을 작성할 경우, 댓글 작성이 제한될 수 있습니다.
 			</p>
 			{children}
 		</div>

From afe30ef0ef0218eae421c9e6791c65ed2705b7e9 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 15:15:13 +0900
Subject: [PATCH 5/7] =?UTF-8?q?remove:=20todo=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/user/src/components/shared/modal/fcfs/ResultStep.tsx | 1 -
 packages/user/src/hooks/query/useGetTeamTypeQuiz.ts           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/user/src/components/shared/modal/fcfs/ResultStep.tsx b/packages/user/src/components/shared/modal/fcfs/ResultStep.tsx
index db3a1772..0b9d54b3 100644
--- a/packages/user/src/components/shared/modal/fcfs/ResultStep.tsx
+++ b/packages/user/src/components/shared/modal/fcfs/ResultStep.tsx
@@ -26,7 +26,6 @@ const IMAGE_URLS: Record<ResultStepType, string> = {
 	end: '/images/fcfs/result/already-done.png',
 };
 
-/** TODO: 이벤트 마지막 날에는 '내일 퀴즈' 관련 문구 제거 */
 const DESCRIPTIONS: Record<
 	ResultStepType,
 	{
diff --git a/packages/user/src/hooks/query/useGetTeamTypeQuiz.ts b/packages/user/src/hooks/query/useGetTeamTypeQuiz.ts
index c4d9a742..004dd9f4 100644
--- a/packages/user/src/hooks/query/useGetTeamTypeQuiz.ts
+++ b/packages/user/src/hooks/query/useGetTeamTypeQuiz.ts
@@ -5,7 +5,6 @@ import QUERY_KEYS from 'src/services/api/queryKey.ts';
 export type Quiz = { id: number; question: string; choices: string[] };
 
 export default function useGetTeamTypeQuizzes() {
-	// TODO: 빈 배열 내려올 경우 error handling
 	const { data: quizzes } = useSuspenseQuery<Quiz[]>({
 		queryKey: [QUERY_KEYS.TEAM_TYPE_QUIZ],
 		queryFn: () => http.get('/personality-test-list'),

From 98c3869dcf59faa92408c638fb592cfbc5c36203 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 17:19:50 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20loader=EB=A1=9C=20kakao=20login=20r?=
 =?UTF-8?q?edirect=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/src/utils/socket.ts           | 47 ++++++++-----------
 packages/user/src/pages/KakaoRedirectPage.tsx | 25 ----------
 packages/user/src/pages/index.ts              |  1 -
 packages/user/src/routes/loader/index.ts      |  1 +
 .../user/src/routes/loader/kakao-redirect.ts  | 23 +++++++++
 .../user/src/routes/loader/share-redirect.ts  |  2 +-
 packages/user/src/routes/router.tsx           |  6 +--
 packages/user/src/services/socket.ts          | 27 +++++------
 8 files changed, 61 insertions(+), 71 deletions(-)
 delete mode 100644 packages/user/src/pages/KakaoRedirectPage.tsx
 create mode 100644 packages/user/src/routes/loader/kakao-redirect.ts

diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts
index 4d442685..05a08819 100644
--- a/packages/common/src/utils/socket.ts
+++ b/packages/common/src/utils/socket.ts
@@ -15,11 +15,6 @@ export interface SendMessageProps {
 	headers?: Record<string, string>;
 }
 
-export interface ConnectProps {
-	isSuccess: boolean;
-	options?: IFrame;
-}
-
 export default class Socket {
 	private client: Client;
 
@@ -47,21 +42,23 @@ export default class Socket {
 		return stompClient;
 	}
 
-	connect(callback?: (props: ConnectProps) => void) {
-		this.client.onConnect = (options) => {
-			this.isConnected = true;
-			callback?.({ isSuccess: true, options });
-		};
+	async connect(): Promise<IFrame> {
+		return new Promise((resolve, reject) => {
+			this.client.onConnect = (options) => {
+				this.isConnected = true;
+				resolve(options);
+			};
 
-		this.client.onStompError = (error) => {
-			this.isConnected = false;
-			callback?.({ isSuccess: false, options: error });
-		};
+			this.client.onStompError = (error) => {
+				this.isConnected = false;
+				reject(error);
+			};
 
-		this.client.activate();
+			this.client.activate();
+		});
 	}
 
-	disconnect() {
+	async disconnect() {
 		this.subscriptions.forEach((subscription) => subscription.unsubscribe());
 		this.subscriptions.clear();
 
@@ -71,7 +68,7 @@ export default class Socket {
 		}
 	}
 
-	sendMessages({ destination, body }: SendMessageProps) {
+	async sendMessages({ destination, body }: SendMessageProps) {
 		if (!this.token) {
 			throw new Error('로그인 후 참여할 수 있어요!');
 		}
@@ -82,12 +79,9 @@ export default class Socket {
 		};
 
 		if (!this.client.connected) {
-			this.connect(() => {
-				this.client.publish(messageProps);
-			});
-		} else {
-			this.client.publish(messageProps);
+			await this.connect();
 		}
+		this.client.publish(messageProps);
 	}
 
 	private createSubscription({ destination, callback, headers = {} }: SubscriptionProps) {
@@ -110,12 +104,11 @@ export default class Socket {
 		this.subscriptions.set(destination, subscription);
 	}
 
-	subscribe(props: SubscriptionProps) {
-		if (this.client.connected) {
-			this.createSubscription(props);
-		} else {
-			this.connect(() => this.createSubscription(props));
+	async subscribe(props: SubscriptionProps) {
+		if (!this.isConnected) {
+			await this.connect();
 		}
+		this.createSubscription(props);
 	}
 
 	unsubscribe(destination: string) {
diff --git a/packages/user/src/pages/KakaoRedirectPage.tsx b/packages/user/src/pages/KakaoRedirectPage.tsx
deleted file mode 100644
index 0dcf600b..00000000
--- a/packages/user/src/pages/KakaoRedirectPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import RoutePaths from 'src/constants/routePath.ts';
-import useTokenStorage from 'src/hooks/storage/useTokenStorage.ts';
-import socketManager from 'src/services/socket.ts';
-import CustomError from 'src/utils/error.ts';
-
-export default function KakaoRedirectPage() {
-	const [, setToken] = useTokenStorage();
-	const navigate = useNavigate();
-	const [searchParams] = useSearchParams();
-
-	const accessToken = searchParams.get('accessToken');
-
-	useEffect(() => {
-		if (!accessToken) {
-			throw new CustomError('로그인이 성공적으로 완료되지 않았습니다.', 400);
-		}
-		socketManager.reconnectSocketClient(accessToken);
-		setToken(accessToken);
-		navigate(RoutePaths.Event, { replace: true });
-	}, [accessToken]);
-
-	return null;
-}
diff --git a/packages/user/src/pages/index.ts b/packages/user/src/pages/index.ts
index 7a980da1..1004c4cc 100644
--- a/packages/user/src/pages/index.ts
+++ b/packages/user/src/pages/index.ts
@@ -2,5 +2,4 @@ export { default as ErrorPage } from './error/ErrorPage.tsx';
 export { default as NotFoundErrorPage } from './error/NotFoundErrorPage.tsx';
 export { default as EventPage } from './EventPage.tsx';
 export { default as HomePage } from './HomePage.tsx';
-export { default as KakaoRedirectPage } from './KakaoRedirectPage.tsx';
 export { default as NotStartedEventPage } from './NotStartedEventPage.tsx';
diff --git a/packages/user/src/routes/loader/index.ts b/packages/user/src/routes/loader/index.ts
index 4efc8812..fee39b4a 100644
--- a/packages/user/src/routes/loader/index.ts
+++ b/packages/user/src/routes/loader/index.ts
@@ -1,2 +1,3 @@
+export { default as kakaoRedirectLoader } from './kakao-redirect.ts';
 export { default as rootLoader } from './root.ts';
 export { default as shareRedirectLoader } from './share-redirect.ts';
diff --git a/packages/user/src/routes/loader/kakao-redirect.ts b/packages/user/src/routes/loader/kakao-redirect.ts
new file mode 100644
index 00000000..8a69fb29
--- /dev/null
+++ b/packages/user/src/routes/loader/kakao-redirect.ts
@@ -0,0 +1,23 @@
+import { Cookie } from '@softeer/common/utils';
+import { LoaderFunction, redirect } from 'react-router-dom';
+import RoutePaths from 'src/constants/routePath.ts';
+import STORAGE_KEYS from 'src/constants/storageKey.ts';
+import socketManager from 'src/services/socket.ts';
+import CustomError from 'src/utils/error.ts';
+
+const kakaoRedirectLoader: LoaderFunction = async ({ request }) => {
+	const accessToken = new URL(request.url).searchParams.get('accessToken');
+
+	if (!accessToken) {
+		throw new CustomError('로그인이 성공적으로 완료되지 않았습니다.', 400);
+	}
+
+	socketManager.reconnectSocketClient(accessToken);
+	Cookie.setCookie(STORAGE_KEYS.TOKEN, accessToken);
+
+	await socketManager.reconnectSocketClient(accessToken);
+
+	return redirect(RoutePaths.Event);
+};
+
+export default kakaoRedirectLoader;
diff --git a/packages/user/src/routes/loader/share-redirect.ts b/packages/user/src/routes/loader/share-redirect.ts
index 22ffd259..376beda7 100644
--- a/packages/user/src/routes/loader/share-redirect.ts
+++ b/packages/user/src/routes/loader/share-redirect.ts
@@ -8,7 +8,7 @@ const shareRedirectLoader: LoaderFunction = async ({ params }) => {
 
 	await queryClient.prefetchQuery(clickCountQueryOptions(id));
 
-	redirect(RoutePaths.Home);
+	return redirect(RoutePaths.Home);
 };
 
 export default shareRedirectLoader;
diff --git a/packages/user/src/routes/router.tsx b/packages/user/src/routes/router.tsx
index 21d0f0cf..054ce911 100644
--- a/packages/user/src/routes/router.tsx
+++ b/packages/user/src/routes/router.tsx
@@ -8,11 +8,10 @@ import {
 	ErrorPage,
 	EventPage,
 	HomePage,
-	KakaoRedirectPage,
 	NotFoundErrorPage,
 	NotStartedEventPage,
 } from 'src/pages/index.ts';
-import { rootLoader, shareRedirectLoader } from 'src/routes/loader/index.ts';
+import { kakaoRedirectLoader, rootLoader, shareRedirectLoader } from 'src/routes/loader/index.ts';
 
 const routes: RouteObject[] = [
 	{
@@ -49,9 +48,10 @@ const routes: RouteObject[] = [
 				],
 			},
 			{
+				loader: kakaoRedirectLoader,
 				path: RoutePaths.KakaoOauthRedirect,
 				errorElement: <ErrorPage />,
-				element: <KakaoRedirectPage />,
+				element: null,
 			},
 		],
 	},
diff --git a/packages/user/src/services/socket.ts b/packages/user/src/services/socket.ts
index 485b420f..f6c494d7 100644
--- a/packages/user/src/services/socket.ts
+++ b/packages/user/src/services/socket.ts
@@ -28,7 +28,7 @@ class SocketManager {
 		return this.socketClient!;
 	}
 
-	connectSocketClient({
+	async connectSocketClient({
 		token,
 		onReceiveMessage,
 		onReceiveBlock,
@@ -39,27 +39,26 @@ class SocketManager {
 		onReceiveBlock: SocketSubscribeCallbackType;
 		onReceiveStatus: SocketSubscribeCallbackType;
 	}) {
+		if (this.socketClient) {
+			await this.socketClient.disconnect();
+		}
+
 		this.initializeSocketClient(token);
 
 		this.onReceiveMessage = onReceiveMessage;
 		this.onReceiveBlock = onReceiveBlock;
 		this.onReceiveStatus = onReceiveStatus;
 
-		this.socketClient!.connect((isConnected) => {
-			if (isConnected) {
-				this.subscribeToTopics();
-			} else {
-				throw new CustomError('서버에서 데이터를 불러오는 데 실패했습니다.', 500);
-			}
-		});
-	}
-
-	reconnectSocketClient(token?: string | null) {
-		if (this.socketClient) {
-			this.socketClient.disconnect();
+		try {
+			await this.socketClient!.connect();
+			this.subscribeToTopics();
+		} catch (error) {
+			throw new CustomError('서버에서 데이터를 불러오는 데 실패했습니다.', 500);
 		}
+	}
 
-		this.connectSocketClient({
+	async reconnectSocketClient(token?: string | null) {
+		await this.connectSocketClient({
 			token,
 			onReceiveBlock: this.onReceiveBlock!,
 			onReceiveMessage: this.onReceiveMessage!,

From 64a3f930b1269a53b63e88f32ff3818ba0653d60 Mon Sep 17 00:00:00 2001
From: nimod7890 <nimod1234@g.skku.edu>
Date: Tue, 20 Aug 2024 17:39:32 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=96=88=EC=9D=84=20=EB=95=8C=20socket=20?=
 =?UTF-8?q?=EA=B5=AC=EB=8F=85=20=EB=81=8A=EA=B8=B0=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/src/utils/socket.ts           |  4 +-
 packages/user/src/constants/storageKey.ts     |  1 +
 packages/user/src/hooks/socket/index.ts       | 24 +++++---
 .../user/src/hooks/socket/useChatSocket.ts    | 51 ++++++++--------
 .../user/src/hooks/socket/useRacingSocket.ts  | 58 +++++++++----------
 .../user/src/hooks/storage/useChatStorage.ts  |  7 +++
 packages/user/src/services/socket.ts          |  4 +-
 7 files changed, 83 insertions(+), 66 deletions(-)
 create mode 100644 packages/user/src/hooks/storage/useChatStorage.ts

diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts
index 05a08819..b9f9ed9b 100644
--- a/packages/common/src/utils/socket.ts
+++ b/packages/common/src/utils/socket.ts
@@ -16,7 +16,7 @@ export interface SendMessageProps {
 }
 
 export default class Socket {
-	private client: Client;
+	client: Client;
 
 	private subscriptions: Map<string, StompSubscription> = new Map();
 
@@ -36,7 +36,7 @@ export default class Socket {
 	private setup(url: string): Client {
 		const stompClient = new Client({
 			webSocketFactory: () => new SockJS(url),
-			reconnectDelay: 5000, // Reconnect if the connection drops
+			reconnectDelay: 5000,
 		});
 		this.client = stompClient;
 		return stompClient;
diff --git a/packages/user/src/constants/storageKey.ts b/packages/user/src/constants/storageKey.ts
index c314115c..0a692513 100644
--- a/packages/user/src/constants/storageKey.ts
+++ b/packages/user/src/constants/storageKey.ts
@@ -6,6 +6,7 @@ const STORAGE_KEYS = {
 	TOKEN: ACCESS_TOKEN_KEY,
 	USER: `${STORAGE_KEY_PREFIX}-user`,
 	RANK: `${STORAGE_KEY_PREFIX}-rank`,
+	CHAT_LIST: `${STORAGE_KEY_PREFIX}-chat-list`,
 } as const;
 
 export default STORAGE_KEYS;
diff --git a/packages/user/src/hooks/socket/index.ts b/packages/user/src/hooks/socket/index.ts
index f043c1e1..2981108e 100644
--- a/packages/user/src/hooks/socket/index.ts
+++ b/packages/user/src/hooks/socket/index.ts
@@ -1,24 +1,30 @@
-import { useEffect } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import useAuth from 'src/hooks/useAuth.ts';
 import socketManager from 'src/services/socket.ts';
 import useChatSocket from './useChatSocket.ts';
 import useRacingSocket from './useRacingSocket.ts';
 
-export type UseSocketReturnType = ReturnType<typeof useSocket>;
-
 export default function useSocket() {
 	const { token } = useAuth();
 	const chatSocket = useChatSocket();
+	const racingSocket = useRacingSocket();
 
 	const { onReceiveMessage, onReceiveBlock, ...chatSocketProps } = chatSocket;
-
-	const racingSocket = useRacingSocket();
 	const { onReceiveStatus, ...racingSocketProps } = racingSocket;
 
-	useEffect(() => {
-		if (socketManager.getSocketClient().isConnected) return;
-		socketManager.connectSocketClient({ token, onReceiveMessage, onReceiveStatus, onReceiveBlock });
-	}, [socketManager, token]);
+	const isSocketInitialized = useRef(false);
+
+	useLayoutEffect(() => {
+		if (!isSocketInitialized.current) {
+			socketManager.connectSocketClient({
+				token,
+				onReceiveMessage,
+				onReceiveStatus,
+				onReceiveBlock,
+			});
+			isSocketInitialized.current = true;
+		}
+	}, [token, onReceiveMessage, onReceiveStatus, onReceiveBlock]);
 
 	return { chatSocket: chatSocketProps, racingSocket: racingSocketProps };
 }
diff --git a/packages/user/src/hooks/socket/useChatSocket.ts b/packages/user/src/hooks/socket/useChatSocket.ts
index 7e3d0dcb..e989e77e 100644
--- a/packages/user/src/hooks/socket/useChatSocket.ts
+++ b/packages/user/src/hooks/socket/useChatSocket.ts
@@ -1,7 +1,8 @@
 import { ChatProps } from '@softeer/common/components';
 import { CHAT_SOCKET_ENDPOINTS } from '@softeer/common/constants';
 import { SocketSubscribeCallbackType } from '@softeer/common/utils';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import useChatListStorage from 'src/hooks/storage/useChatStorage.ts';
 import { useToast } from 'src/hooks/useToast.ts';
 import socketManager from 'src/services/socket.ts';
 
@@ -10,14 +11,16 @@ export type UseChatSocketReturnType = ReturnType<typeof useChatSocket>;
 export default function useChatSocket() {
 	const { toast } = useToast();
 
-	const socketClient = socketManager.getSocketClient();
-	const [chatMessages, setChatMessages] = useState<ChatProps[]>([]);
+	const [storedChatList, storeChatList] = useChatListStorage();
+	const [chatList, setChatList] = useState<ChatProps[]>(storedChatList);
+
+	useEffect(() => storeChatList(chatList), [chatList]);
 
 	const handleIncomingMessage: SocketSubscribeCallbackType = useCallback(
 		(data: unknown, messageId: string) => {
 			const parsedData = data as Omit<ChatProps, 'id'>;
 			const parsedMessage = { id: messageId, ...parsedData };
-			setChatMessages((prevMessages) => [...prevMessages, parsedMessage] as ChatProps[]);
+			setChatList((prevMessages) => [...prevMessages, parsedMessage] as ChatProps[]);
 		},
 		[],
 	);
@@ -26,34 +29,36 @@ export default function useChatSocket() {
 		(data: unknown) => {
 			const { id, blockId } = data as { id: string; blockId: string };
 
-			setChatMessages((prevMessages) =>
+			setChatList((prevMessages) =>
 				prevMessages.map((message) => (message.id === blockId ? { id, type: 'b' } : message)),
 			);
 		},
-		[setChatMessages],
+		[setChatList],
 	);
 
-	const handleSendMessage = useCallback(
-		(content: string) => {
-			try {
-				const chatMessage = { content };
-
-				socketClient.sendMessages({
-					destination: CHAT_SOCKET_ENDPOINTS.PUBLISH,
-					body: chatMessage,
-				});
-			} catch (error) {
-				const errorMessage = (error as Error).message;
-				toast({ description: errorMessage.length > 0 ? errorMessage : '문제가 발생했습니다.' });
-			}
-		},
-		[socketClient],
-	);
+	const handleSendMessage = useCallback((content: string) => {
+		try {
+			const socketClient = socketManager.getSocketClient();
+
+			const chatMessage = { content };
+
+			socketClient.sendMessages({
+				destination: CHAT_SOCKET_ENDPOINTS.PUBLISH,
+				body: chatMessage,
+			});
+		} catch (error) {
+			const errorMessage = (error as Error).message;
+			toast({
+				description:
+					errorMessage.length > 0 ? errorMessage : '기대평을 보내는 중 문제가 발생했습니다.',
+			});
+		}
+	}, []);
 
 	return {
 		onReceiveMessage: handleIncomingMessage,
 		onReceiveBlock: handleIncomingBlock,
 		onSendMessage: handleSendMessage,
-		messages: chatMessages,
+		messages: chatList,
 	};
 }
diff --git a/packages/user/src/hooks/socket/useRacingSocket.ts b/packages/user/src/hooks/socket/useRacingSocket.ts
index 8fae0a8c..a8a2f4f3 100644
--- a/packages/user/src/hooks/socket/useRacingSocket.ts
+++ b/packages/user/src/hooks/socket/useRacingSocket.ts
@@ -5,7 +5,7 @@ import {
 } from '@softeer/common/constants';
 import { Category } from '@softeer/common/types';
 import type { SocketSubscribeCallbackType } from '@softeer/common/utils';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import useRacingVoteStorage from 'src/hooks/storage/useRacingVoteStorage.ts';
 import useAuth from 'src/hooks/useAuth.ts';
 import { useToast } from 'src/hooks/useToast.ts';
@@ -20,17 +20,12 @@ export default function useRacingSocket() {
 	const { toast } = useToast();
 	const { user } = useAuth();
 
-	const socketClient = socketManager.getSocketClient();
-
 	const [storedVote, storeVote] = useRacingVoteStorage();
 	const [votes, setVotes] = useState<VoteStatus>(storedVote);
 
 	const ranks = useMemo(() => calculateRank(votes), [votes]);
 
-	const handleVoteChage = (newVoteStatus: VoteStatus) => {
-		setVotes(newVoteStatus);
-		storeVote(newVoteStatus);
-	};
+	useEffect(() => storeVote(votes), [votes]);
 
 	const handleStatusChange: SocketSubscribeCallbackType = useCallback(
 		(data: unknown) => {
@@ -39,35 +34,27 @@ export default function useRacingSocket() {
 				(category) => newVoteStatus[category as Category] !== votes[category as Category],
 			);
 
-			if (isVotesChanged) handleVoteChage(newVoteStatus);
+			if (isVotesChanged) setVotes(newVoteStatus);
 		},
 		[votes],
 	);
 
-	const handleCarFullyCharged = useCallback(() => {
-		const category = user?.type as Category;
-
-		const chargeData = { [categoryToSocketCategory[category].toLowerCase()]: 1 };
-
-		const completeChargeData = Object.keys(categoryToSocketCategory).reduce(
-			(acc, key) => {
-				const socketCategory = categoryToSocketCategory[key as Category];
-				acc[socketCategory] = chargeData[socketCategory] ?? 0;
-				return acc;
-			},
-			{} as Record<SocketCategory, number>,
-		);
+	const socketClient = socketManager.getSocketClient();
 
+	const handleCarFullyCharged = useCallback(() => {
 		try {
+			const category = user?.type as Category;
+			const completeChargeData = prepareChargeData(category, categoryToSocketCategory);
+
 			socketClient.sendMessages({
 				destination: RACING_SOCKET_ENDPOINTS.PUBLISH,
 				body: completeChargeData,
 			});
 		} catch (error) {
-			const errorMessage = (error as Error).message;
-			toast({ description: errorMessage.length > 0 ? errorMessage : '문제가 발생했습니다.' });
+			const errorMessage = (error as Error).message || '문제가 발생했습니다.';
+			toast({ description: errorMessage });
 		}
-	}, [user?.type]);
+	}, [user?.type, socketClient]);
 
 	return {
 		votes,
@@ -95,12 +82,6 @@ function calculateRank(vote: VoteStatus): RankStatus {
 	);
 }
 
-// function hasRankChanged(newRank: RankStatus, currentRank: RankStatus): boolean {
-// 	return Object.keys(newRank).some(
-// 		(category) => newRank[category as Category] !== currentRank[category as Category],
-// 	);
-// }
-
 function parseSocketVoteData(data: SocketData): VoteStatus {
 	return Object.entries(data).reduce<VoteStatus>((acc, [socketCategory, value]) => {
 		const category = socketCategoryToCategory[socketCategory.toLowerCase() as SocketCategory];
@@ -108,3 +89,20 @@ function parseSocketVoteData(data: SocketData): VoteStatus {
 		return acc;
 	}, {} as VoteStatus);
 }
+
+function prepareChargeData(
+	category: Category,
+	categoryMap: Record<Category, SocketCategory>,
+): Record<SocketCategory, number> {
+	const chargeData = {
+		[categoryMap[category].toLowerCase()]: 1,
+	};
+
+	return Object.entries(categoryMap).reduce(
+		(acc, [, socketCategory]) => {
+			acc[socketCategory] = chargeData[socketCategory.toLowerCase()] ?? 0;
+			return acc;
+		},
+		{} as Record<SocketCategory, number>,
+	);
+}
diff --git a/packages/user/src/hooks/storage/useChatStorage.ts b/packages/user/src/hooks/storage/useChatStorage.ts
new file mode 100644
index 00000000..a62f9276
--- /dev/null
+++ b/packages/user/src/hooks/storage/useChatStorage.ts
@@ -0,0 +1,7 @@
+import { ChatProps } from '@softeer/common/components';
+import STORAGE_KEYS from 'src/constants/storageKey.ts';
+import useStorage from 'src/hooks/storage/index.ts';
+
+const useChatListStorage = () => useStorage<ChatProps[]>(STORAGE_KEYS.CHAT_LIST, []);
+
+export default useChatListStorage;
diff --git a/packages/user/src/services/socket.ts b/packages/user/src/services/socket.ts
index f6c494d7..05bca8d6 100644
--- a/packages/user/src/services/socket.ts
+++ b/packages/user/src/services/socket.ts
@@ -66,8 +66,8 @@ class SocketManager {
 		});
 	}
 
-	private subscribeToTopics() {
-		if (this.socketClient) {
+	subscribeToTopics() {
+		if (this.socketClient && this.socketClient.client.connected) {
 			if (this.onReceiveMessage) {
 				this.socketClient.subscribe({
 					destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE,