Add link to study list

fixtures/study-group.js

@@ -0,0 +1,14 @@
+const studyGroup = {
+  id: 1,
+  moderatorId: 'user1',
+  title: '스터디를 소개합니다. 1',
+  personnel: 7,
+  contents: '우리는 이것저것 합니다.1',
+  tags: [
+    'JavaScript',
+    'React',
+    'Algorithm',
+  ],
+};
+
+export default studyGroup;

package.json

@@ -44,6 +44,7 @@
     "@types/jest": "^26.0.15",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.1",
+    "css-loader": "^5.0.1",
     "eslint": "^7.13.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",
@@ -56,7 +57,9 @@
     "jest-plugin-context": "^2.9.0",
     "json-server": "^0.16.3",
     "redux-mock-store": "^1.5.4",
+    "sass-loader": "^10.1.0",
     "start-server-and-test": "^1.11.5",
+    "style-loader": "^2.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"

src/App.jsx

@@ -11,7 +11,7 @@ const App = () => (
     <HeaderContainer />
     <Switch>
       <Route exact path="/" component={MainPage} />
-      <Route path="/introduce" component={IntroducePage} />
+      <Route path="/introduce/:id" component={IntroducePage} />
     </Switch>
   </>
 );

src/App.test.jsx

@@ -7,6 +7,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 
 import App from './App';
+import STUDY_GROUP from '../fixtures/study-group';
 
 jest.mock('react-redux');
 
@@ -20,6 +21,7 @@ describe('App', () => {
 
     useSelector.mockImplementation((selector) => selector({
       groups: [],
+      group: STUDY_GROUP,
     }));
   });
 
@@ -39,7 +41,7 @@ describe('App', () => {
 
   context('with path /introduce', () => {
     it('renders the study introduce page', () => {
-      const { container } = renderApp({ path: '/introduce' });
+      const { container } = renderApp({ path: '/introduce/1' });
 
       expect(container).toHaveTextContent('스터디 소개');
     });