diff --git a/src/components/introduce/Review.jsx b/src/components/introduce/Review.jsx
new file mode 100644
index 0000000..ffdff1e
--- /dev/null
+++ b/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 (
+
+
+ {rating}
+
+
+ {content}
+
+
+ {`${id} | ${createDate}`}
+
+
+ );
+};
+
+export default Review;
diff --git a/src/components/introduce/Review.test.jsx b/src/components/introduce/Review.test.jsx
new file mode 100644
index 0000000..c98ea3c
--- /dev/null
+++ b/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((
+
+ ));
+
+ it('Render review contents', () => {
+ const { container } = renderReview(mockReview);
+
+ expect(container).toHaveTextContent('review');
+ expect(container).toHaveTextContent(3);
+ expect(container).toHaveTextContent('test@test.com');
+ });
+});
diff --git a/src/components/introduce/StudyReviewForm.jsx b/src/components/introduce/ReviewForm.jsx
similarity index 77%
rename from src/components/introduce/StudyReviewForm.jsx
rename to src/components/introduce/ReviewForm.jsx
index ee04db4..76c4f57 100644
--- a/src/components/introduce/StudyReviewForm.jsx
+++ b/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 = ({
@@ -128,4 +116,4 @@ const StudyReviewForm = ({
);
};
-export default StudyReviewForm;
+export default ReviewForm;
diff --git a/src/components/introduce/StudyReviewForm.test.jsx b/src/components/introduce/ReviewForm.test.jsx
similarity index 65%
rename from src/components/introduce/StudyReviewForm.test.jsx
rename to src/components/introduce/ReviewForm.test.jsx
index 49fd35f..e6c16d6 100644
--- a/src/components/introduce/StudyReviewForm.test.jsx
+++ b/src/components/introduce/ReviewForm.test.jsx
@@ -2,12 +2,9 @@ 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();
});
@@ -15,15 +12,14 @@ describe('StudyReviewForm', () => {
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((
- {
));
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,
}));
diff --git a/src/components/introduce/ReviewList.jsx b/src/components/introduce/ReviewList.jsx
new file mode 100644
index 0000000..379405a
--- /dev/null
+++ b/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 (
+ 아직 리뷰가 존재하지 않습니다!
+ );
+ }
+
+ return (
+ <>
+ {reviews.map((review) => (
+
+ ))}
+
+ );
+};
+
+export default ReviewList;
diff --git a/src/components/introduce/ReviewList.test.jsx b/src/components/introduce/ReviewList.test.jsx
new file mode 100644
index 0000000..3c8ce7f
--- /dev/null
+++ b/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((
+
+ ));
+
+ 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('아직 리뷰가 존재하지 않습니다!');
+ });
+ });
+});
diff --git a/src/containers/introduce/StudyReviewContainer.jsx b/src/containers/introduce/ReviewContainer.jsx
similarity index 51%
rename from src/containers/introduce/StudyReviewContainer.jsx
rename to src/containers/introduce/ReviewContainer.jsx
index 3da2a70..dac6b53 100644
--- a/src/containers/introduce/StudyReviewContainer.jsx
+++ b/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 (
-
+ <>
+
+
+
);
};
-export default StudyReviewContainer;
+export default ReviewFormContainer;
diff --git a/src/containers/introduce/ReviewContainer.test.jsx b/src/containers/introduce/ReviewContainer.test.jsx
new file mode 100644
index 0000000..89f4976
--- /dev/null
+++ b/src/containers/introduce/ReviewContainer.test.jsx
@@ -0,0 +1,170 @@
+import React from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+
+import { render, fireEvent } from '@testing-library/react';
+
+import STUDY_GROUP from '../../../fixtures/study-group';
+
+import ReviewContainer from './ReviewContainer';
+import { yesterday, tomorrow } from '../../util/utils';
+
+describe('ReviewContainer', () => {
+ const dispatch = jest.fn();
+
+ afterEach(() => {
+ jest.clearAllTimers();
+ });
+
+ beforeEach(() => {
+ jest.useFakeTimers();
+
+ dispatch.mockClear();
+
+ useDispatch.mockImplementation(() => dispatch);
+
+ useSelector.mockImplementation((state) => state({
+ groupReducer: {
+ group: given.group,
+ studyReviewFields: {
+ rating: 3,
+ review: '',
+ },
+ },
+ authReducer: {
+ user: given.user,
+ },
+ }));
+ });
+
+ const renderReviewContainer = () => render((
+
+ ));
+
+ it('When there are no reviews, renders nothing review message', () => {
+ given('group', () => ({
+ moderatorId: 'user2',
+ personnel: 3,
+ participants: [
+ { id: 'user2' },
+ {
+ id: 'user1',
+ confirm: true,
+ },
+ ],
+ applyEndDate: yesterday,
+ }));
+ given('user', () => ('user1'));
+
+ const { container } = renderReviewContainer();
+
+ expect(container).toHaveTextContent('아직 리뷰가 존재하지 않습니다!');
+ });
+
+ context('with login and group', () => {
+ given('user', () => ('user1'));
+
+ context("when apply end date isn't DeadLine", () => {
+ given('group', () => ({
+ ...STUDY_GROUP,
+ personnel: 3,
+ participants: [
+ { id: 'user2' },
+ {
+ id: 'user1',
+ confirm: true,
+ },
+ ],
+ applyEndDate: tomorrow,
+ reviews: [{
+ id: 'user1',
+ rating: 3,
+ content: 'test review',
+ createdDate: new Date(),
+ }],
+ }));
+
+ it('Nothing renders study review form', () => {
+ const { container } = renderReviewContainer();
+
+ expect(container).toBeEmptyDOMElement();
+ });
+ });
+
+ context('when apply end date is DeadLine', () => {
+ given('group', () => ({
+ ...STUDY_GROUP,
+ personnel: 3,
+ participants: [
+ { id: 'user2' },
+ {
+ id: 'user1',
+ confirm: true,
+ },
+ ],
+ applyEndDate: yesterday,
+ reviews: [{
+ id: 'user1',
+ rating: 3,
+ content: 'test review',
+ createdDate: new Date(),
+ }],
+ }));
+
+ describe('When you are an approved applicant', () => {
+ it('renders study review form', () => {
+ const { container } = renderReviewContainer();
+
+ expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
+ });
+ });
+
+ it('dispatch actions call changeStudyReviewFields', () => {
+ const form = {
+ name: 'review',
+ value: '후기입니다.',
+ };
+
+ const { getByPlaceholderText } = renderReviewContainer();
+
+ const textarea = getByPlaceholderText('후기를 입력해주세요!');
+
+ fireEvent.change(textarea, { target: form });
+
+ expect(dispatch).toBeCalledWith({
+ type: 'group/changeStudyReviewFields',
+ payload: form,
+ });
+ });
+
+ describe('Click the button to submit for study review', () => {
+ it('dispatch actions call setStudyReview', () => {
+ const { getByText } = renderReviewContainer();
+
+ fireEvent.click(getByText('후기 등록하기'));
+
+ expect(dispatch).toBeCalledTimes(1);
+ });
+ });
+
+ describe('Renders Review List', () => {
+ it('Information about the study review is render', () => {
+ const { container } = renderReviewContainer();
+
+ expect(container).toHaveTextContent('test review');
+ });
+ });
+ });
+ });
+
+ context('without login and group', () => {
+ given('user', () => (null));
+ given('group', () => (null));
+
+ it('nothing renders review form', () => {
+ const { container } = renderReviewContainer();
+
+ expect(container).toBeEmptyDOMElement();
+ });
+ });
+});
diff --git a/src/containers/introduce/StudyReviewContainer.test.jsx b/src/containers/introduce/StudyReviewContainer.test.jsx
deleted file mode 100644
index 6d800d4..0000000
--- a/src/containers/introduce/StudyReviewContainer.test.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { useSelector, useDispatch } from 'react-redux';
-
-import { render, fireEvent } from '@testing-library/react';
-
-import STUDY_GROUP from '../../../fixtures/study-group';
-import { yesterday } from '../../util/utils';
-
-import StudyReviewContainer from './StudyReviewContainer';
-
-describe('StudyReviewContainer', () => {
- const dispatch = jest.fn();
-
- jest.useFakeTimers();
-
- beforeEach(() => {
- dispatch.mockClear();
-
- useDispatch.mockImplementation(() => dispatch);
-
- useSelector.mockImplementation((state) => state({
- groupReducer: {
- group: given.group,
- studyReviewFields: {
- rating: 3,
- review: '',
- },
- },
- authReducer: {
- user: given.user,
- },
- }));
- });
-
- afterEach(() => {
- jest.clearAllTimers();
- });
-
- const renderStudyReviewContainer = () => render((
-
- ));
-
- context('with login and group', () => {
- given('group', () => ({
- ...STUDY_GROUP,
- participants: [{
- id: 'user1',
- confirm: true,
- }],
- applyEndDate: yesterday,
- }));
- given('user', () => ('user1'));
-
- describe('When you are an approved applicant', () => {
- it('renders study review form', () => {
- const { container } = renderStudyReviewContainer();
-
- expect(container).toHaveTextContent('스터디 후기를 작성해주세요!');
- });
- });
-
- it('dispatch actions call changeStudyReviewFields', () => {
- const form = {
- name: 'review',
- value: '후기입니다.',
- };
-
- const { getByPlaceholderText } = renderStudyReviewContainer();
-
- const textarea = getByPlaceholderText('후기를 입력해주세요!');
-
- fireEvent.change(textarea, { target: form });
-
- expect(dispatch).toBeCalledWith({
- type: 'group/changeStudyReviewFields',
- payload: form,
- });
- });
-
- describe('Click the button to submit for study review', () => {
- it('dispatch actions call setStudyReview', () => {
- const { getByText } = renderStudyReviewContainer();
-
- fireEvent.click(getByText('후기 등록하기'));
-
- expect(dispatch).toBeCalledTimes(1);
- });
- });
- });
-
- context('without login and group', () => {
- given('user', () => (null));
- given('group', () => (null));
-
- it('nothing renders review form', () => {
- const { container } = renderStudyReviewContainer();
-
- expect(container).toBeEmptyDOMElement();
- });
- });
-});
diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx
index fb2b855..f7d1289 100644
--- a/src/pages/IntroducePage.jsx
+++ b/src/pages/IntroducePage.jsx
@@ -10,7 +10,7 @@ import { loadStudyGroup } from '../reducers/groupSlice';
import Responsive from '../styles/Responsive';
import IntroduceFormContainer from '../containers/introduce/IntroduceFormContainer';
import IntroduceHeaderContainer from '../containers/introduce/IntroduceHeaderContainer';
-import StudyReviewContainer from '../containers/introduce/StudyReviewContainer';
+import ReviewContainer from '../containers/introduce/ReviewContainer';
const IntroducePageWrapper = styled(Responsive)`
margin-top: 6em;
@@ -29,7 +29,7 @@ const IntroducePage = ({ params }) => {
-
+
);
};
diff --git a/src/reducers/groupSlice.js b/src/reducers/groupSlice.js
index 6b9f20e..03ac9d1 100644
--- a/src/reducers/groupSlice.js
+++ b/src/reducers/groupSlice.js
@@ -33,7 +33,7 @@ const applyInitialState = {
const studyReviewInitialState = {
rating: 3,
- review: '',
+ content: '',
};
const { actions, reducer } = createSlice({
diff --git a/src/reducers/groupSlice.test.js b/src/reducers/groupSlice.test.js
index 7cca238..043c8fc 100644
--- a/src/reducers/groupSlice.test.js
+++ b/src/reducers/groupSlice.test.js
@@ -63,7 +63,7 @@ describe('reducer', () => {
},
studyReviewFields: {
rating: 3,
- review: '',
+ content: '',
},
};
@@ -255,17 +255,17 @@ describe('reducer', () => {
const initialState = {
studyReviewFields: {
rating: 5,
- review: 'test',
+ content: 'test',
},
};
it('clears fields of study review form', () => {
const state = reducer(initialState, clearStudyReviewFields());
- const { studyReviewFields: { rating, review } } = state;
+ const { studyReviewFields: { rating, content } } = state;
expect(rating).toBe(3);
- expect(review).toBe('');
+ expect(content).toBe('');
});
});
});
diff --git a/src/util/utils.js b/src/util/utils.js
index c3e7dfa..e21de50 100644
--- a/src/util/utils.js
+++ b/src/util/utils.js
@@ -13,13 +13,12 @@ export const authorizedUsersNumber = (participants) => participants
.filter(({ confirm }) => confirm && confirm === true)
.length + 1;
-// FIXME - 이 함수 수정 필요!!!
+// NOTE - 현재 시간이 마감 시간보다 지났거나, 승인된 참여자 수가 모집 인원 수보다 같거나 많을 때 true
export const isCheckedTimeStatus = ({
time, applyEndTime, participants, personnel,
-}) => (!!((
- time - applyEndTime >= 0
- || authorizedUsersNumber(participants) >= parseInt(personnel, 10)
-)));
+}) => (
+ time - applyEndTime >= 0 || authorizedUsersNumber(participants) >= parseInt(personnel, 10)
+);
export const isCheckedOnlyTimeStatus = ({ time, applyEndTime }) => (time - applyEndTime >= 0);