CodeSoom · saseungmin · Nov 22, 2020 · Nov 22, 2020
diff --git a/fake-server/db.json b/fake-server/db.json
@@ -40,7 +40,7 @@
       "id": 2,
       "title": "스터디를 소개합니다.3",
       "moderatorId": "user3",
-      "applyEndDate": "2020-11-22 18:08",
+      "applyEndDate": "2020-11-22 20:49",
       "participants": [
         "user1",
         "user2",

diff --git a/src/components/common/DateTimeChange.jsx b/src/components/common/DateTimeChange.jsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React 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 { isCheckedTimeStatus } from '../../util/utils';
 
 import DateTimeStatus from '../../styles/DateTimeStatus';
 
@@ -16,22 +16,13 @@ const DateTimeChangeWrapper = styled.div`
   margin-top: .2rem;
 `;
 
-const isCheckedTimeStatus = ({
-  realTime, applyEndTime, participants, personnel,
-}) => (!!((realTime - applyEndTime >= 0 || participants.length === personnel)));
-
-const DateTimeChange = ({ group, page }) => {
+const DateTimeChange = ({ group, page, time }) => {
   const { participants, personnel, applyEndDate } = group;
-  const applyEndTime = new Date(applyEndDate).getTime();
 
-  const [realTime, setRealTime] = useState(Date.now());
-
-  useInterval(() => {
-    setRealTime(Date.now());
-  }, 1000);
+  const applyEndTime = new Date(applyEndDate).getTime();
 
   const valid = {
-    realTime, applyEndTime, participants, personnel,
+    time, applyEndTime, participants, personnel,
   };
 
   const mainTimeStatus = () => {

diff --git a/src/components/common/DateTimeChange.test.jsx b/src/components/common/DateTimeChange.test.jsx
@@ -5,15 +5,17 @@ import { render } from '@testing-library/react';
 import DateTimeChange from './DateTimeChange';
 
 describe('DateTimeChange', () => {
-  const renderDateTimeChange = ({ group, page }) => render((
+  const renderDateTimeChange = ({ group, page, time }) => render((
     <DateTimeChange
       group={group}
       page={page}
+      time={time}
     />
   ));
 
   context('When on the main page', () => {
     const page = 'main';
+    const time = Date.now();
 
     it('renders Recruitment number text', () => {
       const group = {
@@ -26,32 +28,33 @@ describe('DateTimeChange', () => {
 
       const { participants, personnel } = group;
 
-      const { container } = renderDateTimeChange({ group, page });
+      const { container } = renderDateTimeChange({ group, page, time });
 
       expect(container).toHaveTextContent(`모집 인원: ${participants.length} / ${personnel}`);
     });
 
-    describe('current time is before the application deadline', () => {
+    describe(`current time is before the recruitment deadline
+      when the number of study group participants is less than the maximum number of participants`, () => {
       it('renders Recruiting text', () => {
         const nowDate = new Date();
         const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
 
         const group = {
-          applyEndDate: tomorrow,
+          applyEndTime: tomorrow,
           participants: [
             'user2',
           ],
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('모집중');
       });
     });
 
-    describe('current time is after the application deadline', () => {
-      it('renders Application deadline text', () => {
+    describe('current time is after the recruitment deadline', () => {
+      it('renders recruitment deadline text', () => {
         const nowDate = new Date();
         const yesterday = nowDate.setDate(nowDate.getDate() - 1);
 
@@ -63,14 +66,14 @@ describe('DateTimeChange', () => {
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('모집마감');
       });
     });
 
     describe('When the number of study group participants equals the maximum number of participants', () => {
-      it('renders Application deadline text', () => {
+      it('renders recruitment deadline text', () => {
         const nowDate = new Date();
         const tomorrow = nowDate.setDate(nowDate.getDate() - 1);
 
@@ -83,7 +86,7 @@ describe('DateTimeChange', () => {
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('모집마감');
       });
@@ -92,9 +95,11 @@ describe('DateTimeChange', () => {
 
   context('When on the introduce page', () => {
     const page = 'introduce';
+    const time = Date.now();
 
-    describe('current time is before the application deadline', () => {
-      it('renders Application deadline one day later text', () => {
+    describe(`current time is before the recruitment deadline
+      when the number of study group participants is less than the maximum number of participants`, () => {
+      it('renders recruitment deadline one day later text', () => {
         const nowDate = new Date();
         const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
 
@@ -106,14 +111,14 @@ describe('DateTimeChange', () => {
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('하루 후 모집 마감');
       });
     });
 
-    describe('current time is after the application deadline', () => {
-      it('renders Application deadline text', () => {
+    describe('current time is after the recruitment deadline', () => {
+      it('renders recruitment deadline text', () => {
         const nowDate = new Date();
         const yesterday = nowDate.setDate(nowDate.getDate() - 1);
 
@@ -125,14 +130,14 @@ describe('DateTimeChange', () => {
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('모집마감');
       });
     });
 
     describe('When the number of study group participants equals the maximum number of participants', () => {
-      it('renders Application deadline text', () => {
+      it('renders recruitment deadline text', () => {
         const nowDate = new Date();
         const tomorrow = nowDate.setDate(nowDate.getDate() - 1);
 
@@ -145,7 +150,7 @@ describe('DateTimeChange', () => {
           personnel: 2,
         };
 
-        const { container } = renderDateTimeChange({ group, page });
+        const { container } = renderDateTimeChange({ group, page, time });
 
         expect(container).toHaveTextContent('모집마감');
       });

diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 
 import styled from '@emotion/styled';
 
+import Moment from 'react-moment';
+
+import { isCheckedTimeStatus } from '../../util/utils';
+
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
@@ -32,9 +36,17 @@ const IntroduceHeaderWrapper = styled.div`
     font-family: 'Gamja Flower', cursive;
     border-radius: 0.4rem;
     border: none;
-    background: ${palette.teal[5]};
+    outline: none;
+  }
+  .deadline{
+    cursor: not-allowed;
+    background: ${palette.gray[3]};
+    color: ${palette.gray[5]};
+  }
+  .apply{
     color: white;
     cursor: pointer;
+    background: ${palette.teal[5]};
     &:hover{
       background: ${palette.teal[4]};
     }
@@ -87,16 +99,32 @@ const IntroduceContent = styled.div`
   padding: 1.5rem;
 `;
 
-const StudyIntroduceForm = ({ group }) => {
+const StudyIntroduceForm = ({ group, realTime }) => {
   const {
     title, contents, tags, moderatorId, personnel, participants, applyEndDate,
   } = group;
 
+  const applyEndTime = new Date(applyEndDate).getTime();
+
   return (
     <StudyIntroduceWrapper>
       <IntroduceHeaderWrapper>
         <h1>{title}</h1>
-        <button type="button">신청하기</button>
+        {isCheckedTimeStatus({ ...group, time: realTime, applyEndTime }) ? (
+          <button
+            type="button"
+            className="deadline"
+          >
+            모집마감
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="apply"
+          >
+            신청하기
+          </button>
+        )}
       </IntroduceHeaderWrapper>
       <ModeratorWrapper>
         {`🙋‍♂️ ${moderatorId}`}
@@ -110,10 +138,11 @@ const StudyIntroduceForm = ({ group }) => {
         </IntroduceReference>
         <IntroduceReference>
           <label htmlFor="apply-end">모집 마감 일자 :</label>
-          <span id="apply-end">{applyEndDate}</span>
+          <Moment interval={0} format="YYYY년 MM월 DD일">{applyEndTime}</Moment>
         </IntroduceReference>
         <DateTimeChange
           group={group}
+          time={realTime}
           page="introduce"
         />
       </IntroduceReferenceWrapper>

diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx
@@ -9,10 +9,11 @@ import StudyIntroduceForm from './StudyIntroduceForm';
 import STUDY_GROUP from '../../../fixtures/study-group';
 
 describe('StudyIntroduceForm', () => {
-  const renderStudyIntroduceForm = ({ group }) => render((
+  const renderStudyIntroduceForm = ({ group, time }) => render((
     <MemoryRouter>
       <StudyIntroduceForm
         group={group}
+        realTime={time}
       />
     </MemoryRouter>
   ));
@@ -29,4 +30,77 @@ describe('StudyIntroduceForm', () => {
 
     expect(container.innerHTML).toContain('<a ');
   });
+
+  context('When the study recruitment is closed', () => {
+    const time = Date.now();
+
+    describe('current time is after the recruitment deadline', () => {
+      const nowDate = new Date();
+      const yesterday = nowDate.setDate(nowDate.getDate() - 1);
+
+      const group = {
+        ...STUDY_GROUP,
+        applyEndDate: yesterday,
+        participants: [
+          'user2',
+        ],
+        personnel: 2,
+      };
+
+      it('renders recruitment closed text', () => {
+        const { container } = renderStudyIntroduceForm({ group, time });
+
+        expect(container).toHaveTextContent('모집마감');
+        expect(container).not.toHaveTextContent('신청하기');
+      });
+    });
+
+    describe('When the number of study group participants equals the maximum number of participants', () => {
+      const nowDate = new Date();
+      const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+      const group = {
+        ...STUDY_GROUP,
+        applyEndDate: tomorrow,
+        participants: [
+          'user2',
+          'user3',
+        ],
+        personnel: 2,
+      };
+
+      it('renders recruitment closed text', () => {
+        const { container } = renderStudyIntroduceForm({ group, time });
+
+        expect(container).toHaveTextContent('모집마감');
+        expect(container).not.toHaveTextContent('신청하기');
+      });
+    });
+  });
+
+  context('When the study recruitment is opened', () => {
+    const time = Date.now();
+
+    describe(`current time is before the recruitment deadline and 
+      when the number of study group participants is less than the maximum number of participants`, () => {
+      const nowDate = new Date();
+      const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+      const group = {
+        ...STUDY_GROUP,
+        applyEndDate: tomorrow,
+        participants: [
+          'user2',
+        ],
+        personnel: 2,
+      };
+
+      it('renders recruitment apply text', () => {
+        const { container } = renderStudyIntroduceForm({ group, time });
+
+        expect(container).toHaveTextContent('신청하기');
+        expect(container).not.toHaveTextContent('모집마감');
+      });
+    });
+  });
 });
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
@@ -39,7 +39,7 @@ const StudyInfoWrapper = styled.div`
   }
 `;
 
-const StudyGroup = ({ group }) => {
+const StudyGroup = ({ group, realTime }) => {
   const {
     id, moderatorId, title, applyEndDate, tags,
   } = group;
@@ -57,6 +57,7 @@ const StudyGroup = ({ group }) => {
           <DateTimeChange
             group={group}
             page="main"
+            time={realTime}
           />
         </div>
         <div>

diff --git 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, realTime }) => (
   <StudyGroupsWrapper>
     {groups.map((group) => (
       <StudyGroup
         key={group.id}
         group={group}
+        realTime={realTime}
       />
     ))}
   </StudyGroupsWrapper>