[Fix] Change the logic of the number of authorized users

src/components/introduce/StudyIntroduceForm.jsx → src/components/introduce/IntroduceForm.jsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import Moment from 'react-moment';
 
-import { changeDateToTime } from '../../util/utils';
+import { authorizedUsersNumber, changeDateToTime } from '../../util/utils';
 
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
@@ -74,7 +74,7 @@ const IntroduceContent = styled.div`
   padding: 1.5rem;
 `;
 
-const StudyIntroduceForm = ({
+const IntroduceForm = ({
   group, realTime,
 }) => {
   const {
@@ -95,7 +95,7 @@ const StudyIntroduceForm = ({
         <IntroduceReference>
           <label htmlFor="application-status">신청 현황 :</label>
           <span id="application-status">
-            {`${participants.length} / ${personnel}`}
+            {`${authorizedUsersNumber(participants)} / ${personnel}`}
           </span>
         </IntroduceReference>
         <IntroduceReference>
@@ -117,4 +117,4 @@ const StudyIntroduceForm = ({
   );
 };
 
-export default React.memo(StudyIntroduceForm);
+export default React.memo(IntroduceForm);

src/components/introduce/StudyIntroduceForm.test.jsx → src/components/introduce/IntroduceForm.test.jsx

@@ -4,28 +4,29 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { render } from '@testing-library/react';
 
-import StudyIntroduceForm from './StudyIntroduceForm';
+import IntroduceForm from './IntroduceForm';
 
 import STUDY_GROUP from '../../../fixtures/study-group';
 
-describe('StudyIntroduceForm', () => {
-  const renderStudyIntroduceForm = ({ group, time }) => render((
+describe('IntroduceForm', () => {
+  const renderIntroduceForm = ({ group, time }) => render((
     <MemoryRouter>
-      <StudyIntroduceForm
+      <IntroduceForm
         group={group}
         realTime={time}
       />
     </MemoryRouter>
   ));
 
   it('renders createDate text', () => {
-    const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP });
+    const { container } = renderIntroduceForm({ group: STUDY_GROUP });
 
     expect(container).toHaveTextContent('2020년 12월 06일');
+    expect(container).toHaveTextContent('1 / 2');
   });
 
   it('renders links of tags', () => {
-    const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP });
+    const { container } = renderIntroduceForm({ group: STUDY_GROUP });
 
     expect(container.innerHTML).toContain('<a ');
   });

src/containers/introduce/IntroduceFormContainer.jsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 
 import { getGroup } from '../../util/utils';
 
-import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
+import IntroduceForm from '../../components/introduce/IntroduceForm';
 
 const IntroduceFormContainer = () => {
   const [realTime, setRealTime] = useState(Date.now());
@@ -21,7 +21,7 @@ const IntroduceFormContainer = () => {
   }
 
   return (
-    <StudyIntroduceForm
+    <IntroduceForm
       group={group}
       realTime={realTime}
     />

src/util/utils.js

@@ -18,6 +18,10 @@ export const isCheckValidate = (values) => values.map(checkTrim).includes('');
 
 export const changeDateToTime = (date) => new Date(date).getTime();
 
+export const authorizedUsersNumber = (participants) => participants
+  .filter(({ confirm }) => confirm && confirm === true)
+  .length + 1;
+
 export const applyDateToString = (response) => response
   .data()
   .applyEndDate

src/util/utils.test.js

@@ -1,5 +1,11 @@
 import {
-  getAuth, getGroup, equal, changeDateToTime, applyDateToString, createDateToString,
+  getAuth,
+  getGroup,
+  equal,
+  changeDateToTime,
+  applyDateToString,
+  createDateToString,
+  authorizedUsersNumber,
 } from './utils';
 
 test('getAuth', () => {
@@ -76,3 +82,14 @@ test('createDateToString', () => {
   const time = createDateToString(response);
   expect(time).toBe(date.toString());
 });
+
+test('authorizedUsersNumber', () => {
+  const participants = [
+    { id: 'test1', confirm: false },
+    { id: 'test2', confirm: true },
+    { id: 'test3' },
+  ];
+
+  const length = authorizedUsersNumber(participants);
+  expect(length).toBe(2);
+});