diff --git a/fe/src/components/chat/Chat.jsx b/fe/src/components/chat/Chat.jsx index 280e9578..514c8cb3 100644 --- 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 (
{/* 왼쪽: 채팅 목록 */} @@ -226,7 +229,7 @@ const Chat = () => { selectedCard={selectedCard} // 선택된 데이터 전달 selectedCategory={selectedCategory} // 선택된 카테고리 전달 onUpdateChatList={() => { - setRefreshKey(prevKey => prevKey + 1); // 채팅방 리스트 새로고침 키 업데이트 + setRefreshKey(prevKey => prevKey + 1); // 채팅방 리스트 새로고침 키 업데이트 }} />
diff --git a/fe/src/main.jsx b/fe/src/main.jsx index 7d7ae6f6..06cad031 100644 --- a/fe/src/main.jsx +++ b/fe/src/main.jsx @@ -92,6 +92,12 @@ const router = createBrowserRouter([ { path: '/chatMain', element: , + children: [ + { + path: ':type/:chatId', // 동적 세그먼트 사용 + element: null, // Chat 컴포넌트 내에서 렌더링 + }, + ], }, { path: 'members/:memberId', // 회원 페이지 라우트 추가