Feat: ChatRoomInfo 상태관리 zustand로 변경 (#139)

frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx

@@ -1,64 +1,49 @@
-// ChatRoomInfo.tsx
-import React, { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import RoomName from './RoomName';
 import RoomMember from './RoomMember';
+import { useRoomInfoStore } from '../../stores/useRoomInfoStore';
 import { UserInfoStore } from '../../stores/UserInfoStore';
 
-interface RoomInfo {
-	roomName: string;
-	participation: number;
-	owner: string;
-	chatMemberResponses: { username: string }[];
-}
-
 const ChatRoomInfo: React.FC = () => {
-	const [roomInfo, setRoomInfo] = useState<RoomInfo | null>(null);
+	const { setRoomInfo, setIsOwner, chatMemberResponses, owner } = useRoomInfoStore();
 	const { roomId } = useParams<{ roomId: string }>();
-	const [isOwner, setIsOwner] = useState(true);
 
 	const userInfo = UserInfoStore();
 
 	useEffect(() => {
 		fetchRoomInfo();
-	}, [roomId, userInfo.email]);
+	}, [roomId, chatMemberResponses, owner]);
 
 	const fetchRoomInfo = async () => {
 		try {
-			const response = await fetch(`http://localhost:8002/chatroom-service/rooms/${roomId}`, {
-				method: 'GET',
-			});
-			const data: RoomInfo = await response.json();
-			setRoomInfo(data);
-			setIsOwner(userInfo.email === data.owner);
-		} catch (error) {
-			console.error('Error fetching room info:', error);
+			// const response = await fetch(`http://localhost:8002/chatroom-service/rooms/${roomId}`, {
+			// 	method: 'GET',
+			// });
+			// const data = await response.json();
+			// setRoomInfo(data);
+			// setIsOwner(userInfo.email === data.owner);
+
 			// test 더미데이터
 			setRoomInfo({
 				roomName: 'Sample Room',
 				participation: 3,
 				owner: 'John Doe',
 				chatMemberResponses: [{ username: 'Alice' }, { username: 'Bob' }, { username: 'Charlie' }],
 			});
+		} catch (error) {
+			console.error('Error fetching room info:', error);
 		}
 	};
 
 	return (
 		<ChatRoomInfoWrapper>
 			<UpWrapper>
-				{roomInfo && (
-					<RoomName roomName={roomInfo.roomName} participation={roomInfo.participation} />
-				)}
+				<RoomName />
 			</UpWrapper>
 			<DownWrapper>
-				{roomInfo && (
-					<RoomMember
-						owner={roomInfo.owner}
-						chatMemberResponses={roomInfo.chatMemberResponses}
-						isOwner={isOwner}
-					/>
-				)}
+				<RoomMember />
 			</DownWrapper>
 		</ChatRoomInfoWrapper>
 	);

frontend/src/components/chatRoomInfo/Member.tsx

@@ -1,17 +1,18 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
 import KickBtn from './KickBtn';
 import ChangeBtn from './ChangeBtn';
+import { useRoomInfoStore } from '../../stores/useRoomInfoStore';
+import { useParams } from 'react-router-dom';
 
 interface MemberProps {
 	username: string;
-	isOwner: boolean;
-	roomId: string;
 }
 
-const Member: React.FC<MemberProps> = ({ username, isOwner, roomId }) => {
-	const [isChangingOwner, setIsChangingOwner] = useState(false);
+const Member: React.FC<MemberProps> = ({ username }) => {
+	const { isOwner, setOwner, setChatMemberResponses } = useRoomInfoStore();
+	const { roomId } = useParams<{ roomId: string }>();
 
+	// 멤버 강퇴 함수
 	const handleKick = () => {
 		if (isOwner) {
 			const apiUrl = `/chatroom-service/rooms/${roomId}/kicked/${username}`;
@@ -22,6 +23,8 @@ const Member: React.FC<MemberProps> = ({ username, isOwner, roomId }) => {
 					if (!response.ok) {
 						throw new Error('Failed to kick member');
 					}
+					// 강퇴 후 리렌더링
+					setChatMemberResponses([]);
 				})
 				.catch((error) => {
 					console.error('Error kicking member:', error);
@@ -31,8 +34,8 @@ const Member: React.FC<MemberProps> = ({ username, isOwner, roomId }) => {
 		}
 	};
 
+	// 방장 변경 함수
 	const handleChangeOwner = () => {
-		setIsChangingOwner(true);
 		const apiUrl = `/chatroom-service/rooms/${roomId}/change-owner/${username}`;
 		fetch(apiUrl, {
 			method: 'PATCH',
@@ -41,12 +44,11 @@ const Member: React.FC<MemberProps> = ({ username, isOwner, roomId }) => {
 				if (!response.ok) {
 					throw new Error('Failed to change owner');
 				}
+				// 강퇴 후 리렌더링
+				setOwner(username);
 			})
 			.catch((error) => {
 				console.error('Error changing owner:', error);
-			})
-			.finally(() => {
-				setIsChangingOwner(false);
 			});
 	};
 

frontend/src/components/chatRoomInfo/RoomMember.tsx

@@ -1,20 +1,17 @@
 import styled from '@emotion/styled';
 import Member from './Member';
+import { useRoomInfoStore } from '../../stores/useRoomInfoStore';
 
-interface RoomMemberProps {
-	owner: string;
-	isOwner: boolean;
-	chatMemberResponses: { username: string }[];
-}
+const RoomMember: React.FC = () => {
+	const { owner, chatMemberResponses } = useRoomInfoStore();
 
-const RoomMember: React.FC<RoomMemberProps> = ({ owner, isOwner, chatMemberResponses }) => {
 	return (
 		<RoomMemberWrapper>
 			<OwnerWrapper>방장 : {owner}</OwnerWrapper>
 			<TitleWrapper>팀원</TitleWrapper>
 			<MemberList>
 				{chatMemberResponses.map((member, index) => (
-					<Member key={index} username={member.username} isOwner={isOwner} roomId={'1'} />
+					<Member key={index} username={member.username} />
 				))}
 			</MemberList>
 		</RoomMemberWrapper>

frontend/src/components/chatRoomInfo/RoomName.tsx

@@ -1,11 +1,9 @@
 import styled from '@emotion/styled';
+import { useRoomInfoStore } from '../../stores/useRoomInfoStore';
 
-interface RoomNameProps {
-	roomName: string;
-	participation: number;
-}
+const RoomName: React.FC = () => {
+	const { roomName, participation } = useRoomInfoStore();
 
-const RoomName: React.FC<RoomNameProps> = ({ roomName, participation }) => {
 	return (
 		<RoomNameWrapper>
 			<NameWrapper>{roomName}</NameWrapper>

frontend/src/stores/useRoomInfoStore.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+
+interface RoomInfoState {
+	roomName: string;
+	participation: number;
+	owner: string;
+	isOwner: boolean;
+	chatMemberResponses: { username: string }[];
+	setRoomInfo: (info: Partial<RoomInfoState>) => void;
+	setIsOwner: (isOwner: boolean, newOwner?: string) => void;
+	setOwner: (owner: string) => void;
+	setChatMemberResponses: (responses: { username: string }[]) => void;
+}
+
+export const useRoomInfoStore = create<RoomInfoState>((set) => ({
+	roomName: '',
+	participation: 0,
+	owner: '',
+	isOwner: false,
+	chatMemberResponses: [],
+	setRoomInfo: (info) => set((state) => ({ ...state, ...info })),
+	setIsOwner: (isOwner, newOwner) =>
+		set((state) => ({
+			isOwner,
+			owner: newOwner || state.owner,
+		})),
+	setOwner: (owner) => set({ owner }),
+	setChatMemberResponses: (responses) => set({ chatMemberResponses: responses }),
+}));