[SP0] 모집 안내 플로팅 배너 구현

package.json

@@ -17,6 +17,7 @@
     "@types/qs": "6.9.7",
     "axios": "^0.27.2",
     "classcat": "^5.0.4",
+    "dayjs": "^1.11.3",
     "nanoid": "4.0.2",
     "next": "13.3.0",
     "qs": "6.11.1",

src/components/common/Timer/Timer.tsx

@@ -0,0 +1,47 @@
+import { FC, useState } from 'react';
+import useInterval from '@src/hooks/useInterval';
+import { convertMsIntoDate } from '@src/utils/convertMsIntoDate';
+
+interface TimerProps {
+  targetDate: Date;
+  prefix?: string;
+  suffix?: string;
+  endMessage: string;
+}
+
+type TimeObj = ReturnType<typeof convertMsIntoDate>;
+
+const Timer: FC<TimerProps> = (props) => {
+  const [timeDiff, setTimeDiff] = useState<TimeObj | 'prepare' | 'timeEnd'>('prepare');
+
+  useInterval(() => {
+    const diff = props.targetDate.getTime() - Date.now();
+    if (diff >= 0) {
+      setTimeDiff(convertMsIntoDate(diff));
+    } else {
+      setTimeDiff('timeEnd');
+    }
+  }, 100);
+
+  if (timeDiff === 'prepare') {
+    return <> </>;
+  }
+  if (timeDiff === 'timeEnd') {
+    return <>{props.endMessage}</>;
+  }
+
+  return (
+    <>
+      {props.prefix}
+      {timeDiff.days}일 {padZero(timeDiff.hours)}:{padZero(timeDiff.minutes)}:
+      {padZero(timeDiff.seconds)}
+      {props.suffix}
+    </>
+  );
+};
+
+export default Timer;
+
+const padZero = (num: number) => {
+  return `${num}`.padStart(2, '0');
+};

src/components/common/Timer/index.tsx

@@ -0,0 +1 @@
+export { default } from './Timer';

src/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+type IntervalId = ReturnType<typeof setInterval>;
+
+export default function useInterval(callback: () => void, delay: number) {
+  const intervalId = useRef<IntervalId | null>(null);
+
+  const clear = () => {
+    if (intervalId.current !== null) {
+      clearInterval(intervalId.current);
+    }
+  };
+
+  useEffect(() => {
+    intervalId.current = setInterval(callback, delay);
+    return () => {
+      clear();
+    };
+  }, [callback, delay]);
+
+  return {
+    clear,
+  };
+}

src/utils/convertMsIntoDate.ts

@@ -0,0 +1,7 @@
+export const convertMsIntoDate = (milliseconds: number) => {
+  const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
+  return { days, hours, minutes, seconds };
+};

src/views/MainPage/MainPage.tsx

@@ -1,20 +1,25 @@
 import { Footer, Header, Layout, ScrollToTopButton } from '@src/components';
+import { useIsMobile } from '@src/hooks/useDevice';
 import {
   ActivityDescription,
   ActivityReview,
   BannerImage,
   DetailedInformation,
   PartDescription,
+  RecruitFloatingBanner,
   SoptHistory,
 } from '@src/views/MainPage/components';
 import styles from './main-page.module.scss';
 
 function MainPage() {
+  const isMobile = useIsMobile();
+
   return (
     <>
       <Layout>
         <Header />
-        <ScrollToTopButton />
+        {!isMobile && <ScrollToTopButton />}
+        <RecruitFloatingBanner />
         <BannerImage />
         <div className={styles.container}>
           <div className={styles.content}>

src/views/MainPage/components/RecruitFloatingBanner/RecruitFloatingBanner.tsx

@@ -0,0 +1,138 @@
+import styled from '@emotion/styled';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import Timer from '@src/components/common/Timer';
+import { useIsMobile } from '@src/hooks/useDevice';
+import SoptSymbol from '@src/views/MainPage/assets/sopt-symbol.svg';
+import dayjs from 'dayjs';
+
+const TARGET_DATE = dayjs('2023-09-08T15:00:00.000Z').toDate();
+
+export function RecruitFloatingBanner() {
+  const isMobile = useIsMobile();
+  const router = useRouter();
+
+  return (
+    <Wrapper>
+      <Banner isMobile={isMobile} onClick={() => router.push('/recruit')}>
+        <Countdown>
+          <Symbol src={SoptSymbol} alt="솝트 심볼" />
+          {isMobile ? (
+            '33기 YB 지원하기'
+          ) : (
+            <Timer
+              targetDate={TARGET_DATE}
+              prefix="33기 YB 모집 마감까지 "
+              endMessage="33기 YB 모집이 마감되었습니다"
+            />
+          )}
+        </Countdown>
+        <ApplyButton>
+          <Link href="/recruit">{isMobile ? '→' : '지원하기→'}</Link>
+        </ApplyButton>
+      </Banner>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  position: fixed;
+  left: 50%;
+  bottom: 120px;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+
+  @media (max-width: 1299px) {
+    bottom: 80px;
+  }
+`;
+
+const Symbol = styled.img`
+  width: 52px;
+  height: 26px;
+
+  @media (max-width: 1299px) and (min-width: 766px) {
+    width: 36px;
+    height: 18px;
+  }
+
+  @media (max-width: 766px) {
+    width: 30px;
+    height: 15px;
+  }
+`;
+
+const Banner = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 753px;
+  height: 88px;
+  padding: 31px 40px 31px 48px;
+
+  border-radius: 20px;
+  border: 1px solid rgba(114, 222, 173, 0.6);
+  background: rgba(33, 50, 42, 0.7);
+
+  box-shadow: 0px 4px 20px 0px rgba(32, 39, 38, 0.15);
+  backdrop-filter: blur(50px);
+
+  @media (max-width: 1299px) and (min-width: 766px) {
+    width: 585px;
+    padding: 31px 32px;
+  }
+
+  @media (max-width: 766px) {
+    width: 312px;
+    height: 56px;
+    padding: 20px 24px;
+
+    border-radius: 12px;
+  }
+
+  cursor: ${({ isMobile }) => (isMobile ? 'pointer' : 'auto')};
+`;
+
+const Countdown = styled.div`
+  display: flex;
+  gap: 16px;
+
+  color: #fcfcfc;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 100%; /* 26px */
+  letter-spacing: -0.52px;
+
+  @media (max-width: 1299px) and (min-width: 766px) {
+    font-size: 18px;
+    letter-spacing: -0.36px;
+  }
+
+  @media (max-width: 766px) {
+    gap: 8px;
+
+    font-size: 16px;
+    letter-spacing: -0.32px;
+  }
+`;
+
+const ApplyButton = styled.div`
+  color: #1deda2;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 100%; /* 26px */
+  letter-spacing: -0.52px;
+
+  cursor: pointer;
+
+  @media (max-width: 1299px) and (min-width: 766px) {
+    font-size: 18px;
+    letter-spacing: -0.36px;
+  }
+
+  @media (max-width: 766px) {
+    font-size: 16px;
+    letter-spacing: -0.32px;
+  }
+`;

src/views/MainPage/components/index.ts

@@ -4,3 +4,4 @@ export * from './ActivityDescription/ActivityDescription';
 export * from './DetailedInformation/DetailedInformation';
 export * from './PartDescription/PartDescription';
 export * from './ActivityReview/ActivityReview';
+export * from './RecruitFloatingBanner/RecruitFloatingBanner';