Merge pull request #73 from CommitField/dev

merge

Author: whale22

package-lock.json

@@ -14,6 +14,7 @@
  "@stomp/stompjs": "^7.0.0",
  "axios": "^1.8.1",
  "chart.js": "^4.4.8",
+ "framer-motion": "^12.4.11",
  "lucide-react": "^0.475.0",
  "react": "^19.0.0",
  "react-chartjs-2": "^5.3.0",

package.json

@@ -2,6 +2,7 @@
 import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Home from "./pages/Home";
+import Pets from "./pages/Pets";
 import ErrorPage from "./error/ErrorPage";
 import TestAPI from "./pages/TestAPI";
 import GithubLogin from "./components/GithubLogin";
@@ -23,6 +24,7 @@ function App() {
  <Routes>
  <Route path="/" element={<GithubLogin />} />
  <Route path="/home" element={<Home />} />
+ <Route path="/pets" element={<Pets />} />
  <Route path="/error" element={<ErrorPage />} />
  <Route path="/testapi" element={<TestAPI />} />
  <Route path="/protected" element={

src/App.jsx

@@ -166,15 +166,17 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
  });
  const userData = await userResponse.json();
 
- if (!userData || !userData.username) {
+ if (!userData || !userData.id) {
  throw new Error('사용자 정보를 가져올 수 없습니다.');
  }
 
  // 새 메시지 객체 생성
  const newMsg = {
  chatMsgId: `local-${Date.now()}`,
- userId: userData.username,
+ userId: userData.id,
+ username: userData.username,
  nickname: userData.nickname || userData.username,
+ avatarUrl: userData.avatarUrl, // 프로필 이미지 URL 추가
  message: messageText,
  sendAt: new Date().toISOString()
  };
@@ -186,6 +188,7 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
  const wsSuccess = await webSocketService.sendMessage(
  roomIdInt,
  messageText,
+ userData.id,
  userData.username,
  userData.nickname || userData.username
  );
@@ -289,12 +292,12 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
  });
  const userData = await response.json();
 
- if (!userData || !userData.username) {
+ if (!userData || !userData.id) {
  throw new Error('사용자 정보를 가져올 수 없습니다.');
  }
 
  setUserInfo({
- id: userData.username,
+ id: userData.id,
  nickname: userData.nickname || userData.username
  });
  } catch (err) {
@@ -304,73 +307,54 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
  }
  };
 
