feat: 디자인 추가

Author: whale22

public/pets/PET_BACK.jpg

@@ -1,6 +1,7 @@
 /* 전체 배경 설정 */
 body {
-  background-color: rgb(63, 178, 127);
+  /*background-color: rgb(63, 178, 127);*/
+  background: #f2f3b1;
   margin: 0;
   display: flex;
   justify-content: center;
@@ -24,6 +25,10 @@ body {
   background-color: white;
   border-radius: 10px;
   overflow: hidden;
+  background-image: url('/pets/PET_BACK_5.png');
+  background-size: 800px auto; /* 가로 1000px, 세로는 비율 유지 */
+  background-repeat: no-repeat; /* 배경 반복 제거 */
+  background-position: center; /* 가운데 정렬 */
 }
 
 /* 펫을 감싸는 div */

public/pets/PET_BACK_1.png

@@ -33,7 +33,7 @@ const Pets = () => {
 const Pet = ({ src }) => {
   const getRandomPosition = () => ({
     x: Math.random() * 600 + 100,
-    y: Math.random() * 400 + 100,
+    y: Math.random() * 200 + 200,
   });
 
   const [position, setPosition] = useState(getRandomPosition());