diff --git a/fake-server/createFakeData.js b/fake-server/createFakeData.js
index acc45c8..46220af 100644
--- a/fake-server/createFakeData.js
+++ b/fake-server/createFakeData.js
@@ -1,22 +1,24 @@
-/* eslint-disable no-plusplus */
+const range = (length) => Array.from({ length }, (_length, i) => i);
+const randomMonth = () => Math.floor((Math.random() * (11 - 1)) + 1);
+const randomDay = () => Math.floor((Math.random() * (30 - 1)) + 1);
 
 module.exports = () => {
-  const data = { groups: [] };
+  const groups = range(30)
+    .map((i) => {
+      const month = randomMonth();
+      const day = randomDay();
 
-  for (let i = 0; i < 30; i++) {
-    const randomMonth = Math.floor((Math.random() * (11 - 1)) + 1);
-    const randomDay = Math.floor((Math.random() * (30 - 1)) + 1);
-
-    data.groups.push({
-      id: i,
-      moderatorId: `user${i}`,
-      title: `스터디를 소개합니다. ${i}`,
-      applyStartDate: `2020-${randomMonth}-${randomDay}`,
-      applyEndDate: '2020-12-3',
-      personnel: randomMonth,
-      contents: `우리는 이것저것 합니다.${i}`,
-      tags: ['JavaScript', 'React', 'Algorithm'],
+      return {
+        id: i,
+        moderatorId: `user${i}`,
+        title: `스터디를 소개합니다. ${i}`,
+        applyStartDate: `2020-${month}-${day}`,
+        applyEndDate: '2020-12-3',
+        personnel: month,
+        contents: `우리는 이것저것 합니다.${i}`,
+        tags: ['JavaScript', 'React', 'Algorithm'],
+      };
     });
-  }
-  return data;
+
+  return { groups };
 };
diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx
new file mode 100644
index 0000000..9d4ba1d
--- /dev/null
+++ b/src/components/introduce/StudyIntroduceForm.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import Tags from '../common/Tags';
+
+const StudyIntroduceWrapper = styled.div``;
+
+const StudyIntroduceForm = ({ group }) => {
+  const { title, contents, tags } = group;
+  return (
+    <StudyIntroduceWrapper>
+      <h2>{title}</h2>
+      <p>{contents}</p>
+      <Tags tags={tags} />
+    </StudyIntroduceWrapper>
+  );
+};
+
+export default StudyIntroduceForm;
diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx
new file mode 100644
index 0000000..60abc2b
--- /dev/null
+++ b/src/components/introduce/StudyIntroduceForm.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import StudyIntroduceForm from './StudyIntroduceForm';
+
+describe('StudyIntroduceForm', () => {
+  const renderStudyIntroduceForm = ({ group }) => render((
+    <StudyIntroduceForm
+      group={group}
+    />
+  ));
+
+  it('renders study group title and contents', () => {
+    const group = {
+      id: 1,
+      moderatorId: 'user1',
+      title: '스터디를 소개합니다. 1',
+      personnel: 5,
+      applyEndDate: null,
+      applyStartDate: null,
+      contents: '우리는 스터디합니다.',
+      tags: [],
+    };
+
+    const { container } = renderStudyIntroduceForm({ group });
+
+    expect(container).toHaveTextContent('스터디를 소개합니다. 1');
+    expect(container).toHaveTextContent('우리는 스터디합니다.');
+  });
+});
diff --git a/src/components/main/StudyGroup.test.jsx b/src/components/main/StudyGroup.test.jsx
index 88f6aec..5bee620 100644
--- a/src/components/main/StudyGroup.test.jsx
+++ b/src/components/main/StudyGroup.test.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
+
 import StudyGroup from './StudyGroup';
 
 describe('StudyGroup', () => {
diff --git a/src/components/main/StudyGroups.test.jsx b/src/components/main/StudyGroups.test.jsx
index bed0808..77c7834 100644
--- a/src/components/main/StudyGroups.test.jsx
+++ b/src/components/main/StudyGroups.test.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
-import StudyGroups from './StudyGroups';
 
+import StudyGroups from './StudyGroups';
 import STUDY_GROUPS from '../../../fixtures/study-groups';
 
 describe('StudyGroups', () => {
diff --git a/src/containers/groups/StudyGroupsContainer.test.jsx b/src/containers/groups/StudyGroupsContainer.test.jsx
index f018597..cbf7329 100644
--- a/src/containers/groups/StudyGroupsContainer.test.jsx
+++ b/src/containers/groups/StudyGroupsContainer.test.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
-
 import { useDispatch, useSelector } from 'react-redux';
-
 import { MemoryRouter } from 'react-router-dom';
+
+import { render } from '@testing-library/react';
+
 import StudyGroupsContainer from './StudyGroupsContainer';
 
 describe('StudyGroupsContainer', () => {
diff --git a/src/containers/introduce/IntroduceContainer.jsx b/src/containers/introduce/IntroduceContainer.jsx
index c717083..943c40c 100644
--- a/src/containers/introduce/IntroduceContainer.jsx
+++ b/src/containers/introduce/IntroduceContainer.jsx
@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 
 import { loadStudyGroup } from '../../reducers/slice';
 import { get } from '../../../utils';
+import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
 
 const IntroduceContainerWrapper = styled.div``;
 
@@ -26,8 +27,7 @@ const IntroduceContainer = ({ groupId }) => {
 
   return (
     <IntroduceContainerWrapper>
-      <h2>{group.title}</h2>
-      <p>{group.contents}</p>
+      <StudyIntroduceForm group={group} />
     </IntroduceContainerWrapper>
   );
 };
diff --git a/src/services/api.test.js b/src/services/api.test.js
index 0f1eab2..c2f5fc6 100644
--- a/src/services/api.test.js
+++ b/src/services/api.test.js
@@ -10,18 +10,12 @@ import STUDY_GROUP from '../../fixtures/study-group';
 
 jest.mock('axios');
 describe('api', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  const axiosMockResolved = (data) => {
-    axios.get.mockResolvedValue({ data });
-  };
-
   describe('getStudyGroups', () => {
-    it('returns study groups list', async () => {
-      axiosMockResolved(STUDY_GROUPS);
+    beforeEach(() => {
+      axios.get.mockResolvedValue({ data: STUDY_GROUPS });
+    });
 
+    it('returns study groups list', async () => {
       await expect(getStudyGroups()).resolves.toEqual(STUDY_GROUPS);
 
       expect(axios.get).toHaveBeenCalledWith(
@@ -31,10 +25,12 @@ describe('api', () => {
   });
 
   describe('getStudyGroup', () => {
-    const { id } = STUDY_GROUP;
+    beforeEach(() => {
+      axios.get.mockResolvedValue({ data: STUDY_GROUP });
+    });
 
     it('returns study group detail', async () => {
-      axiosMockResolved(STUDY_GROUP);
+      const { id } = STUDY_GROUP;
 
       await expect(getStudyGroup(id)).resolves.toEqual(STUDY_GROUP);