SKRF-117,SKRF-118 init : emotion관련 기능 세팅 (#2)

* install : @emotion/css 설치

* chore : projdev name didi => SpaceClub 변경

* style : 글로벌 스타일 파일 작성

* style : theme파일 작성

* style : theme, global style 적용

* install : vite-tsconfig-paths 설치

* install : vite-tsconfig-paths 설치

* fix : 타입별칭 오류 수정

* chore : name lowercase로 변경

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "didi",
+  "name": "spaceclub",
   "private": true,
   "version": "0.0.0",
-  "description": "지도 가반 다이어리 서비스 DIDI",
-  "author": "DIDI",
+  "description": "동아리 행사 홍보 및 관리 서비스 SpaceClub",
+  "author": "TEAM-SKRRR",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,6 +13,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.5.1",
@@ -31,6 +32,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }

src/main.tsx

@@ -2,8 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
+import Theme from '@styles/Theme';
+import GlobalStyle from '@styles/GlobalStyle';
+
+import { Global, ThemeProvider } from '@emotion/react';
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={Theme}>
+      <Global styles={GlobalStyle} />
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
 );

src/styles/GlobalStyle.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+
+const GlobalStyle = css`
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    box-sizing: border-box;
+  }
+`;
+
+export default GlobalStyle;

src/styles/Theme.ts

@@ -0,0 +1,42 @@
+import { ThemeProvider, keyframes } from '@emotion/react';
+
+const color = {
+  //codes for test
+  primary: '#03c75a',
+  secondary: '#ff5a03',
+  white: '#ffffff',
+  black: '#000000',
+  gray: '#f0f0f0',
+} as const;
+
+const componentStyle = {
+  input: {
+    borderRadius: '5px',
+  },
+};
+
+const keyframe = {
+  fadeIn: keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }`,
+  fadeOut: keyframes`
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  `,
+};
+
+const Theme = {
+  color,
+  componentStyle,
+  keyframe,
+};
+
+export default Theme;

src/styles/emotion.d.ts

@@ -0,0 +1,8 @@
+import '@emotion/react';
+import Theme from './Theme';
+
+type ThemeType = typeof Theme;
+
+declare module '@emotion/react' {
+  export interface Theme extends ThemeType {}
+}

tsconfig.json

@@ -11,20 +11,20 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "jsx": "react-jsx",
     "allowJs": true,
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"],
-      "@components/*": ["./src/components/*"],
-      "@type/*": ["./src/types/*"],
-      "@hooks/*": ["./src/hooks/*"],
-      "@pages/*": ["./src/pages/*"],
-      "@styles/*": ["./src/styles/*"],
-      "@constants/*": ["./src/constants/*"],
-      "@assets/*": ["./src/assets/*"],
-      "@api/*": ["./src/api/*"],
-      "@router/*": ["./src/router/*"],
-      "@store/*": ["./src/store/*"],
-      "@utils/*": ["./src/utils/*"]
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@type/*": ["src/types/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@pages/*": ["src/pages/*"],
+      "@styles/*": ["src/styles/*"],
+      "@constants/*": ["src/constants/*"],
+      "@assets/*": ["src/assets/*"],
+      "@api/*": ["src/api/*"],
+      "@router/*": ["src/router/*"],
+      "@store/*": ["src/store/*"],
+      "@utils/*": ["src/utils/*"]
     },
     "jsxImportSource": "@emotion/react",
     "allowSyntheticDefaultImports": true

vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), tsconfigPaths()],
+});