이모티콘 모달창 및 공유 모달창 반응형으로 변경

Author: Parkchanyoung0710

src/components/common/Emoji/Emoji.jsx

@@ -243,8 +243,8 @@ const AllEmojisContainer = styled.div`
 const MoreEmojisWrapper = styled.div`
   z-index: 10;
   position: absolute;
-  top: -16px;
-  right: -82px;
+  top: 100%;
+  right: -106px;
   width: 312px;
   background-color: ${(props) => props.theme.colors.white};
   border: 1px solid ${(props) => props.theme.colors.grayScale[300]};
@@ -254,8 +254,16 @@ const MoreEmojisWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 10px;
+  margin-top: -14px;
+  @media (max-width: 1199px) {
+  right: -54px;
+  }
+  @media (max-width: 767px) {
+  right: -156px;
+  }
 `;
 
+
 const AllEmojiItem = styled.div`
   display: flex;
   align-items: center;

src/components/common/InformationBar/InformationBar.jsx

@@ -120,7 +120,8 @@ function InformationBar({
             setRecipientData={setRecipientData}
             />
           <Separator />
-          
+          <ShareContainer>
+
           <IconButton ref={buttonRef} onClick={toggleModal}
           image="share" width="56" height="40"/>
 
@@ -130,6 +131,7 @@ function InformationBar({
               <Option onClick={handleCopyUrl}>URL 공유</Option>
             </Modal>
           )}
+          </ShareContainer>
         </RightSection>
       </InformationBarContainer>
 
@@ -150,7 +152,10 @@ function InformationBar({
     </InformationBarWrapper>
   );
 }
-
+const ShareContainer = styled.div`
+  position: relative;
+  display: inline-block; // 버튼 크기에 맞게 조정
+`;
 
 const LeftSeparator = styled.span`
 display: inline-block;
@@ -235,7 +240,7 @@ const RightSection = styled.div`
   @media (max-width: 767px) {
     margin-top:-8px;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
   }
 `;
 
@@ -336,9 +341,11 @@ const Avatar = styled.div`
 `;
 
 const Modal = styled.div`
-  padding: 10px 1px;
   position: absolute;
-  top: 122px;
+  padding: 12px 0px;
+  right:0px;
+  margin-top:10px;
+  top: 100%;
   background-color: ${({ theme }) => theme.colors.white};
   width: 140px;
   height: 120px;
@@ -357,16 +364,22 @@ const Modal = styled.div`
       transform: scale(1);
     }
   }
-
+  @@media (max-width: 1199px) {
+    right:7%;
+    bottom: 100%;
+    width: 140px;
+    height: 120px;
+  }
   @media (max-width: 767px) {
-    top: 100px;
-    width: 120px;
-    height: 100px;
+    right:7%;
+    bottom: 100%;
+    width: 140px;
+    height: 120px;
   }
 `;
 
 const Option = styled.div`
-  padding: 10px;
+  padding: 12px;
   cursor: pointer;
   font-family: "Pretendard", sans-serif;
   font-weight: 400;