From dfc778cda44b09e86872615eb83daf53ee76e988 Mon Sep 17 00:00:00 2001 From: yunho Date: Thu, 9 Feb 2023 18:03:20 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Fix:=20Image=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20Warning:=20React=20does=20not=20recognize=20the=20X?= =?UTF-8?q?=20prop=20on=20a=20DOM=20element=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Image/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/Image/index.tsx b/src/components/Common/Image/index.tsx index 12876ba..b10e12f 100644 --- a/src/components/Common/Image/index.tsx +++ b/src/components/Common/Image/index.tsx @@ -59,7 +59,7 @@ const Image = ({ src, size = 'm', isCircle = false, ...rest }: ImageProps) => { return } -const SImage = styled((props: GatsbyImgProps) => )` +const SImage = styled(({ isCircle, ...rest }: GatsbyImgProps) => )` width: ${({ size }) => size && ImageSizeMap[size]}; height: ${({ size }) => size && ImageSizeMap[size]}; border-radius: ${({ isCircle }) => isCircle && '50%'}; From a86af05ee18663531a0ac3128b9063e95326c533 Mon Sep 17 00:00:00 2001 From: yunho Date: Thu, 9 Feb 2023 18:45:04 +0900 Subject: [PATCH 2/6] Build: vscode debugger setting --- .vscode/launch.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..e73f183 --- /dev/null +++ b/.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}//**", "${workspaceFolder}/node_modules/**"] + } + ] +} From 91c315ebf3956a34d473927bdb73fee8370fe416 Mon Sep 17 00:00:00 2001 From: yunho Date: Thu, 9 Feb 2023 18:45:32 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20gatsby.srr=EC=97=90=EC=84=9C=20onRe?= =?UTF-8?q?nderBody=EC=A0=84=EC=97=90=20=EB=8B=A4=ED=81=AC=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=EC=84=B8=ED=8C=85=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gatsby-ssr.js | 36 ++++++++++++++++++++++++++++-------- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/gatsby-ssr.js b/gatsby-ssr.js index c4145e2..769d6c9 100644 --- a/gatsby-ssr.js +++ b/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