채팅/초대완료

Joseonpaldo · Sep 9, 2024 · fe852ba · fe852ba
1 parent e8a7c9e
commit fe852ba
Show file tree

Hide file tree

Showing 5 changed files with 345 additions and 78 deletions.
diff --git a/src/components/friend-list/Friend.css b/src/components/friend-list/Friend.css
@@ -4,15 +4,15 @@
 
 .button {
   padding: 10px 20px;
-  background-color: #007bff;
+  background-color: #dca371;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .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
@@ -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 (
     <div style={{position:'absolute', bottom:'0'}}>
-    <>
-      {!isChatRoom ? (
-        <div className="friend-list-container">
-          <button onClick={toggleFriendList} className="button">친구 목록 보기</button>
+      <>
+        {!isChatRoom ? (
+          <div className="friend-list-container">
+            <button onClick={toggleFriendList} className="button">친구 목록</button>
 
-          {showFriendList && ( // 친구 목록을 토글하여 표시
-            <ul className="friend-list">
-            {friendList.map((item, idx) => (
-              <li key={idx} className="friend-list-item">
-                <button onClick={() => friendButton(item)} className="friend-button">
-                  {item.userId} : {item.nickname}
-                </button>
-              </li>
-            ))}
-          </ul>
-          )}
+            {showFriendList && ( // 친구 목록을 토글하여 표시
+              <ul className="friend-list">
+                {friendList.map((item, idx) => (
+                  <li key={idx} className="friend-list-item">
+                    <button onClick={() => friendButton(item)} className="friend-button">
+                      {item.userId} : {item.nickname}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
 
-        </div>
-      ) : (
-        <div className="chat-room">
-          <button onClick={() => setIsChatRoom(false)} className="button">친구 목록으로 돌아가기</button>
-          <h3>{oneFriend.nickname}님과의 채팅</h3>
-          <div className="chat-messages" ref={chatMessagesRef} style={{ maxHeight: '400px', overflowY: 'auto' }}>
-            {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 (
-                <div key={idx} style={{ textAlign: isSender ? 'right' : 'left' }}>
-                  <p style={{ color: 'black' }}>
-                    <strong>{displayName}:</strong> {msg.content}
-                  </p>
-                  <p style={{ fontSize: '12px', color: 'gray' }}>{new Date(msg.timestamp).toLocaleTimeString()}</p>
-                </div>
-              );
-            })}
           </div>
+        ) : (
+          <div className="chat-room">
+            {/* X 버튼 추가 */}
+            <button onClick={() => setIsChatRoom(false)} className="close-button" style={{
+              position: 'absolute',
+              top: '10px',
+              right: '10px',
+              background: 'none',
+              border: 'none',
+              fontSize: '24px',
+              cursor: 'pointer'
+            }}>✕</button>
+
+            <h3>{oneFriend.nickname}님과의 채팅</h3>
+            <div className="chat-messages" ref={chatMessagesRef} style={{ maxHeight: '400px', overflowY: 'auto' }}>
+              {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 (
+                  <div key={idx} style={{textAlign: isSender ? 'right' : 'left'}}>
+                    <p style={{color: 'black'}}>
+                      <strong>{displayName} :</strong> {msg.content}
+                      <span style={{fontSize: '10px', color: 'gray', marginLeft: '10px'}}>
+                       {new Date(msg.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}
+                      </span>
+                    </p>
+                  </div>
 
-          <div className="chat-input">
-            <input
-              type="text"
-              placeholder="메시지를 입력하세요"
-              onKeyPress={(e) => {
-                if (e.key === 'Enter') {
-                  sendMessage(e.target.value);
-                  e.target.value = ''; // 입력란 비우기
-                }
-              }}
-              className="input"
-            />
-            <button onClick={() => sendMessage(document.querySelector('.chat-input input').value)} className="send-button">
-              전송
-            </button>
+                );
+              })}
+            </div>
+
+            <div className="chat-input">
+              <input
+                type="text"
+                placeholder="Type your message..."
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    sendMessage(e.target.value);
+                    e.target.value = ''; // 입력란 비우기
+                  }
+                }}
+                className="input"
+              />
+              <button onClick={() => sendMessage(document.querySelector('.chat-input input').value)} className="send-button">
+                전송
+              </button>
+            </div>
           </div>
-        </div>
-      )}
+        )}
 
-      {/* 초대 모달 */}
-      <Accept
-        open={isInviteModalOpen}
-        onClose={handleCloseInviteModal}
-        inviter={inviter}
-        onAccept={handleAcceptInvite}
-        roomId={inviteRoomId}
-      />
-    </>
+        {/* 초대 모달 */}
+        <Accept
+          open={isInviteModalOpen}
+          onClose={handleCloseInviteModal}
+          inviter={inviter}
+          onAccept={handleAcceptInvite}
+          roomId={inviteRoomId}
+        />
+      </>
     </div>
   );
+
 }
diff --git a/src/components/game/FriendFrom.js 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 (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby="invite-dialog-title"
+      aria-describedby="invite-dialog-description"
+      PaperProps={{
+        style: {
+          borderRadius: '15px',
+          padding: '20px',
+          backgroundColor: '#f7f9fc',
+          boxShadow: '0 5px 15px rgba(0, 0, 0, 0.3)',
+        },
+      }}
+    >
+      <DialogTitle
+        id="invite-dialog-title"
+        sx={{
+          textAlign: 'center',
+          color: '#ff6f61',
+          fontWeight: 'bold',
+          fontSize: '1.5rem',
+          borderBottom: '1px solid #ececec',
+          paddingBottom: '10px',
+        }}
+      >
+        친구 요청
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText
+          id="invite-dialog-description"
+          sx={{
+            textAlign: 'center',
+            color: '#333',
+            fontSize: '1.2rem',
+            margin: '20px 0',
+          }}
+        >
+          친구 요청을 보냈습니다.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: 'center' }}>
+
+        <Button
+          color="primary"
+          onClick={onClose}
+          variant="contained"
+          sx={{
+            backgroundColor: '#ff6f61',
+            color: '#fff',
+            '&:hover': {
+              backgroundColor: '#ff8a65',
+            },
+            padding: '8px 20px',
+            borderRadius: '25px',
+            fontWeight: 'bold',
+          }}
+        >
+          확인
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FriendFrom;