diff --git a/src/components/ChattingDetail.jsx b/src/components/ChattingDetail.jsx
index a163c992196e991babbb38e0028d5244b9ef1be3..fb65a956967c16dcd847f76500a2c62ede644dfa 100644
--- a/src/components/ChattingDetail.jsx
+++ b/src/components/ChattingDetail.jsx
@@ -7,6 +7,9 @@ import Button from "../components/Button";
 import ChattingNoticeDetailModal from '../components/ChattingNoticeDetailModal';
 import ChattingNoticeListModal from '../components/ChattingNoticeListModal';
 
+// 웹소켓 서버 연결 URL
+const WS_URL = process.env.REACT_APP_WS_URL;
+
 // 흔들리는 애니메이션을 위한 keyframes 정의
 const shakeAnimation = keyframes`
   0% { transform: translateY(0); }
@@ -435,7 +438,7 @@ function ChattingDetail() {
       ws.current.close(); // 기존 WebSocket 연결 종료
     }
 
-    ws.current = new WebSocket('ws://localhost:8081');
+    ws.current = new WebSocket(WS_URL);
     ws.current.onopen = () => {
       if (ws.current.isTimedOut) {
         console.log(`타임아웃된 클라이언트의 재연결을 차단: ${nickname}`);
diff --git a/src/components/ChattingList.jsx b/src/components/ChattingList.jsx
index ff4e5d189a9628f724bee63ca81cd65a7d8bfae3..2b278ff4cf564b22eb110ea6bd01eb43d3dfdaac 100644
--- a/src/components/ChattingList.jsx
+++ b/src/components/ChattingList.jsx
@@ -2,6 +2,9 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import useAuthStore from "../store/authStore";
 
+// 웹소켓 서버 연결 URL
+const WS_URL = process.env.REACT_APP_WS_URL;
+
 function ChattingList() {
   const [rooms, setRooms] = useState([]);
   const [joinedRooms, setJoinedRooms] = useState([]);
@@ -13,7 +16,7 @@ function ChattingList() {
 
   // WebSocket 연결 및 실시간 업데이트
   const setupWebSocket = () => {
-    ws.current = new WebSocket('ws://localhost:8081'); // WebSocket 연결
+    ws.current = new WebSocket(WS_URL); // WebSocket 연결
 
     ws.current.onopen = () => {
       console.log('WebSocket 연결 성공');