13기 모집 알림 신청 적용 (#182)

* chore: update codeowners * feat: cta 버튼 스타일 분리 * feat: recruit, home-apply 모집 알림 앵커 적용 * feat: home-header 카피 변경 * feat: 카피 변경 * feat: 불필요 영역 삭제 및 스타일링 * chore: 버튼 타이포 변경 * feat: 불필요 영역 삭제 및 모집 알림 섹션 추가
depromeet · Feb 6, 2023 · c289d96 · c289d96 · vercel · Feb 6, 2023
1 parent e2e4184
commit c289d96
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 118 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1 @@
-* @SenseCodeValue @hyesungoh @SeongYongLee
+* @SenseCodeValue @hyesungoh
diff --git a/src/components/common/CTAButton/CTAButton.tsx b/src/components/common/CTAButton/CTAButton.tsx
@@ -1,7 +1,6 @@
 import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
-import { css } from '@emotion/react';
 
-import { colors, mediaQuery, radius } from '~/styles/constants';
+import { ctaCss } from '~/styles/css/cta';
 
 interface Props extends ComponentPropsWithoutRef<'button'> {}
 
@@ -10,35 +9,10 @@ const CTAButton = forwardRef(function CTAButton(
   ref: Ref<HTMLButtonElement>
 ) {
   return (
-    <button css={buttonCss} ref={ref} {...rest}>
+    <button css={ctaCss} ref={ref} {...rest}>
       {children}
     </button>
   );
 });
 
 export default CTAButton;
-
-const buttonCss = css`
-  padding: 26px 80px;
-  font-size: 1.5rem;
-  font-weight: 600;
-  background-color: ${colors.primary};
-  color: ${colors.white};
-  border-radius: ${radius.sm};
-
-  transition: background-color 0.3s;
-
-  &:hover {
-    background-color: ${colors.primaryDark};
-  }
-
-  &:disabled {
-    background-color: ${colors.gray6};
-    color: ${colors.gray9};
-  }
-
-  ${mediaQuery('xs')} {
-    padding: 16px 30px;
-    font-size: 16px;
-  }
-`;
diff --git a/src/components/home/ApplySection/ApplySection.tsx b/src/components/home/ApplySection/ApplySection.tsx
@@ -2,18 +2,16 @@ import Link from 'next/link';
 import { css } from '@emotion/react';
 import { motion } from 'framer-motion';
 
-import CTAButton from '~/components/common/CTAButton';
+import { EMAIL_13TH_GOOGLE_FORM } from '~/constants/common/depromeet';
 import {
   defaultFadeInScaleVariants,
   defaultFadeInVariants,
   staggerHalf,
 } from '~/constants/motions';
-import useIsInProgress from '~/hooks/use-is-in-progress';
 import { colors, mediaQuery } from '~/styles/constants';
+import { ctaCss } from '~/styles/css/cta';
 
 export default function ApplySection() {
-  const isInProgress = useIsInProgress();
-
   return (
     <motion.section
       css={sectionCss}
@@ -24,19 +22,32 @@ export default function ApplySection() {
       viewport={{ amount: 0.6, once: true }}
     >
       <motion.span css={spanCss} variants={defaultFadeInVariants}>
-        이제 여러분 차례예요!
+        알림 신청하고 이메일로 간편히 받아보세요
       </motion.span>
 
       <motion.h2 css={headingCss} variants={defaultFadeInVariants}>
-        디프만 12기 멤버가 되고싶다면
+        디프만 13기 언제 시작하나..
+        <br />
+        오매불망 기다리고만 있었다면?
       </motion.h2>
 
-      <Link href="/recruit" passHref>
+      {/* <Link href="/recruit" passHref>
         <motion.a variants={defaultFadeInScaleVariants}>
           <CTAButton disabled={!isInProgress()}>
             {isInProgress() ? '지금 지원하기' : '모집 기간이 아닙니다.'}
           </CTAButton>
         </motion.a>
+      </Link> */}
+
+      <Link href={EMAIL_13TH_GOOGLE_FORM} passHref>
+        <motion.a
+          variants={defaultFadeInScaleVariants}
+          css={ctaCss}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          13기 모집 알림 신청하기
+        </motion.a>
       </Link>
     </motion.section>
   );

diff --git a/src/components/home/RecordSection/RecordSection.tsx b/src/components/home/RecordSection/RecordSection.tsx
@@ -40,7 +40,7 @@ export default function RecordSection() {
 }
 
 const sectionCss = css`
-  margin-top: 210px;
+  margin-top: 310px;
   width: 100%;
 `;
 

diff --git a/src/components/home/RecruitNotiSection/RecruitNotiSection.tsx b/src/components/home/RecruitNotiSection/RecruitNotiSection.tsx
@@ -0,0 +1,75 @@
+import Link from 'next/link';
+import { css } from '@emotion/react';
+
+import { EMAIL_13TH_GOOGLE_FORM } from '~/constants/common/depromeet';
+import { colors, mediaQuery } from '~/styles/constants';
+import { ctaCss } from '~/styles/css/cta';
+
+export default function RecruitNotiSection() {
+  return (
+    <section css={sectionCss}>
+      <div css={headingWrapperCss}>
+        <div css={logoWrapperCss}>
+          <h1 css={pendingHeadingCss}>13기 운영진은 겨울잠 자는 중 🐻💤</h1>
+        </div>
+
+        <span css={notificationSpanCss}>디프만 13기 리쿠르팅 기간을 놓치고 싶지 않다면?</span>
+
+        <Link href={EMAIL_13TH_GOOGLE_FORM} passHref>
+          <a css={ctaCss}>13기 모집 알림 신청하기</a>
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+const sectionCss = css`
+  margin-top: 260px;
+  width: 100%;
+  padding-bottom: 260px;
+`;
+
+const headingWrapperCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+`;
+
+const logoWrapperCss = css`
+  margin-bottom: 19px;
+
+  ${mediaQuery('xs')} {
+    margin-bottom: 15px;
+  }
+`;
+
+const pendingHeadingCss = css`
+  font-weight: 600;
+  font-size: 4.375rem;
+  line-height: 120%;
+  white-space: pre;
+
+  ${mediaQuery('sm')} {
+    font-size: 3.5rem;
+  }
+
+  ${mediaQuery('xs')} {
+    font-size: 1.875rem;
+    line-height: 150%;
+  }
+`;
+
+const notificationSpanCss = css`
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 140%;
+  white-space: pre;
+  color: ${colors.gray3};
+
+  margin-bottom: 80px;
+
+  ${mediaQuery('xs')} {
+    font-size: 1.25rem;
+  }
+`;
diff --git a/src/components/home/RecruitNotiSection/index.tsx b/src/components/home/RecruitNotiSection/index.tsx
@@ -0,0 +1 @@
+export { default } from './RecruitNotiSection';
diff --git a/src/components/recruit/HeaderSection/Finish.tsx b/src/components/recruit/HeaderSection/Finish.tsx
@@ -1,20 +1,27 @@
+import Link from 'next/link';
 import { css } from '@emotion/react';
 
-import CTAButton from '~/components/common/CTAButton';
+import { EMAIL_13TH_GOOGLE_FORM } from '~/constants/common/depromeet';
 import { colors, mediaQuery } from '~/styles/constants';
+import { ctaCss } from '~/styles/css/cta';
 
 export default function Finish() {
   return (
     <>
       <span css={descriptionCss}>13기 세부 일정은 2월 말 오픈 예정입니다</span>
-      <h1 css={headingCss}>13기 운영진은 겨울잠 중 🐻💤</h1>
-      {/* TODO: 모집 알림 받기 기능 */}
-      <CTAButton disabled>모집 기간이 아닙니다.</CTAButton>
+      <h1 css={headingCss}>13기 운영진은 겨울잠 자는 중 🐻💤</h1>
+
+      {/* <CTAButton disabled>모집 기간이 아닙니다.</CTAButton> */}
+      <Link href={EMAIL_13TH_GOOGLE_FORM} passHref>
+        <a css={ctaCss} target="_blank" rel="noopener noreferrer">
+          13기 모집 알림 신청하기
+        </a>
+      </Link>
     </>
   );
 }
 const descriptionCss = css`
-  font-weight: 700;
+  font-weight: 400;
   font-size: 2rem;
   line-height: 140%;
   text-align: center;
@@ -40,6 +47,10 @@ const headingCss = css`
 
   margin-bottom: 155px;
 
+  ${mediaQuery('sm')} {
+    font-size: 3.5rem;
+  }
+
   ${mediaQuery('xs')} {
     font-size: 1.857rem;
     line-height: 150%;

diff --git a/src/components/recruit/HeaderSection/HeaderSection.tsx b/src/components/recruit/HeaderSection/HeaderSection.tsx
@@ -1,15 +1,13 @@
 import { useRef, useState } from 'react';
 import Image from 'next/image';
 import { css } from '@emotion/react';
-import { motion, useScroll, useTransform, Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 
-import { ScrollBottomIcon } from '~/components/common/icons';
 import { NAV_HEIGHT } from '~/components/common/NavigationBar/NavigationBar';
 import { END_DATE, START_DATE } from '~/constants/common';
-import { defaultEasing, defaultFadeInScaleVariants } from '~/constants/motions';
+import { defaultFadeInScaleVariants } from '~/constants/motions';
 import useMediaQuery from '~/hooks/use-media-query';
 import useEffectOnce from '~/hooks/useeffect-once';
-import { mediaQuery } from '~/styles/constants';
 
 import Finish from './Finish';
 import InProgress from './InProgress';
@@ -37,9 +35,9 @@ export default function HeaderSection() {
   const startDate = new Date(START_DATE);
   const endDate = new Date(END_DATE);
 
-  const { scrollY } = useScroll();
-  const scrollBottomOpacity = useTransform(scrollY, [0, 800], [1, 0]);
-  const scrollBottomScale = useTransform(scrollY, [0, 800], [1, 0.6]);
+  // const { scrollY } = useScroll();
+  // const scrollBottomOpacity = useTransform(scrollY, [0, 800], [1, 0]);
+  // const scrollBottomScale = useTransform(scrollY, [0, 800], [1, 0.6]);
 
   useEffectOnce(() => {
     const currentState = getCurrentState();
@@ -119,7 +117,7 @@ export default function HeaderSection() {
         {RECRUIT_STATE.FINISH === state && <Finish />}
       </motion.section>
 
-      <motion.div
+      {/* <motion.div
         css={scrollBottomIconWrapperCss}
         style={{ opacity: scrollBottomOpacity, scale: scrollBottomScale }}
         variants={scrollBottomVariants}
@@ -128,7 +126,7 @@ export default function HeaderSection() {
         exit="exit"
       >
         <ScrollBottomIcon />
-      </motion.div>
+      </motion.div> */}
     </motion.header>
   );
 }
@@ -156,39 +154,39 @@ const sectionCss = css`
   box-sizing: border-box;
 `;
 
-const scrollBottomIconWrapperCss = css`
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  margin: 0 auto;
-
-  ${mediaQuery('xs')} {
-    bottom: 50px;
-  }
-`;
-
-const scrollBottomVariants: Variants = {
-  initial: {
-    opacity: 0,
-    scale: 0.5,
-    y: -30,
-    x: '-50%',
-    transition: { duration: 1.2, ease: defaultEasing },
-    willChange: 'opacity, transform',
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    transition: { duration: 1.2, ease: defaultEasing },
-    willChange: 'opacity, transform',
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.85,
-    y: 0,
-    transition: { duration: 1.2, ease: defaultEasing },
-    willChange: 'opacity, transform',
-  },
-};
+// const scrollBottomIconWrapperCss = css`
+//   position: absolute;
+//   bottom: 20px;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   margin: 0 auto;
+
+//   ${mediaQuery('xs')} {
+//     bottom: 50px;
+//   }
+// `;
+
+// const scrollBottomVariants: Variants = {
+//   initial: {
+//     opacity: 0,
+//     scale: 0.5,
+//     y: -30,
+//     x: '-50%',
+//     transition: { duration: 1.2, ease: defaultEasing },
+//     willChange: 'opacity, transform',
+//   },
+//   animate: {
+//     opacity: 1,
+//     scale: 1,
+//     y: 0,
+//     transition: { duration: 1.2, ease: defaultEasing },
+//     willChange: 'opacity, transform',
+//   },
+//   exit: {
+//     opacity: 0,
+//     scale: 0.85,
+//     y: 0,
+//     transition: { duration: 1.2, ease: defaultEasing },
+//     willChange: 'opacity, transform',
+//   },
+// };
diff --git a/src/constants/common/depromeet.ts b/src/constants/common/depromeet.ts
@@ -6,3 +6,5 @@ export const DEPROMEET_GITHUB = 'https://github.com/depromeet/';
 export const DEPROMEET_BEHANCE = 'https://www.behance.net/Depromeet';
 
 export const KAKAO_PLUS_FRIEND = 'http://pf.kakao.com/_xoxmcxed';
+
+export const EMAIL_13TH_GOOGLE_FORM = 'https://forms.gle/5AwcGJjKT9LUNYfM7';