From cbece35638dd361bbf0db6ab38e2429b4f6955d1 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Mon, 29 Jan 2024 21:27:40 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20RecruitButton=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=82=A8=EC=9D=80=20=EC=8B=9C=EA=B0=84=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/AboutRecruit/RecruitButton.tsx     | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/common/AboutRecruit/RecruitButton.tsx b/apps/web/src/components/common/AboutRecruit/RecruitButton.tsx
index 0986125..3e6406c 100644
--- a/apps/web/src/components/common/AboutRecruit/RecruitButton.tsx
+++ b/apps/web/src/components/common/AboutRecruit/RecruitButton.tsx
@@ -2,7 +2,7 @@
 
 import dayjs from 'dayjs';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function RecruitButton() {
   const [timeLeft, setTimeLeft] = useState<string>('');
@@ -27,11 +27,13 @@ export default function RecruitButton() {
       const days = Math.floor(difference / (3600 * 24));
       const hours = Math.floor((difference / 3600) % 24);
       const minutes = Math.floor((difference / 60) % 60);
-      const seconds = difference % 60;
+      // const seconds = difference % 60;
 
-      return `4기 지원 마감까지 ${days}일 ${hours.toString().padStart(2, '0')}:${minutes
-        .toString()
-        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+      if (days > 0 || hours >= 24) {
+        return '현재 메이커스 4기 모집 중 (~2/7 토요일 자정)';
+      }
+
+      return `지원 마감까지 ${hours.toString()}시간 ${minutes.toString().padStart(2, '0')}분 남았어요.`;
     };
 
     setTimeLeft(calculateTimeLeft());
@@ -44,12 +46,24 @@ export default function RecruitButton() {
   }, []);
 
   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>
+    <>
+      <Link
+        href='/recruit/'
+        className='mb-[0.5rem] mt-[4rem] rounded-[1.2rem] border border-solid border-[#808388] bg-white px-[2.6rem] py-[1.6rem]'
+      >
+        <p className='md:text-18-semibold text-18-semibold text-black100 flex items-center justify-center gap-[0.25rem]'>
+          4기 지원하기 <RightArrow />
+        </p>
+      </Link>
+      <p className='text-16-regular text-brand-orange mb-[4.2rem] mt-[1.2rem] text-center'>{timeLeft}</p>
+    </>
   );
+
+  function RightArrow(props: React.SVGProps<SVGSVGElement>) {
+    return (
+      <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+        <path d='M9 18L15 12L9 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' />
+      </svg>
+    );
+  }
 }