diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts
index d19c7c8c..21037061 100644
--- a/packages/common/src/utils/socket.ts
+++ b/packages/common/src/utils/socket.ts
@@ -14,8 +14,6 @@ export default class Socket {
 		const stompClient = new Client({
 			webSocketFactory: () => new SockJS(`${url}/ws`),
 			reconnectDelay: 5000, // Reconnect if the connection drops
-			// heartbeatIncoming: 4000, // Check for server heartbeat
-			// heartbeatOutgoing: 4000, // Send a heartbeat
 		});
 		this.client = stompClient;
 		return stompClient;
@@ -62,6 +60,7 @@ export default class Socket {
 	}) {
 		const subscription = this.client.subscribe(destination, (message: IMessage) => {
 			const messageId = message.headers['message-id'];
+
 			callback(messageId, message);
 		});
 		this.subscriptions.set(destination, subscription);
diff --git a/packages/common/tsup.config.ts b/packages/common/tsup.config.ts
index 126611fa..a2b32b34 100644
--- a/packages/common/tsup.config.ts
+++ b/packages/common/tsup.config.ts
@@ -21,4 +21,6 @@ export default defineConfig({
 	loader: {
 		'.svg': 'file',
 	},
+	noExternal: ['sockjs-client', '@stomp/stompjs'],
+	platform: 'browser',
 });
diff --git a/packages/user/src/components/event/chatting/index.tsx b/packages/user/src/components/event/chatting/index.tsx
index 07421be6..bdaa5e59 100644
--- a/packages/user/src/components/event/chatting/index.tsx
+++ b/packages/user/src/components/event/chatting/index.tsx
@@ -2,7 +2,7 @@ import { ChatList, ChatProps } from '@softeer/common/components';
 import { CHAT_SOCKET_ENDPOINTS } from '@softeer/common/constants';
 import { IMessage } from '@stomp/stompjs';
 import { useEffect, useState } from 'react';
-import socketClient from 'src/services/socket/index.ts';
+import socketClient from 'src/services/socket.ts';
 import Chat from './Chat.tsx';
 import ChatInputArea from './inputArea/index.tsx';
 
diff --git a/packages/user/src/services/socket/index.ts b/packages/user/src/services/socket.ts
similarity index 73%
rename from packages/user/src/services/socket/index.ts
rename to packages/user/src/services/socket.ts
index 640c684b..2d05d344 100644
--- a/packages/user/src/services/socket/index.ts
+++ b/packages/user/src/services/socket.ts
@@ -1,5 +1,5 @@
+import { Socket } from '@softeer/common/utils';
 import { SOCKET_BASE_URL } from 'src/constants/environments.ts';
-import Socket from 'src/services/socket/socket.ts';
 
 const socketClient = new Socket(SOCKET_BASE_URL);
 export default socketClient;
diff --git a/packages/user/src/services/socket/socket.ts b/packages/user/src/services/socket/socket.ts
deleted file mode 100644
index 2ff947ef..00000000
--- a/packages/user/src/services/socket/socket.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Client, IFrame, IMessage, StompSubscription } from '@stomp/stompjs';
-import SockJS from 'sockjs-client';
-
-/**
- * 임시로 error 해결 전까지 common 에 존재하는 Socket class 대신 사용
- * Error: Dynamic require of "crypto" is not supported
- * */
-export default class Socket {
-	private client: Client;
-
-	private subscriptions: Map<string, StompSubscription> = new Map();
-
-	constructor(url: string, token?: string | null) {
-		this.client = this.setup({ url, token });
-	}
-
-	private setup({ url }: { url: string; token?: string | null }): Client {
-		const stompClient = new Client({
-			webSocketFactory: () => new SockJS(`${url}/ws`),
-			reconnectDelay: 5000, // Reconnect if the connection drops
-		});
-		this.client = stompClient;
-		return stompClient;
-	}
-
-	connect(callback?: (isConnected: boolean, options?: IFrame) => void) {
-		// TODO: 채팅 메시지 리스트 받아오기
-		// this.client.onConnect = (options) => callback?.(true, options);
-		this.client.onConnect = () => callback?.(true);
-
-		this.client.onStompError = (error) => {
-			console.error('STOMP Error', error);
-			callback?.(false);
-		};
-
-		this.client.activate();
-	}
-
-	disconnect() {
-		this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-		this.subscriptions.clear();
-
-		if (this.client.connected) {
-			this.client.deactivate();
-		}
-	}
-
-	sendMessages({ destination, body }: { destination: string; body: unknown }) {
-		if (!this.client.connected) {
-			this.connect(() => {
-				this.client.publish({ destination, body: JSON.stringify(body) });
-			});
-		} else {
-			this.client.publish({ destination, body: JSON.stringify(body) });
-		}
-	}
-
-	private createSubscription({
-		destination,
-		callback,
-	}: {
-		destination: string;
-		callback: (messageId: string, message: IMessage) => void;
-	}) {
-		const subscription = this.client.subscribe(destination, (message: IMessage) => {
-			const messageId = message.headers['message-id'];
-			callback(messageId, message);
-		});
-		this.subscriptions.set(destination, subscription);
-	}
-
-	subscribe({
-		destination,
-		callback,
-	}: {
-		destination: string;
-		callback: (messageId: string, message: IMessage) => void;
-	}) {
-		if (this.client.connected) {
-			this.createSubscription({ destination, callback });
-		} else {
-			this.connect(() => this.createSubscription({ destination, callback }));
-		}
-	}
-
-	unsubscribe(destination: string) {
-		const subscription = this.subscriptions.get(destination);
-		if (subscription) {
-			subscription.unsubscribe();
-			this.subscriptions.delete(destination);
-		}
-	}
-}