feat: 4기 모집 준비 반영 (#70)

sopt-makers · Jan 27, 2024 · d7a7108 · d7a7108
1 parent 582880d
commit d7a7108
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 31 deletions.
diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx
@@ -16,7 +16,7 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
           () => reset()
         }
       >
-        Try again
+        재시도
       </button>
     </div>
   );

diff --git a/...eb/src/components/common/NoticeButton.tsx → ...ents/common/AboutRecruit/NoticeButton.tsx b/...eb/src/components/common/NoticeButton.tsx → ...ents/common/AboutRecruit/NoticeButton.tsx
diff --git a/...b/src/components/common/RecruitButton.tsx → ...nts/common/AboutRecruit/RecruitButton.tsx b/...b/src/components/common/RecruitButton.tsx → ...nts/common/AboutRecruit/RecruitButton.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import dayjs from 'dayjs';
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
 export default function RecruitButton() {
-  const [timeLeft, setTimeLeft] = useState<string>('');
+  const [_timeLeft, setTimeLeft] = useState<string>('');
 
   useEffect(() => {
     const deadline = dayjs('2023-08-07T14:59:00.000Z');
@@ -44,12 +43,27 @@ export default function RecruitButton() {
   }, []);
 
   return (
-    <Link
-      href='/recruit/'
+    <button
+      onClick={() => {
+        alert('모집이 시작되면 다시 찾아와 주세요!');
+      }}
       className='bg-dark1 mb-[3rem] mt-[4rem] rounded-[1.2rem] border border-solid border-[#808388] px-[4rem] py-[1.6rem]'
     >
-      <p className='md:text-24-semibold text-18-semibold'>3기 합류하기 (~8/7)</p>
-      <p className='text-16-regular mt-[1.2rem] text-center'>{timeLeft}</p>
-    </Link>
+      <p className='md:text-24-semibold text-18-semibold text-center'>
+        곧 4기 모집이 시작됩니다.
+        <br />
+        (1월 29일 월 ~ )
+      </p>
+    </button>
   );
+
+  // return (
+  //   <Link
+  //     href='/recruit/'
+  //     className='bg-dark1 mb-[3rem] mt-[4rem] rounded-[1.2rem] border border-solid border-[#808388] px-[4rem] py-[1.6rem]'
+  //   >
+  //     <p className='md:text-24-semibold text-18-semibold'>4기 합류하기 (~2/7)</p>
+  //     {/* <p className='text-16-regular mt-[1.2rem] text-center'>{timeLeft}</p> */}
+  //   </Link>
+  // );
 }
diff --git a/apps/web/src/components/common/AboutRecruit/index.tsx b/apps/web/src/components/common/AboutRecruit/index.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import RecruitButton from './RecruitButton';
+
+interface AboutRecruitProps {}
+
+// 모집 상태가 바뀌면 여기의 버튼을 상황에 맞게 <RecruitButton /> 과 <NoticeButton /> 으로 바꿔주면 됩니다.
+
+const AboutRecruit: FC<AboutRecruitProps> = ({}) => {
+  return <RecruitButton />;
+};
+
+export default AboutRecruit;
diff --git a/apps/web/src/components/common/SimpleMenu.tsx b/apps/web/src/components/common/SimpleMenu.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+
+import AboutRecruit from './AboutRecruit';
+
+interface SimpleMenuProps {}
+
+const SimpleMenu: FC<SimpleMenuProps> = ({}) => {
+  const [isShowMenu, setIsShowMenu] = useState(false);
+
+  useEffect(() => {
+    const pid = setTimeout(() => {
+      setIsShowMenu(true);
+    }, 5000);
+
+    return () => {
+      clearTimeout(pid);
+    };
+  }, []);
+
+  if (!isShowMenu) {
+    return null;
+  }
+
+  return (
+    <div>
+      <AboutRecruit />
+    </div>
+  );
+};
+
+export default SimpleMenu;
diff --git a/apps/web/src/components/mainpage/floating/Footer.tsx b/apps/web/src/components/mainpage/floating/Footer.tsx
@@ -1,16 +1,13 @@
-import Link from 'next/link';
-
-import { RightArrowIcon } from '../../common/RightArrowIcon';
-
 export default function Footer() {
-  return (
-    <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]'>
-          4기 모집 알림 신청
-          <RightArrowIcon />
-        </div>
-      </button>
-    </Link>
-  );
+  return null;
+  // return (
+  //   <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]'>
+  //         4기 모집 알림 신청
+  //         <RightArrowIcon />
+  //       </div>
+  //     </button>
+  //   </Link>
+  // );
 }
diff --git a/apps/web/src/components/mainpage/greeting/Intro.tsx b/apps/web/src/components/mainpage/greeting/Intro.tsx
@@ -4,8 +4,7 @@ import clsx from 'clsx';
 import { m, useScroll, useTransform } from 'framer-motion';
 import { SVGProps, useRef } from 'react';
 
-import NoticeButton from '@/components/common/NoticeButton';
-// import RecruitButton from '@/components/common/RecruitButton';
+import AboutRecruit from '@/components/common/AboutRecruit';
 
 interface GreetingProps {
   className?: string;
@@ -32,8 +31,7 @@ export default function Intro({ className }: GreetingProps) {
           SOPT에 없던 새로운 가치를 <br />
           프로덕트를 통해 만들어 갑니다.
         </h1>
-        {/* <RecruitButton /> */}
-        <NoticeButton />
+        <AboutRecruit />
         <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,9 +3,7 @@
 import { m, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-import NoticeButton from '@/components/common/NoticeButton';
-
-// import RecruitButton from '../../common/RecruitButton';
+import AboutRecruit from '@/components/common/AboutRecruit';
 
 export default function RecruitSection() {
   const ref = useRef(null);
@@ -31,8 +29,7 @@ export default function RecruitSection() {
             <br />
             메이커스에 합류하세요
           </h1>
-          {/* <RecruitButton /> */}
-          <NoticeButton />
+          <AboutRecruit />
         </div>
       </div>
     </m.article>