Merge pull request #119 from EFUB4-Jukebox/dev

💄 Style : 메인 페이지 반응형
EFUB4-Jukebox · Aug 21, 2024 · 466ff91 · 466ff91
2 parents cc796ec + eda6def
commit 466ff91
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/src/assets/introduce/main_bottom.svg b/src/assets/introduce/main_bottom.svg
diff --git a/src/pages/IntroducePage/Main.jsx b/src/pages/IntroducePage/Main.jsx
@@ -27,14 +27,8 @@ const Main = () => {
             src={main_bottom}
             alt="main_bottom"
           />
+          <BottomText>음악지도 보러가기</BottomText>
         </Bottom>
-        <BottomText>
-          <img
-            onClick={handleGotoHomepage}
-            src={main_bottom_text}
-            alt="main_bottom_text"
-          />
-        </BottomText>
       </Wrapper>
     </>
   );
@@ -49,34 +43,62 @@ const BackgroundWrapper = styled.div`
   z-index: 0;
 `;
 const Wrapper = styled.div`
+  min-width: 1000px;
   position: relative;
   z-index: 1;
 `;
 const Center = styled.div`
   position: fixed;
   left: 50%;
   z-index: 1;
-  top: 85px;
   transform: translateX(-50%);
+  @media (min-width: 1024px) {
+    img {
+      width: 100%; /*1024px보다 클 때 width 100%*/
+    }
+  }
+  @media (max-width: 1024px) {
+    img {
+      width: 100%; /*1024px보다 작을 때 width 10%*/
+    }
+  }
 `;
 const Bottom = styled.div`
+  position: relative;
   img {
     width: 810.9px;
     height: 366.3px;
     position: fixed;
     left: 50%;
     bottom: 0px;
+    z-index: 2;
     transform: translateX(-50%);
     cursor: pointer;
+    @media (min-width: 1024px) {
+      width: 100%; /*1024px보다 클 때 width 100%*/
+    }
+    @media (max-width: 1024px) {
+    }
   }
 `;
 const BottomText = styled.div`
   position: fixed;
   left: 50%;
   bottom: 80px;
   transform: translateX(-50%);
-  z-index: 2;
+  z-index: 3;
+  color: var(--light_black, #232323);
+  text-align: center;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px; /* 125% */
   cursor: pointer;
+  @media (max-width: 768px) {
+    postiion: absolute;
+    bottom: 80px;
+  }
+  white-space: nowrap;
 `;
 
 export default Main;