Add Indicator to home. Optimize stylesheet.

src/assets/css/common.scss

@@ -1,7 +1,4 @@
-$main-color: #00D4FF;
-$background-color: #F5F5F5;
-$font-main-color: #4D4D4D;
-$font-secondary-color: #9E9E9E;
+@use '@/assets/css/constants.scss' as constants;
 
 #root {
   height: 100vh;
@@ -9,7 +6,7 @@ $font-secondary-color: #9E9E9E;
 }
 
 .body {
-  color: $font-main-color;
+  color: constants.$font-main-color;
   user-select: none;
   min-width: 900px;
   min-height: 400px;
@@ -107,4 +104,12 @@ $font-secondary-color: #9E9E9E;
     width: 23px;
     height: 23px;
   }
+}
+
+.flex-horizontal {
+  flex-direction: row;
+}
+
+.flex-vertical {
+  flex-direction: column;
 }

src/assets/css/components/common/fit-center.scss

@@ -4,12 +4,4 @@
   align-items: center;
   width: 100%;
   height: 100%;
-}
-
-.direction-horizontal {
-  flex-direction: row;
-}
-
-.direction-vertical {
-  flex-direction: column;
 }

src/assets/css/components/common/indicator.scss

@@ -0,0 +1,28 @@
+@use '@/assets/css/constants.scss' as constants;
+
+.dot-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  .item {
+    flex: auto;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      border: {
+        width: 2px;
+        color: constants.$font-secondary-color;
+        style: solid;
+      };
+    }
+  }
+
+  .active>* {
+    background-color: constants.$font-secondary-color;
+  }
+}

src/assets/css/components/home/home.scss

@@ -8,5 +8,4 @@
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  background-color: #00D4FF;
 }

src/assets/css/components/home/slogan.scss

@@ -1,4 +1,4 @@
-@use "../../mixins" as mixins;
+@use "@/assets/css/mixins" as mixins;
 
 .center-box {
   display: flex;

src/assets/css/constants.scss

@@ -0,0 +1,4 @@
+$main-color: #00D4FF;
+$background-color: #F5F5F5;
+$font-main-color: #4D4D4D;
+$font-secondary-color: #9E9E9E;

src/assets/css/pages/header.scss

@@ -1,4 +1,4 @@
-@use "../mixins" as mixins;
+@use "@/assets/css/mixins" as mixins;
 
 .nav {
   display: flex;