design: Add default theme

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

src/App.tsx

@@ -1,13 +1,5 @@
-import { RecoilRoot } from 'recoil';
-import Home from './pages/Home';
-
 function App() {
-  return (
-    <RecoilRoot>
-      {/* 아래에 각각의 페이지 */}
-      <Home />
-    </RecoilRoot>
-  );
+  return <></>;
 }
 
 export default App;

src/index.css

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}

src/main.tsx

@@ -3,9 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import theme from './styles/theme';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <RecoilRoot>
+      <ThemeProvider theme={theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </RecoilRoot>
   </React.StrictMode>,
 );

src/styles/styled.d.ts

@@ -0,0 +1,9 @@
+import 'styled-components';
+import { ColorType, FontSizeType } from './theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    colors: ColorType;
+    fontSize: FontSizeType;
+  }
+}

src/styles/theme.ts

@@ -0,0 +1,25 @@
+import { DefaultTheme } from 'styled-components';
+
+const colors = {
+  // primary:
+  // secondary:
+  border: '#f2f2f2',
+  white: '#ffffff',
+  black: '#1D1B26',
+};
+
+const fontSize = {
+  title: 20,
+  subTitle: 16,
+  text: 14,
+};
+
+export type ColorType = typeof colors;
+export type FontSizeType = typeof fontSize;
+
+const theme: DefaultTheme = {
+  colors,
+  fontSize,
+};
+
+export default theme;