diff --git a/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx b/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx index a58bdd5..fef23c6 100644 --- a/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx +++ b/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx @@ -1,39 +1,30 @@ -// 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(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', @@ -41,24 +32,18 @@ const ChatRoomInfo: React.FC = () => { owner: 'John Doe', chatMemberResponses: [{ username: 'Alice' }, { username: 'Bob' }, { username: 'Charlie' }], }); + } catch (error) { + console.error('Error fetching room info:', error); } }; return ( - {roomInfo && ( - - )} + - {roomInfo && ( - - )} + ); diff --git a/frontend/src/components/chatRoomInfo/Member.tsx b/frontend/src/components/chatRoomInfo/Member.tsx index c3314b8..c09cb97 100644 --- a/frontend/src/components/chatRoomInfo/Member.tsx +++ b/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 = ({ username, isOwner, roomId }) => { - const [isChangingOwner, setIsChangingOwner] = useState(false); +const Member: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ 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); }); }; diff --git a/frontend/src/components/chatRoomInfo/RoomMember.tsx b/frontend/src/components/chatRoomInfo/RoomMember.tsx index 0d0c636..c16fee2 100644 --- a/frontend/src/components/chatRoomInfo/RoomMember.tsx +++ b/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 = ({ owner, isOwner, chatMemberResponses }) => { return ( 방장 : {owner} 팀원 {chatMemberResponses.map((member, index) => ( - + ))} diff --git a/frontend/src/components/chatRoomInfo/RoomName.tsx b/frontend/src/components/chatRoomInfo/RoomName.tsx index 17f1fbf..13c40a3 100644 --- a/frontend/src/components/chatRoomInfo/RoomName.tsx +++ b/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 = ({ roomName, participation }) => { return ( {roomName} diff --git a/frontend/src/stores/RoomInfoStore.ts b/frontend/src/stores/RoomInfoStore.ts deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/stores/useRoomInfoStore.ts b/frontend/src/stores/useRoomInfoStore.ts new file mode 100644 index 0000000..b9ce09a --- /dev/null +++ b/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) => void; + setIsOwner: (isOwner: boolean, newOwner?: string) => void; + setOwner: (owner: string) => void; + setChatMemberResponses: (responses: { username: string }[]) => void; +} + +export const useRoomInfoStore = create((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 }), +}));