- // 웹소켓 메시지 핸들러 - 일반 웹소켓용
+ // 웹소켓 메시지 핸들러 수정
  const handleWebSocketMessage = (message) => {
  console.log('WebSocket message received:', message);
 
- // 시스템 메시지 처리
  if (message.type === 'SYSTEM' || message.type === 'SUBSCRIBE_ACK' || message.type === 'UNSUBSCRIBE_ACK') {
- // 시스템 메시지는 상태 표시만 하고 채팅에 추가하지 않음
- console.log('System/Control message:', message.message);
  return;
  }
 
- // 에러 메시지 처리
  if (message.type === 'ERROR') {
- console.error('WebSocket error message:', message.message);
- // alert(message.message || '채팅 오류가 발생했습니다.');
  return;
  }
 
- // 채팅방 ID 확인
- const messageRoomId = message.roomId ? parseInt(message.roomId) : null;
- if (messageRoomId && messageRoomId !== roomIdInt) {
- console.log('Message for different room ignored:', messageRoomId);
+ const messageRoomId = parseInt(message.roomId);
+ if (messageRoomId !== roomIdInt) {
  return;
  }
 
- // 메시지 형식 처리
- const newMessage = {
- chatMsgId: message.id || message.chatMsgId || Date.now(),
- userId: message.userId,
- nickname: message.from || message.nickname || '알 수 없는 사용자',
- message: message.message || message.content || '',
- sendAt: message.sendAt || new Date().toISOString()
- };
+ // 현재 사용자가 보낸 메시지인지 확인
+ if (message.isLocalMessage || parseInt(message.userId) === parseInt(userInfo.id)) {
+ console.log('Ignoring own message:', message);
+ return;
+ }
 
- // 중복 메시지 방지
  setMessages(prevMessages => {
- // 로컬 메시지 ID (local-*)로 시작하는 임시 메시지 대체
- const isLocalMessage = prevMessages.some(msg =>
- msg.chatMsgId?.toString().startsWith('local-') &&
- msg.message === newMessage.message &&
- msg.userId === newMessage.userId
+ // 중복 메시지 확인
+ const isDuplicate = prevMessages.some(msg => 
+ msg.chatMsgId === message.id ||
+ (msg.message === message.message &&
+ parseInt(msg.userId) === parseInt(message.userId) &&
+ Math.abs(new Date(msg.sendAt) - new Date(message.sendAt)) < 1000)
  );
 
- let updatedMessages;
- if (isLocalMessage) {
- // 임시 메시지를 서버 메시지로 대체
- updatedMessages = prevMessages.map(msg =>
- (msg.chatMsgId?.toString().startsWith('local-') &&
- msg.message === newMessage.message &&
- msg.userId === newMessage.userId)
- ? newMessage
- : msg
- );
- } else {
- // 이미 동일한 ID의 메시지가 있는지 확인
- const exists = prevMessages.some(msg =>
- msg.chatMsgId === newMessage.chatMsgId &&
- !msg.chatMsgId?.toString().startsWith('local-')
- );
-
- if (exists) return prevMessages;
- updatedMessages = [...prevMessages, newMessage];
+ if (isDuplicate) {
+ console.log('Duplicate message ignored:', message);
+ return prevMessages;
  }
 
- // 로컬 스토리지에 업데이트된 메시지 저장
- saveChatMessages(roomId, updatedMessages);
+ const newMessage = {
+ chatMsgId: message.id || Date.now(),
+ userId: parseInt(message.userId),
+ nickname: message.nickname || message.from || '알 수 없는 사용자',
+ avatarUrl: message.avatarUrl, // avatarUrl 추가
+ message: message.message,
+ sendAt: message.sendAt || new Date().toISOString()
+ };
 
+ const updatedMessages = [...prevMessages, newMessage];
+ saveChatMessages(roomId, updatedMessages);
  return updatedMessages;
  });
  };
@@ -655,7 +639,15 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
  className={`message ${msg.userId === userInfo.id ? 'sent' : 'received'} ${msg.failed ? 'failed' : ''}`}
  >
  <div className="avatar">
- {/* 실제 사용자 아바타가 있으면 추가 */}
+ {msg.avatarUrl ? (
+ <img 
+ src={msg.avatarUrl} 
+ alt={msg.nickname} 
+ className="user-avatar"
+ />
+ ) : (
+ <i className="fas fa-user"></i>
+ )}
  </div>
  <div className="content">
  <div className="sender">{msg.nickname}</div>

src/components/ChatRoom.jsx

@@ -603,6 +603,17 @@
  overflow: hidden;
 }
 
+.message .avatar img.user-avatar {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.message .avatar i.fa-user {
+ font-size: 20px;
+ color: #fff;
+}
+
 .message.sent .avatar {
  display: none;
 }

src/components/ChatStyles.css

@@ -0,0 +1,83 @@
+/* 전체 배경 설정 */
+body {
+ background-color: rgb(63, 178, 127);
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+/* 펫이 움직이는 공간 */
+.pets-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100vw;
+ height: 100vh;
+}
+
+.pets-container {
+ position: relative;
+ width: 800px;
+ height: 500px;
+ background-color: white;
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+/* 펫을 감싸는 div */
+.pet-wrapper {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+}
+
+/* 알이 0.8배~1배로 커졌다 작아지는 효과 */
+.pet-egg {
+ width: 100px;
+ height: 100px;
+ animation: egg-bounce 1.5s infinite ease-in-out alternate;
+}
+
+@keyframes egg-bounce {
+ 0% {
+ transform: scaleY(0.7);
+ }
+ 100% {
+ transform: scaleY(1);
+ }
+}
+
+.pets-wrapper {
+ position: relative; /* 하위 요소들이 절대적으로 위치할 수 있도록 설정 */
+}
+
+.pets-container {
+ position: relative;
+}
+
+.home-button-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px; /* 위쪽에 간격 추가 */
+ position: absolute;
+ bottom: 10px; /* 버튼을 하단에 고정 */
+ width: 100%; /* 버튼이 가로로 꽉 차도록 설정 */
+}
+
+.home-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: background-color 0.3s;
+ color:#111111;
+}
+
+.home-button:hover {
+ background-color: #f0f0f0;
+}