refractor project structure

src/api/categoryApi.ts

@@ -2,7 +2,7 @@ import axiosClient from "./axiosClient";
 
 const categoryApi = {
   getCategories: () => {
-    const url = "/api/category";
+    const url = "/api/categories";
     return axiosClient.get(url);
   },
 };

src/components/Header/Header.scss

-@use "../../styles/variables";
-@import "../../styles/mixin";
+@use "styles/index" as *;
 
 .header {
   &-toolbar {
@@ -28,7 +27,7 @@
 
       .navbar-readAll {
         &:hover {
-          color: variables.$green-1;
+          color: $green-1;
         }
       }
     }

src/components/Newspaper/Newspaper.scss

-@use "../../styles/variables";
-@import "../../styles/mixin";
+@use "styles/index" as *;
 
 .newspaper {
   &-article {
@@ -43,7 +42,7 @@
     margin: 50px 0;
     width: 100%;
     height: 1px;
-    background-color: variables.$gray-1;
+    background-color: $gray-1;
     position: relative;
 
     &::after {
@@ -55,7 +54,7 @@
       width: 7px;
       height: 7px;
       border-radius: 50%;
-      background-color: variables.$green-1;
+      background-color: $green-1;
     }
   }
 

src/styles/_index.scss

-@forward "./mixins";
+@forward "./mixin";
 @forward "./variables";