From effb3e5245ac5ebf0f71d12f2559447c818b13af Mon Sep 17 00:00:00 2001 From: saseungmin Date: Fri, 20 Nov 2020 01:29:38 +0900 Subject: [PATCH] [Update] Apply css to study list - Apply Styled components - css base to studyList components - Add palette and Responsive Styled component --- src/App.test.jsx | 2 +- src/components/common/Tags.jsx | 32 +++++++++- src/components/common/Tags.test.jsx | 10 ++- .../introduce/StudyIntroduceForm.test.jsx | 10 ++- src/components/main/StudyGroup.jsx | 59 +++++++++++++---- src/components/main/StudyGroups.jsx | 7 +- .../groups/StudyGroupsContainer.jsx | 8 +-- .../introduce/IntroduceContainer.test.jsx | 9 ++- src/index.css | 10 +++ src/pages/IntroducePage.jsx | 1 + src/pages/IntroducePage.test.jsx | 8 ++- src/pages/MainPage.jsx | 7 +- src/pages/MainPage.test.jsx | 2 +- src/styles/Responsive.jsx | 26 ++++++++ src/styles/palette.js | 64 +++++++++++++++++++ 15 files changed, 218 insertions(+), 37 deletions(-) create mode 100644 src/styles/Responsive.jsx create mode 100644 src/styles/palette.js diff --git a/src/App.test.jsx b/src/App.test.jsx index 009cfd4..154a9b9 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -35,7 +35,7 @@ describe('App', () => { it('renders the study list page', () => { const { container } = renderApp({ path: '/' }); - expect(container).toHaveTextContent('스터디 목록'); + expect(container).toHaveTextContent('지금 바로 시작하세요!'); }); }); diff --git a/src/components/common/Tags.jsx b/src/components/common/Tags.jsx index 28d9ca9..501ad44 100644 --- a/src/components/common/Tags.jsx +++ b/src/components/common/Tags.jsx @@ -2,7 +2,29 @@ import React from 'react'; import styled from '@emotion/styled'; -const TagsWrapper = styled.div``; +import { Link } from 'react-router-dom'; + +import palette from '../../styles/palette'; + +const TagsWrapper = styled.div` + margin-top: 1rem; + .lang { + display: inline-flex; + align-items: center; + padding-left: .6em; + padding-right: .6em; + height: 3em; + font-weight: bold; + font-size: .6em; + border-radius: .6em; + margin-right: 0.5rem; + color: ${palette.teal[7]}; + background:${palette.gray[1]}; + &:hover { + color: ${palette.teal[5]}; + } + } +`; const Tags = ({ tags }) => { if (!tags || !tags.length) { @@ -12,7 +34,13 @@ const Tags = ({ tags }) => { return ( {tags.map((tag) => ( - {`#${tag}`} + + {`#${tag}`} + ))} ); diff --git a/src/components/common/Tags.test.jsx b/src/components/common/Tags.test.jsx index c2e4b68..cd31af0 100644 --- a/src/components/common/Tags.test.jsx +++ b/src/components/common/Tags.test.jsx @@ -1,14 +1,18 @@ import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; + import { render } from '@testing-library/react'; import Tags from './Tags'; describe('Tags', () => { const renderTags = (tags) => render(( - + + + )); context('with tags', () => { diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx index 8c6b47a..573cd68 100644 --- a/src/components/introduce/StudyIntroduceForm.test.jsx +++ b/src/components/introduce/StudyIntroduceForm.test.jsx @@ -1,14 +1,18 @@ import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; + import { render } from '@testing-library/react'; import StudyIntroduceForm from './StudyIntroduceForm'; describe('StudyIntroduceForm', () => { const renderStudyIntroduceForm = ({ group }) => render(( - + + + )); it('renders study group title and contents', () => { diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx index 2de0d8f..38bc4bb 100644 --- a/src/components/main/StudyGroup.jsx +++ b/src/components/main/StudyGroup.jsx @@ -1,21 +1,55 @@ import React from 'react'; + import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; + import Tags from '../common/Tags'; +import palette from '../../styles/palette'; -const StudyGroupWrapper = styled.div``; +const StudyGroupWrapper = styled.div` + margin: 1em .5em 1em .5em; + padding: 2em 0 1em 1em; + width: 28%; + border: 2px solid ${palette.gray[4]}; + border-radius: 1rem; +`; const HeaderLink = styled(Link)` - font-size: 1.5em; - margin-bottom: 0; - margin-top: 0; - font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + font-weight: 500; + font-family: 'Nanum Pen Script', cursive; &:hover { - color: gray; + color: ${palette.gray[6]}; + } +`; + +const StudyInfoWrapper = styled.div` + margin: 1rem 0 1rem 0; + .moderator{ + margin-bottom: 1rem; + color: ${palette.gray[5]}; + font-weight: bold; } `; +const DateTimeChange = styled.div` + margin-left: 1.5rem; + font-weight: 600; + font-size: 1.1rem; + font-family: 'Gamja Flower', cursive; + padding: .1rem .5rem .1rem .5rem; + display: inline-flex; + color: white; + border-radius: 0.5rem; + margin-top: 1rem; + margin-bottom: 1rem; + background: ${palette.cyan[4]}; +`; + const StudyGroup = ({ group }) => { const { id, moderatorId, title, personnel, applyEndDate, tags, participants, @@ -26,14 +60,17 @@ const StudyGroup = ({ group }) => { {title} -
- {moderatorId} -
{`모집 인원: ${participants.length} / ${personnel}`}
+ +
{moderatorId}
+
+ {`모집 인원: ${participants.length} / ${personnel}`} + 모집중 +
-
{`마감 일자: ${applyEndDate}`}
+ {`마감 일자: ${applyEndDate}`}
-
+ ); }; diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx index 4a4cd56..f608ea2 100644 --- a/src/components/main/StudyGroups.jsx +++ b/src/components/main/StudyGroups.jsx @@ -4,7 +4,12 @@ import styled from '@emotion/styled'; import StudyGroup from './StudyGroup'; -const StudyGroupsWrapper = styled.div``; +const StudyGroupsWrapper = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: space-between; +`; const StudyGroups = ({ groups }) => ( diff --git a/src/containers/groups/StudyGroupsContainer.jsx b/src/containers/groups/StudyGroupsContainer.jsx index 3f5a6a3..6301726 100644 --- a/src/containers/groups/StudyGroupsContainer.jsx +++ b/src/containers/groups/StudyGroupsContainer.jsx @@ -2,13 +2,9 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import styled from '@emotion/styled'; - import StudyGroups from '../../components/main/StudyGroups'; import { get } from '../../../utils'; -const StudyGroupsContainerBlock = styled.div``; - const StudyGroupsContainer = () => { const groups = useSelector(get('groups')); @@ -17,9 +13,7 @@ const StudyGroupsContainer = () => { } return ( - - - + ); }; diff --git a/src/containers/introduce/IntroduceContainer.test.jsx b/src/containers/introduce/IntroduceContainer.test.jsx index 9b3da5f..ceda2e0 100644 --- a/src/containers/introduce/IntroduceContainer.test.jsx +++ b/src/containers/introduce/IntroduceContainer.test.jsx @@ -4,6 +4,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', () => { @@ -19,9 +20,11 @@ describe('IntroduceContainer', () => { })); }); - const renderIntroduceContainer = ({ id }) => render( - , - ); + const renderIntroduceContainer = ({ id }) => render(( + + + + )); context('with group', () => { given('group', () => ({ diff --git a/src/index.css b/src/index.css index 6a1bd83..5b22029 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Nanum+Pen+Script&display=swap'); +/* +font-family: 'Gamja Flower', cursive; +font-family: 'Nanum Pen Script', cursive; +*/ + * { box-sizing: inherit; } @@ -6,3 +12,7 @@ a { color: inherit; text-decoration: none; } + +body { + margin: 0; +} \ No newline at end of file diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx index 13b650e..c90d91b 100644 --- a/src/pages/IntroducePage.jsx +++ b/src/pages/IntroducePage.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { useParams } from 'react-router-dom'; import styled from '@emotion/styled'; + import IntroduceContainer from '../containers/introduce/IntroduceContainer'; const IntroducePageWrapper = styled.div``; diff --git a/src/pages/IntroducePage.test.jsx b/src/pages/IntroducePage.test.jsx index ea45f0f..f182541 100644 --- a/src/pages/IntroducePage.test.jsx +++ b/src/pages/IntroducePage.test.jsx @@ -33,9 +33,11 @@ describe('IntroducePage', () => { it('renders title', () => { const params = { id: '1' }; - const { container } = render( - , - ); + const { container } = render(( + + + + )); expect(container).toHaveTextContent('스터디를 소개합니다. 1'); }); diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index cd873ae..457f483 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -6,8 +6,11 @@ import styled from '@emotion/styled'; import { loadStudyGroups } from '../reducers/slice'; import StudyGroupsContainer from '../containers/groups/StudyGroupsContainer'; +import Responsive from '../styles/Responsive'; -const MainPageWrapper = styled.div``; +const MainPageWrapper = styled(Responsive)` + +`; const MainPage = () => { const dispatch = useDispatch(); @@ -18,7 +21,7 @@ const MainPage = () => { return ( -

스터디 목록

+

지금 바로 시작하세요!

 ); diff --git a/src/pages/MainPage.test.jsx b/src/pages/MainPage.test.jsx index 6718c95..a7bd0ed 100644 --- a/src/pages/MainPage.test.jsx +++ b/src/pages/MainPage.test.jsx @@ -27,7 +27,7 @@ describe('MainPage', () => { it('renders Main Page Title', () => { const { container } = renderMainPage(); - expect(container).toHaveTextContent('스터디 목록'); + expect(container).toHaveTextContent('지금 바로 시작하세요!'); }); it('calls dispatch with loadStudyGroups action', () => { diff --git a/src/styles/Responsive.jsx b/src/styles/Responsive.jsx new file mode 100644 index 0000000..d580c64 --- /dev/null +++ b/src/styles/Responsive.jsx @@ -0,0 +1,26 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import React from 'react'; + +import styled from '@emotion/styled'; + +const ResponsiveContainer = styled.div` + padding-left: 1rem; + padding-right: 1rem; + width: 1024px; + margin: 0 auto; + + @media (max-width: 1024px) { + width: 768px; + } + @media (max-width: 768px) { + width: 100%; + } +`; + +const Responsive = ({ children, ...rest }) => ( + + {children} + +); + +export default Responsive; diff --git a/src/styles/palette.js b/src/styles/palette.js new file mode 100644 index 0000000..df2a8c3 --- /dev/null +++ b/src/styles/palette.js @@ -0,0 +1,64 @@ +const palette = { + gray: [ + '#f8f9fa', + '#f1f3f5', + '#e9ecef', + '#dee2e6', + '#ced4da', + '#adb5bd', + '#868e96', + '#495057', + '#343a40', + '#212529', + ], + cyan: [ + '#e3fafc', + '#c5f6fa', + '#99e9f2', + '#66d9e8', + '#3bc9db', + '#22b8cf', + '#15aabf', + '#1098ad', + '#0c8599', + '#0b7285', + ], + orange: [ + '#fff4e6', + '#ffe8cc', + '#ffd8a8', + '#ffc078', + '#ffa94d', + '#ff922b', + '#fd7e14', + '#f76707', + '#e8590c', + '#d9480f', + ], + teal: [ + '#e6fcf5', + '#c3fae8', + '#96f2d7', + '#63e6be', + '#38d9a9', + '#20c997', + '#12b886', + '#0ca678', + '#099268', + '#087f5b', + ], + violet: [ + '#f3f0ff', + '#e5dbff', + '#d0bfff', + '#b197fc', + '#9775fa', + '#845ef7', + '#7950f2', + '#7048e8', + '#6741d9', + '#5f3dc4', + ], +}; + +export default palette;