[SP0] 모집 마감 뷰 반영 (#375)

* feat: useCheckTime 종료시간 추가, MainPage, RecruitPage 배너 적용

* feat: 메인페이지 RecruitButton 라이팅 수정

* fix: 모집 마감 시간 픽스

.vscode/settings.json

@@ -1,9 +1,9 @@
 {
     "editor.tabSize": 2,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint" : true,
-        "source.fixAll.stylelint" : true,
-      },
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit"
+    },
 
     "editor.formatOnSave" : true, 
 }

src/hooks/useCheckTime.ts

@@ -2,11 +2,14 @@ import { useEffect, useState } from 'react';
 
 export default function useCheckTime() {
   const START_DATE = new Date('2024-03-03 00:00:00');
-  const [timeDiff, setTimeDiff] = useState<number>(START_DATE.getTime() - Date.now());
+  const END_DATE = new Date('2024-03-08 18:00:00');
+  const [startDiff, setStartDiff] = useState<number>(START_DATE.getTime() - Date.now());
+  const [endDiff, setEndDiff] = useState<number>(Date.now() - END_DATE.getTime());
 
   useEffect(()=>{
-    setTimeDiff(START_DATE.getTime() - Date.now());
+    setStartDiff(START_DATE.getTime() - Date.now());
+    setEndDiff(Date.now() - END_DATE.getTime());
   }, []);
 
-  return timeDiff<=0 ;
+  return startDiff<=0 && endDiff<=0 ;
 }

src/views/MainPage/MainPage.tsx

@@ -9,12 +9,12 @@ import usePost from './hooks/usePost';
 import useCheckTime from '../../hooks/useCheckTime';
 
 function MainPage() {
-  const isStarted = useCheckTime(); // 모집 시작 여부
+  const isValid = useCheckTime(); // 모집 시작 여부
   usePost();  // 방문자 증가
 
   return (
     <PageLayout>
-      {isStarted && <TopBanner/>}
+      {isValid && <TopBanner/>}
       <Banner />
       <Introduce />
       <IntroSection />

src/views/MainPage/components/Banner/index.tsx

@@ -1,8 +1,11 @@
 import imgMainPageBanner from '@src/assets/images/img_mainBanner.png';
 import RecruitButton from './RecruitButton';
 import * as S from './style';
+import useCheckTime from '@src/hooks/useCheckTime';
 
 export default function Banner() {
+  const isValid = useCheckTime(); // 모집 여부
+
   const onScrollMoveDown = () => {
     const element = document.getElementById('nextContainer');
     if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -15,7 +18,7 @@ export default function Banner() {
           <S.Content>
             <S.Title>함께라서 외칠 수 있는 열정</S.Title>
             <S.Title>오직 이곳 SOPT에서만.</S.Title>
-            <RecruitButton>34기 YB 지원하기 &gt; </RecruitButton>
+            <RecruitButton>{isValid ? '34기 YB 지원하기 ' : '모집 알림 신청하기 '}&gt; </RecruitButton>
           </S.Content>
           <S.DownScrollIcon onClick={onScrollMoveDown} />
         </S.ContentWrapper>

src/views/RecruitPage/RecruitPage.tsx

@@ -14,12 +14,12 @@ const ActivityReview = lazy(() => import('./components/ActivityReview'));
 const BottomLogo = lazy(() => import('./components/BottomLogo'));
 
 function Recruit() {
-  const isStarted = useCheckTime(); 
+  const isValid = useCheckTime(); 
 
   return (
     <PageLayout showScrollTopButton>
       <Root>
-        {isStarted ? <ApplySection/> : <NotificationSection />}
+        {isValid ? <ApplySection/> : <NotificationSection />}
         <ContentWrapper>
           <RecruiteeInfo />
           <ChapterInfo />