diff --git a/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx b/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx index 70dcdaa..a4234d5 100644 --- a/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx +++ b/frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx @@ -5,11 +5,14 @@ import RoomName from './RoomName'; import RoomMember from './RoomMember'; import { useRoomInfoStore } from '../../stores/useRoomInfoStore'; import { listDataProps } from '../../interface/UserListInterface'; +import { UserInfoStore } from '../../stores/UserInfoStore'; const ChatRoomInfo = ({ roomName }: listDataProps) => { - const { setRoomInfo, owner } = useRoomInfoStore(); + const { setRoomInfo, owner, fetchInitialRoomIn, setFetchInitialRoomIn } = useRoomInfoStore(); const { chatroom_id } = useParams(); const [refreshIntervalId, setRefreshIntervalId] = useState(); + const userInfo = UserInfoStore(); + const userId = userInfo.username; useEffect(() => { fetchRoomInfo(); @@ -20,6 +23,33 @@ const ChatRoomInfo = ({ roomName }: listDataProps) => { return () => clearInterval(intervalId); }, [chatroom_id, owner]); + useEffect(() => { + if (fetchInitialRoomIn) { + fetchRoomIn(); + console.log('ChatRoom 입장'); + setFetchInitialRoomIn(false); + console.log('ChatRoom 입장 API 1회 호출'); + fetchRoomInfo(); + } else { + console.log('ChatRoom 입장 API 호출 불가능'); + } + }, []); + + const fetchRoomIn = async () => { + try { + const apiUrl = `http://localhost:8002/chatroom-service/room-in/${chatroom_id}`; + fetch(apiUrl, { + method: 'POST', + body: JSON.stringify(userId), + headers: { + 'Content-Type': 'application/json', + }, + }); + } catch (error) { + console.error('Error fetching room in:', error); + } + }; + const fetchRoomInfo = async () => { try { const response = await fetch(`http://localhost:8002/chatroom-service/rooms/${chatroom_id}/roomInformation`, { diff --git a/frontend/src/stores/useRoomInfoStore.ts b/frontend/src/stores/useRoomInfoStore.ts index 6c94cd7..0e4fc30 100644 --- a/frontend/src/stores/useRoomInfoStore.ts +++ b/frontend/src/stores/useRoomInfoStore.ts @@ -5,10 +5,12 @@ interface RoomInfoState { participation: number; owner: string; kicked: boolean; + fetchInitialRoomIn: boolean; chatMemberResponses: { username: string }[]; setRoomInfo: (info: Partial) => void; setOwner: (owner: string) => void; setKicked: (kicked: boolean) => void; + setFetchInitialRoomIn: (fetchInitialRoomIn: boolean) => void; setChatMemberResponses: (responses: { username: string }[]) => void; } @@ -17,9 +19,11 @@ export const useRoomInfoStore = create((set) => ({ participation: 0, owner: '', kicked: false, + fetchInitialRoomIn: true, chatMemberResponses: [], setRoomInfo: (info) => set((state) => ({ ...state, ...info })), setOwner: (owner) => set({ owner }), setKicked: (kicked) => set({ kicked }), + setFetchInitialRoomIn: (fetchInitialRoomIn) => set({ fetchInitialRoomIn }), setChatMemberResponses: (responses) => set({ chatMemberResponses: responses }), }));