Merge pull request #262 from mash-up-kr/develop

Release v1.6.0 배포
mash-up-kr · Jan 21, 2024 · 737d2d9 · 737d2d9
2 parents fa62fb4 + b6385e1
commit 737d2d9
Show file tree

Hide file tree

Showing 16 changed files with 191 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@next/bundle-analyzer": "^12.1.0",
     "aos": "^3.0.0-beta.6",
     "axios": "^0.26.0",
+    "dayjs": "^1.11.10",
     "editorjs-html": "^3.4.3",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.9.1",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,7 +6,6 @@ import {
   RecruitingOpenHero,
   RecruitingPeriod,
   RecruitingRemainder,
-  NotRecruitmentPeriod,
 } from '@/components';
 
 import { useAOS } from '@/hooks';
@@ -17,7 +16,6 @@ import { useEffect, useState } from 'react';
 const Home = () => {
   useAOS();
 
-  const [isOpenNotRecruitMentModal, setIsOpenNotRecruitmentModal] = useState(true);
   const [recruitingProgressStatus, setRecruitingProgressStatus] = useState<
     RecruitingProgressStatus | 'NOT_INITIALIZED'
   >('NOT_INITIALIZED');
@@ -36,9 +34,6 @@ const Home = () => {
           <RecruitingPeriod />
           <RecruitingProcess />
           <RecruitingDetailNavigation />
-          {isOpenNotRecruitMentModal && (
-            <NotRecruitmentPeriod setIsOpenModal={setIsOpenNotRecruitmentModal} />
-          )}
         </HomeLayout>
       )}
     </>

diff --git a/src/components/common/Footer/Footer.component.tsx b/src/components/common/Footer/Footer.component.tsx
@@ -19,7 +19,7 @@ const Footer = () => {
         <Styled.Footer currentPage={currentPage}>
           <Styled.FooterInner>
             <Styled.Copyright currentPage={currentPage}>
-              © Mash-Up 2023. Made in Seoul.
+              © Mash-Up 2024. Made in Seoul.
             </Styled.Copyright>
             <Styled.ExternalLinkWrapper currentPage={currentPage}>
               <a

diff --git a/src/components/home/RecruitingOpenHero/RecruitingOpenHero.component.tsx b/src/components/home/RecruitingOpenHero/RecruitingOpenHero.component.tsx
@@ -3,7 +3,7 @@ import DoubleUnderline from '@/assets/svg/double-underline.svg';
 import GenerationRight from '@/assets/images/generation-right-2x.png';
 import Image from 'next/image';
 import { RecruitingPeriodDesktop, Lottie } from '@/components';
-import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION } from '@/constants';
+import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION, CURRENT_GENERATION } from '@/constants';
 import * as Styled from './RecruitingOpenHero.styled';
 
 const RecruitingOpenHero = () => {
@@ -18,7 +18,7 @@ const RecruitingOpenHero = () => {
             data-aos="fade-up"
             data-aos-duration={AOS_DEFAULT_DURATION + AOS_BASE_DURATION_DISTANCE}
           >
-            13th
+            {CURRENT_GENERATION}th
           </span>
           <Styled.RightImageContainer>
             <Image

diff --git a/src/components/home/RecruitingPeriod/RecruitingPeriod.component.tsx b/src/components/home/RecruitingPeriod/RecruitingPeriod.component.tsx
@@ -1,20 +1,28 @@
 import { Lottie, ScreenReaderOnly } from '@/components';
-import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION } from '@/constants';
+import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION, RECRUIT_DATE } from '@/constants';
 import computerLottie from '@/assets/lottie/computer.json';
 import PeriodArrow from '@/assets/svg/period-arrow.svg';
 import fireLottie from '@/assets/lottie/fire.json';
