Fe feat/issue 132 (#136)

* Feat: icon 추가

* Feat: KickBtn 스켈레톤 완료

* Feat: Change Owner Btn 스캘레톤 코

frontend/package.json

@@ -21,6 +21,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-icon": "^1.0.0",
+		"react-icons": "^5.0.1",
 		"react-router-dom": "^6.22.0",
 		"react-toastify": "^10.0.4",
 		"simple-peer": "^9.11.1",
@@ -47,6 +48,6 @@
 		"eslint-plugin-react-refresh": "^0.4.5",
 		"prettier": "^3.2.5",
 		"typescript": "^5.3.3",
-		"vite": "^5.1.2"
+		"vite": "^5.1.3"
 	}
 }

frontend/src/components/chatRoomInfo/ChangeBtn.tsx

@@ -0,0 +1,11 @@
+import { MdPublishedWithChanges } from 'react-icons/md';
+
+interface ChangeBtnProps {
+	onClick: () => void;
+}
+
+const ChangeBtn: React.FC<ChangeBtnProps> = ({ onClick }) => {
+	return <MdPublishedWithChanges onClick={onClick} />;
+};
+
+export default ChangeBtn;

frontend/src/components/chatRoomInfo/ChatRoomInfo.tsx

@@ -1,7 +1,10 @@
+// ChatRoomInfo.tsx
 import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import RoomName from './RoomName';
 import RoomMember from './RoomMember';
+import { UserInfoStore } from '../../stores/UserInfoStore';
 
 interface RoomInfo {
 	roomName: string;
@@ -12,27 +15,32 @@ interface RoomInfo {
 
 const ChatRoomInfo: React.FC = () => {
 	const [roomInfo, setRoomInfo] = useState<RoomInfo | null>(null);
+	const { roomId } = useParams<{ roomId: string }>();
+	const [isOwner, setIsOwner] = useState(true);
+
+	const userInfo = UserInfoStore();
 
 	useEffect(() => {
 		fetchRoomInfo();
-	}, []);
+	}, [roomId, userInfo.email]);
 
 	const fetchRoomInfo = async () => {
 		try {
-			const response = await fetch('http://localhost:8002/chatroom-service/rooms/1', {
+			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);
 			// test 더미데이터
-			// setRoomInfo({
-			// 	roomName: 'Sample Room',
-			// 	participation: 3,
-			// 	owner: 'John Doe',
-			// 	chatMemberResponses: [{ username: 'Alice' }, { username: 'Bob' }, { username: 'Charlie' }],
-			// });
+			setRoomInfo({
+				roomName: 'Sample Room',
+				participation: 3,
+				owner: 'John Doe',
+				chatMemberResponses: [{ username: 'Alice' }, { username: 'Bob' }, { username: 'Charlie' }],
+			});
 		}
 	};
 
@@ -45,7 +53,11 @@ const ChatRoomInfo: React.FC = () => {
 			</UpWrapper>
 			<DownWrapper>
 				{roomInfo && (
-					<RoomMember owner={roomInfo.owner} chatMemberResponses={roomInfo.chatMemberResponses} />
+					<RoomMember
+						owner={roomInfo.owner}
+						chatMemberResponses={roomInfo.chatMemberResponses}
+						isOwner={isOwner}
+					/>
 				)}
 			</DownWrapper>
 		</ChatRoomInfoWrapper>

frontend/src/components/chatRoomInfo/KickBtn.tsx

@@ -0,0 +1,11 @@
+import { FiMinusCircle } from 'react-icons/fi';
+
+interface KickBtnProps {
+	onClick: () => void;
+}
+
+const KickBtn: React.FC<KickBtnProps> = ({ onClick }) => {
+	return <FiMinusCircle onClick={onClick} />;
+};
+
+export default KickBtn;

frontend/src/components/chatRoomInfo/Member.tsx

@@ -1,15 +1,60 @@
 import styled from '@emotion/styled';
+import { useState } from 'react';
+import KickBtn from './KickBtn';
+import ChangeBtn from './ChangeBtn';
 
 interface MemberProps {
 	username: string;
+	isOwner: boolean;
+	roomId: string;
 }
 
-const Member: React.FC<MemberProps> = ({ username }) => {
+const Member: React.FC<MemberProps> = ({ username, isOwner, roomId }) => {
+	const [isChangingOwner, setIsChangingOwner] = useState(false);
+
+	const handleKick = () => {
+		if (isOwner) {
+			const apiUrl = `/chatroom-service/rooms/${roomId}/kicked/${username}`;
+			fetch(apiUrl, {
+				method: 'POST',
+			})
+				.then((response) => {
+					if (!response.ok) {
+						throw new Error('Failed to kick member');
+					}
+				})
+				.catch((error) => {
+					console.error('Error kicking member:', error);
+				});
+		} else {
+			console.log('You are not the owner. Cannot kick member.');
+		}
+	};
+
+	const handleChangeOwner = () => {
+		setIsChangingOwner(true);
+		const apiUrl = `/chatroom-service/rooms/${roomId}/change-owner/${username}`;
+		fetch(apiUrl, {
+			method: 'PATCH',
+		})
+			.then((response) => {
+				if (!response.ok) {
+					throw new Error('Failed to change owner');
+				}
+			})
+			.catch((error) => {
+				console.error('Error changing owner:', error);
+			})
+			.finally(() => {
+				setIsChangingOwner(false);
+			});
+	};
+
 	return (
 		<MemberWrapper>
-			<KickWrapper> - </KickWrapper>
+			<KickWrapper>{isOwner && <KickBtn onClick={handleKick} />}</KickWrapper>
 			<MemberName>{username}</MemberName>
-			<ChangeOwner> + </ChangeOwner>
+			<ChangeOwner>{isOwner && <ChangeBtn onClick={handleChangeOwner} />}</ChangeOwner>
 		</MemberWrapper>
 	);
 };

frontend/src/components/chatRoomInfo/RoomMember.tsx

@@ -3,17 +3,18 @@ import Member from './Member';
 
 interface RoomMemberProps {
 	owner: string;
+	isOwner: boolean;
 	chatMemberResponses: { username: string }[];
 }
 
-const RoomMember: React.FC<RoomMemberProps> = ({ owner, chatMemberResponses }) => {
+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} />
+					<Member key={index} username={member.username} isOwner={isOwner} roomId={'1'} />
 				))}
 			</MemberList>
 		</RoomMemberWrapper>