Style: emotion theme 생성 및 사용

TheUpperPart · Jan 20, 2024 · a6dc597 · a6dc597
1 parent 4ca4ddc
commit a6dc597
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 41 deletions.
diff --git a/src/@types/emotion.d.ts b/src/@types/emotion.d.ts
@@ -0,0 +1,17 @@
+import '@emotion/react';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    bg: string;
+    'bg-100': string;
+    'bg-80': string;
+    'bg-75': string;
+    'bg-70': string;
+    'bg-60': string;
+    'bg-40': string;
+    text: string;
+    green: string;
+    white: string;
+    gray: string;
+  }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -11,10 +11,14 @@ import Layout from '@components/layout';
 import ModalsProvider from '@components/providers/ModalProvider';
 import ShowModals from '@components/Modal/showModals';
 import MSWComponent from '@components/MSWComponent/MSWComponent';
+import { ThemeProvider } from '@emotion/react';
+import themes from 'src/styles/ThemeStyle';
 
 const isDevelopmentMode = false;
 
 export default function MyApp({ Component, pageProps }: AppProps) {
+  const [theme, setTheme] = useState<'dark' | 'light'>('light');
+
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -26,51 +30,65 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       }),
   );
 
+  useEffect(() => {
+    const theme = localStorage.getItem('theme');
+
+    if (theme === 'light') {
+      setTheme('light');
+    } else {
+      setTheme('dark');
+    }
+  }, []);
+
   if (isDevelopmentMode) {
     return (
-      <MSWComponent>
-        <QueryClientProvider client={queryClient}>
-          <HydrationBoundary state={pageProps.dehydratedState}>
-            <ReactQueryDevtools initialIsOpen={false} />
-            <ChannelsProvider>
-              <ProfileProvider>
-                <LastVisitedBoardListsProvider>
-                  <MakeGameProvider>
-                    <ModalsProvider>
-                      <ShowModals />
-                      <Layout>
-                        <Component {...pageProps} />
-                      </Layout>
-                    </ModalsProvider>
-                  </MakeGameProvider>
-                </LastVisitedBoardListsProvider>
-              </ProfileProvider>
-            </ChannelsProvider>
-          </HydrationBoundary>
-        </QueryClientProvider>
-      </MSWComponent>
+      <ThemeProvider theme={themes[theme]}>
+        <MSWComponent>
+          <QueryClientProvider client={queryClient}>
+            <HydrationBoundary state={pageProps.dehydratedState}>
+              <ReactQueryDevtools initialIsOpen={false} />
+              <ChannelsProvider>
+                <ProfileProvider>
+                  <LastVisitedBoardListsProvider>
+                    <MakeGameProvider>
+                      <ModalsProvider>
+                        <ShowModals />
+                        <Layout>
+                          <Component {...pageProps} />
+                        </Layout>
+                      </ModalsProvider>
+                    </MakeGameProvider>
+                  </LastVisitedBoardListsProvider>
+                </ProfileProvider>
+              </ChannelsProvider>
+            </HydrationBoundary>
+          </QueryClientProvider>
+        </MSWComponent>
+      </ThemeProvider>
     );
   }
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <HydrationBoundary state={pageProps.dehydratedState}>
-        <ReactQueryDevtools initialIsOpen={false} />
-        <ChannelsProvider>
-          <ProfileProvider>
-            <LastVisitedBoardListsProvider>
-              <MakeGameProvider>
-                <ModalsProvider>
-                  <ShowModals />
-                  <Layout>
-                    <Component {...pageProps} />
-                  </Layout>
-                </ModalsProvider>
-              </MakeGameProvider>
-            </LastVisitedBoardListsProvider>
-          </ProfileProvider>
-        </ChannelsProvider>
-      </HydrationBoundary>
-    </QueryClientProvider>
+    <ThemeProvider theme={themes[theme]}>
+      <QueryClientProvider client={queryClient}>
+        <HydrationBoundary state={pageProps.dehydratedState}>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <ChannelsProvider>
+            <ProfileProvider>
+              <LastVisitedBoardListsProvider>
+                <MakeGameProvider>
+                  <ModalsProvider>
+                    <ShowModals />
+                    <Layout>
+                      <Component {...pageProps} />
+                    </Layout>
+                  </ModalsProvider>
+                </MakeGameProvider>
+              </LastVisitedBoardListsProvider>
+            </ProfileProvider>
+          </ChannelsProvider>
+        </HydrationBoundary>
+      </QueryClientProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/styles/ThemeStyle.tsx b/src/styles/ThemeStyle.tsx
@@ -0,0 +1,50 @@
+interface Theme {
+  bg: string;
+  'bg-100': string;
+  'bg-80': string;
+  'bg-75': string;
+  'bg-70': string;
+  'bg-60': string;
+  'bg-40': string;
+  text: string;
+  green: string;
+  white: string;
+  gray: string;
+}
+
+interface Themes {
+  light: Theme;
+  dark: Theme;
+}
+
+const themes: Themes = {
+  light: {
+    bg: '#FFFFFF',
+    'bg-100': '#ffffff',
+    'bg-80': '#f1f1f1',
+    'bg-75': '#ffffff',
+    'bg-70': '#ffffff',
+    'bg-60': '#d9d9d9',
+    'bg-40': '#ffffff',
+    text: '#000000',
+    green: '#31b65b',
+    white: '#ffffff',
+    gray: '#aaaaaa',
+  },
+
+  dark: {
+    bg: '#0A0A0A',
+    'bg-100': '#1b1c1d',
+    'bg-80': '#202123',
+    'bg-75': '#252628',
+    'bg-70': '#3a3c3e',
+    'bg-60': '#303133',
+    'bg-40': '#404244',
+    text: '#FFFFFF',
+    green: '#31b65b',
+    white: '#ffffff',
+    gray: '#aaaaaa',
+  },
+};
+
+export default themes;