From fef94482d6edfbecd42aa005eb54ee805870ffb9 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Wed, 3 Jan 2024 18:33:14 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20GlobalStyle=20&=20Theme=20=EC=99=B8?=
 =?UTF-8?q?=EB=B6=80=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 main에서 선언하는 방식에서 각각의 파일로 생성하여 선언
---
 src/main.tsx              | 41 +++------------------------------------
 src/styles/globalStyle.ts | 17 ++++++++++++++++
 src/styles/theme.ts       | 20 +++++++++++++++++++
 3 files changed, 40 insertions(+), 38 deletions(-)
 create mode 100644 src/styles/globalStyle.ts
 create mode 100644 src/styles/theme.ts

diff --git a/src/main.tsx b/src/main.tsx
index 115efe24..a00f649b 100644
--- 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
new file mode 100644
index 00000000..28b339e7
--- /dev/null
+++ 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
new file mode 100644
index 00000000..5a7a36dd
--- /dev/null
+++ 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",
+  },
+};
\ No newline at end of file