diff --git a/fake-server/db.json b/fake-server/db.json index d7c43c6..52c6d41 100644 --- a/fake-server/db.json +++ b/fake-server/db.json @@ -4,7 +4,7 @@ "id": 0, "title": "스터디를 소개합니다.1", "moderatorId": "user1", - "applyEndDate": "2020-12-13", + "applyEndDate": "2020-11-20 23:04", "participants": [ "user1", "user2", @@ -91,7 +91,8 @@ "user5", "user6", "user7", - "user8" + "user8", + "user9" ], "personnel": 9, "contents": "우리는 이것저것 합니다.5", diff --git a/package-lock.json b/package-lock.json index eb999bf..88c25e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9778,6 +9778,19 @@ "minimist": "^1.2.5" } }, + "moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + }, + "moment-timezone": { + "version": "0.5.32", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.32.tgz", + "integrity": "sha512-Z8QNyuQHQAmWucp8Knmgei8YNo28aLjJq6Ma+jy1ZSpSk5nyfRT8xgUbSQvD2+2UajISfenndwvFuH3NGS+nvA==", + "requires": { + "moment": ">= 2.9.0" + } + }, "morgan": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", @@ -11080,6 +11093,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-moment": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.0.0.tgz", + "integrity": "sha512-J4iIiwUT4oZcL7cp2U7naQKbQtqvmzGXXBMg/DLj+Pi7n9EW0VhBRx/1aJ1Tp2poCqTCAPoadLEoUIkReGnNNg==" + }, "react-redux": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz", diff --git a/package.json b/package.json index 31f3688..ad38c0f 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,11 @@ "@emotion/styled": "^11.0.0", "@reduxjs/toolkit": "^1.4.0", "axios": "^0.21.0", + "moment": "^2.29.1", + "moment-timezone": "^0.5.32", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-moment": "^1.0.0", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "redux": "^4.0.5", diff --git a/src/components/main/DateTimeChange.jsx b/src/components/main/DateTimeChange.jsx new file mode 100644 index 0000000..158ecb6 --- /dev/null +++ b/src/components/main/DateTimeChange.jsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; + +import styled from '@emotion/styled'; + +import useInterval from '../../util/useInterval'; + +import DateTimeStatus from '../../styles/DateTimeStatus'; + +const DateTimeChangeWrapper = styled.div``; + +const isCheckedTimeStatus = ({ + realTime, applyEndTime, participants, personnel, +}) => (!!((realTime - applyEndTime >= 0 || participants.length === personnel))); + +const DateTimeChange = ({ group }) => { + const { participants, personnel, applyEndDate } = group; + const applyEndTime = new Date(applyEndDate).getTime(); + + const [realTime, setRealTime] = useState(Date.now()); + + useInterval(() => { + setRealTime(Date.now()); + }, 1000); + + const valid = { + realTime, applyEndTime, participants, personnel, + }; + + const timeStatusChange = () => { + if (isCheckedTimeStatus(valid)) { + return ( + 모집마감 + ); + } + + return ( + 모집중 + ); + }; + + return ( + + {`모집 인원: ${participants.length} / ${personnel}`} + {timeStatusChange()} + + ); +}; + +export default DateTimeChange; diff --git a/src/components/main/DateTimeChange.test.jsx b/src/components/main/DateTimeChange.test.jsx new file mode 100644 index 0000000..8181f8d --- /dev/null +++ b/src/components/main/DateTimeChange.test.jsx @@ -0,0 +1,71 @@ +import React from 'react'; + +import { render } from '@testing-library/react'; + +import DateTimeChange from './DateTimeChange'; + +describe('DateTimeChange', () => { + const renderDateTimeChange = ({ group }) => render(( + + )); + + describe('current time is before the application deadline', () => { + it('renders Recruiting text', () => { + const nowDate = new Date(); + const tomorrow = nowDate.setDate(nowDate.getDate() + 1); + + const group = { + applyEndDate: tomorrow, + participants: [ + 'user2', + ], + personnel: 2, + }; + + const { container } = renderDateTimeChange({ group }); + + expect(container).toHaveTextContent('모집중'); + }); + }); + + describe('current time is after the application deadline', () => { + it('renders Application deadline text', () => { + const nowDate = new Date(); + const yesterday = nowDate.setDate(nowDate.getDate() - 1); + + const group = { + applyEndDate: yesterday, + participants: [ + 'user2', + ], + personnel: 2, + }; + + const { container } = renderDateTimeChange({ group }); + + expect(container).toHaveTextContent('모집마감'); + }); + }); + + describe('When the number of study group participants equals the maximum number of participants', () => { + it('renders Application deadline text', () => { + const nowDate = new Date(); + const tomorrow = nowDate.setDate(nowDate.getDate() - 1); + + const group = { + applyEndDate: tomorrow, + participants: [ + 'user2', + 'user3', + ], + personnel: 2, + }; + + const { container } = renderDateTimeChange({ group }); + + expect(container).toHaveTextContent('모집마감'); + }); + }); +}); diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx index 38bc4bb..b9de983 100644 --- a/src/components/main/StudyGroup.jsx +++ b/src/components/main/StudyGroup.jsx @@ -4,8 +4,11 @@ import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; +import Moment from 'react-moment'; + import Tags from '../common/Tags'; import palette from '../../styles/palette'; +import DateTimeChange from './DateTimeChange'; const StudyGroupWrapper = styled.div` margin: 1em .5em 1em .5em; @@ -36,23 +39,9 @@ const StudyInfoWrapper = styled.div` } `; -const DateTimeChange = styled.div` - margin-left: 1.5rem; - font-weight: 600; - font-size: 1.1rem; - font-family: 'Gamja Flower', cursive; - padding: .1rem .5rem .1rem .5rem; - display: inline-flex; - color: white; - border-radius: 0.5rem; - margin-top: 1rem; - margin-bottom: 1rem; - background: ${palette.cyan[4]}; -`; - const StudyGroup = ({ group }) => { const { - id, moderatorId, title, personnel, applyEndDate, tags, participants, + id, moderatorId, title, applyEndDate, tags, } = group; return ( @@ -63,11 +52,11 @@ const StudyGroup = ({ group }) => {
{moderatorId}
- {`모집 인원: ${participants.length} / ${personnel}`} - 모집중 +
- {`마감 일자: ${applyEndDate}`} + {'마감 일자: '} + {applyEndDate}
diff --git a/src/components/main/StudyGroup.test.jsx b/src/components/main/StudyGroup.test.jsx index 97f5318..d7a8c30 100644 --- a/src/components/main/StudyGroup.test.jsx +++ b/src/components/main/StudyGroup.test.jsx @@ -15,20 +15,43 @@ describe('StudyGroup', () => { )); - it('renders study group text contents', () => { + describe('renders study group text contents', () => { const group = { id: 1, - moderatorId: 'user1', - title: '스터디를 소개합니다. 1', - personnel: 5, - participants: [], - applyEndDate: null, - tags: [], + title: '스터디를 소개합니다.2', + moderatorId: 'user2', + applyEndDate: '2020-12-23', + participants: [ + 'user2', + ], + personnel: 2, + tags: [ + 'JavaScript', + 'React', + 'Algorithm', + ], }; + it('renders title, moderatorId, tags', () => { + const { container } = renderStudyGroup({ group }); - const { container } = renderStudyGroup({ group }); + expect(container).toHaveTextContent('스터디를 소개합니다.2'); + expect(container).toHaveTextContent('user2'); + group.tags.forEach((tag) => { + expect(container).toHaveTextContent(`#${tag}`); + }); + expect(container).toHaveTextContent('2020년 12월 23일'); + }); - expect(container).toHaveTextContent('스터디를 소개합니다. 1'); - expect(container).toHaveTextContent('user1'); + it('renders changed applyEndDate format', () => { + const { container } = renderStudyGroup({ group }); + + expect(container).toHaveTextContent('2020년 12월 23일'); + }); + + it('renders study status is Recruiting', () => { + const { container } = renderStudyGroup({ group }); + + expect(container).toHaveTextContent('모집중'); + }); }); }); diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx new file mode 100644 index 0000000..b8e38a5 --- /dev/null +++ b/src/styles/DateTimeStatus.jsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +import palette from './palette'; + +const DateTimeStatusWrapper = styled.div` + margin-left: 1.5rem; + font-weight: 600; + font-size: 1.1rem; + font-family: 'Gamja Flower', cursive; + padding: .1rem .5rem .1rem .5rem; + display: inline-flex; + color: white; + border-radius: 0.5rem; + margin-top: 1rem; + margin-bottom: 1rem; + + ${(props) => props.status === 'recruit' + && css` + background: ${palette.cyan[4]}; + animation: blink-animation 1.5s steps(5, start) infinite; + -webkit-animation: blink-animation 1.5s steps(5, start) infinite; + @keyframes blink-animation { + to { + visibility: hidden; + } + } + @-webkit-keyframes blink-animation { + to { + visibility: hidden; + } + } + `} + + + ${(props) => props.status === 'deadline' + && css` + background: #ff6b6b; + `} +`; + +const DateTimeStatus = ({ children, status }) => ( + + {children} + +); + +export default DateTimeStatus; diff --git a/src/util/useInterval.js b/src/util/useInterval.js new file mode 100644 index 0000000..9c2fbcc --- /dev/null +++ b/src/util/useInterval.js @@ -0,0 +1,22 @@ +import { useRef, useEffect } from 'react'; + +const useInterval = (callback, delay) => { + const savedCallback = useRef(); + + useEffect(() => { + savedCallback.current = callback; + }); + + useEffect(() => { + function tick() { + savedCallback.current(); + } + + // eslint-disable-next-line prefer-const + let id = setInterval(tick, delay); + + return () => clearInterval(id); + }, [delay]); +}; + +export default useInterval;