Merge pull request #136 from 2024WISCOM/feature/guestbook

💄 GuestBook UI 여백,from update
2024WISCOM · Oct 26, 2024 · 415828c · 415828c
2 parents f86d6eb + 673c49e
commit 415828c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/src/components/guestBook/MessageCard.style.js b/src/components/guestBook/MessageCard.style.js
@@ -79,13 +79,13 @@ export const FromText = styled.p`
   @media (max-width: 768px) {
     font-size: 0.7em; 
     margin-right: 2%; 
-    bottom: -50%;
+    bottom: -55%;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
     font-size: 1.1em;
     right: 8%;
-    bottom:15%;
+    bottom:12%;
   }
 
 `;

diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
@@ -9,26 +9,20 @@ export const Container = styled.div`
   margin: 0 auto;
   padding: 0 10%;
   position: relative;
-  height:85vh;
+  height:600px;
 
 
   @media (max-width: 768px) {
     width: 100%;
     flex-direction: column;
     align-items: center;
     padding: 0 2%;
-    height:0%;
+    height:auto;
   }
     
 
-  @media (min-width: 769px) and (max-width: 1237px) {
-    width:100%;
-    padding: 0 10%;
-    height:100vh;
-  }
-
     @media (min-width: 1025px) and (max-width: 1236px) {
-      height:75vh;
+      height:500px;
   }
 `;
 
@@ -140,7 +134,7 @@ export const Label = styled.label`
 
   &.from-label {
     bottom: 5%;
-    right: -30%;
+    right: ${({ length }) => `${Math.min(-130+length * 5, 30)}px`};
   }
 
   @media (max-width: 768px) {
@@ -153,7 +147,7 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
-      right: -17%;
+      right:${({ length }) => `${-60+Math.min(length * 3, 20)}px`};
     }
   }
 
@@ -165,7 +159,9 @@ export const Label = styled.label`
     }
 
     &.from-label {
-      bottom: 5%;
+    
+      bottom:5%;
+      right:${({ length }) => `${-90+Math.min(length * 4, 25)}px`}; 
     }
   }
 `;
@@ -249,19 +245,20 @@ export const ButtonContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   position: absolute;
-  bottom: 3%;
+  bottom: 20px;
   left: 0;
   right: 0;
   margin: 0 1%;
 
   @media (max-width: 768px) {
+  position: relative;
     width: 100%;
-    top: calc(100% - 0%);
-    margin-top:5%;
+    top: 50px;
+    // margin-top:20px;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    top: calc(100% - 230px);
+    top: 400px;
     gap: 5%;
   }
 `;