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`

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,7 +120,10 @@ function InformationBar({
             setRecipientData={setRecipientData}
             />
           <Separator />
-          <IconButton ref={buttonRef} onClick={toggleModal} image="share" width="56" />
+          
+          <IconButton ref={buttonRef} onClick={toggleModal}
+          image="share" width="56" height="40"/>
+          
           {isModalOpen && (
             <Modal ref={modalRef}>
               <Option onClick={shareToKakao}> 카카오톡 공유</Option>
@@ -148,12 +151,28 @@ function InformationBar({
   );
 }
 
+
+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`
@@ -184,21 +203,37 @@ 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: 767px) {
+    margin-top:-8px;
+    justify-content: center;
+    gap: 20px;
+  }
 `;
 
 const ToName = styled.div`
@@ -208,12 +243,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,8 +271,9 @@ 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;
   }
 `;
 
@@ -236,8 +285,8 @@ const WritedText = styled.span`
   line-height: 27px;
   letter-spacing: 0%;
 
-  @media (max-width: 1199px) {
-    display: none;  
+  @media (max-width: 767px) {
+    display: none;
   }
 `;
 
@@ -269,8 +318,8 @@ const Avatar = styled.div`
     color: ${({ theme }) => theme.colors.grayScale[800]};
   }
 
-  @media (max-width: 1199px) {
-    display: none;  
+  @media (max-width: 767px) {
+    display: none;
   }
 `;
 
@@ -296,6 +345,12 @@ const Modal = styled.div`
       transform: scale(1);
     }
   }
+
+  @media (max-width: 767px) {
+    top: 100px;
+    width: 120px;
+    height: 100px;
+  }
 `;
 
 const Option = styled.div`
@@ -332,6 +387,7 @@ const Toast = styled.div`
     height: 64px;
   }
 `;
+
 const ToastMessage = styled.span`
   font-family: "Pretendard", sans-serif;
   font-weight: 400;
@@ -348,7 +404,6 @@ const IconTextWrapper = styled.div`
   align-items: center;
 `;
 
-
 const IconWrapper = styled.div`
   width: 24px;
   height: 24px;

src/components/common/Navbar/Navbar.jsx

@@ -1,6 +1,5 @@
 import { Link, useLocation } from "react-router-dom";
 import Button from "../Button/Button";
-
 import { LogoImg } from "../../../assets/images/icon/IconIndex";
 import styled from "styled-components";
 
@@ -20,26 +19,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 +61,4 @@ function Navbar() {
   );
 }
 
-export default Navbar;
+export default Navbar;

src/pages/RollingPaperList/RollingPaperListPage.jsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 import PopularCardList from "../../components/domain/rollingpaper/Card/PopularCardList";
 import Button from "../../components/common/Button/Button";
 
-// Container 스타일 수정
 const Container = styled.div`
   background-color: #ffffff;
   width: 100%;
@@ -19,7 +18,6 @@ const Container = styled.div`
   }
 `;
 
-// PageWrapper 스타일 수정
 const PageWrapper = styled.div`
   padding: 40px;
   display: flex;
@@ -39,7 +37,7 @@ const PageWrapper = styled.div`
   }
 `;
 
-// Title 스타일 수정 (텍스트와 카드 리스트가 같이 고정되도록 sticky 적용)
+
 const TitleWrapper = styled.div`
   width: 100%;
   position: sticky;
@@ -71,7 +69,7 @@ const TitleText = styled.div`
   }
 `;
 
-// ButtonWrapper 스타일 수정
+
 const ButtonWrapper = styled.div`
   margin-top: 20px;
   display: flex;
@@ -86,14 +84,14 @@ const ButtonWrapper = styled.div`
   }
 `;
 
-// StyledCardList 수정 (카드 리스트가 오른쪽에서 사라지도록 설정)
+
 const StyledCardList = styled.div`
   display: flex;
   gap: 20px;
   margin-bottom: 50px;
   width: 100%;
-  flex-direction: row-reverse; /* 카드 리스트가 오른쪽에서 왼쪽으로 정렬되도록 설정 */
-  overflow: hidden;  /* 왼쪽에서 안 보이도록 처리 */
+  flex-direction: row-reverse; 
+  overflow: hidden; 
   
   @media (max-width: 1199px) {
     gap: 15px;