diff --git a/package-lock.json b/package-lock.json
index fa9db5d..b8f2fbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11262,6 +11262,11 @@
"object-assign": "^4.1.1"
}
},
+ "react-content-loader": {
+ "version": "5.1.4",
+ "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-5.1.4.tgz",
+ "integrity": "sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw=="
+ },
"react-dom": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
diff --git a/package.json b/package.json
index 09a855c..092e645 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"moment-timezone": "^0.5.32",
"qs": "^6.9.4",
"react": "^17.0.1",
+ "react-content-loader": "^5.1.4",
"react-dom": "^17.0.1",
"react-draft-wysiwyg": "^1.14.5",
"react-moment": "^1.0.0",
diff --git a/src/components/introduce/GroupsContentLoader.jsx b/src/components/introduce/GroupsContentLoader.jsx
new file mode 100644
index 0000000..ef51786
--- /dev/null
+++ b/src/components/introduce/GroupsContentLoader.jsx
@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+
+import ContentLoader from 'react-content-loader';
+
+const GroupContentLoader = (props) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default GroupContentLoader;
diff --git a/src/components/main/GroupsContentLoader.jsx b/src/components/main/GroupsContentLoader.jsx
new file mode 100644
index 0000000..cd1c023
--- /dev/null
+++ b/src/components/main/GroupsContentLoader.jsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+
+import ContentLoader from 'react-content-loader';
+
+const GroupsContentLoader = (props) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default GroupsContentLoader;
diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx
index 35a97bb..4c1159c 100644
--- a/src/components/main/StudyGroups.jsx
+++ b/src/components/main/StudyGroups.jsx
@@ -30,7 +30,7 @@ const StudyGroups = ({ groups, realTime, user }) => (
)}
- {groups.map((group) => (
+ {groups && groups.map((group) => (
{
const { search } = useLocation();
const [realTime, setRealTime] = useState(Date.now());
+ const [tagState, setTagState] = useState(null);
const dispatch = useDispatch();
@@ -29,11 +31,14 @@ const StudyGroupsContainer = () => {
ignoreQueryPrefix: true,
});
+ setTagState(tag);
dispatch(loadStudyGroups(tag));
}, [dispatch, search]);
- if (!groups || !groups.length) {
- return 스터디가 존재하지 않습니다.
;
+ if (!tagState && (!groups || !groups.length)) {
+ return (
+
+ );
}
return (
diff --git a/src/containers/groups/StudyGroupsContainer.test.jsx b/src/containers/groups/StudyGroupsContainer.test.jsx
index f4bfe9b..a4e22ae 100644
--- a/src/containers/groups/StudyGroupsContainer.test.jsx
+++ b/src/containers/groups/StudyGroupsContainer.test.jsx
@@ -60,7 +60,7 @@ describe('StudyGroupsContainer', () => {
it('nothing group list text message', () => {
const { container } = renderStudyGroupsContainer();
- expect(container).toHaveTextContent('스터디가 존재하지 않습니다.');
+ expect(container).toHaveTextContent('Loading...');
});
});
});
diff --git a/src/containers/introduce/IntroduceContainer.jsx b/src/containers/introduce/IntroduceContainer.jsx
index 4daa17e..6f84171 100644
--- a/src/containers/introduce/IntroduceContainer.jsx
+++ b/src/containers/introduce/IntroduceContainer.jsx
@@ -7,6 +7,7 @@ import { getAuth, getGroup } from '../../util/utils';
import { loadStudyGroup, updateStudyGroup } from '../../reducers/groupSlice';
import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
+import GroupContentLoader from '../../components/introduce/GroupsContentLoader';
const IntroduceContainer = ({ groupId }) => {
const [realTime, setRealTime] = useState(Date.now());
@@ -32,7 +33,7 @@ const IntroduceContainer = ({ groupId }) => {
if (!group) {
return (
- 로딩중..
+
);
}
diff --git a/src/containers/introduce/IntroduceContainer.test.jsx b/src/containers/introduce/IntroduceContainer.test.jsx
index a0dbc45..2bc9039 100644
--- a/src/containers/introduce/IntroduceContainer.test.jsx
+++ b/src/containers/introduce/IntroduceContainer.test.jsx
@@ -69,7 +69,7 @@ describe('IntroduceContainer', () => {
it('renders "loading.." text', () => {
const { container } = renderIntroduceContainer(1);
- expect(container).toHaveTextContent('로딩중..');
+ expect(container).toHaveTextContent('Loading...');
});
});
diff --git a/src/reducers/groupSlice.js b/src/reducers/groupSlice.js
index 5748cd5..e1ea2b7 100644
--- a/src/reducers/groupSlice.js
+++ b/src/reducers/groupSlice.js
@@ -81,6 +81,10 @@ export const {
} = actions;
export const loadStudyGroups = (tag) => async (dispatch) => {
+ if (tag) {
+ dispatch(setStudyGroups(null));
+ }
+
const groups = await getStudyGroups(tag);
dispatch(setStudyGroups(groups));
diff --git a/src/reducers/groupSlice.test.js b/src/reducers/groupSlice.test.js
index bff6f6c..2a4c654 100644
--- a/src/reducers/groupSlice.test.js
+++ b/src/reducers/groupSlice.test.js
@@ -137,12 +137,25 @@ describe('async actions', () => {
store = mockStore({});
});
- it('loads study group list', async () => {
- await store.dispatch(loadStudyGroups());
+ context('with tag', () => {
+ it('loads study group list', async () => {
+ await store.dispatch(loadStudyGroups('javascript'));
- const actions = store.getActions();
+ const actions = store.getActions();
+
+ expect(actions[0]).toEqual(setStudyGroups(null));
+ expect(actions[1]).toEqual(setStudyGroups([]));
+ });
+ });
- expect(actions[0]).toEqual(setStudyGroups([]));
+ context('without tag', () => {
+ it('loads study group list', async () => {
+ await store.dispatch(loadStudyGroups());
+
+ const actions = store.getActions();
+
+ expect(actions[0]).toEqual(setStudyGroups([]));
+ });
});
});