[Improve] Study List change study Recruitment status

src/components/common/DateTimeChange.jsx

@@ -33,7 +33,10 @@ const DateTimeChange = ({ group, page, time }) => {
     }
 
     return (
-      <DateTimeStatus status="mainRecruit">모집중</DateTimeStatus>
+      <DateTimeStatus status="mainRecruit">
+        <Moment fromNow style={{ fontFamily: 'Gamja Flower, cursive' }}>{applyEndTime}</Moment>
+        &nbsp;모집 마감
+      </DateTimeStatus>
     );
   };
 

src/components/common/DateTimeChange.test.jsx

@@ -38,9 +38,10 @@ describe('DateTimeChange', () => {
       it('renders Recruiting text', () => {
         const nowDate = new Date();
         const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+        const tomorrowDate = new Date(tomorrow);
 
         const group = {
-          applyEndTime: tomorrow,
+          applyEndDate: tomorrowDate,
           participants: [
             'user2',
           ],
@@ -49,7 +50,7 @@ describe('DateTimeChange', () => {
 
         const { container } = renderDateTimeChange({ group, page, time });
 
-        expect(container).toHaveTextContent('모집중');
+        expect(container).toHaveTextContent('하루 후 모집 마감');
       });
     });
 

src/components/introduce/StudyIntroduceForm.jsx

@@ -23,6 +23,14 @@ const IntroduceReferenceWrapper = styled.div`
     font-weight: bold;
     margin-right: .7rem;
   }
+  @media (max-width: 1024px) {
+    padding: 0.5rem;
+    font-size: 1rem;
+    width: auto;
+  }
+  @media (max-width: 768px) {
+    width: 100%;
+  }
 `;
 
 const ModeratorWrapper = styled.div`

src/components/main/StudyGroup.jsx

@@ -25,7 +25,7 @@ const StudyGroupWrapper = styled.div`
 const HeaderLink = styled(Link)`
   display: flex;
   justify-content: center;
-  padding: 1.4rem 0 0.8rem 0;
+  padding: 1.4rem 1rem 0.8rem 1rem;
   font-size: 2.3rem;
   font-weight: 500;
   font-family: 'Nanum Pen Script', cursive;

src/components/main/StudyGroup.test.jsx

@@ -16,11 +16,16 @@ describe('StudyGroup', () => {
   ));
 
   describe('renders study group text contents', () => {
+    const nowDate = new Date();
+    const tomorrow = nowDate.setDate(nowDate.getDate() + 1);
+    const tomorrowDate = new Date(tomorrow);
+    const dateFormat = `${tomorrowDate.getFullYear()}년 ${tomorrowDate.getMonth() + 1}월 ${tomorrowDate.getDate() < 10 && '0'}${tomorrowDate.getDate()}일`;
+
     const group = {
       id: 1,
       title: '스터디를 소개합니다.2',
       moderatorId: 'user2',
-      applyEndDate: '2020-12-23',
+      applyEndDate: tomorrowDate,
       participants: [
         'user2',
       ],
@@ -39,19 +44,19 @@ describe('StudyGroup', () => {
       group.tags.forEach((tag) => {
         expect(container).toHaveTextContent(`#${tag}`);
       });
-      expect(container).toHaveTextContent('2020년 12월 23일');
+      expect(container).toHaveTextContent(dateFormat);
     });
 
     it('renders changed applyEndDate format', () => {
       const { container } = renderStudyGroup({ group });
 
-      expect(container).toHaveTextContent('2020년 12월 23일');
+      expect(container).toHaveTextContent(dateFormat);
     });
 
     it('renders study status is Recruiting', () => {
       const { container } = renderStudyGroup({ group });
 
-      expect(container).toHaveTextContent('모집중');
+      expect(container).toHaveTextContent('하루 후 모집 마감');
     });
   });
 });

src/styles/DateTimeStatus.jsx

@@ -8,12 +8,12 @@ import palette from './palette';
 const DateTimeStatusWrapper = styled.div`
   margin-left: 1.5rem;
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-family: 'Gamja Flower', cursive;
-  padding: .1rem .5rem .1rem .5rem;
+  padding: .2rem .6rem .2rem .6rem;
   display: inline-flex;
   color: white;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
   margin-top: 1rem;
   margin-bottom: 1rem;    
 
@@ -44,6 +44,8 @@ const DateTimeStatusWrapper = styled.div`
       margin: 0 auto;
       padding: .5rem 50px .5rem 50px;
       background: white;
+      font-size: 1.1rem;
+      border-radius: 0.5rem;
       align-items: center;
       color: ${palette.orange[4]};
       border: 1.5px solid ${palette.orange[4]};