[Update] Validation of the study review form

src/components/common/DateTimeChange.jsx

@@ -4,7 +4,7 @@ import 'moment/locale/ko';
 import moment from 'moment';
 import Moment from 'react-moment';
 
-import { authorizedUsersNumber, isCheckedTimeStatus } from '../../util/utils';
+import { authorizedUsersNumber, changeDateToTime, isCheckedTimeStatus } from '../../util/utils';
 
 import DateTimeStatus from '../../styles/DateTimeStatus';
 
@@ -13,7 +13,7 @@ moment.locale('ko');
 const DateTimeChange = ({ group, page, time }) => {
   const { participants, personnel, applyEndDate } = group;
 
-  const applyEndTime = new Date(applyEndDate).getTime();
+  const applyEndTime = changeDateToTime(applyEndDate);
 
   const valid = {
     time, applyEndTime, participants, personnel,

src/components/introduce/StudyReviewForm.jsx

@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 
 import StarRatings from 'react-star-ratings';
 
+import { changeDateToTime, isCheckedTimeStatus } from '../../util/utils';
+
 import palette from '../../styles/palette';
 import Textarea from '../../styles/Textarea';
 import Button from '../../styles/Button';
@@ -39,7 +41,24 @@ const StudyReviewFormButton = styled(Button)`
   margin: 1px 0 0.8rem 0.5rem;
 `;
 
-const StudyReviewForm = () => {
+const isValidateUserInfo = (user) => (moderator) => !user || (moderator === user);
+
+const StudyReviewForm = ({ group, user, time }) => {
+  const {
+    participants, personnel, applyEndDate, moderatorId,
+  } = group;
+
+  const applyEndTime = changeDateToTime(applyEndDate);
+
+  const valid = {
+    time, applyEndTime, participants, personnel,
+  };
+
+  // TODO: 수정하자.
+  if (isValidateUserInfo(user)(moderatorId) || !isCheckedTimeStatus(valid)) {
+    return null;
+  }
+
   const [rating, setRating] = useState(0);
 
   const changeRating = (newRating) => {

src/components/introduce/StudyReviewForm.test.jsx

@@ -4,16 +4,68 @@ import { render } from '@testing-library/react';
 
 import StudyReviewForm from './StudyReviewForm';
 
+import { yesterday } from '../../util/utils';
+import STUDY_GROUP from '../../../fixtures/study-group';
+
 describe('StudyReviewForm', () => {
-  const renderStudyReviewForm = () => render((
-    <StudyReviewForm />
+  const renderStudyReviewForm = ({ group, time, user }) => render((
+    <StudyReviewForm
+      group={group}
+      time={time}
+      user={user}
+    />
   ));
 
-  it('renders study review form text', () => {
-    const { container, getByPlaceholderText } = renderStudyReviewForm();
+  context('with user', () => {
+    describe('User is not moderator and applyEndDate is Deadline', () => {
+      const info = {
+        group: {
+          ...STUDY_GROUP,
+          applyEndDate: yesterday,
+        },
+        time: Date.now(),
+        user: 'user1',
+      };
+
+      it('renders study review form', () => {
+        const { container } = renderStudyReviewForm(info);
+
+        expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
+      });
+    });
+
+    describe('User is moderator', () => {
+      const info = {
+        group: {
+          ...STUDY_GROUP,
+          applyEndDate: yesterday,
+        },
+        time: Date.now(),
+        user: 'user2',
+      };
+
+      it('nothing renders study review form', () => {
+        const { container } = renderStudyReviewForm(info);
+
+        expect(container).toBeEmptyDOMElement();
+      });
+    });
+  });
+
+  context('without user', () => {
+    const info = {
+      group: {
+        ...STUDY_GROUP,
+        applyEndDate: yesterday,
+      },
+      time: Date.now(),
+      user: null,
+    };
+
+    it('nothing renders study review form', () => {
+      const { container } = renderStudyReviewForm(info);
 
-    expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
-    expect(container).toHaveTextContent('후기 등록하기');
-    expect(getByPlaceholderText('후기를 입력해주세요!')).not.toBeNull();
+      expect(container).toBeEmptyDOMElement();
+    });
   });
 });

src/containers/introduce/StudyReviewContainer.jsx

@@ -1,9 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { useSelector } from 'react-redux';
+import { useInterval } from 'react-use';
+
+import { getAuth, getGroup } from '../../util/utils';
 
 import StudyReviewForm from '../../components/introduce/StudyReviewForm';
 
-const StudyReviewContainer = () => (
-  <StudyReviewForm />
-);
+const StudyReviewContainer = () => {
+  const [realTime, setRealTime] = useState(Date.now());
+
+  const group = useSelector(getGroup('group'));
+  const user = useSelector(getAuth('user'));
+
+  useInterval(() => {
+    setRealTime(Date.now());
+  }, 1000);
+
+  if (!group) {
+    return null;
+  }
+
+  return (
+    <StudyReviewForm
+      user={user}
+      group={group}
+      time={realTime}
+    />
+  );
+};
 
 export default StudyReviewContainer;

src/containers/introduce/StudyReviewContainer.test.jsx

@@ -1,18 +1,52 @@
 import React from 'react';
 
+import { useSelector } from 'react-redux';
+
 import { render } from '@testing-library/react';
 
 import StudyReviewContainer from './StudyReviewContainer';
 
+import STUDY_GROUP from '../../../fixtures/study-group';
+import { yesterday } from '../../util/utils';
+
 describe('StudyReviewContainer', () => {
+  beforeEach(() => {
+    useSelector.mockImplementation((state) => state({
+      groupReducer: {
+        group: given.group,
+      },
+      authReducer: {
+        user: given.user,
+      },
+    }));
+  });
+
   const renderStudyReviewContainer = () => render((
     <StudyReviewContainer />
   ));
 
-  it('renders study group title and contents', () => {
-    const { container } = renderStudyReviewContainer();
+  context('with login and group', () => {
+    given('group', () => ({
+      ...STUDY_GROUP,
+      applyEndDate: yesterday,
+    }));
+    given('user', () => ('user1'));
+
+    it('renders study review form', () => {
+      const { container } = renderStudyReviewContainer();
+
+      expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
+    });
+  });
+
+  context('without login and group', () => {
+    given('user', () => (null));
+    given('group', () => (null));
+
+    it('nothing renders review form', () => {
+      const { container } = renderStudyReviewContainer();
 
-    expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
-    expect(container).toHaveTextContent('후기 등록하기');
+      expect(container).toBeEmptyDOMElement();
+    });
   });
 });

src/util/utils.js

@@ -29,6 +29,7 @@ export const changeDateToTime = (date) => new Date(date).getTime();
 
 const nowDate = new Date();
 export const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+export const yesterday = nowDate.setDate(nowDate.getDate() - 1);
 
 export const toStringEndDateFormat = (endDate) => moment(new Date(endDate))
   .format('YYYY-MM-DDTHH:mm:ss')