feat: loading #33 (#35)

Co-authored-by: Jiwon <[email protected]>

summe/src/component/graph/GraphLoading.css

@@ -0,0 +1,22 @@
+/* LoadingBox 회전하는 로딩 중 표시 */
+.loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

summe/src/component/graph/GraphWrapper.jsx

@@ -1,12 +1,10 @@
 import ApexCharts from "react-apexcharts";
+import "./GraphLoading.css";
 import "./GraphTitle.css";
 
+// 회전하는 로딩 중 표시
 const LoadingBox = () => {
-    return (
-        <div style={{ height: "100%", width: "100%" }}>
-            로딩중 ...
-        </div>
-    );
+  return <div className="loading-box"></div>;
 };
 
 const GraphTitle = ({ title, description }) => {
@@ -38,4 +36,4 @@ export default function GraphWrapper({ data, type, height, width, title = "그
             }
         </div>
     );
-}
+}