[Feat] main 최상단 반응형 추가 (#274)

* feat: main image add * feat: timer add * feat: 모집 마감 버튼 추가 * feat: 모집 마감 날짜 지정 * fix: hidration error solve * feat: todo 추가 * feat: 버튼 사이즈 추가, disabled 추가 * feat: active hover 상태 추가 * fix: disabled 순서 변경 * feat: breakpoint add * feat: mobile button 추가 * refactor: bg image로 분리 * feat: mobile 반응형 추가 * feat: lg button 적용 * fix: build error fix * feat: media query 이전 기수 처럼 변경 * refactor: media query fix
depromeet · Sep 17, 2023 · 3d5e6c2 · 3d5e6c2
1 parent 6c42318
commit 3d5e6c2
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 23 deletions.
diff --git a/src/components/TimerContainer/Timer.tsx b/src/components/TimerContainer/Timer.tsx
@@ -1,6 +1,7 @@
 import { css, Theme } from '@emotion/react';
 
 import useMounted from '~/hooks/useMounted';
+import { mediaQuery } from '~/styles/media';
 
 type KeyType = 'day' | 'hour' | 'min' | 'sec';
 
@@ -21,6 +22,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 +32,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;
+  }
+
+  ${mediaQuery('mobile')} {
+    padding: 10px;
+  }
 `;
 
 const timeSplitCss = (theme: Theme) => css`
   ${theme.typos.decimal.title1}
   color: ${theme.colors.yellow500};
   line-height: 101px;
+  text-align: center;
+
+  ${mediaQuery('mobile')} {
+    font-size: 24px;
+    line-height: 44px;
+  }
 `;
 
 const timeTextCss = (theme: Theme) => css`
@@ -76,4 +89,19 @@ const timeTextCss = (theme: Theme) => css`
     text-align: center;
     margin-top: 16px;
   }
+
+  ${mediaQuery('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,6 +1,9 @@
+import Image from 'next/image';
 import { css, Theme } from '@emotion/react';
 
+import { Button } from '~/components/Button';
 import { DEADLINE_DATE } from '~/constant/common';
+import { mediaQuery } from '~/styles/media';
 
 import { Timer } from './Timer';
 import useDiffDay from './useDiffDay';
@@ -10,17 +13,26 @@ export function TimerContainer() {
 
   return (
     <div css={containerCss}>
+      <div css={bgImageCss}>
+        <Image src="/images/main/main-bg.png" alt="main-bg" width={1300} height={768.857} />
+      </div>
       <div css={gradientCss} />
       <div css={layoutCss}>
         <div>
           <div css={headingCss}>
             <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기 지원 링크 연결 */}
-          <button css={buttonCss}>14기 지원하기</button>
+          <Button size="lg">14기 지원하기</Button>
         </div>
       </div>
     </div>
@@ -31,28 +43,70 @@ const containerCss = css`
   position: relative;
   padding: 30px 0;
   background: linear-gradient(180deg, #0973ee 0%, rgba(9, 115, 238, 0) 100%);
+  overflow: hidden;
+
+  height: 828px;
+
+  ${mediaQuery('pc')} {
+    padding: 0;
+  }
+
+  ${mediaQuery('mobile')} {
+    height: 428px;
+  }
+`;
+
+const bgImageCss = css`
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  text-align: center;
+
+  img {
+    width: 1300px;
+    height: 768.857px;
+
+    @media screen and (max-width: 1300px) {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  ${mediaQuery('pc')} {
+    top: 0;
+  }
 `;
 
 const layoutCss = css`
-  background: url('/images/main/main-bg.png');
-  background-position: 50%;
-  background-size: cover;
-  background-repeat: no-repeat;
   margin: auto;
 
-  width: 1300px;
-  height: 768.857px;
-  position: relative;
-  z-index: 1; // NOTE : gradient 뒤로 가려지지 않게
+  max-width: 726px;
 
   & > div {
-    max-width: 726px;
+    width: 100%;
+    position: relative;
+    z-index: 2; // NOTE : gradient 뒤로 가려지지 않게
     margin: 0 auto;
 
     & > * {
       margin-bottom: 20px;
     }
   }
+
+  ${mediaQuery('tablet')} {
+    margin: 0 30px;
+  }
+
+  ${mediaQuery('mobile')} {
+    margin: 0 16px;
+    & > div {
+      & > * {
+        margin-bottom: 8px;
+      }
+    }
+  }
 `;
 
 const gradientCss = css`
@@ -62,7 +116,7 @@ const gradientCss = css`
   position: absolute;
   bottom: 0;
   left: 0;
-  z-index: 0;
+  z-index: 1;
 `;
 
 const headingCss = (theme: Theme) => css`
@@ -76,18 +130,34 @@ const headingCss = (theme: Theme) => css`
     margin-bottom: 20px;
   }
 
-  & > p {
+  p {
     ${theme.typos.pretendard.subTitle2};
     color: ${theme.colors.gray20};
   }
+
+  ${mediaQuery('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`
-  ${theme.typos.pretendard.body1};
-  color: ${theme.colors.black800};
-  background-color: ${theme.colors.yellow500};
-  width: 100%;
+const mobileOnlyCss = css`
+  display: none;
 
-  padding: 16px 24px;
-  height: 58px;
+  ${mediaQuery('mobile')} {
+    display: block;
+  }
 `;