refactor: move to components to providers

.husky/pre-commit

@@ -1,2 +1 @@
 npx lint-staged
-npx lint-staged

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint --cache 'src/**/*.{ts,tsx}'",
+    "tsc": "tsc --noEmit",
     "format": "prettier --write --cache 'src/**/*.{ts,tsx}'",
     "lint-staged": "lint-staged",
     "preview": "vite preview",
@@ -18,15 +19,14 @@
   "lint-staged": {
     "**/*.{tsx,ts,jsx,js}": [
       "eslint --fix --cache",
-      "prettier --write --cache"
-    ],
-    "*.js": "eslint --cache --fix",
-    "*.{ts,tsx}": "prettier --write"
+      "prettier --write --cache"      
+    ]
   },
   "dependencies": {
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@emotion/css": "^11.13.0",
     "@tanstack/react-query": "^5.56.2",
     "csstype": "^3.1.3",
     "react": "^18.3.1",
@@ -35,7 +35,6 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",
-    "@emotion/css": "^11.13.0",
     "@eslint/js": "^9.9.0",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",

src/assets/styles/StyleProvider.tsx → src/components/providers/GlobalStylesProvider/index.provider.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import GlobalStyles from './global/GlobalStyles';
-import theme from './theme';
+import GlobalStyles from './GlobalStyles';
+import theme from '@assets/styles/theme';
 
 interface Props {
   children: ReactNode;
 }
 
-const StyleProvider = ({ children }: Props) => {
+const GlobalStylesProvider = ({ children }: Props) => {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyles />
@@ -16,4 +16,4 @@ const StyleProvider = ({ children }: Props) => {
   );
 };
 
-export default StyleProvider;
+export default GlobalStylesProvider;

src/components/providers/index.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import GlobalStylesProvider from './GlobalStylesProvider/index.provider';
+
+export default function AppProviders({ children }: { children: ReactNode }) {
+  return <GlobalStylesProvider>{children}</GlobalStylesProvider>;
+}

src/main.tsx

@@ -1,9 +1,9 @@
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
-import StyleProvider from '@assets/styles/StyleProvider';
+import AppProviders from '@components/providers/index.tsx';
 
 createRoot(document.getElementById('root')!).render(
-  <StyleProvider>
+  <AppProviders>
     <App />
-  </StyleProvider>,
+  </AppProviders>,
 );