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',