✨ feat: Loading Common

src/components/common/LoadingCommon/LoadingCommon.module.scss

@@ -1,31 +1,20 @@
 @import '../../../styles/utilities';
 
-.loadingCommon:empty {
+.wrapper {
-    @apply bg-white;
+    @apply text-center;
-    height: 7rem;
-    width: 7rem;
-    border-radius: 50%;
-    animation: spin 2s linear infinite;
-    margin: auto;
 
-    background: url('./assets/carrot.png') top 50% left 50% no-repeat;
+    .loadingCommon {
-
+        @apply bg-white;
-    @keyframes spin {
+        height: 7rem;
-        0% { transform: rotate(0deg); }
+        width: 7rem;
-        100% { transform: rotate(360deg); }
+        border-radius: 50%;
-    }
+        animation: spin 2s linear infinite;
-
+        margin: auto;
-    &.small {
+        background: url('./assets/carrot.png') top 50% left 50% no-repeat;
-        height: 5rem;
-        width: 5rem;
-    }
-
-    &.default {
-        
-    }
-
-    &.large {
-        height: 10rem;
-        width: 10rem;
     }
 }
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/components/common/LoadingCommon/LoadingCommon.tsx

@@ -1,18 +1,15 @@
 import React from "react";
 import s from './LoadingCommon.module.scss'
 
-interface LoadingCommonProps {
+const LoadingCommon = () => {
-    children? : React.ReactNode;
-}
-
-const LoadingCommon = ({ children }: LoadingCommonProps) => {
     
     return (
-        <>
+        <div className={s.wrapper}>
             <div className={s.loadingCommon}>
-                {children}
+            
             </div>
-        </>
+            <p>Loading...</p>
+        </div>
     )
 }