Chore(fe) #69: 채팅방 경로 추가

venus-lion · Feb 3, 2025 · 01dc234 · 01dc234
1 parent 8afca18
commit 01dc234
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/fe/src/components/chat/Chat.jsx b/fe/src/components/chat/Chat.jsx
@@ -9,9 +9,6 @@ import CreateGroupChatNameModal from "./CreateGroupChatNameModal.jsx";
 import axiosInstance from "../../axiosInstance.js";
 import GetGroupChatInfoModal from "./GetGroupChatInfoModal.jsx"; // axios 임포트
 
-
-
-
 const Chat = () => {
     const [activeTab, setActiveTab] = useState('personal'); // 개인 채팅 또는 그룹 채팅
     const [searchTerm, setSearchTerm] = useState(''); // 검색어
@@ -20,7 +17,6 @@ const Chat = () => {
     const navigate = useNavigate();
     const [refreshKey, setRefreshKey] = useState(0); // 채팅 리스트 새로고침 키 추가
 
-
     const [isCreateGroupChatModalOpen, setIsCreateGroupChatModalOpen] = useState(false); // 모달1 열림 상태
     const [isGetGroupChatInfoModalOpen, setIsGetGroupChatInfoModalOpen] = useState(false); // 채팅방 존재여무 모달2 열림 상태
     const [isCreateGroupChatNameModalOpen, setIsCreateGroupChatNameModalOpen] = useState(false); // 모달2 열림 상태
@@ -74,7 +70,6 @@ const Chat = () => {
         setIsCreateGroupChatNameModalOpen(true); // 세 번째 모달 열기
     };
 
-
     const handleCloseGroupChatNameModal = () => {
         setIsCreateGroupChatNameModalOpen(false);
         setSelectedCard(null);
@@ -129,6 +124,14 @@ const Chat = () => {
         }
     };
 
+    // 선택된 채팅방에 따라 URL 변경
+    useEffect(() => {
+        if (selectedChat) {
+            const chatId = activeTab === 'personal' ? selectedChat.roomId : selectedChat.groupChatroomId;
+            navigate(`/chatMain/${chatId}/${activeTab}`);
+        }
+    }, [selectedChat, activeTab, navigate]);
+
     return (
         <div style={{display: 'flex', height: 'calc(100vh - 60px)'}}>
             {/* 왼쪽: 채팅 목록 */}
@@ -226,7 +229,7 @@ const Chat = () => {
                 selectedCard={selectedCard} // 선택된 데이터 전달
                 selectedCategory={selectedCategory} // 선택된 카테고리 전달
                 onUpdateChatList={() => {
-                setRefreshKey(prevKey => prevKey + 1); // 채팅방 리스트 새로고침 키 업데이트
+                    setRefreshKey(prevKey => prevKey + 1); // 채팅방 리스트 새로고침 키 업데이트
                 }}
             />
         </div>

diff --git a/fe/src/main.jsx b/fe/src/main.jsx
@@ -92,6 +92,12 @@ const router = createBrowserRouter([
             {
                 path: '/chatMain',
                 element: <Chat/>,
+                children: [
+                    {
+                        path: ':type/:chatId', // 동적 세그먼트 사용
+                        element: null, // Chat 컴포넌트 내에서 렌더링
+                    },
+                ],
             },
             {
                 path: 'members/:memberId', // 회원 페이지 라우트 추가