From fe852ba2d4a1be1dbb0470f4ffabee95390720fd Mon Sep 17 00:00:00 2001 From: LBang98 Date: Mon, 9 Sep 2024 16:49:25 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B1=84=ED=8C=85/=EC=B4=88=EB=8C=80=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/friend-list/Friend.css | 18 +-- src/components/friend-list/FriendList.js | 139 +++++++++++++---------- src/components/game/FriendFrom.js | 74 ++++++++++++ src/components/game/FriendTo.js | 105 +++++++++++++++++ src/components/game/Lobby.js | 87 ++++++++++++-- 5 files changed, 345 insertions(+), 78 deletions(-) create mode 100644 src/components/game/FriendFrom.js create mode 100644 src/components/game/FriendTo.js diff --git a/src/components/friend-list/Friend.css b/src/components/friend-list/Friend.css index c5d80be..5e6cc36 100644 --- a/src/components/friend-list/Friend.css +++ b/src/components/friend-list/Friend.css @@ -4,7 +4,7 @@ .button { padding: 10px 20px; - background-color: #007bff; + background-color: #dca371; color: white; border: none; border-radius: 5px; @@ -12,7 +12,7 @@ } .button:hover { - background-color: #0056b3; + background-color: #dd8b44; } .friend-list { @@ -41,19 +41,20 @@ padding: 20px; border: 2px solid #ddd; border-radius: 10px; - background-color: #f0f0f5; /* 더 부드러운 배경색 */ + background-color: #f4d3a1; /* 더 부드러운 배경색 */ } .chat-room h3{ color: black; } .chat-messages { + width: 400px; height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; - background-color: white; /* 메시지 영역 배경 흰색 */ + background-color: #efe9e3; /* 메시지 영역 배경 흰색 */ border-radius: 10px; } @@ -86,12 +87,13 @@ .input { flex: 1; - padding: 12px; + padding: 8px; border: 1px solid #ddd; border-radius: 5px; outline: none; - font-size: 16px; + font-size: 14px; transition: border-color 0.3s; + width: 300px; } .input:focus { @@ -100,12 +102,12 @@ .send-button { padding: 10px 20px; - background-color: #28a745; + background-color: #8B6B4F; color: white; border: none; border-radius: 5px; cursor: pointer; - margin-left: 10px; + margin-left: 20px; transition: background-color 0.3s; } diff --git a/src/components/friend-list/FriendList.js b/src/components/friend-list/FriendList.js index 524f19a..0ca60e0 100644 --- a/src/components/friend-list/FriendList.js +++ b/src/components/friend-list/FriendList.js @@ -1,9 +1,8 @@ -import './Friend.css'; // CSS 파일을 불러옵니다 +import './Friend.css'; import apiAxiosInstance from '@/hooks/apiAxiosInstance'; import React, { useEffect, useRef, useState } from 'react'; import SockJS from 'sockjs-client'; import { Stomp } from "@stomp/stompjs"; -import InviteModal from '../game/InviteModal'; import Accept from "@/components/game/Accept"; // 초대 모달 컴포넌트 추가 export default function FriendList() { @@ -195,73 +194,87 @@ export default function FriendList() { return (
- <> - {!isChatRoom ? ( -
- + <> + {!isChatRoom ? ( +
+ - {showFriendList && ( // 친구 목록을 토글하여 표시 -
    - {friendList.map((item, idx) => ( -
  • - -
    • - ))} -
- )} + {showFriendList && ( // 친구 목록을 토글하여 표시 +
    + {friendList.map((item, idx) => ( +
  • + +
    • + ))} +
+ )} -
- ) : ( -
- -

{oneFriend.nickname}님과의 채팅

-
- {messages.map((msg, idx) => { - const isSender = msg.senderId === userData.user_id; - const friend = friendList.find(f => f.userId === (isSender ? msg.receiverId : msg.senderId)); - const displayName = isSender ? '나' : (friend ? friend.nickname : '알 수 없음'); - - return ( -
-

- {displayName}: {msg.content} -

-

{new Date(msg.timestamp).toLocaleTimeString()}

-
- ); - })}
+ ) : ( +
+ {/* X 버튼 추가 */} + + +

{oneFriend.nickname}님과의 채팅

+
+ {messages.map((msg, idx) => { + const isSender = msg.senderId === userData.user_id; + const friend = friendList.find(f => f.userId === (isSender ? msg.receiverId : msg.senderId)); + const displayName = isSender ? '나' : (friend ? friend.nickname : '알 수 없음'); + + return ( +
+

+ {displayName} : {msg.content} + + {new Date(msg.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})} + +

+
-
- { - if (e.key === 'Enter') { - sendMessage(e.target.value); - e.target.value = ''; // 입력란 비우기 - } - }} - className="input" - /> - + ); + })} +
+ +
+ { + if (e.key === 'Enter') { + sendMessage(e.target.value); + e.target.value = ''; // 입력란 비우기 + } + }} + className="input" + /> + +
-
- )} + )} - {/* 초대 모달 */} - - + {/* 초대 모달 */} + +
); + } diff --git a/src/components/game/FriendFrom.js b/src/components/game/FriendFrom.js new file mode 100644 index 0000000..bef9da2 --- /dev/null +++ b/src/components/game/FriendFrom.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; +import Button from "@mui/material/Button"; + +const FriendFrom = ({ open, onClose, senderNickname }) => { + + + + return ( + + + 친구 요청 + + + + 친구 요청을 보냈습니다. + + + + + + + + ); +}; + +export default FriendFrom; diff --git a/src/components/game/FriendTo.js b/src/components/game/FriendTo.js new file mode 100644 index 0000000..7f2a9ca --- /dev/null +++ b/src/components/game/FriendTo.js @@ -0,0 +1,105 @@ +"use client"; +import React from 'react'; +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; +import Button from "@mui/material/Button"; +import apiAxiosInstance from "@/hooks/apiAxiosInstance"; + +const FriendTo = ({ open, onClose, userId, friendId, senderNickname }) => { // handleAcceptInvite 받아오기 + + + const acceptInvite = async () => { + try { + // 친구 요청 수락 API 호출 + const response = await apiAxiosInstance.put(`/friend/add/${userId}/${friendId}`); + console.log('친구 추가 성공:', response.data); + onClose(); // 모달 닫기 + } catch (error) { + console.log("1" + userId + "2" + friendId); + console.error('친구 추가 실패:', error); + } + }; + + return ( + + + 친구 수락 + + + + {senderNickname}님이 친구요청을 보냈습니다. +
+ 수락하시겠습니까? + + + + + + + + ); +}; + +export default FriendTo; diff --git a/src/components/game/Lobby.js b/src/components/game/Lobby.js index f7622b5..b5ee312 100644 --- a/src/components/game/Lobby.js +++ b/src/components/game/Lobby.js @@ -12,6 +12,8 @@ import Modal from "@/components/game/Modal"; import InviteModal from "@/components/game/InviteModal"; import apiAxiosInstance from "@/hooks/apiAxiosInstance"; import InforModal from "@/components/game/InforModal"; +import FriendTo from "@/components/game/FriendTo"; +import FriendFrom from "@/components/game/FriendFrom"; const characters = [ {id: 1, src: '/image/character/bear.png', alt: 'Character 1'}, @@ -63,8 +65,12 @@ const Lobby = () => { const [selectedUserId, setSelectedUserId] = useState(null); // 선택된 유저 ID 저장 const [selectedUserNickname, setSelectedUserNickname] = useState(null); // 선택된 유저 닉네임 저장 + const [senderNickname, setSenderNickname] = useState(''); // 친구 요청을 보낸 유저 닉네임 + const [isFriendFromModalOpen, setIsFriendFromModalOpen] = useState(false); // 친구 추가 요청 모달 상태 + const [isFriendToModalOpen, setIsFriendToModalOpen] = useState(false); // 친구 요청 받은 모달 상태 + const [receiver, setReciver] = useState(''); // 친구 요청을 보낸 유저 닉네임 + const [sender, setSender] = useState(''); // 친구 요청을 보낸 유저 닉네임 - console.log(messages); async function getUserData(jwt) { try { @@ -310,6 +316,52 @@ const Lobby = () => { }; +// 친구 추가 요청 보내기 + const handleSendFriendRequest = (user_id) => { + if (client && client.connected) { + client.send(`/app/chat.friendRequest/${user_id}`, {}, JSON.stringify({ + sender: userData.user_id, + receiver: user_id, + type: 'FRIEND_REQUEST', + nickname: userData.nickname, // 친구 요청 보낸 사람의 닉네임 + })); + } + setIsFriendFromModalOpen(true); // 모달 닫기 + }; + + + + useEffect(() => { + if (client && userData) { + client.subscribe(`/topic/friendRequest/${userData.user_id}`, (message) => { + const parsedMessage = JSON.parse(message.body); + console.log('Received dddd:', parsedMessage); // 수신된 메시지 확인 + + if (parsedMessage.type === 'FRIEND_REQUEST') { + console.log("Setting modal state to true"); // 상태 업데이트 확인 + setSenderNickname(parsedMessage.nickname); + setSender(parsedMessage.sender) + setReciver(parsedMessage.receiver) + setIsFriendToModalOpen(true); // 친구 요청 받은 모달 열기 + } + }); + } + }, [client, userData]); + + + + // 친구 추가 요청 수락 로직 구현 + const handleAcceptInvite = (userId) => { + if (client && client.connected) { + client.send(`/app/chat.acceptFriend/${roomId}`, {}, JSON.stringify({ + sender: userData.user_id, + receiver: userId, // 수락한 유저 ID를 전송 + type: 'ACCEPT_FRIEND', + })); + } + setIsFriendToModalOpen(false); // 모달 닫기 + }; + useEffect(() => { if (chatMessagesRef.current) { chatMessagesRef.current.scrollTop = chatMessagesRef.current.scrollHeight; @@ -351,7 +403,6 @@ const Lobby = () => { }; const handleInforClick = (user_id) => { - console.log("usss"+ user_id); setSelectedUserId(user_id); setIsInforModalOpen(true); }; @@ -456,8 +507,6 @@ const Lobby = () => { // 순서를 유지한 채로 playersData를 사용 setOrder(playersData); // 순서대로 저장된 정보를 그대로 사용 setShowGameResult(true); // 결과 화면 표시 - } else if (message.type === 'END_GAME') { - // setShowYutPan(true); } }; @@ -504,6 +553,27 @@ const Lobby = () => { userId={selectedUserId} // userId만 전달 /> + {/* 친구 추가 요청 모달 (보낸 사람) */} + setIsFriendFromModalOpen(false)} + onSendRequest={() => handleSendFriendRequest(selectedUserId)} + senderNickname={senderNickname} + /> + + {/* 친구 추가 요청 모달 (받은 사람) */} + setIsFriendToModalOpen(false)} + senderNickname={senderNickname} + userId={receiver} // 수신자의 ID + friendId={sender} // 친구 요청을 보낸 사람의 ID + /> + + + + +

{roomName} {players.length}/4

{player.user_id != userData.user_id && ( // 친구 추가 버튼은 자신에게 보이지 않게 설정 - + )}
)}