+import dayjs from 'dayjs';
 import * as Styled from './RecruitingPeriod.styled';
 
 const RecruitingPeriod = () => {
+  const { RECRUITMENT_START_KST_DATE, RECRUITMENT_END_KST_DATE } = RECRUIT_DATE;
+
+  const DAYJS_RECRUITMENT_START_KST_DATE = dayjs(RECRUITMENT_START_KST_DATE);
+  const DAYJS_RECRUITMENT_END_KST_DATE = dayjs(RECRUITMENT_END_KST_DATE);
+
   return (
     <Styled.Container>
       <Styled.Contents>
         <Styled.StartDateContainer>
           <Styled.StartDate data-aos="fade-up" data-aos-duration={AOS_DEFAULT_DURATION}>
             <span>Start Date</span>
-            <ScreenReaderOnly>2023년 1월 11일</ScreenReaderOnly>
-            <time aria-hidden dateTime="2023-01-11">
-              01.11
+            <ScreenReaderOnly>
+              {DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY년 M월 D일')}
+            </ScreenReaderOnly>
+            <time aria-hidden dateTime={DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY-MM-DD')}>
+              {DAYJS_RECRUITMENT_START_KST_DATE.format('MM.DD')}
             </time>
           </Styled.StartDate>
         </Styled.StartDateContainer>
@@ -24,9 +32,11 @@ const RecruitingPeriod = () => {
             data-aos-duration={AOS_DEFAULT_DURATION + AOS_BASE_DURATION_DISTANCE}
           >
             <span>End Date</span>
-            <ScreenReaderOnly>2023년 1월 25일</ScreenReaderOnly>
-            <time aria-hidden dateTime="2023-01-25">
-              01.25
+            <ScreenReaderOnly>
+              {DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY년 M월 D일')}
+            </ScreenReaderOnly>
+            <time aria-hidden dateTime={DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY-MM-DD')}>
+              {DAYJS_RECRUITMENT_END_KST_DATE.format('MM.DD')}
             </time>
           </Styled.EndDate>
         </Styled.EndDateContainer>

diff --git a/src/components/home/RecruitingPeriodDesktop/RecruitingPeriodDesktop.component.tsx b/src/components/home/RecruitingPeriodDesktop/RecruitingPeriodDesktop.component.tsx
@@ -1,28 +1,38 @@
-import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION } from '@/constants';
+import { AOS_BASE_DURATION_DISTANCE, AOS_DEFAULT_DURATION, RECRUIT_DATE } from '@/constants';
 import { Lottie, ScreenReaderOnly } from '@/components';
 import computerLottie from '@/assets/lottie/computer.json';
 import PeriodArrow from '@/assets/svg/period-arrow.svg';
 import fireLottie from '@/assets/lottie/fire.json';
+import dayjs from 'dayjs';
 import * as Styled from './RecruitingPeriodDesktop.styled';
 
 const RecruitingPeriodDesktop = () => {
+  const { RECRUITMENT_START_KST_DATE, RECRUITMENT_END_KST_DATE } = RECRUIT_DATE;
+
+  const DAYJS_RECRUITMENT_START_KST_DATE = dayjs(RECRUITMENT_START_KST_DATE);
+  const DAYJS_RECRUITMENT_END_KST_DATE = dayjs(RECRUITMENT_END_KST_DATE);
+
   return (
     <Styled.Container>
       <Styled.StartDate data-aos="fade-up" data-aos-duration={AOS_DEFAULT_DURATION}>
         <span>Start Date</span>
-        <ScreenReaderOnly>2023년 1월 11일</ScreenReaderOnly>
-        <time aria-hidden dateTime="2023-01-11">
-          01.11
+        <ScreenReaderOnly>
+          {DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY년 M월 D일')}
+        </ScreenReaderOnly>
+        <time aria-hidden dateTime={DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY-MM-DD')}>
+          {DAYJS_RECRUITMENT_START_KST_DATE.format('MM.DD')}
         </time>
       </Styled.StartDate>
       <Styled.EndDate
         data-aos="fade-up"
         data-aos-duration={AOS_DEFAULT_DURATION + 3 * AOS_BASE_DURATION_DISTANCE}
       >
         <span>End Date</span>
-        <ScreenReaderOnly>2023년 1월 25일</ScreenReaderOnly>
-        <time aria-hidden dateTime="2023-01-25">
-          01.25
+        <ScreenReaderOnly>
+          {DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY년 M월 D일')}
+        </ScreenReaderOnly>
+        <time aria-hidden dateTime={DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY-MM-DD')}>
+          {DAYJS_RECRUITMENT_END_KST_DATE.format('MM.DD')}
         </time>
       </Styled.EndDate>
       <Styled.PeriodBackgroundDesktopContainer>

diff --git a/src/components/home/RecruitingProcess/RecruitingProcess.component.tsx b/src/components/home/RecruitingProcess/RecruitingProcess.component.tsx
@@ -1,8 +1,27 @@
 import { ScreenReaderOnly } from '@/components';
-import { CURRENT_GENERATION } from '@/constants';
+import { CURRENT_GENERATION, DAYS, RECRUIT_DATE } from '@/constants';
+import dayjs from 'dayjs';
 import * as Styled from './RecruitingProcess.styled';
 
 const RecruitingProcess = () => {
+  const {
+    RECRUITMENT_START_KST_DATE,
+    RECRUITMENT_END_KST_DATE,
+    SCREENING_RESULT_ANNOUNCED_KST_DATE,
+    INTERVIEW_START_KST_DATE,
+    INTERVIEW_END_KST_DATE,
+    INTERVIEW_RESULT_ANNOUNCED_KST_DATE,
+    AFTER_FIRST_SEMINAR_JOIN_KST_DATE,
+  } = RECRUIT_DATE;
+
+  const DAYJS_RECRUITMENT_START_KST_DATE = dayjs(RECRUITMENT_START_KST_DATE);
+  const DAYJS_RECRUITMENT_END_KST_DATE = dayjs(RECRUITMENT_END_KST_DATE);
+  const DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE = dayjs(SCREENING_RESULT_ANNOUNCED_KST_DATE);
+  const DAYJS_INTERVIEW_START_KST_DATE = dayjs(INTERVIEW_START_KST_DATE);
+  const DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE = dayjs(INTERVIEW_END_KST_DATE);
+  const DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE = dayjs(INTERVIEW_RESULT_ANNOUNCED_KST_DATE);
+  const DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE = dayjs(AFTER_FIRST_SEMINAR_JOIN_KST_DATE);
+
   return (
     <Styled.Container>
       <Styled.Contents>
@@ -12,48 +31,99 @@ const RecruitingProcess = () => {
         <Styled.List data-aos="fade-up" data-aos-duration="800">
           <Styled.ListItem>
             <Styled.SubHeading>서류 접수</Styled.SubHeading>
-            <ScreenReaderOnly>2023년 1월 11일 수요일부터 2023년 1월 25일 수요일</ScreenReaderOnly>
+            <ScreenReaderOnly>{`${DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY년 M월 D일')} ${
+              DAYS[DAYJS_RECRUITMENT_START_KST_DATE.day()]
+            }요일부터 ${DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY년 M월 D일')} ${
+              DAYS[DAYJS_RECRUITMENT_END_KST_DATE.day()]
+            }요일`}</ScreenReaderOnly>
             <Styled.Date aria-hidden>
-              <time dateTime="2023-01-11">01.11(수)</time>&nbsp;~&nbsp;
-              <time dateTime="2023-01-25">01.25(수)</time>
+              <time dateTime={DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY-MM-DD')}>
+                {`${DAYJS_RECRUITMENT_START_KST_DATE.format('MM.DD')}(${
+                  DAYS[DAYJS_RECRUITMENT_START_KST_DATE.day()]
+                })`}
+              </time>
+              &nbsp;~&nbsp;
+              <time
+                dateTime={DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY-MM-DD')}
+              >{`${DAYJS_RECRUITMENT_END_KST_DATE.format('MM.DD')}(${
+                DAYS[DAYJS_RECRUITMENT_END_KST_DATE.day()]
+              })`}</time>
             </Styled.Date>
-            <Styled.Note>23:59:59 마감</Styled.Note>
+            <Styled.Note>{`${DAYJS_RECRUITMENT_END_KST_DATE.format('HH:mm:ss')} 마감`}</Styled.Note>
           </Styled.ListItem>
           <Styled.ListItem>
             <Styled.SubHeading>서류 결과 발표</Styled.SubHeading>
             <Styled.Date>
-              <ScreenReaderOnly>2023년 1월 30일 월요일</ScreenReaderOnly>
-              <time aria-hidden dateTime="2023-01-30">
-                01.30(월)
+              <ScreenReaderOnly>{`${DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.format(
+                'YYYY년 M월 D일',
+              )} ${DAYS[DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.day()]}요일`}</ScreenReaderOnly>
+              <time
+                aria-hidden
+                dateTime={DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.format('YYYY-MM-DD')}
+              >
+                {`${DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.format('MM.DD')}(${
+                  DAYS[DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.day()]
+                })`}
               </time>
             </Styled.Date>
-            <Styled.Note>오후 9시</Styled.Note>
+            <Styled.Note>{`${DAYJS_SCREENING_RESULT_ANNOUNCED_KST_DATE.format(
+              'HH',
+            )}시`}</Styled.Note>
           </Styled.ListItem>
           <Styled.ListItem>
             <Styled.SubHeading>온/오프라인 면접</Styled.SubHeading>
-            <ScreenReaderOnly>2023년 2월 4일 토요일에서 2023년 2월 5일 일요일</ScreenReaderOnly>
+            <ScreenReaderOnly>{`${DAYJS_INTERVIEW_START_KST_DATE.format('YYYY년 M월 D일')} ${
+              DAYS[DAYJS_INTERVIEW_START_KST_DATE.day()]
+            }요일에서 ${DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE.format('YYYY년 M월 D일')} ${
+              DAYS[DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE.day()]
+            }요일`}</ScreenReaderOnly>
             <Styled.Date aria-hidden>
-              <time dateTime="2023-02-04">02.04(토)</time>&nbsp;~&nbsp;
-              <time dateTime="2023-02-05">02.05(일)</time>
+              <time
+                dateTime={DAYJS_INTERVIEW_START_KST_DATE.format('YYYY-MM-DD')}
+              >{`${DAYJS_INTERVIEW_START_KST_DATE.format('MM.DD')}(${
+                DAYS[DAYJS_INTERVIEW_START_KST_DATE.day()]
+              })`}</time>
+              &nbsp;~&nbsp;
+              <time
+                dateTime={DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE.format('YYYY-MM-DD')}
+              >{`${DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE.format('MM.DD')}(${
+                DAYS[DAYJS_INTERVIEW_INTERVIEW_END_KST_DATE.day()]
+              })`}</time>
             </Styled.Date>
-            <Styled.Note>추후 연락</Styled.Note>
+            <Styled.Note>상세일정 이메일로 전달</Styled.Note>
           </Styled.ListItem>
           <Styled.ListItem>
             <Styled.SubHeading>최종 합격 발표</Styled.SubHeading>
             <Styled.Date>
-              <ScreenReaderOnly>2023년 2월 7일 화요일</ScreenReaderOnly>
-              <time aria-hidden dateTime="2023-02-07">
-                02.07(화)
+              <ScreenReaderOnly>{`${DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.format(
+                'YYYY년 M월 D일',
+              )} ${DAYS[DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.day()]}요일`}</ScreenReaderOnly>
+              <time
+                aria-hidden
+                dateTime={DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.format('YYYY-MM-DD')}
+              >
+                {`${DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.format('MM.DD')}(${
+                  DAYS[DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.day()]
+                })`}
               </time>
             </Styled.Date>
-            <Styled.Note>오후 9시</Styled.Note>
+            <Styled.Note>{`${DAYJS_INTERVIEW_RESULT_ANNOUNCED_KST_DATE.format(
+              'HH',
+            )}시`}</Styled.Note>
           </Styled.ListItem>
           <Styled.ListItem>
             <Styled.SubHeading>{CURRENT_GENERATION}기 OT</Styled.SubHeading>
             <Styled.Date>
-              <ScreenReaderOnly>2023년 2월 11일 토요일</ScreenReaderOnly>
-              <time aria-hidden dateTime="2023-02-11">
-                02.11(토)
+              <ScreenReaderOnly>{`${DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE.format(
+                'YYYY년 M월 D일',
+              )} ${DAYS[DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE.day()]}요일`}</ScreenReaderOnly>
+              <time
+                aria-hidden
+                dateTime={DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE.format('YYYY-MM-DD')}
+              >
+                {`${DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE.format('MM.DD')}(${
+                  DAYS[DAYJS_AFTER_FIRST_SEMINAR_JOIN_KST_DATE.day()]
+                })`}
               </time>
             </Styled.Date>
           </Styled.ListItem>

diff --git a/src/components/home/RecruitingRemainder/RecruitingRemainder.component.tsx b/src/components/home/RecruitingRemainder/RecruitingRemainder.component.tsx
@@ -1,17 +1,17 @@
 import { useRouter } from 'next/router';
 import { useInterval } from '@/hooks';
-import { getDifferenceOfDates, RECRUITMENT_START_KST_DATE } from '@/utils/date';
+import { getDifferenceOfDates } from '@/utils/date';
 import type { DateDifference } from '@/utils/date';
 import { useState, useEffect } from 'react';
 
-import { CURRENT_GENERATION } from '@/constants';
+import { CURRENT_GENERATION, RECRUIT_DATE } from '@/constants';
 import * as Styled from './RecruitingRemainder.styled';
 
 const RecruitingRemainder = () => {
   const router = useRouter();
 
   const [difference, setDifference] = useState<DateDifference>(() =>
-    getDifferenceOfDates(new Date(), RECRUITMENT_START_KST_DATE),
+    getDifferenceOfDates(new Date(), RECRUIT_DATE.RECRUITMENT_START_KST_DATE),
   );
 
   const [isPreviousDayOfRecruitingStart, isRunOutTimeOfRecruitingStart] = [
@@ -21,7 +21,10 @@ const RecruitingRemainder = () => {
 
   useInterval(
     () => {
-      const currentDifference = getDifferenceOfDates(new Date(), RECRUITMENT_START_KST_DATE);
+      const currentDifference = getDifferenceOfDates(
+        new Date(),
+        RECRUIT_DATE.RECRUITMENT_START_KST_DATE,
+      );
       setDifference(currentDifference);
     },
     isPreviousDayOfRecruitingStart ? 1000 : null,

diff --git a/src/components/recruit/RecruitDate/RecruitDate.component.tsx b/src/components/recruit/RecruitDate/RecruitDate.component.tsx
@@ -1,10 +1,22 @@
+import { RECRUIT_DATE } from '@/constants';
+import dayjs from 'dayjs';
 import * as Styled from './RecruitDate.styled';
 
 const RecruitDate = () => {
+  const { RECRUITMENT_START_KST_DATE, RECRUITMENT_END_KST_DATE } = RECRUIT_DATE;
+
+  const DAYJS_RECRUITMENT_START_KST_DATE = dayjs(RECRUITMENT_START_KST_DATE);
+  const DAYJS_RECRUITMENT_END_KST_DATE = dayjs(RECRUITMENT_END_KST_DATE);
+
   return (
     <Styled.Container>
-      <time dateTime="2023-01-11">2023.01.11</time>&nbsp;~&nbsp;
-      <time dateTime="2023-01-25">01.25</time>
+      <time dateTime={DAYJS_RECRUITMENT_START_KST_DATE.format('YYYY-MM-DD')}>
+        {DAYJS_RECRUITMENT_START_KST_DATE.format('MM.DD')}
+      </time>
+      &nbsp;~&nbsp;
+      <time dateTime={DAYJS_RECRUITMENT_END_KST_DATE.format('YYYY-MM-DD')}>
+        {DAYJS_RECRUITMENT_END_KST_DATE.format('MM.DD')}
+      </time>
     </Styled.Container>
   );
 };

diff --git a/src/constants/application.ts b/src/constants/application.ts
@@ -1,4 +1,4 @@
-export const CURRENT_GENERATION = 13;
+export const CURRENT_GENERATION = 14;
 
 export const ERROR_CODE = {
   APPLICATION_MODIFICATION_NOT_ALLOWED: 'APPLICATION_MODIFICATION_NOT_ALLOWED', // 지원 기간 마감

diff --git a/src/constants/date.ts b/src/constants/date.ts
@@ -0,0 +1 @@
+export const DAYS = ['일', '월', '화', '수', '목', '금', '토'];
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -4,3 +4,5 @@ export * from './team';
 export * from './platform';
 export * from './aos';
 export * from './application';
+export * from './recruit';
+export * from './date';
diff --git a/src/constants/recruit.ts b/src/constants/recruit.ts
@@ -0,0 +1,9 @@
+export const RECRUIT_DATE = {
+  RECRUITMENT_START_KST_DATE: new Date('2024-01-29T01:00:00+09:00'), // 서류 접수 시작
+  RECRUITMENT_END_KST_DATE: new Date('2024-02-14T23:59:59+09:00'), // 서류 접수 종료
+  SCREENING_RESULT_ANNOUNCED_KST_DATE: new Date('2024-02-20T21:00:00+09:00'), // 서류 결과 발표
+  INTERVIEW_START_KST_DATE: new Date('2024-02-24T00:00:00+09:00'), // 인터뷰 시작
+  INTERVIEW_END_KST_DATE: new Date('2024-02-25T23:59:59+09:00'), // 인터뷰 종료
+  INTERVIEW_RESULT_ANNOUNCED_KST_DATE: new Date('2024-02-28T21:00:00+09:00'), // 최종 합격 발표
+  AFTER_FIRST_SEMINAR_JOIN_KST_DATE: new Date('2024-03-09T17:00:00+09:00'), // 첫번째 세미나 끝나는 시각
+} as const;