diff --git a/src/components/common/DateTimeChange.jsx b/src/components/common/DateTimeChange.jsx
index d0179b0..0e77ca8 100644
--- a/src/components/common/DateTimeChange.jsx
+++ b/src/components/common/DateTimeChange.jsx
@@ -33,7 +33,10 @@ const DateTimeChange = ({ group, page, time }) => {
}
return (
- 모집중
+
+ {applyEndTime}
+ 모집 마감
+
);
};
diff --git a/src/components/common/DateTimeChange.test.jsx b/src/components/common/DateTimeChange.test.jsx
index 74a2e61..37c6a93 100644
--- a/src/components/common/DateTimeChange.test.jsx
+++ b/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('하루 후 모집 마감');
});
});
diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx
index 9d381fd..20acccd 100644
--- a/src/components/introduce/StudyIntroduceForm.jsx
+++ b/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`
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
index 56d3318..77b6957 100644
--- a/src/components/main/StudyGroup.jsx
+++ b/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;
diff --git a/src/components/main/StudyGroup.test.jsx b/src/components/main/StudyGroup.test.jsx
index d7a8c30..7ca51b6 100644
--- a/src/components/main/StudyGroup.test.jsx
+++ b/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('하루 후 모집 마감');
});
});
});
diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx
index 225a033..19d7674 100644
--- a/src/styles/DateTimeStatus.jsx
+++ b/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]};