[Feature] Implement Study Review

src/components/introduce/Review.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+
+const ReviewWrapper = styled.div`
+
+`;
+
+const Review = ({ review }) => {
+  const {
+    id, rating, content, createDate,
+  } = review;
+
+  return (
+    <ReviewWrapper>
+      <div>
+        {rating}
+      </div>
+      <div>
+        {content}
+      </div>
+      <div>
+        {`${id} | ${createDate}`}
+      </div>
+    </ReviewWrapper>
+  );
+};
+
+export default Review;

src/components/introduce/Review.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import Review from './Review';
+
+describe('Review', () => {
+  const mockReview = {
+    id: 'test@test.com',
+    rating: 3,
+    content: 'review',
+    createDate: new Date(),
+  };
+
+  const renderReview = (review) => render((
+    <Review
+      review={review}
+    />
+  ));
+
+  it('Render review contents', () => {
+    const { container } = renderReview(mockReview);
+
+    expect(container).toHaveTextContent('review');
+    expect(container).toHaveTextContent(3);
+    expect(container).toHaveTextContent('test@test.com');
+  });
+});

src/components/introduce/StudyReviewForm.jsx → src/components/introduce/ReviewForm.jsx

@@ -7,7 +7,6 @@ import StarRatings from 'react-star-ratings';
 import facepaint from 'facepaint';
 
 import { STUDY_REVIEW_FORM } from '../../util/constants/constants';
-import { changeDateToTime, isCheckedTimeStatus } from '../../util/utils';
 
 import palette from '../../styles/palette';
 import Textarea from '../../styles/Textarea';
@@ -54,26 +53,15 @@ const StudyReviewFormButton = styled(Button)`
   margin: 1px 0 0.8rem 0.5rem;
 `;
 
-const isValidateUserInfo = (user) => (participants) => !!participants
+const isValidateUserInfo = (user, participants) => !!participants
   .find(({ id, confirm }) => id === user && confirm && confirm === true);
 
