From bcbec0671613a540167fdb39e33a0b0824df142d Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Sun, 17 Sep 2023 19:24:32 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20NoticeButton=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1=20(#68)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/NoticeButton.tsx    | 50 +++++++++++++++++++
 .../components/mainpage/floating/Footer.tsx   |  4 +-
 .../components/mainpage/greeting/Intro.tsx    |  6 ++-
 .../mainpage/recruit/RecruitSection.tsx       |  7 ++-
 apps/web/tailwind.config.js                   |  2 +
 5 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/common/NoticeButton.tsx

diff --git a/apps/web/src/components/common/NoticeButton.tsx b/apps/web/src/components/common/NoticeButton.tsx
new file mode 100644
index 0000000..bd7c3e4
--- /dev/null
+++ b/apps/web/src/components/common/NoticeButton.tsx
@@ -0,0 +1,50 @@
+'use Client';
+
+import Link from 'next/link';
+import React from 'react';
+
+export default function NoticeButton() {
+  return (
+    <div className='mb-[9.3rem] mt-[4rem] flex flex-col gap-[1.2rem] md:flex-row'>
+      <Link
+        href='https://docs.google.com/forms/d/e/1FAIpQLScQQoHcjvOBnPAsNU_PJ27pO5ymNjoYfFIXt2n46KxjuPCSbg/viewform'
+        className='w-[23rem]'
+      >
+        <p className='md:text-18-bold text-black100 text-16-bold flex items-center justify-center gap-[0.6rem] rounded-[0.6rem] bg-white px-[2rem] py-[1.6rem]'>
+          <NoticeIcon />
+          4기 모집 알림 신청
+        </p>
+      </Link>
+      <Link href='/recruit/' className='w-[23rem]'>
+        <p className='md:text-18-bold text-16-bold bg-gray2 flex items-center justify-center gap-[0.6rem] rounded-[0.6rem] px-[2rem] py-[1.6rem] text-white'>
+          <ArrowIcon />
+          3기 모집글 보기 (마감)
+        </p>
+      </Link>
+    </div>
+  );
+}
+
+function NoticeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={20} height={20} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M10 1.833A5.67 5.67 0 004.332 7.5v3.965l-1.555 2.332a.667.667 0 00-.112.37V15c0 .368.298.667.667.667h13.333a.667.667 0 00.667-.667v-.833a.667.667 0 00-.112-.37l-1.555-2.332V7.5a5.67 5.67 0 00-5.667-5.667zM7.987 17h4.022A2.328 2.328 0 0110 18.166c-.86 0-1.607-.472-2.012-1.166z'
+        fill='#0F1010'
+      />
+    </svg>
+  );
+}
+
+function ArrowIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={20} height={20} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        d='M15.848 4.378a.666.666 0 00-.586-.322h-9.43a.667.667 0 100 1.333h7.835L4.25 14.806a.667.667 0 10.943.943l9.417-9.418v7.836a.667.667 0 001.334 0V4.722a.664.664 0 00-.096-.344z'
+        fill='#FCFCFC'
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/mainpage/floating/Footer.tsx b/apps/web/src/components/mainpage/floating/Footer.tsx
index 5a786b8..9edf480 100644
--- a/apps/web/src/components/mainpage/floating/Footer.tsx
+++ b/apps/web/src/components/mainpage/floating/Footer.tsx
@@ -4,10 +4,10 @@ import { RightArrowIcon } from '../../common/RightArrowIcon';
 
 export default function Footer() {
   return (
-    <Link href='/recruit/'>
+    <Link href='https://docs.google.com/forms/d/e/1FAIpQLScQQoHcjvOBnPAsNU_PJ27pO5ymNjoYfFIXt2n46KxjuPCSbg/viewform'>
       <button className='text-24-semibold fixed bottom-[6rem] right-[6rem] z-20'>
         <div className='flex flex-row items-center justify-center gap-[0.8rem]'>
-          3기 합류하기 (~8/5)
+          4기 모집 알림 신청
           <RightArrowIcon />
         </div>
       </button>
diff --git a/apps/web/src/components/mainpage/greeting/Intro.tsx b/apps/web/src/components/mainpage/greeting/Intro.tsx
index 5e04f4a..e0db03a 100644
--- a/apps/web/src/components/mainpage/greeting/Intro.tsx
+++ b/apps/web/src/components/mainpage/greeting/Intro.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { m, useScroll, useTransform } from 'framer-motion';
 import { SVGProps, useRef } from 'react';
 
-import RecruitButton from '@/components/common/RecruitButton';
+import NoticeButton from '@/components/common/NoticeButton';
+// import RecruitButton from '@/components/common/RecruitButton';
 
 interface GreetingProps {
   className?: string;
@@ -29,7 +30,8 @@ export default function Intro({ className }: GreetingProps) {
           SOPT에 없던 새로운 가치를 <br />
           프로덕트를 통해 만들어 갑니다.
         </h1>
-        <RecruitButton />
+        {/* <RecruitButton /> */}
+        <NoticeButton />
         <ArrowIcon />
       </m.div>
     </article>
diff --git a/apps/web/src/components/mainpage/recruit/RecruitSection.tsx b/apps/web/src/components/mainpage/recruit/RecruitSection.tsx
index becdda5..6dda2f9 100644
--- a/apps/web/src/components/mainpage/recruit/RecruitSection.tsx
+++ b/apps/web/src/components/mainpage/recruit/RecruitSection.tsx
@@ -3,7 +3,9 @@
 import { m, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-import RecruitButton from '../../common/RecruitButton';
+import NoticeButton from '@/components/common/NoticeButton';
+
+// import RecruitButton from '../../common/RecruitButton';
 
 export default function RecruitSection() {
   const ref = useRef(null);
@@ -29,7 +31,8 @@ export default function RecruitSection() {
             <br />
             메이커스에 합류하세요
           </h1>
-          <RecruitButton />
+          {/* <RecruitButton /> */}
+          <NoticeButton />
         </div>
       </div>
     </m.article>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 216680d..8d5f4f3 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -47,8 +47,10 @@ module.exports = {
       '32-regular': ['3.2rem', { lineHeight: '160%', letterSpacing: '-0.064rem', fontWeight: 400 }],
       '28-regular': ['2.8rem', { lineHeight: '160%', letterSpacing: '-0.064rem', fontWeight: 400 }],
       '24-semibold': ['2.4rem', { lineHeight: '150%', letterSpacing: '-0.048rem', fontWeight: 600 }],
+      '18-bold': ['1.8rem', { lineHeight: '140%', letterSpacing: '-0.036rem', fontWeight: 700 }],
       '18-semibold': ['1.8rem', { lineHeight: '150%', letterSpacing: '-0.036rem', fontWeight: 600 }],
       '18-regular': ['1.8rem', { lineHeight: '150%', letterSpacing: '-0.036rem', fontWeight: 400 }],
+      '16-bold': ['1.6rem', { lineHeight: '140%', letterSpacing: '-0.036rem', fontWeight: 700 }],
       '16-regular': ['1.6rem', { lineHeight: '130%', letterSpacing: '-0.036rem', fontWeight: 400 }],
       '16-regular-desc': ['1.6rem', { lineHeight: '160%', letterSpacing: '-0.128rem', fontWeight: 400 }],
     },