Improve css style for study introduce page

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');
     });
   });
 });

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 (
     <StudyIntroduceWrapper>
-      <h2>{title}</h2>
-      <p>{contents}</p>
+      <IntroduceHeaderWrapper>
+        <h1>{title}</h1>
+        <button type="button">신청하기</button>
+      </IntroduceHeaderWrapper>
+      <ModeratorWrapper>
+        {`🙋‍♂️ ${moderatorId}`}
+      </ModeratorWrapper>
+      <IntroduceReferenceWrapper>
+        <IntroduceReference>
+          <label htmlFor="application-status">신청 현황 :</label>
+          <span id="application-status">
+            {`${participants.length} / ${personnel}`}
+          </span>
+        </IntroduceReference>
+        <IntroduceReference>
+          <label htmlFor="apply-end">접수 마감 일자 :</label>
+          <span id="apply-end">{applyEndDate}</span>
+        </IntroduceReference>
+      </IntroduceReferenceWrapper>
+      <IntroduceContentTitle>
+        소개
+      </IntroduceContentTitle>
+      {/* TODO: dangerouslySetInnerHTML으로 변경하기 */}
+      <IntroduceContent>
+        {contents}
+      </IntroduceContent>
       <Tags tags={tags} />
     </StudyIntroduceWrapper>
   );

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((
     <MemoryRouter>
@@ -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('<a ');
   });
 });

src/components/main/StudyGroups.test.jsx

@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import StudyGroups from './StudyGroups';
+
 import STUDY_GROUPS from '../../../fixtures/study-groups';
 
 describe('StudyGroups', () => {

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();
 

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 (
-    <IntroduceContainerWrapper>
-      <StudyIntroduceForm group={group} />
-    </IntroduceContainerWrapper>
+    <StudyIntroduceForm group={group} />
   );
 };
 

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

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 (
-    <IntroducePageWrapper>
-      <h2>스터디 소개</h2>
+    <Responsive>
       <IntroduceContainer groupId={id} />
-    </IntroducePageWrapper>
+    </Responsive>
   );
 };
 export default IntroducePage;

src/pages/IntroducePage.test.jsx

@@ -20,6 +20,7 @@ describe('IntroducePage', () => {
         title: '스터디를 소개합니다. 1',
         personnel: 7,
         contents: '우리는 이것저것 합니다.1',
+        participants: [],
         tags: [
           'JavaScript',
           'React',