💄 Design: 상점 화면 UI 수정(LikeLion-12th-SKHU#34)

SuKyeong2002 · Sep 26, 2024 · 1e09fe3 · 1e09fe3
1 parent 309f2bb
commit 1e09fe3
Show file tree

Hide file tree

Showing 14 changed files with 719 additions and 334 deletions.
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "moodfriend-app",
   "version": "0.1.0",
   "private": true,
+  "proxy": "https://kapi.kakao.com",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",

diff --git a/src/pages/objects/Flooring.jsx b/src/pages/objects/Flooring.jsx
@@ -205,19 +205,35 @@ const Floor = styled.div`
   position: absolute;
   bottom: 0;
   left: 0;
-  z-index: 1;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    height: 35%;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    height: 33%;
+  }
 `;
 
 const Circular = styled.img`
-  width: 120px;
-  height: 40px;
   border-radius: 50%;
   background-color: ${(props) => props.theme.color.greenColor};
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
-  bottom: 75px;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    width: 120px;
+    height: 45px;
+    bottom: 80px;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    width: 110px;
+    height: 40px;
+    bottom: 60px;
+  }
 `;
 
 const FloorInterior = styled.div`
@@ -236,10 +252,20 @@ const RightFloorObj = styled.img`
 `;
 
 const Character = styled.img`
-  width: 70px;
-  height: 80px;
   position: absolute;
-  bottom: 115px;
+  z-index: 1;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    width: 70px;
+    height: 80px;
+    bottom: 100px;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    width: 60px;
+    height: 70px;
+    bottom: 80px;
+  }
 `;
 
 const ObjItems = styled.div`

diff --git a/src/pages/objects/Furniture.jsx b/src/pages/objects/Furniture.jsx
@@ -205,19 +205,35 @@ const Floor = styled.div`
   position: absolute;
   bottom: 0;
   left: 0;
-  z-index: 1;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    height: 35%;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    height: 33%;
+  }
 `;
 
 const Circular = styled.img`
-  width: 120px;
-  height: 40px;
   border-radius: 50%;
   background-color: ${(props) => props.theme.color.greenColor};
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
-  bottom: 75px;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    width: 120px;
+    height: 45px;
+    bottom: 80px;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    width: 110px;
+    height: 40px;
+    bottom: 60px;
+  }
 `;
 
 const FloorInterior = styled.div`
@@ -236,10 +252,20 @@ const RightFloorObj = styled.img`
 `;
 
 const Character = styled.img`
-  width: 70px;
-  height: 80px;
   position: absolute;
-  bottom: 115px;
+  z-index: 1;
+
+  @media (max-width: 430px) and (max-height: 932px) {
+    width: 70px;
+    height: 80px;
+    bottom: 100px;
+  }
+
+  @media (max-width: 360px) and (max-height: 780px) {
+    width: 60px;
+    height: 70px;
+    bottom: 80px;
+  }
 `;
 
 const ObjItems = styled.div`