feat: mobile 반응형 추가

depromeet · Sep 17, 2023 · d9f300c · d9f300c
1 parent 6edde09
commit d9f300c
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 9 deletions.
diff --git a/src/components/TimerContainer/Timer.tsx b/src/components/TimerContainer/Timer.tsx
@@ -21,6 +21,7 @@ export function Timer({ time }: TimerProps) {
     <div css={layoutCss}>
       {keys.map((key, index) => (
         <>
+          {index !== 0 && <span css={timeSplitCss}>:</span>}
           <div key={key} css={timeTextCss}>
             <div>
               {time[key].split('').map((text, jdx) => (
@@ -30,29 +31,40 @@ export function Timer({ time }: TimerProps) {
 
             <p>{labels[index]}</p>
           </div>
-          <span css={timeSplitCss}>:</span>
         </>
       ))}
     </div>
   );
 }
 
 const layoutCss = (theme: Theme) => css`
-  width: 726px;
-  height: 195px;
+  width: 100%;
   margin: auto;
   display: flex;
   background-color: ${theme.colors.black800};
   color: ${theme.colors.yellow500};
 
-  gap: 18px;
   padding: 26px 24px;
+
+  & > * {
+    flex: 1;
+  }
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    padding: 10px;
+  }
 `;
 
 const timeSplitCss = (theme: Theme) => css`
   ${theme.typos.decimal.title1}
   color: ${theme.colors.yellow500};
   line-height: 101px;
+  text-align: center;
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    font-size: 24px;
+    line-height: 44px;
+  }
 `;
 
 const timeTextCss = (theme: Theme) => css`
@@ -76,4 +88,19 @@ const timeTextCss = (theme: Theme) => css`
     text-align: center;
     margin-top: 16px;
   }
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    & > div {
+      font-size: 24px;
+      gap: 2px;
+      span {
+        width: 29px;
+        padding: 6px;
+      }
+    }
+
+    & > p {
+      font-size: 16px;
+    }
+  }
 `;
diff --git a/src/components/TimerContainer/TimerContainer.tsx b/src/components/TimerContainer/TimerContainer.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { css, Theme } from '@emotion/react';
 
 import { DEADLINE_DATE } from '~/constant/common';
@@ -11,7 +12,7 @@ export function TimerContainer() {
   return (
     <div css={containerCss}>
       <div css={bgImageCss}>
-        <img src="/images/main/main-bg.png" alt="main-bg" />
+        <Image src="/images/main/main-bg.png" alt="main-bg" width={1300} height={768.857} />
       </div>
       <div css={gradientCss} />
       <div css={layoutCss}>
@@ -20,6 +21,12 @@ export function TimerContainer() {
             <h1>DEPROMEET</h1>
             <p>디프만은 디자이너와 개발자가 만나 서비스 기획부터 론칭까지</p>
             <p>하나의 프로덕트를 완성하며 성장하는 IT 커뮤니티입니다</p>
+
+            <div css={mobileOnlyCss}>
+              <p>디프만은 디자이너와 개발자가 만나</p>
+              <p>서비스 기획부터 론칭까지 하나의 프로덕트를</p>
+              <p>완성하며 성장하는 IT 커뮤니티입니다</p>
+            </div>
           </div>
           <Timer time={time} />
           {/* TODO : 14기 지원 링크 연결 */}
@@ -41,6 +48,10 @@ const containerCss = (theme: Theme) => css`
   @media screen and (max-width: ${theme.breakpoints.pc}) {
     padding: 0;
   }
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    height: 428px;
+  }
 `;
 
 const bgImageCss = (theme: Theme) => css`
@@ -60,6 +71,10 @@ const bgImageCss = (theme: Theme) => css`
       height: auto;
     }
   }
+
+  @media screen and (max-width: ${theme.breakpoints.pc}) {
+    top: 0;
+  }
 `;
 
 const layoutCss = (theme: Theme) => css`
@@ -68,6 +83,7 @@ const layoutCss = (theme: Theme) => css`
   max-width: 726px;
 
   & > div {
+    width: 100%;
     position: relative;
     z-index: 2; // NOTE : gradient 뒤로 가려지지 않게
     margin: 0 auto;
@@ -76,6 +92,19 @@ const layoutCss = (theme: Theme) => css`
       margin-bottom: 20px;
     }
   }
+
+  @media screen and (max-width: ${theme.breakpoints.tablet}) {
+    margin: 0 30px;
+  }
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    margin: 0 16px;
+    & > div {
+      & > * {
+        margin-bottom: 8px;
+      }
+    }
+  }
 `;
 
 const gradientCss = css`
@@ -86,9 +115,6 @@ const gradientCss = css`
   bottom: 0;
   left: 0;
   z-index: 1;
-
-  @media screen and (max-width: 1300px) {
-  }
 `;
 
 const headingCss = (theme: Theme) => css`
@@ -102,10 +128,28 @@ const headingCss = (theme: Theme) => css`
     margin-bottom: 20px;
   }
 
-  & > p {
+  p {
     ${theme.typos.pretendard.subTitle2};
     color: ${theme.colors.gray20};
   }
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    padding-top: 65px;
+    padding-bottom: 16px;
+    & > h1 {
+      ${theme.typos.decimal.title2};
+      margin-bottom: 8px;
+    }
+
+    & > p {
+      display: none;
+    }
+
+    div > p {
+      ${theme.typos.pretendard.body2};
+      font-size: 14px;
+    }
+  }
 `;
 
 const buttonCss = (theme: Theme) => css`
@@ -117,3 +161,11 @@ const buttonCss = (theme: Theme) => css`
   padding: 16px 24px;
   height: 58px;
 `;
+
+const mobileOnlyCss = (theme: Theme) => css`
+  display: none;
+
+  @media screen and (max-width: ${theme.breakpoints.mobile}) {
+    display: block;
+  }
+`;