fix: useIsDarkMode의 초기값을 undefined로 설정 (#212)

* fix: isDarkMode의 초기값을 undefined로 설정 * chore : changeset 추가 * feat: ThemeMode 컴포넌트 수정 및 적용 * Delete .changeset/six-clocks-matter.md --------- Co-authored-by: 박찬혁 <[email protected]>
toss · Aug 16, 2024 · 1b62156 · 1b62156
1 parent 6e2c8e1
commit 1b62156
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 60 deletions.
diff --git a/docs/src/components/Sandpack/Sandpack.tsx b/docs/src/components/Sandpack/Sandpack.tsx
@@ -2,33 +2,35 @@ import { SandpackProps, SandpackProvider } from '@codesandbox/sandpack-react';
 import { atomDark } from '@codesandbox/sandpack-themes';
 import { baseTemplate } from './baseTemplate';
 import { CustomPreset } from './CustomPreset';
-import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
 import { SandpackLogLevel } from '@codesandbox/sandpack-client';
+import { ThemeMode } from '../theme-mode/ThemeMode';
 
 export function Sandpack({ files }: SandpackProps) {
-  const isDarkMode = useIsDarkMode();
-
   return (
-    <SandpackProvider
-      template="vanilla-ts"
-      theme={isDarkMode ? atomDark : undefined}
-      files={{
-        ...baseTemplate.files,
-        ...files,
-      }}
-      customSetup={{
-        dependencies: baseTemplate.dependencies,
-        devDependencies: baseTemplate.devDependencies,
-      }}
-      options={{
-        recompileDelay: 300,
-        initMode: 'user-visible',
-        initModeObserverOptions: { rootMargin: '1400px 0px' },
-        bundlerURL: 'https://sandpack-bundler.codesandbox.io/',
-        logLevel: SandpackLogLevel.None,
-      }}
-    >
-      <CustomPreset />
-    </SandpackProvider>
+    <ThemeMode>
+      {theme => (
+        <SandpackProvider
+          template="vanilla-ts"
+          theme={theme === 'dark' ? atomDark : undefined}
+          files={{
+            ...baseTemplate.files,
+            ...files,
+          }}
+          customSetup={{
+            dependencies: baseTemplate.dependencies,
+            devDependencies: baseTemplate.devDependencies,
+          }}
+          options={{
+            recompileDelay: 300,
+            initMode: 'user-visible',
+            initModeObserverOptions: { rootMargin: '1400px 0px' },
+            bundlerURL: 'https://sandpack-bundler.codesandbox.io/',
+            logLevel: SandpackLogLevel.None,
+          }}
+        >
+          <CustomPreset />
+        </SandpackProvider>
+      )}
+    </ThemeMode>
   );
 }
diff --git a/docs/src/components/introduction/Adopters.tsx b/docs/src/components/introduction/Adopters.tsx
@@ -1,6 +1,6 @@
-import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
 import Image from 'next/image';
 import { ComponentProps } from 'react';
+import { ThemeMode } from '../theme-mode/ThemeMode';
 
 /**
  * 이 곳에 적용한 조직을 추가해주세요.
@@ -28,12 +28,18 @@ export const adopterLogoImagePropsList = [
 >;
 
 export const Adopters = () => {
-  const isDarkMode = useIsDarkMode();
-
   return (
     <div className="flex flex-wrap gap-8 justify-center">
       {adopterLogoImagePropsList.map(({ darkSrc, src, alt, ...props }) => (
-        <Image key={src} src={isDarkMode ? darkSrc : src} alt={alt} {...props} />
+        <ThemeMode key={src}>
+          {(theme) => (
+            <Image
+              src={theme === 'dark' ? darkSrc : src}
+              alt={alt}
+              {...props}
+            />
+          )}
+        </ThemeMode>
       ))}
     </div>
   );

diff --git a/docs/src/components/theme-mode/ThemeMode.tsx b/docs/src/components/theme-mode/ThemeMode.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
+
+interface ThemeModeProps {
+  children: (theme: 'dark' | 'light') => React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function ThemeMode({ children, fallback = null }: ThemeModeProps) {
+  const isDarkMode = useIsDarkMode();
+
+  if (isDarkMode == null) {
+    return fallback;
+  }
+
+  return children(isDarkMode ? 'dark' : 'light');
+}
diff --git a/docs/src/hooks/use-is-dark-mode.ts b/docs/src/hooks/use-is-dark-mode.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 
 export function useIsDarkMode() {
   const { resolvedTheme } = useTheme();
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState<boolean>();
 
   useEffect(() => {
     setIsDarkMode(resolvedTheme === 'dark');

diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -1,4 +1,4 @@
-import { useIsDarkMode } from '@/hooks/use-is-dark-mode';
+import { ThemeMode } from '@/components/theme-mode/ThemeMode';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import type { DocsThemeConfig } from 'nextra-theme-docs';
@@ -17,11 +17,13 @@ const config: DocsThemeConfig = {
       };
     }
   },
-  logo: function useLogo() {
-    const isDarkMode = useIsDarkMode();
-
-    return <Image src={isDarkMode ? '/logo-white.png' : '/logo.png'} alt="logo" width={120} height={48} priority />;
-  },
+  logo: (
+    <ThemeMode>
+      {theme => (
+        <Image src={theme === 'dark' ? '/logo-white.png' : '/logo.png'} alt="logo" width="120" height="48" priority />
+      )}
+    </ThemeMode>
+  ),
   head: function useHead() {
     const { title } = useConfig();
 
@@ -97,32 +99,32 @@ const config: DocsThemeConfig = {
     toggleButton: true,
   },
   footer: {
-    text: function useText() {
-      const isDarkMode = useIsDarkMode();
-
-      return (
-        <div className="flex w-full flex-col items-center sm:items-start">
-          <div>
-            <a
-              className="flex items-center gap-1 text-current"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="toss homepage"
-              href="https://toss.im"
-            >
-              <span>Powered by</span>
-              <Image
-                src={isDarkMode ? '/toss-logo-white.png' : '/toss-logo-gray.png'}
-                alt="Toss"
-                width="64"
-                height="32"
-              />
-            </a>
-          </div>
-          <p className="mt-6 text-xs">© {new Date().getFullYear()} Viva Republica, Inc.</p>
+    text: (
+      <div className="flex w-full flex-col items-center sm:items-start">
+        <div>
+          <a
+            className="flex items-center gap-1 text-current"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="toss homepage"
+            href="https://toss.im"
+          >
+            <span>Powered by</span>
+            <ThemeMode>
+              {theme => (
+                <Image
+                  src={theme === 'dark' ? '/toss-logo-white.png' : '/toss-logo-gray.png'}
+                  alt="Toss"
+                  width="64"
+                  height="32"
+                />
+              )}
+            </ThemeMode>
+          </a>
         </div>
-      );
-    },
+        <p className="mt-6 text-xs">© {new Date().getFullYear()} Viva Republica, Inc.</p>
+      </div>
+    ),
   },
   toc: {
     backToTop: true,