From 98995d665d5b7a9206de9a06a8f80522bc35cd94 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Fri, 20 Nov 2020 23:33:21 +0900
Subject: [PATCH 1/2] [Feature] Add Study status

- Study status changing in real time
- npm install moment.js and react-moment
---
 fake-server/db.json                         |  5 +-
 package-lock.json                           | 18 ++++++
 package.json                                |  3 +
 src/components/main/DateTimeChange.jsx      | 41 ++++++++++++
 src/components/main/DateTimeChange.test.jsx | 71 +++++++++++++++++++++
 src/components/main/StudyGroup.jsx          | 25 ++------
 src/components/main/StudyGroup.test.jsx     | 43 ++++++++++---
 src/components/main/StudyGroups.jsx         |  3 +-
 src/styles/DateTimeStatus.jsx               | 50 +++++++++++++++
 src/util/useInterval.js                     | 22 +++++++
 10 files changed, 250 insertions(+), 31 deletions(-)
 create mode 100644 src/components/main/DateTimeChange.jsx
 create mode 100644 src/components/main/DateTimeChange.test.jsx
 create mode 100644 src/styles/DateTimeStatus.jsx
 create mode 100644 src/util/useInterval.js

diff --git a/fake-server/db.json b/fake-server/db.json
index d7c43c6..52c6d41 100644
--- a/fake-server/db.json
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index eb999bf..88c25e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9778,6 +9778,19 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
+    "moment-timezone": {
+      "version": "0.5.32",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.32.tgz",
+      "integrity": "sha512-Z8QNyuQHQAmWucp8Knmgei8YNo28aLjJq6Ma+jy1ZSpSk5nyfRT8xgUbSQvD2+2UajISfenndwvFuH3NGS+nvA==",
+      "requires": {
+        "moment": ">= 2.9.0"
+      }
+    },
     "morgan": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
@@ -11080,6 +11093,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-moment": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.0.0.tgz",
+      "integrity": "sha512-J4iIiwUT4oZcL7cp2U7naQKbQtqvmzGXXBMg/DLj+Pi7n9EW0VhBRx/1aJ1Tp2poCqTCAPoadLEoUIkReGnNNg=="
+    },
     "react-redux": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
diff --git a/package.json b/package.json
index 31f3688..ad38c0f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/main/DateTimeChange.jsx b/src/components/main/DateTimeChange.jsx
new file mode 100644
index 0000000..6886bd0
--- /dev/null
+++ b/src/components/main/DateTimeChange.jsx
@@ -0,0 +1,41 @@
+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 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 isCheckedTimeStatus = () => {
+    if (realTime - applyEndTime >= 0 || participants.length === personnel) {
+      return (
+        <DateTimeStatus status="deadline">모집마감</DateTimeStatus>
+      );
+    }
+
+    return (
+      <DateTimeStatus status="recruit">모집중</DateTimeStatus>
+    );
+  };
+
+  return (
+    <DateTimeChangeWrapper>
+      {`모집 인원: ${participants.length} / ${personnel}`}
+      {isCheckedTimeStatus()}
+    </DateTimeChangeWrapper>
+  );
+};
+
+export default DateTimeChange;
diff --git a/src/components/main/DateTimeChange.test.jsx b/src/components/main/DateTimeChange.test.jsx
new file mode 100644
index 0000000..8181f8d
--- /dev/null
+++ b/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('모집마감');
+    });
+  });
+});
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
index 38bc4bb..b9de983 100644
--- a/src/components/main/StudyGroup.jsx
+++ b/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>
diff --git a/src/components/main/StudyGroup.test.jsx b/src/components/main/StudyGroup.test.jsx
index 97f5318..d7a8c30 100644
--- a/src/components/main/StudyGroup.test.jsx
+++ b/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('모집중');
+    });
   });
 });
diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx
index f608ea2..5091a66 100644
--- a/src/components/main/StudyGroups.jsx
+++ b/src/components/main/StudyGroups.jsx
@@ -11,12 +11,13 @@ const StudyGroupsWrapper = styled.div`
   align-content: space-between;
 `;
 
-const StudyGroups = ({ groups }) => (
+const StudyGroups = ({ groups, seconds }) => (
   <StudyGroupsWrapper>
     {groups.map((group) => (
       <StudyGroup
         key={group.id}
         group={group}
+        seconds={seconds}
       />
     ))}
   </StudyGroupsWrapper>
diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx
new file mode 100644
index 0000000..b8e38a5
--- /dev/null
+++ b/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;
diff --git a/src/util/useInterval.js b/src/util/useInterval.js
new file mode 100644
index 0000000..9c2fbcc
--- /dev/null
+++ b/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;

From 1957c82eebb00bb09d78e8ac71594fe16f44f361 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sat, 21 Nov 2020 01:17:52 +0900
Subject: [PATCH 2/2] [Refactor] Fixed for Code Review

---
 src/components/main/DateTimeChange.jsx | 14 +++++++++++---
 src/components/main/StudyGroups.jsx    |  3 +--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/main/DateTimeChange.jsx b/src/components/main/DateTimeChange.jsx
index 6886bd0..158ecb6 100644
--- a/src/components/main/DateTimeChange.jsx
+++ b/src/components/main/DateTimeChange.jsx
@@ -8,6 +8,10 @@ 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();
@@ -18,8 +22,12 @@ const DateTimeChange = ({ group }) => {
     setRealTime(Date.now());
   }, 1000);
 
-  const isCheckedTimeStatus = () => {
-    if (realTime - applyEndTime >= 0 || participants.length === personnel) {
+  const valid = {
+    realTime, applyEndTime, participants, personnel,
+  };
+
+  const timeStatusChange = () => {
+    if (isCheckedTimeStatus(valid)) {
       return (
         <DateTimeStatus status="deadline">모집마감</DateTimeStatus>
       );
@@ -33,7 +41,7 @@ const DateTimeChange = ({ group }) => {
   return (
     <DateTimeChangeWrapper>
       {`모집 인원: ${participants.length} / ${personnel}`}
-      {isCheckedTimeStatus()}
+      {timeStatusChange()}
     </DateTimeChangeWrapper>
   );
 };
diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx
index 5091a66..f608ea2 100644
--- a/src/components/main/StudyGroups.jsx
+++ b/src/components/main/StudyGroups.jsx
@@ -11,13 +11,12 @@ const StudyGroupsWrapper = styled.div`
   align-content: space-between;
 `;
 
-const StudyGroups = ({ groups, seconds }) => (
+const StudyGroups = ({ groups }) => (
   <StudyGroupsWrapper>
     {groups.map((group) => (
       <StudyGroup
         key={group.id}
         group={group}
-        seconds={seconds}
       />
     ))}
   </StudyGroupsWrapper>