[Feature] Approval and cancellation logic for study applicants

src/components/introduce/ModeratorViewButton.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
 import ParticipantListModal from './modals/ParticipantListModal';
 
-const ModeratorViewButton = ({ group, user }) => {
+const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => {
   const [ListModal, setListModal] = useState(false);
 
   const { moderatorId, participants } = group;
@@ -32,6 +32,7 @@ const ModeratorViewButton = ({ group, user }) => {
       <ParticipantListModal
         visible={ListModal}
         onClose={handelClose}
+        onUpdate={onUpdateConfirm}
         participants={participants.filter((_, index) => index !== 0)}
       />
     </>

src/components/introduce/modals/ParticipantList.jsx

@@ -10,12 +10,12 @@ const ParticipantListWrapper = styled.div`
   grid-template-columns: 260px 186px 148px;
   justify-items: center;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.7rem;
   min-height: 0;
   min-width: 0;
 `;
 
-const ParticipantList = ({ participant }) => {
+const ParticipantList = ({ participant, onUpdate }) => {
   const [viewApplyModal, setViewApplyModal] = useState(false);
 
   const { id, confirm } = participant;
@@ -42,11 +42,17 @@ const ParticipantList = ({ participant }) => {
         </div>
         <div>
           {confirm === true ? (
-            <ParticipantListButton cancel>
+            <ParticipantListButton
+              cancel
+              onClick={onUpdate}
+            >
               취소하기
             </ParticipantListButton>
           ) : (
-            <ParticipantListButton confirm>
+            <ParticipantListButton
+              confirm
+              onClick={onUpdate}
+            >
               승인하기
             </ParticipantListButton>
           )}

src/components/introduce/modals/ParticipantList.test.jsx

@@ -5,9 +5,16 @@ import { fireEvent, render } from '@testing-library/react';
 import ParticipantList from './ParticipantList';
 
 describe('ParticipantList', () => {
+  const handleUpdate = jest.fn();
+
+  beforeEach(() => {
+    handleUpdate.mockClear();
+  });
+
   const renderParticipantList = (participant) => render((
     <ParticipantList
       participant={participant}
+      onUpdate={handleUpdate}
     />
   ));
 
@@ -23,6 +30,16 @@ describe('ParticipantList', () => {
       expect(container).toHaveTextContent(props.id);
       expect(container).toHaveTextContent('취소하기');
     });
+
+    it('click cancel button', () => {
+      const { getByText } = renderParticipantList(props);
+
+      const button = getByText('취소하기');
+
+      fireEvent.click(button);
+
+      expect(handleUpdate).toBeCalled();
+    });
   });
 
   context('without confirm', () => {
@@ -37,6 +54,16 @@ describe('ParticipantList', () => {
       expect(container).toHaveTextContent(props.id);
       expect(container).toHaveTextContent('승인하기');
     });
+
+    it('click confirm button', () => {
+      const { getByText } = renderParticipantList(props);
+
+      const button = getByText('승인하기');
+
+      fireEvent.click(button);
+
+      expect(handleUpdate).toBeCalled();
+    });
   });
 
   describe('click "View application" button', () => {

src/components/introduce/modals/ParticipantListModal.jsx

@@ -88,7 +88,9 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const ParticipantListModal = ({ visible, onClose, participants }) => {
+const ParticipantListModal = ({
+  visible, onClose, participants, onUpdate,
+}) => {
   if (!visible) {
     return null;
   }
@@ -107,6 +109,7 @@ const ParticipantListModal = ({ visible, onClose, participants }) => {
             <ParticipantList
               key={participant.id}
               participant={participant}
+              onUpdate={() => onUpdate(participant.id)}
             />
           ))}
         </ParticipantListWrapper>

src/components/introduce/modals/ParticipantListModal.test.jsx

@@ -6,40 +6,81 @@ import ParticipantListModal from './ParticipantListModal';
 
 describe('ParticipantListModal', () => {
   const handleClose = jest.fn();
+  const handleUpdate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   const renderParticipantListModal = ({ visible, participants }) => render((
     <ParticipantListModal
       visible={visible}
       participants={participants}
       onClose={handleClose}
+      onUpdate={handleUpdate}
     />
   ));
 
   context('with visible', () => {
-    const modal = {
-      visible: true,
-      participants: [{
+    const visible = true;
+
+    describe('Contents on the screen', () => {
+      const participants = [{
         confirm: false,
         id: 'test',
-      }],
-    };
+      }];
 
-    it('renders Modal text', () => {
-      const { container } = renderParticipantListModal(modal);
+      it('renders Modal text', () => {
+        const { container } = renderParticipantListModal({ visible, participants });
+
+        expect(container).toHaveTextContent('스터디 신청자 목록 🙋‍♂️');
+        expect(container).toHaveTextContent('신청서 보기');
+        expect(container).toHaveTextContent('test');
+      });
+
+      it('click button call close', () => {
+        const { getByText } = renderParticipantListModal({ visible, participants });
+
+        const button = getByText('닫기');
+
+        fireEvent.click(button);
 
-      expect(container).toHaveTextContent('스터디 신청자 목록 🙋‍♂️');
-      expect(container).toHaveTextContent('신청서 보기');
-      expect(container).toHaveTextContent('test');
+        expect(handleClose).toBeCalled();
+      });
     });
 
-    it('click button call close', () => {
-      const { getByText } = renderParticipantListModal(modal);
+    context('When confirm is true', () => {
+      const participants = [{
+        confirm: true,
+        id: 'test',
+      }];
+
+      it('event is called with user ID after clicking cancel button', () => {
+        const { getByText } = renderParticipantListModal({ visible, participants });
+
+        const button = getByText('취소하기');
+
+        fireEvent.click(button);
+
+        expect(handleUpdate).toBeCalledWith('test');
+      });
+    });
+
+    context('When confirm is false', () => {
+      const participants = [{
+        confirm: false,
+        id: 'test',
+      }];
+
+      it('renders confirm button', () => {
+        const { getByText } = renderParticipantListModal({ visible, participants });
 
-      const button = getByText('닫기');
+        const button = getByText('승인하기');
 
-      fireEvent.click(button);
+        fireEvent.click(button);
 
-      expect(handleClose).toBeCalled();
+        expect(handleUpdate).toBeCalledWith('test');
+      });
     });
   });
 

src/containers/introduce/IntroduceHeaderContainer.jsx

@@ -5,7 +5,11 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { getAuth, getGroup } from '../../util/utils';
 import {
-  changeApplyFields, clearApplyFields, deleteParticipant, updateParticipant,
+  changeApplyFields,
+  clearApplyFields,
+  deleteParticipant,
+  updateConfirmParticipant,
+  updateParticipant,
 } from '../../reducers/groupSlice';
 
 import IntroduceHeader from '../../components/introduce/IntroduceHeader';
@@ -42,6 +46,10 @@ const IntroduceHeaderContainer = () => {
     dispatch(clearApplyFields());
   }, [dispatch]);
 
+  const onUpdateConfirmParticipant = useCallback((id) => {
+    dispatch(updateConfirmParticipant(id));
+  }, [dispatch]);
+
   if (!group) {
     return (
       <GroupContentLoader />
@@ -61,6 +69,7 @@ const IntroduceHeaderContainer = () => {
         onChangeApplyFields={onChangeApplyFields}
       />
       <ModeratorViewButton
+        onUpdateConfirm={onUpdateConfirmParticipant}
         user={user}
         group={group}
       />