Skip to content

Commit b26ae77

Browse files
psm1stpsm1st
authored
Merge pull request #84 from TEAM-WEBEYE/design/cancel
[Design] ๋ฉ”๋‰ด๋ฐ”์— ์ทจ์†Œ ๋ฒ„ํŠผ ๋ชจ๋‘ ์ถ”๊ฐ€
2 parents 457e807 + bed6d1c commit b26ae77

File tree

6 files changed

+83
-39
lines changed

6 files changed

+83
-39
lines changed

โ€Žsrc/components/fontButton/ControlFont.tsxโ€Ž

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,16 @@ import { STORAGE_KEYS } from "../../background/constants";
77
type UppercaseFontWeight = "REGULAR" | "BOLD" | "XBOLD";
88
type UppercaseFontSize = "XS" | "S" | "M" | "L" | "XL";
99

10-
const ControlFont = () => {
10+
interface ControlFontProps {
11+
onClose: () => void;
12+
}
13+
14+
const ControlFont: React.FC<ControlFontProps> = ({ onClose }) => {
1115
const [selectedWeight, setSelectedWeight] =
1216
useState<UppercaseFontWeight>("BOLD");
1317
const [selectedSize, setSelectedSize] = useState<UppercaseFontSize>("S");
18+
const [hasChanged, setHasChanged] = useState(false);
19+
1420
const {
1521
setFontSize,
1622
setFontWeight,
@@ -63,14 +69,6 @@ const ControlFont = () => {
6369
}
6470
}, [fontWeight, fontSize]);
6571

66-
function isValidFontWeight(value: string): value is UppercaseFontWeight {
67-
return ["REGULAR", "BOLD", "XBOLD"].includes(value);
68-
}
69-
70-
function isValidFontSize(value: string): value is UppercaseFontSize {
71-
return ["XS", "S", "M", "L", "XL"].includes(value);
72-
}
73-
7472
const sendMessage = (type: string) => {
7573
chrome.runtime.sendMessage({ type }, (response) => {
7674
if (chrome.runtime.lastError) {
@@ -81,39 +79,35 @@ const ControlFont = () => {
8179

8280
const handleWeightClick = (label: string) => {
8381
const value = weightMap[label];
82+
83+
if (value !== selectedWeight) setHasChanged(true);
8484
setSelectedWeight(value);
8585

86-
if (chrome?.storage?.local) {
87-
chrome.storage.local
88-
.set({ [STORAGE_KEYS.FONT_WEIGHT]: toFontWeight(value) })
89-
.catch((err) => console.error("ํฐํŠธ ๊ตต๊ธฐ ์ €์žฅ ์˜ค๋ฅ˜:", err));
90-
}
86+
chrome.storage?.local
87+
.set({ [STORAGE_KEYS.FONT_WEIGHT]: toFontWeight(value) })
88+
.catch((err) => console.error("ํฐํŠธ ๊ตต๊ธฐ ์ €์žฅ ์˜ค๋ฅ˜:", err));
9189

9290
sendMessage(`SET_FONT_WEIGHT_${value}`);
93-
94-
const fontWeight = toFontWeight(value);
95-
setFontWeight(fontWeight);
91+
setFontWeight(toFontWeight(value));
9692
};
9793

9894
const handleSizeClick = (label: string) => {
9995
const value = sizeMap[label];
96+
97+
if (value !== selectedSize) setHasChanged(true);
10098
setSelectedSize(value);
10199

102-
if (chrome?.storage?.local) {
103-
chrome.storage.local
104-
.set({ [STORAGE_KEYS.FONT_SIZE]: toFontSize(value) })
105-
.catch((err) => console.error("ํฐํŠธ ํฌ๊ธฐ ์ €์žฅ ์˜ค๋ฅ˜:", err));
106-
}
100+
chrome.storage?.local
101+
.set({ [STORAGE_KEYS.FONT_SIZE]: toFontSize(value) })
102+
.catch((err) => console.error("ํฐํŠธ ํฌ๊ธฐ ์ €์žฅ ์˜ค๋ฅ˜:", err));
107103

108104
sendMessage(`SET_FONT_SIZE_${value}`);
109-
110-
const fontSize = toFontSize(value);
111-
setFontSize(fontSize);
105+
setFontSize(toFontSize(value));
112106
};
113107

114108
return (
115109
<div
116-
className={`inline-flex flex-col items-start p-[18px] rounded-[20px] ${
110+
className={`inline-flex flex-col items-start p-[18px] rounded-[20px] ${
117111
isDarkMode
118112
? `bg-grayscale-900 text-grayscale-100`
119113
: `bg-grayscale-100 text-grayscale-900`
@@ -153,6 +147,13 @@ const ControlFont = () => {
153147
)}
154148
</div>
155149
</div>
150+
151+
<button
152+
onClick={onClose}
153+
className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
154+
>
155+
{hasChanged ? "์™„๋ฃŒ" : "๋‹ซ๊ธฐ"}
156+
</button>
156157
</div>
157158
);
158159
};

โ€Žsrc/components/modeButton/ControlMode.tsxโ€Ž

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import { ModeButton } from "./component";
33
import { useTheme } from "@src/contexts/ThemeContext";
44
import { STORAGE_KEYS } from "../../background/constants";
55

6-
const ControlMode = () => {
6+
interface ControlModeProps {
7+
onClose: () => void;
8+
}
9+
10+
const ControlMode: React.FC<ControlModeProps> = ({ onClose }) => {
711
const [selectedMode, setSelectedMode] = useState<"LIGHT" | "DARK">("LIGHT");
12+
const [hasChanged, setHasChanged] = useState(false);
813
const { fontClasses, setTheme, theme } = useTheme();
914
const isDarkMode = theme === "dark";
1015

@@ -19,15 +24,17 @@ const ControlMode = () => {
1924

2025
const handleModeClick = (label: string) => {
2126
const value = modeMap[label];
27+
if (value !== selectedMode) {
28+
setHasChanged(true);
29+
}
30+
2231
setSelectedMode(value);
2332

2433
const themeMode = value === "DARK" ? "dark" : "light";
2534
setTheme(themeMode);
26-
if (chrome?.storage?.local) {
27-
chrome.storage.local
28-
.set({ [STORAGE_KEYS.THEME_MODE]: `SET_MODE_${value}` })
29-
.catch((err) => console.error("ํ…Œ๋งˆ ๋ชจ๋“œ ์ €์žฅ ์˜ค๋ฅ˜:", err));
30-
}
35+
chrome.storage?.local
36+
.set({ [STORAGE_KEYS.THEME_MODE]: `SET_MODE_${value}` })
37+
.catch((err) => console.error("ํ…Œ๋งˆ ๋ชจ๋“œ ์ €์žฅ ์˜ค๋ฅ˜:", err));
3138

3239
chrome.runtime.sendMessage(
3340
{ type: `SET_MODE_${value}` },
@@ -58,7 +65,7 @@ const ControlMode = () => {
5865
isSelected={value === selectedMode}
5966
modeType={value}
6067
aria-label={
61-
"๊ณ ๋Œ€๋น„ ํ™”๋ฉด ์„ค์ •" + label.replace("\n", " ")
68+
"๊ณ ๋Œ€๋น„ ํ™”๋ฉด ์„ค์ • " + label.replace("\n", " ")
6269
}
6370
>
6471
{label.split("\n").map((line, i) => (
@@ -68,6 +75,13 @@ const ControlMode = () => {
6875
))}
6976
</div>
7077
</div>
78+
79+
<button
80+
onClick={onClose}
81+
className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
82+
>
83+
{hasChanged ? "์™„๋ฃŒ" : "๋‹ซ๊ธฐ"}
84+
</button>
7185
</div>
7286
);
7387
};

โ€Žsrc/components/panelContent/component.tsxโ€Ž

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,29 @@ import { menuItems } from "@src/constants/menuItems";
99

1010
interface PanelContentProps {
1111
menuId: string | null;
12+
setMenuId: (id: string | null) => void;
1213
}
1314

14-
export const PanelContent: React.FC<PanelContentProps> = ({ menuId }) => {
15+
export const PanelContent: React.FC<PanelContentProps> = ({
16+
menuId,
17+
setMenuId,
18+
}) => {
1519
const panelRef = useRef<HTMLDivElement>(null);
1620
const { firstFocusableRef, lastFocusableRef, isPanelFocused } =
1721
useFocusManagement(menuId, panelRef);
1822

1923
const renderPanelContent = () => {
2024
switch (menuId) {
2125
case "high-contrast":
22-
return <ControlMode />;
26+
return <ControlMode onClose={() => setMenuId(null)} />;
2327
case "font":
24-
return <ControlFont />;
28+
return <ControlFont onClose={() => setMenuId(null)} />;
2529
case "shortcut":
2630
return <ShortcutTab />;
2731
case "my-info":
2832
return <MyInfo />;
2933
case "service":
30-
return <ControlService />;
34+
return <ControlService onClose={() => setMenuId(null)} />;
3135
default:
3236
return null;
3337
}

โ€Žsrc/components/serviceButton/ControlService.tsxโ€Ž

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,29 @@ import React, { useState } from "react";
22
import { useTheme } from "@src/contexts/ThemeContext";
33
import { ServiceButton } from "./component";
44

5-
const ControlService = () => {
5+
interface ControlServiceProps {
6+
onClose: () => void;
7+
}
8+
9+
const ControlService: React.FC<ControlServiceProps> = ({ onClose }) => {
610
const { theme, fontClasses } = useTheme();
711
const isDarkMode = theme === "dark";
812

913
const [isLogoVisible, setIsLogoVisible] = useState(true);
14+
const [hasChanged, setHasChanged] = useState(false);
1015

1116
const stopExtension = () => {
1217
chrome.runtime.sendMessage(
1318
{ type: "SET_STYLES_ENABLED", enabled: false },
1419
() => {
20+
setHasChanged(true);
1521
window.close();
1622
},
1723
);
1824
};
1925

2026
const toggleLogo = (visible: boolean) => {
27+
if (visible !== isLogoVisible) setHasChanged(true);
2128
chrome.runtime.sendMessage(
2229
{ type: "SET_IFRAME_VISIBLE", visible },
2330
() => {
@@ -61,6 +68,13 @@ const ControlService = () => {
6168
</ServiceButton>
6269
</div>
6370
</div>
71+
72+
<button
73+
onClick={onClose}
74+
className="w-full h-[68px] mt-[18px] py-[10px] rounded-[14px] bg-purple-default text-white font-20-Bold"
75+
>
76+
{hasChanged ? "์™„๋ฃŒ" : "๋‹ซ๊ธฐ"}
77+
</button>
6478
</div>
6579
);
6680
};

โ€Žsrc/components/shortcutTab/component.tsxโ€Ž

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ export function ShortcutTab() {
5050
ALT + A
5151
</div>
5252
</ContentBox>
53+
<ContentBox ariaLabel="์ฟ ํŒก ์ œํ’ˆ์ •๋ณด ์—ด๊ธฐ ๋˜๋Š” ์ ‘๊ธฐ ๋‹จ์ถ•ํ‚ค: ALT + I">
54+
<div tabIndex={-1} role="listitem">
55+
์ฟ ํŒก ์ œํ’ˆ์ •๋ณด ์—ด๊ธฐ ๋˜๋Š” ์ ‘๊ธฐ
56+
</div>
57+
<div tabIndex={-1} role="listitem">
58+
ALT + I
59+
</div>
60+
</ContentBox>
5361
</div>
5462
</section>
5563
</div>

โ€Žsrc/iframe/iframe.tsxโ€Ž

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,10 @@ const App: React.FC = () => {
309309
isModalOpen && selectedMenu !== null ? "flex" : "hidden"
310310
}`}
311311
>
312-
<PanelContent menuId={selectedMenu} />
312+
<PanelContent
313+
menuId={selectedMenu}
314+
setMenuId={setSelectedMenu}
315+
/>
313316
</div>
314317
</Menubar>
315318

0 commit comments

Comments
ย (0)