Refactor tabCount state to initialize from localStorage and persist changes; enhance key handling logic

src/components/SUPERCOMMAND.tsx

@@ -2,10 +2,18 @@ import React from "react";
 
 export default function SUPERCOMMAND() {
     const [visible, setVisible] = React.useState(false);
-    const [tabCount, setTabCount] = React.useState(0);
+    const [tabCount, setTabCount] = React.useState(() => {
+        const saved = localStorage.getItem('tabCount');
+        return saved ? parseInt(saved, 10) : 0;
+    });
     const [showPressSpace, setShowPressSpace] = React.useState(false);
     const audioContextRef = React.useRef<AudioContext | null>(null);
 
+    // tabCount가 변경될 때마다 localStorage에 저장
+    React.useEffect(() => {
+        localStorage.setItem('tabCount', tabCount.toString());
+    }, [tabCount]);
+
     // Beep 소리를 생성하는 함수 (Web Audio API 사용)
     const playBeep = (count: number) => {
         if (!audioContextRef.current) {
@@ -30,12 +38,13 @@ export default function SUPERCOMMAND() {
     };
 
     const handleKeyDown = (event: KeyboardEvent) => {
-        // Tab 누르면 보이게 (브라우저 기본 Tab 이동 방지)
+        console.log(event.key)
+        // Tab 누르면 보이게
         if (event.key === "Tab") {
             // event.preventDefault();
             setVisible(true);
             playBeep(tabCount); // Tab 누를 때마다 beep 소리 재생
-        } else {
+        } else if (event.key !== "Tab" && event.key !== "Control" && event.key !== "Alt" && event.key !== "Meta" && event.key !== "Shift") {
             setVisible(false);
             setTabCount(0);
             setShowPressSpace(false);