초기 렌더링시 다크 모드 깜빡임 에러 (dark mode flash error) 해결

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8000",
+      "webRoot": "${workspaceFolder}/src",
+      "skipFiles": ["${workspaceFolder}/<node_internals>/**", "${workspaceFolder}/node_modules/**"]
+    }
+  ]
+}

blog-config.js

@@ -4,7 +4,7 @@ require('dotenv').config({
 
 module.exports = {
   title: `Yunho.blog`,
-  author: 'kimyouknow',
+  author: 'Yunho(kimyouknow)',
   description: `안녕하세요. 프론트엔드 개발자 김윤호입니다. 고민과 문제 해결 과정을 공유하고 있습니다.`,
   siteUrl: 'https://kimyouknow.github.io/',
   image: `./static/profile-image.png`,

gatsby-ssr.js

@@ -1,9 +1,29 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/ssr-apis/
- */
-
-exports.onRenderBody = ({ setHtmlAttributes }) => {
-  setHtmlAttributes({ lang: `ko` })
+import React from 'react'
+
+const functionToScript = callbackFn => String(callbackFn)
+
+const setInitThemeMode = () => {
+  if (typeof window !== 'undefined') {
+    const $body = document.querySelector('body')
+    //  prefers-color-scheme 값을 확인 해 시스템의 컬러모드 초기값으로 사용
+    const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    // 이전에 방문했다면 local storage에 theme 값이 저장되어 있을 예정
+    const localTheme = localStorage.getItem('theme')
+    /**
+     * local storage에 저장된 값이 없으면 os에 지정된 prefers-color-scheme에 따라 테마를 선택하기
+     */
+    const initialTheme = localTheme || prefersColorScheme
+    $body?.classList.add(initialTheme)
+  }
+}
+
+const setInitThemeModeScript = functionToScript(setInitThemeMode)
+const codeRunOnClient = `(${setInitThemeModeScript})()`
+
+const MagicScriptTag = () => {
+  return <script dangerouslySetInnerHTML={{ __html: codeRunOnClient }} />
+}
+
+export const onRenderBody = ({ setPreBodyComponents }) => {
+  setPreBodyComponents(<MagicScriptTag key="setInitThemeMode-script" />)
 }

src/Layout/Layout.style.ts

@@ -4,7 +4,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-top: var(--padding-xl);
+  padding-top: var(--gnb-height);
   color: var(--color-text);
   background-color: var(--color-background);
 `

src/components/CategoryHeader/CategoryHeader.style.tsx

@@ -11,6 +11,7 @@ export const Container = styled.div`
   box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 15px;
   border: 2px solid var(--color-table-border);
   border-radius: 12px;
+  margin-top: var(--padding-s);
 `
 
 // category list

src/components/Common/Image/index.tsx

@@ -59,7 +59,7 @@ const Image = ({ src, size = 'm', isCircle = false, ...rest }: ImageProps) => {
   return <SImage size={size} isCircle={isCircle} image={childImageSharp.gatsbyImageData} alt={publicURL} {...rest} />
 }
 
-const SImage = styled((props: GatsbyImgProps) => <GatsbyImage {...props} />)`
+const SImage = styled(({ isCircle, ...rest }: GatsbyImgProps) => <GatsbyImage {...rest} />)`
   width: ${({ size }) => size && ImageSizeMap[size]};
   height: ${({ size }) => size && ImageSizeMap[size]};
   border-radius: ${({ isCircle }) => isCircle && '50%'};

src/components/Footer/index.tsx

@@ -1,7 +1,10 @@
 import styled from '@emotion/styled'
 
+import useBlogConfig from '@/hooks/useBlogConfig'
+
 const Footer = () => {
-  return <Container>© 2022 Developer YunHo(Dori), Powered By Gatsby.</Container>
+  const { author } = useBlogConfig()
+  return <Container>© 2022 Developer {author}, Powered By Gatsby.</Container>
 }
 
 export default Footer

src/components/GlobalNavigation/GlobalNavigation.style.ts

@@ -3,6 +3,7 @@ import { Link } from 'gatsby'
 
 export const Container = styled.header<{ isHidden: boolean }>`
   width: 100%;
+  height: var(--gnb-height);
   display: flex;
   align-items: center;
   justify-content: space-between;

src/styles/GlobalStyle.tsx

@@ -22,7 +22,7 @@ const styles = css`
     --padding-xl: 100px;
     --padding-l: 60px;
     --padding-m: 50px;
-    --padding-s: 40px;
+    --padding-s: 30px;
     --main-content-width: 760px;
     --space-l: 16px;
     --space-m: 12px;
@@ -32,6 +32,7 @@ const styles = css`
     --icon-large: 36px;
     --icon-xLarge: 64px;
     /* etc */
+    --gnb-height: 70px;
 
     @media ${media.medium} {
       --padding-xl: 90px;