Merge pull request #116 from EFUB4-Jukebox/dev

💄 Style : 모바일에서 메인 페이지 최적화
EFUB4-Jukebox · Aug 21, 2024 · 08290e1 · 08290e1
2 parents 23b19c4 + 4705442
commit 08290e1
Showing 1 changed file with 31 additions and 11 deletions.
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,35 +43,61 @@ const BackgroundWrapper = styled.div`
   z-index: 0;
 `;
 const Wrapper = styled.div`
-  min-width: 1920px;
+  min-width: 1536px;
   position: relative;
   z-index: 1;
 `;
 const Center = styled.div`
-  position: fixed;
+  position: absolute;
   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 (max-width: 768px) {
+      width: 340.578px;
+      height: 153.846px;
+    }
   }
 `;
 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: 20px;
+    font-size: 16px;
+  }
 `;
 
 export default Main;