Merge pull request #532 from Mile-Writings/fix/#522/MainPageQA

[ Fix/#522 ] 메인페이지 QA반영
Mile-Writings · Jan 7, 2025 · 249c3df · 249c3df
2 parents 22414c5 + 73012d3
commit 249c3df
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -112,14 +112,17 @@ const FaqLayout = styled.section`
 
 const FaqContainer = styled.div`
   width: 93rem;
-  padding: 0 2rem;
 
   cursor: default;
 
   @media ${MOBILE_MEDIA_QUERY} {
     width: 100%;
     max-width: 40rem;
   }
+
+  @media screen and (width <= 400px) {
+    padding: 0 2rem;
+  }
 `;
 
 const FaqTitle = styled.h3`

diff --git a/src/pages/main/components/GroupCarousel.tsx b/src/pages/main/components/GroupCarousel.tsx
@@ -81,7 +81,7 @@ const GroupCarousel = ({ data }: carouselItemPropTypes) => {
               <PostContainer>
                 {moim.moimPosts.map(
                   (post, index) =>
-                    index < 2 && (
+                    index < 3 && (
                       <PostCard onClick={() => handleRoutingDetail(moim.moimId, post.postId)}>
                         <PostCardInfoWrapper>
                           <Topic>{post.topicName}</Topic>
@@ -92,13 +92,15 @@ const GroupCarousel = ({ data }: carouselItemPropTypes) => {
                       </PostCard>
                     ),
                 )}
-                <GroupRoutingWrapper>
-                  <GroupRoutingTitle>
-                    이 모임에 대해서 <br></br>더 궁금하신 가요?
-                  </GroupRoutingTitle>
-
-                  <MainGroupRoutingBtn></MainGroupRoutingBtn>
-                </GroupRoutingWrapper>
+                {moim.moimPosts.length < 3 && (
+                  <GroupRoutingWrapper>
+                    <GroupRoutingTitle>
+                      이 모임에 대해서 <br></br>더 궁금하신 가요?
+                    </GroupRoutingTitle>
+
+                    <MainGroupRoutingBtn></MainGroupRoutingBtn>
+                  </GroupRoutingWrapper>
+                )}
               </PostContainer>
             </Responsive>
           </CarouselLayout>
@@ -213,6 +215,13 @@ const GroupButton = styled.button`
 
 const CarouselLayout = styled.div`
   display: flex;
+  width: 100%;
+  overflow: scroll;
+  -ms-overflow-style: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const CarouselContainer = styled(Slider)`
@@ -244,4 +253,5 @@ const PostContainer = styled.div`
   width: 100%;
   max-width: 81rem;
   height: 29rem;
+  overflow: hidden;
 `;
diff --git a/src/pages/main/components/Introduction.tsx b/src/pages/main/components/Introduction.tsx
@@ -73,7 +73,7 @@ export default Introduction;
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
-  width: 100%;
+  width: 33.5rem;
   max-width: 40rem;
 `;
 const IntroductionWrapper = styled.section`
@@ -96,17 +96,25 @@ const IntroductionWrapper = styled.section`
 const MileMakersTextLayout = styled.div`
   display: flex;
   flex-direction: column;
+  width: 33.5rem;
 
   white-space: nowrap;
 `;
 
 const MainText = styled.h1`
   ${({ theme }) => theme.fonts.title3};
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mTitle5};
+  }
 `;
 
 const SubText = styled.span`
   color: ${({ theme }) => theme.colors.darkViolet};
   ${({ theme }) => theme.fonts.subtitle3};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mBody3};
+  }
 `;
 
 const GroupRoutingButton = styled.button`
@@ -129,6 +137,10 @@ const GroupRoutingButton = styled.button`
     background-color: ${({ theme }) => theme.colors.white};
 
     transition: all 0.5s;
+
+    @media ${MOBILE_MEDIA_QUERY} {
+      ${({ theme }) => theme.fonts.button3};
+    }
   }
 `;
 
@@ -141,21 +153,38 @@ const IntroduceMileLayout = styled.div`
   background-color: ${({ theme }) => theme.colors.white};
   box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
   border-radius: 1rem;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 33.5rem;
+    padding: 3rem;
+  }
 `;
 
 const HookText = styled.span`
   color: ${({ theme }) => theme.colors.gray70};
   ${({ theme }) => theme.fonts.subtitle4};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mSubtitle3};
+  }
 `;
 
 const GreetingText = styled.span`
   white-space: nowrap;
   ${({ theme }) => theme.fonts.title5};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mTitle5};
+  }
 `;
 
 const DiscriptionText = styled.p`
   overflow: hidden;
 
   color: ${({ theme }) => theme.colors.gray80};
   ${({ theme }) => theme.fonts.body3};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mBody2};
+  }
 `;
diff --git a/src/pages/main/components/Manual.tsx b/src/pages/main/components/Manual.tsx
@@ -33,6 +33,10 @@ const ManualWrapper = styled.div`
   flex-direction: column;
   margin: 0 auto;
   padding-bottom: 10rem;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    max-width: 40rem;
+  }
 `;
 
 const ManualTitle = styled.h1`
@@ -68,4 +72,9 @@ const ManualImg = styled.img`
     width: 19.2rem;
     height: 24rem;
   }
+
+  @media screen and (width <= 400px) {
+    width: 16.2rem;
+    height: 20rem;
+  }
 `;