Merge branch 'dev' of https://github.com/CommitField/commitfield-front into check81

Author: skyeong42

package-lock.json

@@ -60,6 +60,7 @@ button {
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
+  color: #fefefe;
 }
 button:hover {
   border-color: #646cff;

src/index.css

@@ -168,26 +168,15 @@ useEffect(() => {
       newClient.subscribe(`/topic/notifications/${userInfo.username}`, (message) => {
         const notifications = JSON.parse(message.body);
 
-        // 배열인 경우 처리
-        if (Array.isArray(notifications)) {
-          // 각 알림을 상태에 추가
-          notifications.forEach(notification => {
-            setNotifications(prev => [{
-              id: notification.id,
-              message: notification.message,
-              createdAt: notification.formattedCreatedAt,
-              read: false
-            }, ...prev]);
-          });
-        } else {
-          // 단일 알림인 경우
+        // 각 알림을 상태에 추가
+        notifications.forEach(notification => {
           setNotifications(prev => [{
-            id: notifications.id,
-            message: notifications.message,
-            createdAt: notifications.formattedCreatedAt,
+            id: notification.id,
+            message: notification.message,
+            formattedCreatedAt: notification.formattedCreatedAt,
             read: false
           }, ...prev]);
-        }
+        });
 
         // 새 알림 표시
         setHasNewNotification(true);

src/pages/Home.jsx

@@ -81,3 +81,12 @@ body {
 .home-button:hover {
   background-color: #f0f0f0;
 }
+
+.heart {
+  position: absolute;
+  font-size: 24px;
+  color: red;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}

src/pages/Pets.css

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { useNavigate } from "react-router-dom";  // React Router 사용
+import { useNavigate } from "react-router-dom";
 import "./Pets.css";
 
 const Pets = () => {
   const [pets, setPets] = useState([]);
-  const navigate = useNavigate(); // 홈으로 돌아가기 함수
+  const navigate = useNavigate();
 
   useEffect(() => {
     fetch("/api/pets/getall")
@@ -21,7 +21,6 @@ const Pets = () => {
         ))}
       </div>
 
-      {/* 홈으로 돌아가기 버튼 추가 */}
       <div className="home-button-container">
         <button className="home-button" onClick={() => navigate("/home")}>
           홈으로 돌아가기
@@ -33,11 +32,12 @@ const Pets = () => {
 
 const Pet = ({ src }) => {
   const getRandomPosition = () => ({
-    x: Math.random() * 600 + 100, // 100 ~ 700 사이 랜덤 X 좌표
-    y: Math.random() * 400 + 100, // 100 ~ 500 사이 랜덤 Y 좌표
+    x: Math.random() * 600 + 100,
+    y: Math.random() * 400 + 100,
   });
 
   const [position, setPosition] = useState(getRandomPosition());
+  const [showHeart, setShowHeart] = useState(false);
 
   useEffect(() => {
     const movePet = () => {
@@ -48,14 +48,32 @@ const Pet = ({ src }) => {
     return () => clearInterval(interval);
   }, []);
 
+  const handlePetClick = () => {
+    setShowHeart(true);
+    setTimeout(() => setShowHeart(false), 1000); // 1초 후 사라지게 설정
+  };
+
   return (
     <motion.div
       className="pet-wrapper"
       initial={{ x: position.x, y: position.y }}
       animate={{ x: position.x, y: position.y }}
       transition={{ duration: 1.5, ease: "easeInOut" }}
+      onClick={handlePetClick}
     >
       <img className="pet-egg" src={src} alt="Pet" />
+
+      {/* ❤️ 하트 애니메이션 */}
+      {showHeart && (
+        <motion.div
+          className="heart"
+          initial={{ opacity: 1, y: -60 }}
+          animate={{ opacity: 0, y: -120 }}
+          transition={{ duration: 1, ease: "easeOut" }}
+        >
+          ❤️
+        </motion.div>
+      )}
     </motion.div>
   );
 };

src/pages/Pets.jsx

@@ -125,6 +125,10 @@ const handleGetNewPet = async () => {
     });
   };
 
+  useEffect(() => {
+    refreshProfileData();
+  }, [userInfo.tier, userInfo.petGrow]); // tier 또는 petGrow 값이 변경될 때 실행
+
   useEffect(() => {
     // userInfo.username이 없으면 WebSocket 연결 안 함
     if (!userInfo.username) {
@@ -161,6 +165,7 @@ const handleGetNewPet = async () => {
       console.error("WebSocket error:", error);
     });
 
+
     // WebSocket 클라이언트 저장
     setClient(newClient);