[Feature] Study status changing in real time

fake-server/db.json

@@ -4,7 +4,7 @@
       "id": 0,
       "title": "스터디를 소개합니다.1",
       "moderatorId": "user1",
-      "applyEndDate": "2020-12-13",
+      "applyEndDate": "2020-11-20 23:04",
       "participants": [
         "user1",
         "user2",
@@ -91,7 +91,8 @@
         "user5",
         "user6",
         "user7",
-        "user8"
+        "user8",
+        "user9"
       ],
       "personnel": 9,
       "contents": "우리는 이것저것 합니다.5",

package.json

@@ -27,8 +27,11 @@
     "@emotion/styled": "^11.0.0",
     "@reduxjs/toolkit": "^1.4.0",
     "axios": "^0.21.0",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.32",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",

src/components/main/DateTimeChange.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import styled from '@emotion/styled';
+
+import useInterval from '../../util/useInterval';
+
+import DateTimeStatus from '../../styles/DateTimeStatus';
+
+const DateTimeChangeWrapper = styled.div``;
+
+const isCheckedTimeStatus = ({
+  realTime, applyEndTime, participants, personnel,
+}) => (!!((realTime - applyEndTime >= 0 || participants.length === personnel)));
+
+const DateTimeChange = ({ group }) => {
+  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 timeStatusChange = () => {
+    if (isCheckedTimeStatus(valid)) {
+      return (
+        <DateTimeStatus status="deadline">모집마감</DateTimeStatus>
+      );
+    }
+
+    return (
+      <DateTimeStatus status="recruit">모집중</DateTimeStatus>
+    );
+  };
+
+  return (
+    <DateTimeChangeWrapper>
+      {`모집 인원: ${participants.length} / ${personnel}`}
+      {timeStatusChange()}
+    </DateTimeChangeWrapper>
+  );
+};
+
+export default DateTimeChange;

src/components/main/DateTimeChange.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import DateTimeChange from './DateTimeChange';
+
+describe('DateTimeChange', () => {
+  const renderDateTimeChange = ({ group }) => render((
+    <DateTimeChange
+      group={group}
+    />
+  ));
+
+  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 });
+
+      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 });
+
+      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 });
+
+      expect(container).toHaveTextContent('모집마감');
+    });
+  });
+});

src/components/main/StudyGroup.jsx

@@ -4,8 +4,11 @@ import { Link } from 'react-router-dom';
 
 import styled from '@emotion/styled';
 
+import Moment from 'react-moment';
+
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
+import DateTimeChange from './DateTimeChange';
 
 const StudyGroupWrapper = styled.div`
   margin: 1em .5em 1em .5em;
@@ -36,23 +39,9 @@ const StudyInfoWrapper = styled.div`
   }
 `;
 
-const DateTimeChange = styled.div`
-  margin-left: 1.5rem;
-  font-weight: 600;
-  font-size: 1.1rem;
-  font-family: 'Gamja Flower', cursive;
-  padding: .1rem .5rem .1rem .5rem;
-  display: inline-flex;
-  color: white;
-  border-radius: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  background: ${palette.cyan[4]};
-`;
-
 const StudyGroup = ({ group }) => {
   const {
-    id, moderatorId, title, personnel, applyEndDate, tags, participants,
+    id, moderatorId, title, applyEndDate, tags,
   } = group;
 
   return (
@@ -63,11 +52,11 @@ const StudyGroup = ({ group }) => {
       <StudyInfoWrapper>
         <div className="moderator">{moderatorId}</div>
         <div>
-          {`모집 인원: ${participants.length} / ${personnel}`}
-          <DateTimeChange>모집중</DateTimeChange>
+          <DateTimeChange group={group} />
         </div>
         <div>
-          {`마감 일자: ${applyEndDate}`}
+          {'마감 일자: '}
+          <Moment interval={0} format="YYYY년 MM월 DD일">{applyEndDate}</Moment>
         </div>
         <Tags tags={tags} />
       </StudyInfoWrapper>

src/components/main/StudyGroup.test.jsx

@@ -15,20 +15,43 @@ describe('StudyGroup', () => {
     </MemoryRouter>
   ));
 
-  it('renders study group text contents', () => {
+  describe('renders study group text contents', () => {
     const group = {
       id: 1,
-      moderatorId: 'user1',
-      title: '스터디를 소개합니다. 1',
-      personnel: 5,
-      participants: [],
-      applyEndDate: null,
-      tags: [],
+      title: '스터디를 소개합니다.2',
+      moderatorId: 'user2',
+      applyEndDate: '2020-12-23',
+      participants: [
+        'user2',
+      ],
+      personnel: 2,
+      tags: [
+        'JavaScript',
+        'React',
+        'Algorithm',
+      ],
     };
+    it('renders title, moderatorId, tags', () => {
+      const { container } = renderStudyGroup({ group });
 
-    const { container } = renderStudyGroup({ group });
+      expect(container).toHaveTextContent('스터디를 소개합니다.2');
+      expect(container).toHaveTextContent('user2');
+      group.tags.forEach((tag) => {
+        expect(container).toHaveTextContent(`#${tag}`);
+      });
+      expect(container).toHaveTextContent('2020년 12월 23일');
+    });
 
-    expect(container).toHaveTextContent('스터디를 소개합니다. 1');
-    expect(container).toHaveTextContent('user1');
+    it('renders changed applyEndDate format', () => {
+      const { container } = renderStudyGroup({ group });
+
+      expect(container).toHaveTextContent('2020년 12월 23일');
+    });
+
+    it('renders study status is Recruiting', () => {
+      const { container } = renderStudyGroup({ group });
+
+      expect(container).toHaveTextContent('모집중');
+    });
   });
 });

src/styles/DateTimeStatus.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import palette from './palette';
+
+const DateTimeStatusWrapper = styled.div`
+  margin-left: 1.5rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+  font-family: 'Gamja Flower', cursive;
+  padding: .1rem .5rem .1rem .5rem;
+  display: inline-flex;
+  color: white;
+  border-radius: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;    
+
+  ${(props) => props.status === 'recruit'
+    && css`
+      background: ${palette.cyan[4]};
+      animation: blink-animation 1.5s steps(5, start) infinite;
+      -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
+      @keyframes blink-animation {
+        to {
+          visibility: hidden;
+        }
+      }
+      @-webkit-keyframes blink-animation {
+        to {
+          visibility: hidden;
+        }
+      }
+  `}
+
+
+  ${(props) => props.status === 'deadline'
+    && css`
+      background: #ff6b6b;
+  `}
+`;
+
+const DateTimeStatus = ({ children, status }) => (
+  <DateTimeStatusWrapper status={status}>
+    {children}
+  </DateTimeStatusWrapper>
+);
+
+export default DateTimeStatus;

src/util/useInterval.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react';
+
+const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    // eslint-disable-next-line prefer-const
+    let id = setInterval(tick, delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+};
+
+export default useInterval;