Merge pull request #110 from LikelionUniv/design/hackathon-maininfo-fix

design: mainInfo 그라데이션 수정
LikelionUniv · Jul 4, 2024 · efd09a0 · efd09a0
2 parents 9c5d5f4 + 695866d
commit efd09a0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 24 deletions.
diff --git a/src/pages/landing/components/hackathon/HackathonPart.tsx b/src/pages/landing/components/hackathon/HackathonPart.tsx
@@ -62,7 +62,7 @@ const PartButton = styled.div`
         height: 64px;
         font-size: 20px;
         margin-top: 40px;
-        margin-bottom: 446px;
+        margin-bottom: clamp(255px, 2vh, 446px);
         width: 300px;
     }
 

diff --git a/src/pages/landing/components/hackathon/HackathonTimer.tsx b/src/pages/landing/components/hackathon/HackathonTimer.tsx
@@ -86,7 +86,8 @@ const TimerContainer = styled.div`
     background-color: black;
     border-radius: 24px;
     height: 240px;
-    width: 1200px;
+    max-width: 1200px;
+    width: 100%;
     margin-left: 10px;
     margin-right: 10px;
 
@@ -98,14 +99,29 @@ const TimerContainer = styled.div`
 
     @media (max-width: 767px) {
         width: 80%;
-        height: clamp(154px, 4vh, 240px);
+        height: clamp(140px, 4vh, 240px);
         padding: 5px 20px;
     }
 
+    @media (max-width: 430px) {
+        width: 90%;
+        height: 120px;
+        padding: 0px 20px;
+        border-radius: 8px;
+    }
+
+    @media (max-width: 390px) {
+        width: 90%;
+        height: 120px;
+        padding: 0px 20px;
+        border-radius: 8px;
+    }
+
     @media (max-width: 360px) {
         width: 90%;
-        height: clamp(80px, 2vh, 154px);
-        padding: 5px 10px;
+        height: clamp(80px, 2vh, 140px);
+        padding: 5px px;
+        border-radius: 8px;
     }
 `;
 
@@ -140,7 +156,7 @@ const DateType = styled.div`
     line-height: 150%;
 
     @media (max-width: 767px) {
-        font-size: 16px;
+        font-size: clamp(12px, 1vw, 16px);
     }
 
     @media (max-width: 360px) {
@@ -181,12 +197,12 @@ const DateNum = styled.div`
     text-align: center;
 
     @media (max-width: 767px) {
-        font-size: 40px;
-        width: clamp(42px, 3vw, 60px);
+        font-size: clamp(28px, 2vw, 40px);
+        width: clamp(42px, 2vw, 60px);
     }
 
     @media (max-width: 360px) {
         font-size: 28px;
-        width: clamp(20px, 2vw, 42px);
+        width: clamp(20px, 2vw, 28px);
     }
 `;
diff --git a/src/pages/landing/components/hackathon/MainInfo.tsx b/src/pages/landing/components/hackathon/MainInfo.tsx
@@ -18,6 +18,8 @@ const MainInfo = () => {
                     <TitleImg src={title} />
                     <HackathonPart />
                 </Container>
+            </FirstWrapper>
+            <LineWrapper>
                 <MG.Line>
                     {[1, 2].map(item => (
                         <div
@@ -42,7 +44,7 @@ const MainInfo = () => {
                         </div>
                     ))}
                 </MG.Line>
-            </FirstWrapper>
+            </LineWrapper>
 
             <TherdWrapper>
                 <Img3 src={check_g} alt="" />
@@ -68,8 +70,13 @@ const MainWrapper = styled.div`
     width: 100%;
     display: flex;
     flex-direction: column;
+`;
+
+const FirstWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: auto;
     align-items: center;
-    justify-content: center;
 
     background: linear-gradient(
         to bottom,
@@ -82,10 +89,10 @@ const MainWrapper = styled.div`
     @media (max-width: 767px) {
         background: linear-gradient(
             to bottom,
-            rgba(0, 0, 0, 0) 750px,
-            rgba(0, 0, 0, 0.3) 750px,
-            rgba(255, 146, 64, 0.3) 1220px,
-            transparent 1220px
+            rgba(0, 0, 0, 0) 500px,
+            rgba(0, 0, 0, 0.3) 500px,
+            rgba(255, 146, 64, 0.3) 950px,
+            transparent 950px
         );
     }
 
@@ -100,11 +107,8 @@ const MainWrapper = styled.div`
     }
 `;
 
-const FirstWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
+const LineWrapper = styled.div`
     width: 100%;
-    align-items: center;
 `;
 
 const Container = styled.div`
@@ -134,7 +138,7 @@ const TitleImg = styled.img`
     }
 
     @media (max-width: 767px) {
-        margin-top: 447px;
+        margin-top: clamp(287px, 2vh, 447px);
         width: 520px;
         width: 100%;
     }
@@ -204,6 +208,13 @@ const ImgWrapper = styled.div`
     margin-bottom: 40px;
     justify-content: space-between;
     align-items: center;
+
+    @media (max-width: 767px) {
+        width: clamp(320px, 2vw, 520px);
+    }
+    @media (max-width: 360px) {
+        width: clamp(200px, 2vw, 320px);
+    }
 `;
 
 const Img1 = styled.img`

diff --git a/src/pages/landing/components/hackathon/TimeInfo.tsx b/src/pages/landing/components/hackathon/TimeInfo.tsx
@@ -71,16 +71,16 @@ const DeadlineInfo = styled.div`
     font-weight: 700;
     line-height: 150%;
     text-align: center;
-    margin-bottom: 16px;
+    margin-bottom: clamp(4px, 2vh, 13px);
 
     @media (max-width: 767px) {
         font-size: 20px;
-        margin-bottom: 13px;
+        margin-bottom: clamp(4px, 2vh, 6px);
     }
 
     @media (max-width: 360px) {
         font-size: 10px;
-        margin-bottom: 6px;
+        margin-bottom: 4px;
     }
 `;
 
@@ -92,9 +92,10 @@ const Info = styled.div`
     font-weight: 700;
     line-height: 150%;
     text-align: center;
+    margin-bottom: 12px;
 
     @media (max-width: 767px) {
-        font-size: 40px;
+        font-size: clamp(30px, 2vw, 40px);
     }
 
     @media (max-width: 360px) {