[Feature] Recruitment status on the introduction page

fake-server/db.json

@@ -4,7 +4,7 @@
       "id": 0,
       "title": "스터디를 소개합니다.1",
       "moderatorId": "user1",
-      "applyEndDate": "2020-11-20 23:04",
+      "applyEndDate": "2020-11-22 17:36",
       "participants": [
         "user1",
         "user2",
@@ -40,7 +40,7 @@
       "id": 2,
       "title": "스터디를 소개합니다.3",
       "moderatorId": "user3",
-      "applyEndDate": "2020-12-20",
+      "applyEndDate": "2020-11-22 18:08",
       "participants": [
         "user1",
         "user2",

src/components/common/DateTimeChange.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+
+import styled from '@emotion/styled';
+
+import 'moment/locale/ko';
+import moment from 'moment';
+import Moment from 'react-moment';
+
+import useInterval from '../../util/useInterval';
+
+import DateTimeStatus from '../../styles/DateTimeStatus';
+
+moment.locale('ko');
+
+const DateTimeChangeWrapper = styled.div`
+  margin-top: .2rem;
+`;
+
+const isCheckedTimeStatus = ({
+  realTime, applyEndTime, participants, personnel,
+}) => (!!((realTime - applyEndTime >= 0 || participants.length === personnel)));
+
+const DateTimeChange = ({ group, page }) => {
+  const { participants, personnel, applyEndDate } = group;
+  const applyEndTime = new Date(applyEndDate).getTime();
+
+  const [realTime, setRealTime] = useState(Date.now());
+
+  useInterval(() => {
+    setRealTime(Date.now());
+  }, 1000);
+
+  const valid = {
+    realTime, applyEndTime, participants, personnel,
+  };
+
+  const mainTimeStatus = () => {
+    if (isCheckedTimeStatus(valid)) {
+      return (
+        <DateTimeStatus status="mainDeadline">모집마감</DateTimeStatus>
+      );
+    }
+
+    return (
+      <DateTimeStatus status="mainRecruit">모집중</DateTimeStatus>
+    );
+  };
+
+  const introduceTimeStatus = () => {
+    if (isCheckedTimeStatus(valid)) {
+      return (
+        <DateTimeStatus status="introduceDeadline">
+          모집마감
+        </DateTimeStatus>
+      );
+    }
+
+    return (
+      <DateTimeStatus status="introduceRecruit">
+        <Moment fromNow>{applyEndTime}</Moment>
+        &nbsp;모집 마감
+      </DateTimeStatus>
+    );
+  };
+
+  return (
+    <DateTimeChangeWrapper>
+      {page === 'introduce'
+        ? introduceTimeStatus()
+        : (
+          <>
+            {`모집 인원: ${participants.length} / ${personnel}`}
+            {mainTimeStatus()}
+          </>
+        )}
+    </DateTimeChangeWrapper>
+  );
+};
+
+export default DateTimeChange;

src/components/common/DateTimeChange.test.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import DateTimeChange from './DateTimeChange';
+
+describe('DateTimeChange', () => {
+  const renderDateTimeChange = ({ group, page }) => render((
+    <DateTimeChange
+      group={group}
+      page={page}
+    />
+  ));
+
+  context('When on the main page', () => {
+    const page = 'main';
+
+    it('renders Recruitment number text', () => {
+      const group = {
+        applyEndDate: null,
+        participants: [
+          'user2',
+        ],
+        personnel: 2,
+      };
+
+      const { participants, personnel } = group;
+
+      const { container } = renderDateTimeChange({ group, page });
+
+      expect(container).toHaveTextContent(`모집 인원: ${participants.length} / ${personnel}`);
+    });
+
+    describe('current time is before the application deadline', () => {
+      it('renders Recruiting text', () => {
+        const nowDate = new Date();
+        const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+        const group = {
+          applyEndDate: tomorrow,
+          participants: [
+            'user2',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('모집중');
+      });
+    });
+
+    describe('current time is after the application deadline', () => {
+      it('renders Application deadline text', () => {
+        const nowDate = new Date();
+        const yesterday = nowDate.setDate(nowDate.getDate() - 1);
+
+        const group = {
+          applyEndDate: yesterday,
+          participants: [
+            'user2',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('모집마감');
+      });
+    });
+
+    describe('When the number of study group participants equals the maximum number of participants', () => {
+      it('renders Application deadline text', () => {
+        const nowDate = new Date();
+        const tomorrow = nowDate.setDate(nowDate.getDate() - 1);
+
+        const group = {
+          applyEndDate: tomorrow,
+          participants: [
+            'user2',
+            'user3',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('모집마감');
+      });
+    });
+  });
+
+  context('When on the introduce page', () => {
+    const page = 'introduce';
+
+    describe('current time is before the application deadline', () => {
+      it('renders Application deadline one day later text', () => {
+        const nowDate = new Date();
+        const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+        const group = {
+          applyEndDate: tomorrow,
+          participants: [
+            'user2',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('하루 후 모집 마감');
+      });
+    });
+
+    describe('current time is after the application deadline', () => {
+      it('renders Application deadline text', () => {
+        const nowDate = new Date();
+        const yesterday = nowDate.setDate(nowDate.getDate() - 1);
+
+        const group = {
+          applyEndDate: yesterday,
+          participants: [
+            'user2',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('모집마감');
+      });
+    });
+
+    describe('When the number of study group participants equals the maximum number of participants', () => {
+      it('renders Application deadline text', () => {
+        const nowDate = new Date();
+        const tomorrow = nowDate.setDate(nowDate.getDate() - 1);
+
+        const group = {
+          applyEndDate: tomorrow,
+          participants: [
+            'user2',
+            'user3',
+          ],
+          personnel: 2,
+        };
+
+        const { container } = renderDateTimeChange({ group, page });
+
+        expect(container).toHaveTextContent('모집마감');
+      });
+    });
+  });
+});

src/components/introduce/StudyIntroduceForm.jsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
+import DateTimeChange from '../common/DateTimeChange';
 
 const StudyIntroduceWrapper = styled.div`
   margin-top: 6em;
@@ -33,6 +34,7 @@ const IntroduceHeaderWrapper = styled.div`
     border: none;
     background: ${palette.teal[5]};
     color: white;
+    cursor: pointer;
     &:hover{
       background: ${palette.teal[4]};
     }
@@ -41,6 +43,7 @@ const IntroduceHeaderWrapper = styled.div`
 
 const IntroduceReferenceWrapper = styled.div`
   display: flex;
+  justify-content: space-evenly;
   padding: 1rem;
   border-radius: 0.75rem;
   background-color: ${palette.gray[1]};
@@ -61,7 +64,6 @@ const ModeratorWrapper = styled.div`
 `;
 
 const IntroduceReference = styled.div`
-  padding-left: 50px;
   padding-right: 50px;
   border-right: 0.1rem solid ${palette.gray[3]};
 `;
@@ -89,6 +91,7 @@ const StudyIntroduceForm = ({ group }) => {
   const {
     title, contents, tags, moderatorId, personnel, participants, applyEndDate,
   } = group;
+
   return (
     <StudyIntroduceWrapper>
       <IntroduceHeaderWrapper>
@@ -106,9 +109,13 @@ const StudyIntroduceForm = ({ group }) => {
           </span>
         </IntroduceReference>
         <IntroduceReference>
-          <label htmlFor="apply-end">접수 마감 일자 :</label>
+          <label htmlFor="apply-end">모집 마감 일자 :</label>
           <span id="apply-end">{applyEndDate}</span>
         </IntroduceReference>
+        <DateTimeChange
+          group={group}
+          page="introduce"
+        />
       </IntroduceReferenceWrapper>
       <IntroduceContentTitle>
         소개