[Design] 메뉴바에 취소 버튼 모두 추가

src/components/fontButton/ControlFont.tsx

@@ -7,10 +7,16 @@ import { STORAGE_KEYS } from "../../background/constants";
 type UppercaseFontWeight = "REGULAR" | "BOLD" | "XBOLD";
 type UppercaseFontSize = "XS" | "S" | "M" | "L" | "XL";
 
-const ControlFont = () => {
+interface ControlFontProps {
+    onClose: () => void;
+}
+
+const ControlFont: React.FC<ControlFontProps> = ({ onClose }) => {
     const [selectedWeight, setSelectedWeight] =
         useState<UppercaseFontWeight>("BOLD");
     const [selectedSize, setSelectedSize] = useState<UppercaseFontSize>("S");
+    const [hasChanged, setHasChanged] = useState(false);
+
     const {
         setFontSize,
         setFontWeight,
@@ -63,14 +69,6 @@ const ControlFont = () => {
         }
     }, [fontWeight, fontSize]);
 
-    function isValidFontWeight(value: string): value is UppercaseFontWeight {
-        return ["REGULAR", "BOLD", "XBOLD"].includes(value);
-    }
-
-    function isValidFontSize(value: string): value is UppercaseFontSize {
-        return ["XS", "S", "M", "L", "XL"].includes(value);
-    }
-
     const sendMessage = (type: string) => {
         chrome.runtime.sendMessage({ type }, (response) => {
             if (chrome.runtime.lastError) {
@@ -81,39 +79,35 @@ const ControlFont = () => {
 
     const handleWeightClick = (label: string) => {
         const value = weightMap[label];
+
+        if (value !== selectedWeight) setHasChanged(true);
         setSelectedWeight(value);
 
-        if (chrome?.storage?.local) {
-            chrome.storage.local
-                .set({ [STORAGE_KEYS.FONT_WEIGHT]: toFontWeight(value) })
-                .catch((err) => console.error("폰트 굵기 저장 오류:", err));
-        }
+        chrome.storage?.local
+            .set({ [STORAGE_KEYS.FONT_WEIGHT]: toFontWeight(value) })
+            .catch((err) => console.error("폰트 굵기 저장 오류:", err));
 
         sendMessage(`SET_FONT_WEIGHT_${value}`);
-
-        const fontWeight = toFontWeight(value);
-        setFontWeight(fontWeight);
+        setFontWeight(toFontWeight(value));
     };
 
     const handleSizeClick = (label: string) => {
         const value = sizeMap[label];
+
+        if (value !== selectedSize) setHasChanged(true);
         setSelectedSize(value);
 
-        if (chrome?.storage?.local) {
-            chrome.storage.local
-                .set({ [STORAGE_KEYS.FONT_SIZE]: toFontSize(value) })
-                .catch((err) => console.error("폰트 크기 저장 오류:", err));
-        }
+        chrome.storage?.local
+            .set({ [STORAGE_KEYS.FONT_SIZE]: toFontSize(value) })
+            .catch((err) => console.error("폰트 크기 저장 오류:", err));
 
         sendMessage(`SET_FONT_SIZE_${value}`);
-
-        const fontSize = toFontSize(value);
-        setFontSize(fontSize);
+        setFontSize(toFontSize(value));
     };
 
     return (
         <div
-            className={`inline-flex flex-col items-start p-[18px] rounded-[20px]  ${
+            className={`inline-flex flex-col items-start p-[18px] rounded-[20px] ${
                 isDarkMode
                     ? `bg-grayscale-900 text-grayscale-100`
                     : `bg-grayscale-100 text-grayscale-900`
@@ -153,6 +147,13 @@ const ControlFont = () => {
                     )}
                 </div>
             </div>
+
+            <button
+                onClick={onClose}
+                className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
+            >
+                {hasChanged ? "완료" : "닫기"}
+            </button>
         </div>
     );
 };

src/components/modeButton/ControlMode.tsx

@@ -3,8 +3,13 @@ import { ModeButton } from "./component";
 import { useTheme } from "@src/contexts/ThemeContext";
 import { STORAGE_KEYS } from "../../background/constants";
 
-const ControlMode = () => {
+interface ControlModeProps {
+    onClose: () => void;
+}
+
+const ControlMode: React.FC<ControlModeProps> = ({ onClose }) => {
     const [selectedMode, setSelectedMode] = useState<"LIGHT" | "DARK">("LIGHT");
+    const [hasChanged, setHasChanged] = useState(false);
     const { fontClasses, setTheme, theme } = useTheme();
     const isDarkMode = theme === "dark";
 
@@ -19,15 +24,17 @@ const ControlMode = () => {
 
     const handleModeClick = (label: string) => {
         const value = modeMap[label];
+        if (value !== selectedMode) {
+            setHasChanged(true);
+        }
+
         setSelectedMode(value);
 
         const themeMode = value === "DARK" ? "dark" : "light";
         setTheme(themeMode);
-        if (chrome?.storage?.local) {
-            chrome.storage.local
-                .set({ [STORAGE_KEYS.THEME_MODE]: `SET_MODE_${value}` })
-                .catch((err) => console.error("테마 모드 저장 오류:", err));
-        }
+        chrome.storage?.local
+            .set({ [STORAGE_KEYS.THEME_MODE]: `SET_MODE_${value}` })
+            .catch((err) => console.error("테마 모드 저장 오류:", err));
 
         chrome.runtime.sendMessage(
             { type: `SET_MODE_${value}` },
@@ -58,7 +65,7 @@ const ControlMode = () => {
                             isSelected={value === selectedMode}
                             modeType={value}
                             aria-label={
-                                "고대비 화면 설정" + label.replace("\n", " ")
+                                "고대비 화면 설정 " + label.replace("\n", " ")
                             }
                         >
                             {label.split("\n").map((line, i) => (
@@ -68,6 +75,13 @@ const ControlMode = () => {
                     ))}
                 </div>
             </div>
+
+            <button
+                onClick={onClose}
+                className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
+            >
+                {hasChanged ? "완료" : "닫기"}
+            </button>
         </div>
     );
 };

src/components/panelContent/component.tsx

@@ -9,25 +9,29 @@ import { menuItems } from "@src/constants/menuItems";
 
 interface PanelContentProps {
     menuId: string | null;
+    setMenuId: (id: string | null) => void;
 }
 
-export const PanelContent: React.FC<PanelContentProps> = ({ menuId }) => {
+export const PanelContent: React.FC<PanelContentProps> = ({
+    menuId,
+    setMenuId,
+}) => {
     const panelRef = useRef<HTMLDivElement>(null);
     const { firstFocusableRef, lastFocusableRef, isPanelFocused } =
         useFocusManagement(menuId, panelRef);
 
     const renderPanelContent = () => {
         switch (menuId) {
             case "high-contrast":
-                return <ControlMode />;
+                return <ControlMode onClose={() => setMenuId(null)} />;
             case "font":
-                return <ControlFont />;
+                return <ControlFont onClose={() => setMenuId(null)} />;
             case "shortcut":
                 return <ShortcutTab />;
             case "my-info":
                 return <MyInfo />;
             case "service":
-                return <ControlService />;
+                return <ControlService onClose={() => setMenuId(null)} />;
             default:
                 return null;
         }

src/components/serviceButton/ControlService.tsx

@@ -2,22 +2,29 @@ import React, { useState } from "react";
 import { useTheme } from "@src/contexts/ThemeContext";
 import { ServiceButton } from "./component";
 
-const ControlService = () => {
+interface ControlServiceProps {
+    onClose: () => void;
+}
+
+const ControlService: React.FC<ControlServiceProps> = ({ onClose }) => {
     const { theme, fontClasses } = useTheme();
     const isDarkMode = theme === "dark";
 
     const [isLogoVisible, setIsLogoVisible] = useState(true);
+    const [hasChanged, setHasChanged] = useState(false);
 
     const stopExtension = () => {
         chrome.runtime.sendMessage(
             { type: "SET_STYLES_ENABLED", enabled: false },
             () => {
+                setHasChanged(true);
                 window.close();
             },
         );
     };
 
     const toggleLogo = (visible: boolean) => {
+        if (visible !== isLogoVisible) setHasChanged(true);
         chrome.runtime.sendMessage(
             { type: "SET_IFRAME_VISIBLE", visible },
             () => {
@@ -61,6 +68,13 @@ const ControlService = () => {
                     </ServiceButton>
                 </div>
             </div>
+
+            <button
+                onClick={onClose}
+                className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
+            >
+                {hasChanged ? "완료" : "닫기"}
+            </button>
         </div>
     );
 };

src/components/shortcutTab/component.tsx

@@ -50,6 +50,14 @@ export function ShortcutTab() {
                             ALT + A
                         </div>
                     </ContentBox>
+                    <ContentBox ariaLabel="쿠팡 제품정보 열기 또는 접기 단축키: ALT + I">
+                        <div tabIndex={-1} role="listitem">
+                            쿠팡 제품정보 열기 또는 접기
+                        </div>
+                        <div tabIndex={-1} role="listitem">
+                            ALT + I
+                        </div>
+                    </ContentBox>
                 </div>
             </section>
         </div>

src/iframe/iframe.tsx

@@ -309,7 +309,10 @@ const App: React.FC = () => {
                         isModalOpen && selectedMenu !== null ? "flex" : "hidden"
                     }`}
                 >
-                    <PanelContent menuId={selectedMenu} />
+                    <PanelContent
+                        menuId={selectedMenu}
+                        setMenuId={setSelectedMenu}
+                    />
                 </div>
             </Menubar>