Refactor: GlobalStyle & Theme 외부 파일 생성

main에서 선언하는 방식에서 각각의 파일로 생성하여 선언
SCBJ-7 · Jan 3, 2024 · fef9448 · fef9448
1 parent 9532782
commit fef9448
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 38 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,48 +3,13 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
-import { ThemeProvider, createGlobalStyle } from "styled-components";
+import { ThemeProvider } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { theme } from "./styles/theme.ts";
+import { GlobalStyle } from "./styles/globalStyle.ts";
 
 const queryClient = new QueryClient();
 
-export const GlobalStyle = createGlobalStyle`
-  /* css reset */
-  *{margin:0;padding:0;font:inherit;color:inherit;}
-  *, :after, :before {box-sizing:border-box;}
-  :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4;}
-  html, body, #root {height:100%;}
-  img, svg {display: block;max-width:100%;}
-  button {background:none;border:0;cursor:pointer;}
-  a {text-decoration:none}
-  
-  * {
-      box-sizing: border-box;
-      font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  }
-`;
-
-const theme = {
-  color: {
-    primaryLight: "#FFECDB",
-    primary: "#FF7C17",
-    primaryDark: "#CB5A04",
-
-    secondaryLight: "#CDEDFF",
-    secondary: "#519EC9",
-    secondaryDark: "#0072B1",
-
-    black: "#151515",
-
-    greyScale1: "#404040",
-    greyScale2: "#686868",
-    greyScale3: "#999999",
-    greyScale4: "#B8B8B8",
-    greyScale5: "#CDCDCD",
-    greyScale6: "#E9E9E9",
-  },
-};
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>

diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
@@ -0,0 +1,17 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  /* css reset */
+  *{margin:0;padding:0;font:inherit;color:inherit;}
+  *, :after, :before {box-sizing:border-box;}
+  :root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4;}
+  html, body, #root {height:100%;}
+  img, svg {display: block;max-width:100%;}
+  button {background:none;border:0;cursor:pointer;}
+  a {text-decoration:none}
+  
+  * {
+      box-sizing: border-box;
+      font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  }
+`;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -0,0 +1,20 @@
+export const theme = {
+  color: {
+    primaryLight: "#FFECDB",
+    primary: "#FF7C17",
+    primaryDark: "#CB5A04",
+
+    secondaryLight: "#CDEDFF",
+    secondary: "#519EC9",
+    secondaryDark: "#0072B1",
+
+    black: "#151515",
+
+    greyScale1: "#404040",
+    greyScale2: "#686868",
+    greyScale3: "#999999",
+    greyScale4: "#B8B8B8",
+    greyScale5: "#CDCDCD",
+    greyScale6: "#E9E9E9",
+  },
+};