Merge pull request #107 from saseungmin/fix-introduce-apply-status

[Fix] Errors that occur when recruitment is due

Author: saseungmin

src/components/introduce/ApplicantViewButton.test.jsx

@@ -118,7 +118,7 @@ describe('ApplicantViewButton', () => {
         it('renders recruitment closed text', () => {
           const { container } = renderApplicantViewButton({ group, time, user: 'user1' });
 
-          expect(container).toHaveTextContent('모집 마감');
+          expect(container).toHaveTextContent('승인 거절');
         });
       });
 
@@ -137,43 +137,11 @@ describe('ApplicantViewButton', () => {
         };
 
         it('renders recruitment closed text', () => {
-          const { container } = renderApplicantViewButton({ group, time, user: 'user3' });
+          const { container } = renderApplicantViewButton({ group, time, user: 'user4' });
 
           expect(container).toHaveTextContent('모집 마감');
         });
       });
-
-      describe('When the user clicks the Apply button without logging in', () => {
-        const nowDate = new Date();
-        const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
-
-        const group = {
-          ...STUDY_GROUP,
-          applyEndDate: tomorrow,
-          participants: [
-            { id: 'user2' },
-          ],
-          personnel: 2,
-        };
-
-        it('renders modal window appears and application failure message', () => {
-          const { container, getByText } = renderApplicantViewButton({ group, time });
-
-          const button = getByText('신청하기');
-
-          expect(button).not.toBeNull();
-
-          fireEvent.click(button);
-
-          expect(handleApply).not.toBeCalled();
-
-          expect(container).toHaveTextContent('로그인 후 신청 가능합니다.');
-
-          fireEvent.click(getByText('확인'));
-
-          expect(container).not.toHaveTextContent('로그인 후 신청 가능합니다.');
-        });
-      });
     });
 
     context('When the study recruitment is opened', () => {
@@ -248,6 +216,38 @@ describe('ApplicantViewButton', () => {
           });
         });
       });
+
+      describe('When the user clicks the Apply button without logging in', () => {
+        const nowDate = new Date();
+        const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+
+        const group = {
+          ...STUDY_GROUP,
+          applyEndDate: tomorrow,
+          participants: [
+            { id: 'user2' },
+          ],
+          personnel: 2,
+        };
+
+        it('renders modal window appears and application failure message', () => {
+          const { container, getByText } = renderApplicantViewButton({ group, time });
+
+          const button = getByText('신청하기');
+
+          expect(button).not.toBeNull();
+
+          fireEvent.click(button);
+
+          expect(handleApply).not.toBeCalled();
+
+          expect(container).toHaveTextContent('로그인 후 신청 가능합니다.');
+
+          fireEvent.click(getByText('확인'));
+
+          expect(container).not.toHaveTextContent('로그인 후 신청 가능합니다.');
+        });
+      });
     });
   });
 });

src/components/introduce/ApplyStatusButton.jsx

@@ -4,7 +4,7 @@ import ApproveStatus from '../../styles/ApproveStatus';
 
 import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
 
-const checkConfirm = (confirm) => confirm === true;
+const checkConfirm = (user) => user.confirm && user.confirm === true;
 
 const ApplyStatusButton = ({
   timeStatus, onApply, userStatus, onCancel,
@@ -21,7 +21,18 @@ const ApplyStatusButton = ({
     );
   }
 
-  if (!timeStatus && !checkConfirm(userStatus.confirm)) {
+  if (timeStatus && !userStatus) {
+    return (
+      <StyledApplyStatusButton
+        type="button"
+        className="deadline"
+      >
+        모집 마감
+      </StyledApplyStatusButton>
+    );
+  }
+
+  if (!timeStatus && !checkConfirm(userStatus)) {
     return (
       <>
         <ApproveStatus load>
@@ -38,7 +49,7 @@ const ApplyStatusButton = ({
     );
   }
 
-  if (!timeStatus && checkConfirm(userStatus.confirm)) {
+  if (!timeStatus && checkConfirm(userStatus)) {
     return (
       <>
         <ApproveStatus approve>
@@ -55,23 +66,23 @@ const ApplyStatusButton = ({
     );
   }
 
-  if (timeStatus && checkConfirm(userStatus.confirm)) {
+  if (timeStatus && !checkConfirm(userStatus)) {
     return (
       <StyledApplyStatusButton
         type="button"
-        className="apply-complete"
+        className="apply-reject"
       >
-        신청 완료
+        승인 거절
       </StyledApplyStatusButton>
     );
   }
 
   return (
     <StyledApplyStatusButton
       type="button"
-      className="deadline"
+      className="apply-complete"
     >
-      모집 마감
+      신청 완료
     </StyledApplyStatusButton>
   );
 };

src/components/introduce/ApplyStatusButton.test.jsx

@@ -43,7 +43,7 @@ describe('ApplyStatusButton', () => {
   });
 
   context('When the study application is completed', () => {
-    it('renders application completed', () => {
+    it('renders "application completed"', () => {
       const { container } = renderApplyStatusButton({
         userStatus: { confirm: true },
         timeStatus: true,
@@ -54,12 +54,20 @@ describe('ApplyStatusButton', () => {
   });
 
   context('When the study application deadline', () => {
-    it('renders application deadline', () => {
+    it('renders "Rejection of approval"', () => {
       const { container } = renderApplyStatusButton({
         userStatus: { confirm: false },
         timeStatus: true,
       });
 
+      expect(container).toHaveTextContent('승인 거절');
+    });
+
+    it('renders "Application deadline"', () => {
+      const { container } = renderApplyStatusButton({
+        timeStatus: true,
+      });
+
       expect(container).toHaveTextContent('모집 마감');
     });
   });

src/styles/StyledApplyStatusButton.jsx

@@ -32,6 +32,12 @@ const StyledApplyStatusButtonWrapper = styled.button`
     }
   }
 
+  &.apply-reject {
+    background: ${palette.gray[1]};
+    border: 2px solid ${palette.warn[0]};
+    color: ${palette.warn[1]};
+  }
+
   &.apply-complete {
     background: ${palette.gray[1]};
     border: 2px solid #a5d8ff;