diff --git a/src/component/live/Chat.js b/src/component/live/Chat.js
index 7d54d74..289c2e7 100644
--- a/src/component/live/Chat.js
+++ b/src/component/live/Chat.js
@@ -17,7 +17,7 @@ const Chat = () => {
         <div className="chat-page-background">
             <div className="chat-page-top">
                 <div className="chat-title">
-                    {chatboxname ? chatboxname : "눈사람 눙눙이 팝업 스토어"}
+                    {chatboxname ? chatboxname : "채팅 이름 찾을 수 없음"}
                 </div>
                 <div className="chat-join-info">
                     <img className="chat-ic-person" src={require('../../assets/images/ic_person.png')} alt="person icon" />
@@ -41,4 +41,4 @@ const Chat = () => {
     );
 };
 
-export default Chat;
+export default Chat;
\ No newline at end of file
diff --git a/src/component/live/ChatBox.js b/src/component/live/ChatBox.js
index 32f6daa..8ab87e9 100644
--- a/src/component/live/ChatBox.js
+++ b/src/component/live/ChatBox.js
@@ -2,26 +2,29 @@ import React, { useState, useEffect } from "react";
 import './css/ChatBox.css';
 import axios from "axios";
 import apiURLs from "../../apiURL";
+import { useSelector } from 'react-redux'; 
+
+const ChatBox = () => {
+    const loginState = useSelector(state => state.loginSlice);
 
-const ChatBox = ({ userId }) => { // userId를 props로 받도록 수정
     const [chatList, setChatList] = useState([]);
 
     useEffect(() => {
         const fetchData = async () => {
-            console.log("Fetching user chat list..."); // 데이터를 가져오는 시작 시점에 로그 출력
+            console.log("Fetching user chat list...");
             try {
                 const response = await axios.get(apiURLs.chatList, {
-                    params: { userId }
+                    params: { userId: loginState.id } // loginState에서 userId 가져오기
                 });
-                console.log("API response - user chat list:", response.data); // API 응답 데이터 로그 출력
-                setChatList(response.data.data); // 가져온 데이터를 상태에 저장
+                console.log("API response - user chat list:", response.data);
+                setChatList(response.data.data);
             } catch (error) {
-                console.error("Error fetching user chat list:", error); // 에러 발생 시 로그 출력
+                console.error("Error fetching user chat list:", error);
             }
         };
 
         fetchData();
-    }, [userId]); // userId가 변경될 때마다 fetchData 호출
+    }, [loginState.id]); // userId가 변경될 때마다 fetchData 호출
 
     return (
         <div className="chat-message-list">
@@ -37,18 +40,6 @@ const ChatBox = ({ userId }) => { // userId를 props로 받도록 수정
                     </div>
                 </div>
             ))}
-            {/* 주석처리된 부분 시작 */}
-            <div className="chat-new-box">
-                <div className="blue-rectangle">
-                    <div className="white-inner-rectangle">
-                        <img className="new-message-image" src={require('../../assets/images/ic_new_message.png')} alt="new-message-image" />
-                        <div className="user-popup-title">
-                            눈사람 눙눙이 팝업스토어
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {/* 주석처리된 부분 끝 */}
         </div>
     );
 };
diff --git a/src/component/live/Live.js b/src/component/live/Live.js
index c5017bd..ab40161 100644
--- a/src/component/live/Live.js
+++ b/src/component/live/Live.js
@@ -81,6 +81,7 @@ const Live = () => {
                         {live.map((popup) => (
                             <div className="list-box">
                                 <LiveBox
+                                    popupId = {popup.popupId}
                                     image={popup.popupImage}
                                     name={popup.popupName}
                                     location={popup.popupLocation}
diff --git a/src/component/live/LiveBox.js b/src/component/live/LiveBox.js
index acab146..8301a96 100644
--- a/src/component/live/LiveBox.js
+++ b/src/component/live/LiveBox.js
@@ -1,13 +1,11 @@
 import React from "react";
 import "./css/LiveBox.css";
 import { useNavigate } from "react-router-dom";
+import useJoinLive from "../live/useJoinLive";
 
 const LiveBox = (props) => {
-    const navigate = useNavigate();
+    const joinLive = useJoinLive(props.popupId);
 
-    const handleJoinClick = () => {
-        navigate(`/chat?chatboxname=${encodeURIComponent(props.name)}&joinedPeople=${props.joinedPeople}`);
-    };
 
     return (
         <div className="list-box">
@@ -24,7 +22,7 @@ const LiveBox = (props) => {
                         <div className="chat-box-liked">{props.joinedPeople}명이 와글와글</div>
                     </div>
                     <div className="chat-box-point">Ⓒ100P</div>
-                    <button className="join-button" onClick={handleJoinClick}><strong>JOIN</strong></button>
+                    <button className="join-button" onClick={()=>joinLive()}><strong>JOIN</strong></button>
                 </div>
             </div>
         </div>