-const StudyReviewForm = ({
-  group, user, time, fields, onChangeReview, onSubmit,
+const ReviewForm = ({
+  participants, user, fields, onChangeReview, onSubmit,
 }) => {
-  const {
-    participants, personnel, applyEndDate,
-  } = group;
+  const { rating, content } = fields;
 
-  const { rating, review } = fields;
-
-  const applyEndTime = changeDateToTime(applyEndDate);
-
-  const valid = {
-    time, applyEndTime, participants, personnel,
-  };
-
-  // FIXME - 수정 필요 isCheckedTimeStatus
-  if (!isValidateUserInfo(user)(participants) || !isCheckedTimeStatus(valid)) {
+  if (!isValidateUserInfo(user, participants)) {
     return null;
   }
 
@@ -112,8 +100,8 @@ const StudyReviewForm = ({
         <Textarea
           rows="3"
           cols="100"
-          name="review"
-          value={review}
+          name="content"
+          value={content}
           placeholder="후기를 입력해주세요!"
           onChange={handleChangeReview}
         />
@@ -128,4 +116,4 @@ const StudyReviewForm = ({
   );
 };
 
-export default StudyReviewForm;
+export default ReviewForm;

src/components/introduce/StudyReviewForm.test.jsx → src/components/introduce/ReviewForm.test.jsx

@@ -2,41 +2,32 @@ import React from 'react';
 
 import { render, fireEvent } from '@testing-library/react';
 
-import StudyReviewForm from './StudyReviewForm';
+import ReviewForm from './ReviewForm';
 
-import { yesterday } from '../../util/utils';
-import STUDY_GROUP from '../../../fixtures/study-group';
-
-describe('StudyReviewForm', () => {
+describe('ReviewForm', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   const handleChange = jest.fn();
   const handleSubmit = jest.fn();
 
-  const reviewForm = { rating: 3, review: '' };
+  const reviewForm = { rating: 3, content: '' };
 
-  const renderStudyReviewForm = ({
-    group, time, user, fields = reviewForm,
+  const renderReviewForm = ({
+    participants, user, fields = reviewForm,
   }) => render((
-    <StudyReviewForm
+    <ReviewForm
       user={user}
-      time={time}
-      group={group}
+      participants={participants}
       fields={fields}
       onSubmit={handleSubmit}
       onChangeReview={handleChange}
     />
   ));
 
   const userStatusSetting = ({ user, participants }) => ({
-    group: {
-      ...STUDY_GROUP,
-      participants,
-      applyEndDate: yesterday,
-    },
-    time: Date.now(),
+    participants,
     user,
   });
 
@@ -48,17 +39,17 @@ describe('StudyReviewForm', () => {
       };
 
       it('renders study review form', () => {
-        const { container } = renderStudyReviewForm(userStatusSetting(settings));
+        const { container } = renderReviewForm(userStatusSetting(settings));
         expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
       });
       it('call event change review form', () => {
-        const { getByPlaceholderText } = renderStudyReviewForm(userStatusSetting(settings));
+        const { getByPlaceholderText } = renderReviewForm(userStatusSetting(settings));
 
         const textarea = getByPlaceholderText('후기를 입력해주세요!');
 
         fireEvent.change(textarea, {
           target: {
-            name: 'review',
+            name: 'content',
             value: 'test',
           },
         });
@@ -67,7 +58,7 @@ describe('StudyReviewForm', () => {
       });
 
       it('call event click for review form', () => {
-        const { getByText } = renderStudyReviewForm(userStatusSetting(settings));
+        const { getByText } = renderReviewForm(userStatusSetting(settings));
 
         fireEvent.click(getByText('후기 등록하기'));
 
@@ -77,7 +68,7 @@ describe('StudyReviewForm', () => {
 
     describe('When the user is not approved applicant', () => {
       it('nothing renders study review form', () => {
-        const { container } = renderStudyReviewForm(userStatusSetting({
+        const { container } = renderReviewForm(userStatusSetting({
           participants: [],
           user: 'user2',
         }));
@@ -89,7 +80,7 @@ describe('StudyReviewForm', () => {
 
   context('without user', () => {
     it('nothing renders study review form', () => {
-      const { container } = renderStudyReviewForm(userStatusSetting({
+      const { container } = renderReviewForm(userStatusSetting({
         participants: [],
         user: null,
       }));

src/components/introduce/ReviewList.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import Review from './Review';
+
+const ReviewList = ({ reviews }) => {
+  if (_.isEmpty(reviews)) {
+    return (
+      <div>아직 리뷰가 존재하지 않습니다!</div>
+    );
+  }
+
+  return (
+    <>
+      {reviews.map((review) => (
+        <Review
+          key={review.id}
+          review={review}
+        />
+      ))}
+    </>
+  );
+};
+
+export default ReviewList;

src/components/introduce/ReviewList.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import ReviewList from './ReviewList';
+
+describe('ReviewList', () => {
+  const mockReviews = [{
+    id: 'test@test.com',
+    rating: 3,
+    content: 'review',
+    createdDate: new Date(),
+  }];
+
+  const renderReviewList = (reviews) => render((
+    <ReviewList
+      reviews={reviews}
+    />
+  ));
+
+  context('With reviews', () => {
+    it('Render reviews', () => {
+      const { container } = renderReviewList(mockReviews);
+
+      expect(container).toHaveTextContent('review');
+      expect(container).toHaveTextContent('test@test.com');
+      expect(container).toHaveTextContent(3);
+    });
+  });
+
+  context('Without reviews', () => {
+    it('Render nothing review message', () => {
+      const { container } = renderReviewList([]);
+
+      expect(container).toHaveTextContent('아직 리뷰가 존재하지 않습니다!');
+    });
+  });
+});

src/containers/introduce/StudyReviewContainer.jsx → src/containers/introduce/ReviewContainer.jsx

@@ -3,12 +3,15 @@ import React, { useState, useCallback } from 'react';
 import { useInterval } from 'react-use';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { getAuth, getGroup } from '../../util/utils';
+import {
+  getAuth, getGroup, isCheckedTimeStatus, changeDateToTime,
+} from '../../util/utils';
 import { changeStudyReviewFields, setStudyReview } from '../../reducers/groupSlice';
 
-import StudyReviewForm from '../../components/introduce/StudyReviewForm';
+import ReviewForm from '../../components/introduce/ReviewForm';
+import ReviewList from '../../components/introduce/ReviewList';
 
-const StudyReviewContainer = () => {
+const ReviewFormContainer = () => {
   const [realTime, setRealTime] = useState(Date.now());
 
   const dispatch = useDispatch();
@@ -34,16 +37,35 @@ const StudyReviewContainer = () => {
     return null;
   }
 
+  const {
+    participants, personnel, applyEndDate,
+  } = group;
+
+  const isApplyTime = isCheckedTimeStatus({
+    applyEndTime: changeDateToTime(applyEndDate),
+    personnel,
+    participants,
+    time: realTime,
+  });
+
+  if (!isApplyTime) {
+    return null;
+  }
+
   return (
-    <StudyReviewForm
-      user={user}
-      group={group}
-      time={realTime}
-      fields={studyReviewFields}
-      onChangeReview={onChangeReviewFields}
-      onSubmit={onSubmitReview}
-    />
+    <>
+      <ReviewForm
+        user={user}
+        participants={group.participants}
+        fields={studyReviewFields}
+        onChangeReview={onChangeReviewFields}
+        onSubmit={onSubmitReview}
+      />
+      <ReviewList
+        reviews={group.reviews ? group.reviews : []}
+      />
+    </>
   );
 };
 
-export default StudyReviewContainer;
+export default ReviewFormContainer;