Navbar 로고와 Informationbar 반응형 수정 #53 from CodeitPart2/SCRUM-81-박찬영

Navbar 로고와 Informationbar 반응형 수정

Author: Parkchanyoung0710

src/components/common/Emoji/Emoji.jsx

@@ -86,7 +86,12 @@ function Emoji({ topReactions = [], setRecipientData }) {
               <ArrowDown alt="더 보기" />
             </ShowMoreButton>
           )}
-          <Button onClick={() => setShowPicker(!showPicker)} variant="outlined" image="add">추가</Button>
+          
+          <StyledIcon>
+          <StyledButton onClick={() => setShowPicker(!showPicker)} variant="outlined" image="add">
+            <StyledText>추가</StyledText>
+          </StyledButton>
+        </StyledIcon>
         </ActionsContainer>
       </Header>
 
@@ -114,6 +119,26 @@ function Emoji({ topReactions = [], setRecipientData }) {
 
 export default Emoji;
 
+const StyledIcon = styled.div`
+  display: inline-block;
+`;
+
+const StyledButton = styled(Button)`
+  width: 88px;
+  height: 36px;
+
+  @media (max-width: 768px) {
+    width: 36px;
+    height: 32px;
+  }
+`;
+
+const StyledText = styled.div`
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
 const ServiceContainer = styled.div`
   top: 6px;
   display: flex;
@@ -150,6 +175,7 @@ const TopEmojiItem = styled.div`
   gap: 2px;
   font-size: 20px;
   text-align: center;
+
 `;
 
 const EmojiImage = styled.span`
@@ -217,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]};
@@ -228,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

@@ -19,11 +19,11 @@ function InformationBar({
   const [showToast, setShowToast] = useState(false);
   const buttonRef = useRef(null);
 
-  // ✅ 카카오 SDK 초기화 (한 번만 실행)
+
   useEffect(() => {
     if (window.Kakao && !window.Kakao.isInitialized()) {
       window.Kakao.init("0e75199aafea8afc76aa6dd724c8f4bd");  // 🔥 여기에 JavaScript 키 입력
-      console.log("✅ Kakao SDK Initialized");
+      console.log("Kakao SDK Initialized");
     }
   }, []);
 
@@ -109,7 +109,7 @@ function InformationBar({
           </WritedContainer>
 
           <SeparatorContainer>
-            <Separator />
+            <LeftSeparator />
           </SeparatorContainer>
 
           <Emoji
@@ -120,13 +120,18 @@ function InformationBar({
             setRecipientData={setRecipientData}
             />
           <Separator />
-          <IconButton ref={buttonRef} onClick={toggleModal} image="share" width="56" />
+          <ShareContainer>
+
+          <IconButton ref={buttonRef} onClick={toggleModal}
+          image="share" width="56" height="40"/>
+          
           {isModalOpen && (
             <Modal ref={modalRef}>
               <Option onClick={shareToKakao}> 카카오톡 공유</Option>
               <Option onClick={handleCopyUrl}>URL 공유</Option>
             </Modal>
           )}
+          </ShareContainer>
         </RightSection>
       </InformationBarContainer>
 
@@ -148,12 +153,32 @@ function InformationBar({
   );
 }
 
+const ShareContainer = styled.div`
+  position: relative;
+  display: inline-block; // 버튼 크기에 맞게 조정
+`;
+
+const LeftSeparator = styled.span`
+display: inline-block;
+width: 1px;
+height: 30px;
+background-color: ${({ theme }) => theme.colors.grayScale[300]};
+margin: 0 13px;
+
+@media (max-width: 1199px) {
+    display: none;  
+  }
+`;
 const Separator = styled.span`
   display: inline-block;
   width: 1px;
-  height: 28px;
+  height: 30px;
   background-color: ${({ theme }) => theme.colors.grayScale[300]};
   margin: 0 13px;
+
+  @media (max-width: 768px) {
+    margin: 0 0px;
+  }
 `;
 
 const SeparatorContainer = styled.div`
@@ -163,6 +188,9 @@ const SeparatorContainer = styled.div`
 `;
 
 const InformationBarWrapper = styled.nav`
+  position:fixed;
+  z-index:998;
+  top:58px;
   display: flex;
   justify-content: center;
   width: 100%;
@@ -184,21 +212,40 @@ const InformationBarContainer = styled.div`
     padding: 13px 24px;
   }
   @media (max-width: 767px) {
-    
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    padding: 10px;
   }
 `;
 
 const LeftSection = styled.div`
   flex: 1;
   display: flex;
   justify-content: flex-start;
