From 7a26f48cf76f93a445dea1be57a9aae308dd2bb7 Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Tue, 20 Aug 2024 20:13:48 +0900
Subject: [PATCH] =?UTF-8?q?style=20=EB=A1=9C=EB=94=A9=20=EC=9D=B8=EB=94=94?=
 =?UTF-8?q?=EA=B2=8C=EC=9D=B4=ED=84=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Loding.tsx | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/common/Loding.tsx

diff --git a/src/components/common/Loding.tsx b/src/components/common/Loding.tsx
new file mode 100644
index 0000000..33d5da6
--- /dev/null
+++ b/src/components/common/Loding.tsx
@@ -0,0 +1,38 @@
+import { theme } from '@/style/theme';
+import styled from '@emotion/styled';
+
+const LoadingIndicatorStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`;
+
+const SpinnerStyle = styled.div<{ size: number }>`
+  border: 4px solid ${theme.color.gray3};
+  border-top: 4px solid ${theme.color.main};
+  border-radius: 50%;
+  width: ${({ size }) => size + 'px'};
+  height: ${({ size }) => size + 'px'};
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const Loading = ({ size = 40 }: { size?: number }) => {
+  return (
+    <LoadingIndicatorStyle>
+      <SpinnerStyle size={size} />
+    </LoadingIndicatorStyle>
+  );
+};
+
+export default Loading;