CodeSoom · saseungmin · Nov 20, 2020 · Nov 19, 2020 · hannut91 · Nov 20, 2020
diff --git 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
@@ -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>
   );

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

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

diff --git 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 }) => {
       <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>
   );
 };

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

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

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

diff --git 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;
+}
diff --git 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
@@ -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');
     });

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

diff --git 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
@@ -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;