+
+  @media (max-width: 767px) {
+    width: 100%;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
 `;
 
 const RightSection = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
+  margin-top: 10px;
+
+  @media (max-width: 1199px) {
+    margin-top:0px;
+  }
+  @media (max-width: 767px) {
+    margin-top:-8px;
+    justify-content: center;
+    gap: 10px;
+  }
 `;
 
 const ToName = styled.div`
@@ -208,12 +255,25 @@ const ToName = styled.div`
   line-height: 42px;
   letter-spacing: -0.01em;
   color: ${({ theme }) => theme.colors.grayScale[800]};
+  margin-right: 10px;
 
+  @media (max-width: 767px) {
+    left: 22px;
+    font-size: 24px;
+    margin-right: 0;
+    margin-bottom: 10px;
+    top:10px;
+    position: absolute;
+  }
 `;
 
 const WritedContainer = styled.div`
   display: inline-flex;
   align-items: center;
+
+  @media (max-width: 767px) {
+    display: none;
+  }
 `;
 
 const WriteCount = styled.span`
@@ -223,9 +283,13 @@ const WriteCount = styled.span`
   font-size: 18px;
   letter-spacing: 0%;
   line-height: 27px;
+
   @media (max-width: 1199px) {
     display: none;  
   }
+  @media (max-width: 767px) {
+    display: none;
+  }
 `;
 
 const WritedText = styled.span`
@@ -239,6 +303,9 @@ const WritedText = styled.span`
   @media (max-width: 1199px) {
     display: none;  
   }
+  @media (max-width: 767px) {
+    display: none;
+  }
 `;
 
 const Avatar = styled.div`
@@ -272,12 +339,17 @@ const Avatar = styled.div`
   @media (max-width: 1199px) {
     display: none;  
   }
+  @media (max-width: 767px) {
+    display: none;
+  }
 `;
 
 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;
@@ -296,10 +368,22 @@ const Modal = styled.div`
       transform: scale(1);
     }
   }
+  @@media (max-width: 1199px) {
+    right:7%;
+    bottom: 100%;
+    width: 140px;
+    height: 120px;
+  }
+  @media (max-width: 767px) {
+    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;
@@ -332,6 +416,7 @@ const Toast = styled.div`
     height: 64px;
   }
 `;
+
 const ToastMessage = styled.span`
   font-family: "Pretendard", sans-serif;
   font-weight: 400;
@@ -348,7 +433,6 @@ const IconTextWrapper = styled.div`
   align-items: center;
 `;
 
-
 const IconWrapper = styled.div`
   width: 24px;
   height: 24px;

src/components/common/Navbar/Navbar.jsx

@@ -1,10 +1,11 @@
 import { Link, useLocation } from "react-router-dom";
 import Button from "../Button/Button";
-
 import { LogoImg } from "../../../assets/images/icon/IconIndex";
 import styled from "styled-components";
 
 const NavbarWrapper = styled.nav`
+  position:fixed;
+  z-index:999;
   display: flex;
   justify-content: center;
   width: 100%;
@@ -20,26 +21,35 @@ const NavbarContainer = styled.nav`
   max-width: 1207px;
   height: 64px;
   padding: 11px 24px;
-
-
 `;
+
 const StyledLogo = styled(LogoImg)`
-  display: flex;
   width: 106px;
   cursor: pointer;
+
+
+  @media (min-width: 1200px) {
+    display: flex;
+  }
+
   
-  
+  @media (max-width: 767px) {
+    display: ${({ showLogo }) => (showLogo ? 'flex' : 'none')};
+  }
 `;
 
 function Navbar() {
   const location = useLocation();
+
+  const showLogo = location.pathname === '/list' || location.pathname === '/';
+
   const isPostPage = location.pathname.startsWith("/post");
 
   return (
     <NavbarWrapper>
       <NavbarContainer>
         <Link to="/">
-          <StyledLogo alt="Rolling Logo" />
+          <StyledLogo alt="Rolling Logo" showLogo={showLogo} />
         </Link>
         {!isPostPage && (
           <Link to="/post">
@@ -53,4 +63,4 @@ function Navbar() {
   );
 }
 
-export default Navbar;
+export default Navbar;