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]};