Merge pull request #103 from Plick-pop-in/feat/chatjoinmove/#2

[feat/chatjoinmove/#2] 라이브 화면에서 join 버튼 클릭시 chat 화면으로 이동 + chat 화면에 해당 팝업 이름 title에 반영

src/component/frame/Router.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 
 import Login from "../myPage/Login.js";
 import Main from "../main/Main.js";
@@ -38,6 +38,7 @@ const AppRouter = () => {
                 <Route path="/WishList" element={<WishList />} />
                 <Route path="/MyChat" element={<MyChat />} />
                 <Route path="KakaoRedirect" element={<KakaoRedirect/>} />
+                <Route path="/" element={<Navigate to="/Main" />} /> {/* '/'로 접속 시 '/main'으로 이동 */}
             </Routes>
             <Footer />
         </Router>

src/component/live/Chat.js

@@ -2,13 +2,18 @@ import React from "react";
 import "./css/Chat.css";
 import ChatBox from "./ChatBox";
 import ChatScreen from "./ChatScreen";
+import { useLocation } from "react-router-dom";
 
 const Chat = () => {
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+    const chatboxname = queryParams.get("chatboxname");
+
     return (
         <div className="chat-page-background">
             <div className="chat-page-top">
                 <div className="chat-title">
-                    눈사람 눙눙이 팝업 스토어
+                    {chatboxname ? chatboxname : "눈사람 눙눙이 팝업 스토어"}
                 </div>
                 <div className="chat-join-info">
                     <img className="chat-ic-person" src={require('../../assets/images/ic_person.png')} alt="person icon" />

src/component/live/LiveBox.js

@@ -1,15 +1,13 @@
 import React from "react";
-import './css/LiveBox.css';
+import "./css/LiveBox.css";
 import { useNavigate } from "react-router-dom";
-import useJoinLive from "../live/useJoinLive";
 
 const LiveBox = (props) => {
     const navigate = useNavigate();
-    const joinLive = useJoinLive();
 
-    const clickPopupButton = (item) => {
-        navigate("/PopupDetail/${item.id}");
-    }
+    const handleJoinClick = () => {
+        navigate(`/chat?chatboxname=${encodeURIComponent(props.name)}`);
+    };
 
     return (
         <div className="list-box">
@@ -22,16 +20,15 @@ const LiveBox = (props) => {
                 </div>
                 <div className="chat-box-join-info">
                     <div className="chat-box-liked-content">
-                    <img className="chat-box-ic-liked" src={require('../../assets/images/ic_person.png')} />
+                        <img className="chat-box-ic-liked" src={require('../../assets/images/ic_person.png')} />
                         <div className="chat-box-liked">{props.joinedPeople}명이 와글와글</div>
                     </div>
                     <div className="chat-box-point">Ⓒ100P</div>
-                    {/* <button className="join-button" onClick={()=>joinLive(popupId)}><strong>join</strong></button> */}
-                    <button className="join-button"><strong>join</strong></button>
+                    <button className="join-button" onClick={handleJoinClick}><strong>JOIN</strong></button>
                 </div>
             </div>
         </div>
     );
-}
+};
 
 export default LiveBox;