Merge pull request #169 from te-ing/feature/#168-LoadingComponent

✨ 로딩 스피너 컴포넌트 구현 및 메인페이지 적용

components/common/LoadingSpinner/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FlexBox } from 'styles/commonStyles';
+
+const LoadingSpinner = () => {
+  return (
+    <Wrapper>
+      <Spinner></Spinner>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(FlexBox)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const Spinner = styled.div`
+  width: 42px;
+  height: 42px;
+  border: 6px solid #f3f3f3;
+  border-top: 6px solid #bdf486;
+  border-radius: 50%;
+  animation: spinner 1.5s linear infinite;
+
+  @keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export default LoadingSpinner;

pages/index.tsx

@@ -8,6 +8,7 @@ import postsApi from 'apis/posts.api';
 import { MainPostType } from 'types/post';
 import { useQuery } from 'react-query';
 import { isLoggedIn } from 'utils/isLoggedIn';
+import LoadingSpinner from 'components/common/LoadingSpinner';
 
 const PostCards = () => {
   const getPosts = async () => {
@@ -34,14 +35,16 @@ const PostCards = () => {
       </MainHeader>
       <FlexCenter>
         <MainContent>
-          {isLoading || !data.userPost?.concat(data.teamPost).length
-            ? 'Loading..'
-            : data.userPost
-                .concat(data.teamPost)
-                .sort(() => Math.random() - 0.5)
-                .map((post) => {
-                  return <MainCard post={post} key={post.team ? `team${post.id}` : `user${post.id}`} />;
-                })}
+          {isLoading || !data.userPost?.concat(data.teamPost).length ? (
+            <LoadingSpinner />
+          ) : (
+            data.userPost
+              .concat(data.teamPost)
+              .sort(() => Math.random() - 0.5)
+              .map((post) => {
+                return <MainCard post={post} key={post.team ? `team${post.id}` : `user${post.id}`} />;
+              })
+          )}
         </MainContent>
       </FlexCenter>
     </Layout>