Merge pull request #149 from prgrms-fe-devcourse/148-feature/page-loader

Loader가 페이지 전체 차지하도록 수정
prgrms-fe-devcourse · Oct 4, 2024 · 6a8d43b · 6a8d43b
2 parents 6fd15e3 + e2abaed
commit 6a8d43b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
@@ -1,6 +1,11 @@
+import * as S from './styles';
 import theme from '@/styles/theme';
 import { FidgetSpinnerProps, ThreeDots } from 'react-loader-spinner';
 
 export const Loader = ({ ...rest }: FidgetSpinnerProps) => {
-  return <ThreeDots color={theme.colors.primary} {...rest} />;
+  return (
+    <S.LoaderWrapper>
+      <ThreeDots color={theme.colors.primary} {...rest} />
+    </S.LoaderWrapper>
+  );
 };
diff --git a/src/components/Loader/styles.ts b/src/components/Loader/styles.ts
@@ -0,0 +1,9 @@
+import { styled } from 'styled-components';
+
+export const LoaderWrapper = styled.div`
+  height: calc(100vh - 63px);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;