From cbc23a63a142012b36664b49d868c21203c83328 Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Thu, 4 Mar 2021 20:57:08 +0900
Subject: [PATCH] feat: added windows support for shortcut

---
 components/PlatformDisplay.tsx | 13 +++++++++++++
 pages/_app.tsx                 | 16 ++++++++++++++--
 utils/Constants.ts             |  3 ++-
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 components/PlatformDisplay.tsx

diff --git a/components/PlatformDisplay.tsx b/components/PlatformDisplay.tsx
new file mode 100644
index 0000000..902763c
--- /dev/null
+++ b/components/PlatformDisplay.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+const PlatformDisplay = ({ osx, children }:PlatformDisplayProps): JSX.Element => {
+	const isOSX = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+	return <>{isOSX ? osx ?? children : children}</>
+}
+
+interface PlatformDisplayProps {
+  osx?: ReactNode
+  children: ReactNode
+}
+
+export default PlatformDisplay
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 69276a7..0d5648e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -24,6 +24,7 @@ import 'core-js/es/map'
 import '../app.css'
 import '../github-markdown.css'
 import '@fortawesome/fontawesome-free/css/all.css'
+import PlatformDisplay from '@components/PlatformDisplay'
 
 init()
 
@@ -83,11 +84,20 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
 				<ul>
 					<li className='pt-2'>
 						<h4 className='text-gray-500 dark:text-gray-400 text-xs'>단축키 도움말 표시</h4>
-						<kbd>CMD</kbd> <kbd>/</kbd>
+						<kbd>
+							<PlatformDisplay osx='CMD'>
+								Ctrl
+							</PlatformDisplay> 
+						</kbd> <kbd>/</kbd>
 					</li>
 					<li className='pt-2'>
 						<h4 className='text-gray-500 dark:text-gray-400 text-xs'>다크모드 전환</h4>
-						<kbd>CMD</kbd> <kbd>K</kbd>
+						<kbd>
+							<PlatformDisplay osx='CMD'>
+								Ctrl
+							</PlatformDisplay> 
+						</kbd>
+						<kbd>Shift</kbd> <kbd>D</kbd>
 					</li>
 				</ul>
 			</div>
@@ -95,11 +105,13 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
 		<GlobalHotKeys keyMap={shortcutKeyMap} handlers={{
 			SHORTCUT_HELP: () => {
 				setShortcutModal(value => !value)
+				return
 			},
 			CHANGE_THEME: () => {
 				const overwrite = (localStorage.theme || systemTheme()) === 'dark' ? 'light' : 'dark'
 				setTheme(overwrite)
 				localStorage.setItem('theme', overwrite)
+				return
 			}
 		}} />
 	</div>
diff --git a/utils/Constants.ts b/utils/Constants.ts
index 4a3d700..a4d7d2d 100644
--- a/utils/Constants.ts
+++ b/utils/Constants.ts
@@ -216,7 +216,8 @@ export const KoreanbotsEmoji = [{
 }]
 
 export const shortcutKeyMap: KeyMap = {
-	CHANGE_THEME: 'command+k'
+	SHORTCUT_HELP: ['command+/', 'ctrl+/'],
+	CHANGE_THEME: ['command+shift+d', 'ctrl+shift+d']
 }
 
 export const ErrorText = {