[Feature] Organizer's status by date

src/components/introduce/ApplicantViewButton.jsx

@@ -14,9 +14,7 @@ const ApplicantViewButton = ({
   const [applyCancelModal, setApplyCancelModal] = useState(false);
   const [modalForm, setModalForm] = useState(false);
 
-  const {
-    moderatorId, participants, applyEndDate,
-  } = group;
+  const { moderatorId, participants, applyEndDate } = group;
 
   const applyEndTime = changeDateToTime(applyEndDate);
 

src/components/introduce/ModeratorViewButton.jsx

@@ -1,12 +1,23 @@
 import React, { useState } from 'react';
 
-import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
+import { changeDateToTime, isCheckedOnlyTimeStatus } from '../../util/utils';
+
 import ParticipantListModal from './modals/ParticipantListModal';
+import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
 
-const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => {
+const ModeratorViewButton = ({
+  group, user, onUpdateConfirm, realTime,
+}) => {
   const [ListModal, setListModal] = useState(false);
 
-  const { moderatorId, participants } = group;
+  const { moderatorId, participants, applyEndDate } = group;
+
+  const applyEndTime = changeDateToTime(applyEndDate);
+
+  const checkTime = {
+    time: realTime,
+    applyEndTime,
+  };
 
   const handleClick = () => {
     setListModal(true);
@@ -20,6 +31,17 @@ const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => {
     return null;
   }
 
+  if (isCheckedOnlyTimeStatus(checkTime)) {
+    return (
+      <StyledApplyStatusButton
+        type="button"
+        className="apply-complete"
+      >
+        스터디를 진행해주세요!
+      </StyledApplyStatusButton>
+    );
+  }
+
   return (
     <>
       <StyledApplyStatusButton
@@ -39,4 +61,4 @@ const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => {
   );
 };
 
-export default ModeratorViewButton;
+export default React.memo(ModeratorViewButton);

src/components/introduce/ModeratorViewButton.test.jsx

@@ -7,29 +7,46 @@ import ModeratorViewButton from './ModeratorViewButton';
 import STUDY_GROUP from '../../../fixtures/study-group';
 
 describe('ModeratorViewButton', () => {
-  const renderModeratorViewButton = ({ group, user }) => render((
+  const renderModeratorViewButton = ({ group, user, realTime }) => render((
     <ModeratorViewButton
       user={user}
       group={group}
+      realTime={realTime}
     />
   ));
 
   context('When the organizer and the logged-in user are different', () => {
+    const realTime = Date.now();
+
+    const nowDate = new Date();
+    const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+    const user = 'user';
+
     const group = {
       ...STUDY_GROUP,
-      moderatorId: 'user',
+      moderatorId: 'user2',
+      applyEndDate: tomorrow,
     };
 
     it('nothing renders', () => {
-      const { container } = renderModeratorViewButton({ group, user: 'user1' });
+      const { container } = renderModeratorViewButton({
+        group,
+        user,
+        realTime,
+      });
 
       expect(container).toBeEmptyDOMElement();
     });
   });
 
   context('When the host and logged in user are the same', () => {
-    const group = {
+    const user = 'user';
+    const realTime = Date.now();
+
+    const applyEndDateSettings = (applyEndDate) => ({
       ...STUDY_GROUP,
+      applyEndDate,
       moderatorId: 'user',
       participants: [
         {
@@ -41,32 +58,52 @@ describe('ModeratorViewButton', () => {
           id: 'test2',
         },
       ],
-    };
+    });
 
-    it('renders button', () => {
-      const { container } = renderModeratorViewButton({ group, user: 'user' });
+    context('When the current date is before the deadline', () => {
+      const nowDate = new Date();
+      const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
 
-      expect(container).toHaveTextContent('스터디 참여 승인하기');
-    });
+      const group = applyEndDateSettings(tomorrow);
+
+      it('renders button', () => {
+        const { container } = renderModeratorViewButton({ group, user, realTime });
+
+        expect(container).toHaveTextContent('스터디 참여 승인하기');
+      });
+
+      it('click button and renders List of study applicants', () => {
+        const { getByText, container } = renderModeratorViewButton({ group, user, realTime });
+        const button = getByText('스터디 참여 승인하기');
+
+        fireEvent.click(button);
+
+        expect(container).toHaveTextContent('스터디 신청자 목록');
+      });
+
+      it('Clicking the close button closes the modal window.', () => {
+        const { getByText, container } = renderModeratorViewButton({ group, user, realTime });
+        const button = getByText('스터디 참여 승인하기');
 
-    it('click button and renders List of study applicants', () => {
-      const { getByText, container } = renderModeratorViewButton({ group, user: 'user' });
-      const button = getByText('스터디 참여 승인하기');
+        fireEvent.click(button);
 
-      fireEvent.click(button);
+        fireEvent.click(getByText('닫기'));
 
-      expect(container).toHaveTextContent('스터디 신청자 목록');
+        expect(container).not.toHaveTextContent('스터디 신청자 목록');
+      });
     });
 
-    it('Clicking the close button closes the modal window.', () => {
-      const { getByText, container } = renderModeratorViewButton({ group, user: 'user' });
-      const button = getByText('스터디 참여 승인하기');
+    context('When the current date is after the deadline', () => {
+      const nowDate = new Date();
+      const yesterday = nowDate.setDate(nowDate.getDate() - 1);
 
-      fireEvent.click(button);
+      const group = applyEndDateSettings(yesterday);
 
-      fireEvent.click(getByText('닫기'));
+      it('renders "Please proceed with the study!" status message', () => {
+        const { container } = renderModeratorViewButton({ group, user, realTime });
 
-      expect(container).not.toHaveTextContent('스터디 신청자 목록');
+        expect(container).toHaveTextContent('스터디를 진행해주세요!');
+      });
     });
   });
 });

src/containers/introduce/IntroduceHeaderContainer.jsx

@@ -69,9 +69,10 @@ const IntroduceHeaderContainer = () => {
         onChangeApplyFields={onChangeApplyFields}
       />
       <ModeratorViewButton
-        onUpdateConfirm={onUpdateConfirmParticipant}
         user={user}
         group={group}
+        realTime={realTime}
+        onUpdateConfirm={onUpdateConfirmParticipant}
       />
     </IntroduceHeader>
   );

src/containers/introduce/IntroduceHeaderContainer.test.jsx

@@ -193,8 +193,12 @@ describe('IntroduceHeaderContainer', () => {
   });
 
   context('When the logged-in user is the author', () => {
+    const nowDate = new Date();
+    const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
     given('group', () => ({
       ...STUDY_GROUP,
+      applyEndDate: tomorrow,
       participants: [
         {
           confirm: true,

src/util/utils.js

@@ -10,6 +10,8 @@ export const isCheckedTimeStatus = ({
   time, applyEndTime, participants, personnel,
 }) => (!!((time - applyEndTime >= 0 || participants.length === parseInt(personnel, 10))));
 
+export const isCheckedOnlyTimeStatus = ({ time, applyEndTime }) => (time - applyEndTime >= 0);
+
 const checkTrim = (value) => value.trim();
 
 export const isCheckValidate = (values) => values.map(checkTrim).includes('');