버튼 적용(리스트페이지완료)

Author: ramong26

src/components/domain/rollingpaper/Card/CreateAtCardList.jsx

@@ -9,9 +9,13 @@ const BoneWrap = styled.div`
   width: 1160px;
   position: relative;
   overflow: visible;
+  height: 260px;
   @media (max-width: 1199px) {
-   width: 100% ;
+   width: 100%;
   }
+  @media (max-width: 767px) {
+   height: 232px;
+  } 
 `;
 
 const BoneContainer = styled.div`
@@ -71,7 +75,7 @@ const BackgroundWrap = styled.div.withConfig({
     transform: scale(0.98);
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3);
   }
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     width: 208px;
     height: 232px;
   }  
@@ -86,7 +90,7 @@ const ToText = styled.div`
   ${(props) => textStyle(24, 700)(props)}
   margin-bottom: 0.75rem;
   height: 2.625rem;
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     ${(props) => textStyle(18, 700)(props)}
   }
 `;
@@ -136,18 +140,17 @@ const WriteCountDisplay = styled.div`
 
 const WritedText = styled.div`
   font-size: 14px;
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     ${(props) => textStyle(14, 700)(props)}
   }
 `;
 
 const ArrowButtonDisplay = styled.div`
-align-items: center;
-   
-    transform: translateY(40%);
-    z-index: 2;
-    transform: matrix(1, 0, 0, 1, 0, 108);
-    transition: opacity 0.3s ease;
+  align-items: center;
+  transform: translateY(40%);
+  z-index: 2;
+  transform: matrix(1, 0, 0, 1, 0, 108);
+  transition: opacity 0.3s ease;
 }
 `;
 const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)`
@@ -179,7 +182,6 @@ const TopEmojisContainer = styled.div`
   gap: 8px;
   @media (max-width: 767px) {
     padding: 0 4px;
-    
   }
 `;
 

src/components/domain/rollingpaper/Card/PopularCardList.jsx

@@ -9,12 +9,16 @@ const BoneWrap = styled.div`
   width: 1160px;
   position: relative;
   overflow: visible;
+  height: 260px;
+  margin-bottom: 50px;
   @media (max-width: 1199px) {
    width: 100% ;
+   
   }
-   @media (max-width: 359px) {
-    padding-bottom: 50px;
-  }
+  @media (max-width: 767px) {
+   height: 232px;
+   margin-bottom: 74px;
+  } 
 `;
 
 const BoneContainer = styled.div`
@@ -74,7 +78,7 @@ const BackgroundWrap = styled.div.withConfig({
     transform: scale(0.98);
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3);
   }
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     width: 208px;
     height: 232px;
   }  
@@ -89,7 +93,7 @@ const ToText = styled.div`
   ${(props) => textStyle(24, 700)(props)}
   margin-bottom: 0.75rem;
   height: 2.625rem;
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     ${(props) => textStyle(18, 700)(props)}
   }
 `;
@@ -139,18 +143,17 @@ const WriteCountDisplay = styled.div`
 
 const WritedText = styled.div`
   font-size: 14px;
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     ${(props) => textStyle(14, 700)(props)}
   }
 `;
 
 const ArrowButtonDisplay = styled.div`
-align-items: center;
-   
-    transform: translateY(40%);
-    z-index: 2;
-    transform: matrix(1, 0, 0, 1, 0, 108);
-    transition: opacity 0.3s ease;
+  align-items: center;
+  transform: translateY(40%);
+  z-index: 2;
+  transform: matrix(1, 0, 0, 1, 0, 108);
+  transition: opacity 0.3s ease;
 }
 `;
 const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)`
@@ -182,7 +185,6 @@ const TopEmojisContainer = styled.div`
   gap: 8px;
   @media (max-width: 767px) {
     padding: 0 4px;
-    
   }
 `;
 

src/pages/RollingPaperList/RollingPaperListPage.jsx

@@ -4,6 +4,8 @@ import styled from "styled-components";
 import PopularCardList from "../../components/domain/rollingpaper/Card/PopularCardList";
 import Button from "../../components/common/Button/Button";
 import { textStyle } from "../../styles/textStyle";
+import { useEffect, useState, useCallback } from "react";
+
 const Container = styled.div`
   background-color: #ffffff;
 `;
@@ -21,7 +23,7 @@ const PageWrapper = styled.div`
     margin: 0;
     width: 100%;
   }
-  @media (max-width: 359px) {
+  @media (max-width: 767px) {
     padding-top: 40px;
   }   
   
@@ -32,15 +34,21 @@ const Title = styled.div`
   display: flex;
   width: -webkit-fill-available;
   justify-content: left;
-  @media (max-width: 366px) {
+  @media (max-width: 767px) {
     ${(props) => textStyle(20, 600)(props)}
   }
 `;
 
 const ButtonWrapper = styled.div`
-  margin-top: 156px;
+  margin-top: 64px;
   display: flex;
   justify-content: center;
+  @media (max-width: 1199px) {
+    margin-top: 156px;
+  }
+  @media (max-width: 767px) {
+    margin-top: 66px;
+  }  
 `;
 
 const StyledCardList = styled.div`
@@ -55,10 +63,23 @@ const StyledCardList = styled.div`
   }
 
 `;
+const StyledButton = styled(Button)`
+  width: ${({ isTablet }) => (isTablet ? "calc(100% - 24px)" : "280px")};
+`;
 
 function RollingPaperListPage() {
   const navigate = useNavigate();
-
+  const [isTablet, setIsTablet] = useState(window.innerWidth <= 1199);
+  const handleResize = useCallback(() => {
+      setIsTablet(window.innerWidth <= 1199);
+  }, []);
+  useEffect(() => {
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [handleResize]);
   return (
     <Container>
 
@@ -72,14 +93,14 @@ function RollingPaperListPage() {
         </StyledCardList>
         <CreateAtCardList />
         <ButtonWrapper>
-          <Button
+          <StyledButton
             variant="primary"
             size="56"
-            width="280"
+            width={isTablet ? "calc(100% - 24px)" : 280}
             onClick={() => navigate(`/post`)}
           >
             나도 만들어보기
-          </Button>
+          </StyledButton>
         </ButtonWrapper>
       </PageWrapper>
     </Container>