From 3c183427b57037b9e2334caf44a7adc053f682d8 Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 22 Nov 2020 01:20:36 +0900 Subject: [PATCH] Improve Study Introduce - Improve css style for study introduce page --- package-lock.json | 6 +- src/App.test.jsx | 6 +- .../introduce/StudyIntroduceForm.jsx | 114 +++++++++++++++++- .../introduce/StudyIntroduceForm.test.jsx | 26 ++-- src/components/main/StudyGroups.test.jsx | 1 + .../groups/StudyGroupsContainer.test.jsx | 9 -- .../introduce/IntroduceContainer.jsx | 11 +- .../introduce/IntroduceContainer.test.jsx | 2 + src/pages/IntroducePage.jsx | 10 +- src/pages/IntroducePage.test.jsx | 1 + 10 files changed, 139 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9836a72..45e45de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1875,9 +1875,9 @@ } }, "@testing-library/dom": { - "version": "7.26.6", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.26.6.tgz", - "integrity": "sha512-/poL7WMpolcGFOHMcxfcFkf1u38DcBUjk3YwNYpBs/MdJ546lg0YdvP2Lq3ujuQzAZxgs8vVvadj3MBnZsBjjA==", + "version": "7.28.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.28.1.tgz", + "integrity": "sha512-acv3l6kDwZkQif/YqJjstT3ks5aaI33uxGNVIQmdKzbZ2eMKgg3EV2tB84GDdc72k3Kjhl6mO8yUt6StVIdRDg==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", diff --git a/src/App.test.jsx b/src/App.test.jsx index 154a9b9..187ac15 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -7,6 +7,8 @@ import { MemoryRouter } from 'react-router-dom'; import { render } from '@testing-library/react'; import App from './App'; + +import STUDY_GROUPS from '../fixtures/study-groups'; import STUDY_GROUP from '../fixtures/study-group'; jest.mock('react-redux'); @@ -20,7 +22,7 @@ describe('App', () => { useDispatch.mockImplementation(() => dispatch); useSelector.mockImplementation((selector) => selector({ - groups: [], + groups: STUDY_GROUPS, group: STUDY_GROUP, })); }); @@ -43,7 +45,7 @@ describe('App', () => { it('renders the study introduce page', () => { const { container } = renderApp({ path: '/introduce/1' }); - expect(container).toHaveTextContent('스터디 소개'); + expect(container).toHaveTextContent('스터디를 소개합니다.2'); }); }); }); diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx index 9d4ba1d..ea9f80c 100644 --- a/src/components/introduce/StudyIntroduceForm.jsx +++ b/src/components/introduce/StudyIntroduceForm.jsx @@ -1,16 +1,122 @@ import React from 'react'; import styled from '@emotion/styled'; + import Tags from '../common/Tags'; +import palette from '../../styles/palette'; + +const StudyIntroduceWrapper = styled.div` + margin-top: 6em; +`; + +const IntroduceHeaderWrapper = styled.div` + border-bottom: 2px solid ${palette.gray[4]}; + padding-bottom: 1.5rem; + margin-bottom: 2rem; + display: flex; + justify-content: space-between; + h1 { + font-size: 2.3rem; + line-height: 1.5; + margin: 0; + } + // TODO: 추후 공통 버튼 style component로 변경 + button { + display: inline-flex; + align-items: center; + margin: .5rem 0 .5rem 0; + padding: 0.25rem 5rem; + font-size: 1.5em; + line-height: 0; + font-family: 'Gamja Flower', cursive; + border-radius: 0.4rem; + border: none; + background: ${palette.teal[5]}; + color: white; + &:hover{ + background: ${palette.teal[4]}; + } + } +`; + +const IntroduceReferenceWrapper = styled.div` + display: flex; + padding: 1rem; + border-radius: 0.75rem; + background-color: ${palette.gray[1]}; + margin-bottom: 1.5rem; + font-size: 1.1rem; + label { + line-height: 3rem; + font-weight: bold; + margin-right: .7rem; + } +`; + +const ModeratorWrapper = styled.div` + margin-bottom: 1.5rem; + font-size: 1.2rem; + font-weight: bold; + color: ${palette.gray[6]}; +`; + +const IntroduceReference = styled.div` + padding-left: 50px; + padding-right: 50px; + border-right: 0.1rem solid ${palette.gray[3]}; +`; + +const IntroduceContentTitle = styled.div` + padding: 7px 2rem 7px 2rem; + width: 17%; + text-align: center; + font-weight: bold; + margin-bottom: 0; + margin-top: 1rem; + border-bottom: 2px solid ${palette.violet[3]}; + font-size: 1.4rem; +`; -const StudyIntroduceWrapper = styled.div``; +const IntroduceContent = styled.div` + position: relative; + margin-top: 2rem; + border: 0.0625rem solid ${palette.gray[3]}; + border-radius: 0.75rem; + padding: 1.5rem; +`; const StudyIntroduceForm = ({ group }) => { - const { title, contents, tags } = group; + const { + title, contents, tags, moderatorId, personnel, participants, applyEndDate, + } = group; return ( -

{title}

-

{contents}

+ +

{title}

+ + + + {`🙋‍♂️ ${moderatorId}`} + + + + + + {`${participants.length} / ${personnel}`} + + + + + {applyEndDate} + + + + 소개 + + {/* TODO: dangerouslySetInnerHTML으로 변경하기 */} + + {contents} + ); diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx index 573cd68..99d576e 100644 --- a/src/components/introduce/StudyIntroduceForm.test.jsx +++ b/src/components/introduce/StudyIntroduceForm.test.jsx @@ -6,6 +6,8 @@ import { render } from '@testing-library/react'; import StudyIntroduceForm from './StudyIntroduceForm'; +import STUDY_GROUP from '../../../fixtures/study-group'; + describe('StudyIntroduceForm', () => { const renderStudyIntroduceForm = ({ group }) => render(( @@ -16,19 +18,15 @@ describe('StudyIntroduceForm', () => { )); it('renders study group title and contents', () => { - const group = { - id: 1, - moderatorId: 'user1', - title: '스터디를 소개합니다. 1', - personnel: 5, - applyEndDate: null, - contents: '우리는 스터디합니다.', - tags: [], - }; - - const { container } = renderStudyIntroduceForm({ group }); - - expect(container).toHaveTextContent('스터디를 소개합니다. 1'); - expect(container).toHaveTextContent('우리는 스터디합니다.'); + const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP }); + + expect(container).toHaveTextContent('스터디를 소개합니다.2'); + expect(container).toHaveTextContent('우리는 이것저것 합니다.2'); + }); + + it('renders links of tags', () => { + const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP }); + + expect(container.innerHTML).toContain(' { diff --git a/src/containers/groups/StudyGroupsContainer.test.jsx b/src/containers/groups/StudyGroupsContainer.test.jsx index 3eed582..88af13e 100644 --- a/src/containers/groups/StudyGroupsContainer.test.jsx +++ b/src/containers/groups/StudyGroupsContainer.test.jsx @@ -7,15 +7,6 @@ import { render, fireEvent } from '@testing-library/react'; import StudyGroupsContainer from './StudyGroupsContainer'; -const mockSearch = jest.fn(); - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useLocation() { - return { search: mockSearch }; - }, -})); - describe('StudyGroupsContainer', () => { const dispatch = jest.fn(); diff --git a/src/containers/introduce/IntroduceContainer.jsx b/src/containers/introduce/IntroduceContainer.jsx index 943c40c..cc34dd1 100644 --- a/src/containers/introduce/IntroduceContainer.jsx +++ b/src/containers/introduce/IntroduceContainer.jsx @@ -2,13 +2,10 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import styled from '@emotion/styled'; - -import { loadStudyGroup } from '../../reducers/slice'; import { get } from '../../../utils'; -import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm'; +import { loadStudyGroup } from '../../reducers/slice'; -const IntroduceContainerWrapper = styled.div``; +import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm'; const IntroduceContainer = ({ groupId }) => { const dispatch = useDispatch(); @@ -26,9 +23,7 @@ const IntroduceContainer = ({ groupId }) => { } return ( - - - + ); }; diff --git a/src/containers/introduce/IntroduceContainer.test.jsx b/src/containers/introduce/IntroduceContainer.test.jsx index ceda2e0..17c5d4b 100644 --- a/src/containers/introduce/IntroduceContainer.test.jsx +++ b/src/containers/introduce/IntroduceContainer.test.jsx @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { render } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; + import IntroduceContainer from './IntroduceContainer'; describe('IntroduceContainer', () => { @@ -32,6 +33,7 @@ describe('IntroduceContainer', () => { moderatorId: 'user1', title: '스터디를 소개합니다. 1', personnel: 7, + participants: [], contents: '우리는 이것저것 합니다.1', tags: [ 'JavaScript', diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx index c90d91b..690ecca 100644 --- a/src/pages/IntroducePage.jsx +++ b/src/pages/IntroducePage.jsx @@ -2,20 +2,16 @@ import React from 'react'; import { useParams } from 'react-router-dom'; -import styled from '@emotion/styled'; - +import Responsive from '../styles/Responsive'; import IntroduceContainer from '../containers/introduce/IntroduceContainer'; -const IntroducePageWrapper = styled.div``; - const IntroducePage = ({ params }) => { const { id } = params || useParams(); return ( - -

스터디 소개

+ - + ); }; export default IntroducePage; diff --git a/src/pages/IntroducePage.test.jsx b/src/pages/IntroducePage.test.jsx index f182541..939e175 100644 --- a/src/pages/IntroducePage.test.jsx +++ b/src/pages/IntroducePage.test.jsx @@ -20,6 +20,7 @@ describe('IntroducePage', () => { title: '스터디를 소개합니다. 1', personnel: 7, contents: '우리는 이것저것 합니다.1', + participants: [], tags: [ 'JavaScript', 'React',