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

💄 Guest Book 요청사항 update
2024WISCOM · Oct 26, 2024 · 384ec1d · 384ec1d
2 parents a285a69 + 0759fed
commit 384ec1d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git a/src/components/guestBook/MessageCard.style.js b/src/components/guestBook/MessageCard.style.js
@@ -60,7 +60,7 @@ export const ToText = styled.p`
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    font-size: 1.2em; 
+    font-size: 1.0em; 
     left: 15%;
   }
 
@@ -79,11 +79,11 @@ export const FromText = styled.p`
   @media (max-width: 768px) {
     font-size: 0.7em; 
     margin-right: 2%; 
-    bottom: -55%;
+    bottom: -65%;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    font-size: 1.1em;
+    font-size: 1.0em;
     right: 8%;
     bottom:12%;
   }
@@ -116,12 +116,12 @@ export const MessageText = styled.p`
     }
 
     @media (max-width: 768px) {
-      font-size: 0.6em; /* 모바일에서 텍스트 크기 조정 */
+      font-size: 0.6em; 
       width: 65%; 
       height: 108%;
       top: 40%;
-      left: 18%; /* 모바일에서 왼쪽 간격 조정 */
-      z-index: 10; // 이미지 위에 텍스트 배치
+      left: 18%; 
+      z-index: 10; 
 
       &::-webkit-scrollbar {
         width: 1.5vw; /* 스크롤바 너비 */

diff --git a/src/components/guestBook/MessageInputSection.jsx b/src/components/guestBook/MessageInputSection.jsx
@@ -10,7 +10,7 @@ import barcodeImage2 from './img/barcode.png';
 const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
   const [newMessage, setNewMessage] = useState({ to: '', from: '', message: '' });
 
-  const [isMobile,setIsMobile] = useState(window.innerWidth <= 767); // 모바일 여부를 확인
+  const [isMobile,setIsMobile] = useState(window.innerWidth <= 768); // 모바일 여부를 확인
 
   useEffect(()=> {
     const handleResize =() => {

diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
@@ -37,7 +37,7 @@ export const TextSection = styled.div`
   position: relative;
 
   @media (max-width: 768px) {
-    font-size: 4.5vw;
+    font-size: 2.0em;
     width: 100%;
     text-align: center;
     margin-top: 5%;
@@ -126,6 +126,8 @@ export const Label = styled.label`
   font-weight: bold;
   color: black;
   font-size: 1.1em;
+  padding:0;
+  margin:0;
 
   &.to-label {
     top: 5%;
@@ -139,6 +141,7 @@ export const Label = styled.label`
 
   @media (max-width: 768px) {
     font-size: 1em;
+     
 
     &.to-label {
       top: 5%;
@@ -153,29 +156,33 @@ export const Label = styled.label`
 
   @media (min-width: 769px) and (max-width: 1024px) {
     font-size: 1.1em;
+    margin:0;
+    padding:0;
+    
 
     &.to-label {
       top: 5%;
     }
 
     &.from-label {
-    
-      bottom:5%;
+      margin:0;
       right:${({ length }) => `${-90+Math.min(length * 4, 25)}px`}; 
     }
   }
 `;
 
 export const Input = styled.input`
-  height: 5vh;
-  width: 80%;
+  height: 5%;
+  width: 50%;
   border: none;
   color: black;
   background: transparent;
   font-size: 1.5em;
-  padding: 2%;
+  padding: 0%;
+  margin:0;
   text-align: left;
   z-index: 10;
+  
 
   &::placeholder {
     color: #D9D9D9;
@@ -193,6 +200,10 @@ export const Input = styled.input`
 
   @media (min-width: 769px) and (max-width: 1024px) {
     font-size: 1.1em;
+    width:33%;
+    margin:0;
+    padding:0;
+    
   }
 `;
 
@@ -201,8 +212,8 @@ export const TextArea = styled.textarea`
   font-family: 'Pretendard';
   font-style: normal;
   font-weight: 400;
-  width: 24vw;
-  height: 42vh;
+  width: 70%;
+  height: 60%;
   border: none;
   color: black;
   background: transparent;
@@ -234,9 +245,10 @@ export const TextArea = styled.textarea`
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 27vw;
-    height: 31vh;
-    top: 17%;
+    width: 70%;
+    height: 60%;
+    top: 22%;
+    font-size:1.3em;
   }
 `;
 
@@ -245,7 +257,7 @@ export const ButtonContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   position: absolute;
-  bottom: 20px;
+  bottom: -10%;
   left: 0;
   right: 0;
   margin: 0 1%;
@@ -254,6 +266,8 @@ export const ButtonContainer = styled.div`
   position: relative;
     width: 100%;
     top: 50px;
+    margin-bottom:15%;
+
 
   }
 
@@ -267,6 +281,8 @@ export const HighlightedText = styled.span`
   font-weight: bold;
   color: black;
   font-size: 1.8em;
+  margin:0;
+  padding:0;
 
   @media (max-width: 768px) {
     font-size: 1.1em;

diff --git a/src/components/guestBook/SearchBar.style.js b/src/components/guestBook/SearchBar.style.js
@@ -17,20 +17,21 @@ export const SearchBarContainer = styled.div`
     justify-content:right;
     align-items:right;
     margin:5%;
-    margin-top:20%;
-    margin-left:50vw;
+    margin-left:50%;
     display: ${({ isMobile }) => (isMobile ? 'flex' : 'none')}; /* 모바일에서만 보여주기 */
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 60%;
+    width: 100%;
     justify-content: right;
     margin:0;
     margin-top:10%;
     padding:0;
-    top:-35vh;
-    right:-15vw;
-    margin-bottom:1%;
+    top:-200px;
+
+    right:5%;
+
+    margin-bottom:5%;
   }
 
 `;