feat : NoticeButton 퍼블리싱

sopt-makers · Sep 17, 2023 · ff7761f · ff7761f
1 parent d0dd9c9
commit ff7761f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/apps/web/src/components/common/NoticeButton.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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 }],
  },