Apply css to study list

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('지금 바로 시작하세요!');
  });
  });
 

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 (
  <TagsWrapper>
  {tags.map((tag) => (
- <small key={tag}>{`#${tag}`}</small>
+ <Link
+ key={tag}
+ to="/#"
+ className="lang"
+ >
+ {`#${tag}`}
+ </Link>
  ))}
  </TagsWrapper>
  );

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((
- <Tags
- tags={tags}
- />
+ <MemoryRouter>
+ <Tags
+ tags={tags}
+ />
+ </MemoryRouter>
  ));
 
  context('with tags', () => {

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((
- <StudyIntroduceForm
- group={group}
- />
+ <MemoryRouter>
+ <StudyIntroduceForm
+ group={group}
+ />
+ </MemoryRouter>
  ));
 
  it('renders study group title and contents', () => {

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 }) => {
  <HeaderLink to={`/introduce/${id}`}>
  {title}
  </HeaderLink>
- <div>
- <small>{moderatorId}</small>
- <div>{`모집 인원: ${participants.length} / ${personnel}`}</div>
+ <StudyInfoWrapper>
+ <div className="moderator">{moderatorId}</div>
+ <div>
+ {`모집 인원: ${participants.length} / ${personnel}`}
+ <DateTimeChange>모집중</DateTimeChange>
+ </div>
  <div>
-<div>{`마감 일자: ${applyEndDate}`}</div>
+ {`마감 일자: ${applyEndDate}`}
  </div>
  <Tags tags={tags} />
- </div>
+ </StudyInfoWrapper>
  </StudyGroupWrapper>
  );
 };

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 }) => (
  <StudyGroupsWrapper>

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 (
- <StudyGroupsContainerBlock>
- <StudyGroups groups={groups} />
- </StudyGroupsContainerBlock>
+ <StudyGroups groups={groups} />
  );
 };
 

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(
- <IntroduceContainer groupId={id} />,
- );
+ const renderIntroduceContainer = ({ id }) => render((
+ <MemoryRouter>
+ <IntroduceContainer groupId={id} />
+ </MemoryRouter>
+ ));
 
  context('with group', () => {
  given('group', () => ({

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

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``;

src/pages/IntroducePage.test.jsx

@@ -33,9 +33,11 @@ describe('IntroducePage', () => {
  it('renders title', () => {
  const params = { id: '1' };
 
- const { container } = render(
- <IntroducePage params={params} />,
- );
+ const { container } = render((
+ <MemoryRouter>
+ <IntroducePage params={params} />
+ </MemoryRouter>
+ ));
 
  expect(container).toHaveTextContent('스터디를 소개합니다. 1');
  });

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 (
  <MainPageWrapper>
- <h2>스터디 목록</h2>
+ <h2>지금 바로 시작하세요!</h2>
  <StudyGroupsContainer />
  </MainPageWrapper>
  );

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', () => {

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 }) => (
+ <ResponsiveContainer {...rest}>
+ {children}
+ </ResponsiveContainer>
+);
+
+export default Responsive;