Skip to content

Commit 91a3950

Browse files
y00eunjiy00eunji
committed
feat: 모바일 UI 내비게이션 스타일 개선 및 테마 적용
1 parent 4bc0be5 commit 91a3950

File tree

4 files changed

+152
-30
lines changed

4 files changed

+152
-30
lines changed

‎apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,42 +27,46 @@ export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ isMa
2727
);
2828
};
2929

30-
const ToggleContainer = styled("div")<{ isMainPath: boolean }>(({ isMainPath }) => ({
30+
const ToggleContainer = styled("div")<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
3131
display: "flex",
3232
width: 94,
3333
height: 29,
3434
border: "1px solid white",
3535
borderRadius: 15,
3636
padding: 2,
3737
gap: 2,
38-
backgroundColor: isMainPath ? "transparent" : "rgba(255, 255, 255, 0.1)",
38+
backgroundColor: isMainPath
39+
? theme.palette.mobileNavigation.main.languageToggle.background
40+
: theme.palette.mobileNavigation.sub.languageToggle.background,
3941
}));
4042

41-
const LanguageButton = styled(ButtonBase)<{ isActive: boolean; isMainPath: boolean }>(({ isActive, isMainPath }) => ({
43+
const LanguageButton = styled(ButtonBase)<{ isActive: boolean; isMainPath: boolean }>(({ theme, isActive, isMainPath }) => ({
4244
flex: 1,
4345
height: "100%",
4446
borderRadius: 13,
4547
fontSize: 12,
4648
fontWeight: 400,
4749
transition: "all 0.2s ease",
4850

49-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.6)",
51+
color: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
5052
backgroundColor: "transparent",
5153

5254
...(isActive && {
53-
backgroundColor: isMainPath ? "rgba(255, 255, 255, 0.7)" : "rgba(255, 255, 255, 0.9)",
54-
color: isMainPath ? "#888888" : "#126D7F",
55+
backgroundColor: isMainPath
56+
? theme.palette.mobileNavigation.main.languageToggle.active.background
57+
: theme.palette.mobileNavigation.sub.languageToggle.active.background,
58+
color: isMainPath ? theme.palette.mobileHeader.main.activeLanguage : theme.palette.mobileHeader.sub.activeLanguage,
5559
fontWeight: 600,
5660
}),
5761

5862
"&:hover": {
5963
backgroundColor: isActive
6064
? isMainPath
61-
? "rgba(255, 255, 255, 0.8)"
62-
: "rgba(255, 255, 255, 1)"
65+
? theme.palette.mobileNavigation.main.languageToggle.active.hover
66+
: theme.palette.mobileNavigation.sub.languageToggle.active.hover
6367
: isMainPath
64-
? "rgba(255, 255, 255, 0.1)"
65-
: "rgba(255, 255, 255, 0.3)",
68+
? theme.palette.mobileNavigation.main.languageToggle.inactive.hover
69+
: theme.palette.mobileNavigation.sub.languageToggle.inactive.hover,
6670
},
6771

6872
WebkitFontSmoothing: "antialiased",

‎apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -200,16 +200,13 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
200200
);
201201
};
202202

203-
const StyledDrawer = styled(Drawer)<{ isMainPath?: boolean }>(({ isMainPath = true }) => ({
203+
const StyledDrawer = styled(Drawer)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
204204
"& .MuiDrawer-paper": {
205205
width: "70vw",
206-
background: isMainPath
207-
? `linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
208-
linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))`
209-
: "#B6D8D7",
206+
background: isMainPath ? theme.palette.mobileNavigation.main.background : theme.palette.mobileNavigation.sub.background,
210207
backdropFilter: isMainPath ? "blur(10px)" : "none",
211208
WebkitBackdropFilter: isMainPath ? "blur(10px)" : "none",
212-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
209+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
213210
borderTopRightRadius: 15,
214211
borderBottomRightRadius: 15,
215212
},
@@ -246,31 +243,31 @@ const MenuItem = styled(Box)<{ isMainPath?: boolean }>({
246243
gap: 23,
247244
});
248245

249-
const MenuLink = styled(Link)<{ isMainPath?: boolean }>(({ isMainPath = true }) => ({
250-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
246+
const MenuLink = styled(Link)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
247+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
251248
textDecoration: "none",
252249
fontSize: "20px",
253250
fontWeight: 600,
254251
}));
255252

256-
const MenuArrowButton = styled(IconButton)<{ isMainPath?: boolean }>(({ isMainPath = true }) => ({
257-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
253+
const MenuArrowButton = styled(IconButton)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
254+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
258255
padding: 8,
259256
}));
260257

261-
const BackButton = styled(Button)<{ isMainPath?: boolean }>(({ isMainPath = true }) => ({
258+
const BackButton = styled(Button)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
262259
display: "flex",
263260
alignItems: "center",
264-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
261+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
265262
textTransform: "none",
266263
padding: "0 15px 0 0",
267264
minWidth: "auto",
268265
minHeight: "auto",
269266
}));
270267

271-
const MenuChip = styled(Chip)<{ isMainPath?: boolean }>(({ isMainPath = true }) => ({
272-
backgroundColor: isMainPath ? "rgba(212, 212, 212, 0.5)" : "rgba(18, 109, 127, 0.2)",
273-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
268+
const MenuChip = styled(Chip)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
269+
backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.chip.background : theme.palette.mobileNavigation.sub.chip.background,
270+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
274271
height: 40,
275272
borderRadius: 15,
276273
padding: "10px 13px",
@@ -282,7 +279,7 @@ const MenuChip = styled(Chip)<{ isMainPath?: boolean }>(({ isMainPath = true })
282279
},
283280

284281
"&:hover": {
285-
backgroundColor: isMainPath ? "rgba(212, 212, 212, 0.7)" : "rgba(18, 109, 127, 0.3)",
282+
backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.chip.hover : theme.palette.mobileNavigation.sub.chip.hover,
286283
},
287284
}));
288285

@@ -314,15 +311,15 @@ const Depth2Header = styled(Box)<{ isMainPath: boolean }>({
314311
marginBottom: 10,
315312
});
316313

317-
const Depth2Title = styled(Typography)<{ isMainPath: boolean }>(({ isMainPath }) => ({
318-
color: isMainPath ? "white" : "rgba(18, 109, 127, 0.9)",
314+
const Depth2Title = styled(Typography)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
315+
color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
319316
fontSize: 20,
320317
fontWeight: 800,
321318
}));
322319

323-
const Depth2Divider = styled(Box)<{ isMainPath: boolean }>(({ isMainPath }) => ({
320+
const Depth2Divider = styled(Box)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
324321
height: 1,
325-
backgroundColor: isMainPath ? "rgba(255, 255, 255, 0.3)" : "rgba(18, 109, 127, 0.3)",
322+
backgroundColor: isMainPath ? theme.palette.mobileNavigation.main.divider : theme.palette.mobileNavigation.sub.divider,
326323
marginBottom: 21,
327324
}));
328325

‎apps/pyconkr/src/styles/globalStyles.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,47 @@ export const muiTheme = createTheme({
3636
activeLanguage: "#126D7F",
3737
},
3838
},
39+
mobileNavigation: {
40+
main: {
41+
background:
42+
"linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))",
43+
text: "#FFFFFF",
44+
chip: {
45+
background: "rgba(212, 212, 212, 0.5)",
46+
hover: "rgba(212, 212, 212, 0.7)",
47+
},
48+
divider: "rgba(255, 255, 255, 0.3)",
49+
languageToggle: {
50+
background: "transparent",
51+
active: {
52+
background: "rgba(255, 255, 255, 0.7)",
53+
hover: "rgba(255, 255, 255, 0.8)",
54+
},
55+
inactive: {
56+
hover: "rgba(255, 255, 255, 0.1)",
57+
},
58+
},
59+
},
60+
sub: {
61+
background: "#B6D8D7",
62+
text: "rgba(18, 109, 127, 0.9)",
63+
chip: {
64+
background: "rgba(18, 109, 127, 0.2)",
65+
hover: "rgba(18, 109, 127, 0.3)",
66+
},
67+
divider: "rgba(18, 109, 127, 0.3)",
68+
languageToggle: {
69+
background: "rgba(255, 255, 255, 0.1)",
70+
active: {
71+
background: "rgba(255, 255, 255, 0.9)",
72+
hover: "rgba(255, 255, 255, 1)",
73+
},
74+
inactive: {
75+
hover: "rgba(255, 255, 255, 0.3)",
76+
},
77+
},
78+
},
79+
},
3980
text: {
4081
primary: "#000000",
4182
secondary: "#666666",

‎types/emotion.d.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,46 @@ declare module "@mui/material/styles" {
1616
activeLanguage: string;
1717
};
1818
};
19+
mobileNavigation: {
20+
main: {
21+
background: string;
22+
text: string;
23+
chip: {
24+
background: string;
25+
hover: string;
26+
};
27+
divider: string;
28+
languageToggle: {
29+
background: string;
30+
active: {
31+
background: string;
32+
hover: string;
33+
};
34+
inactive: {
35+
hover: string;
36+
};
37+
};
38+
};
39+
sub: {
40+
background: string;
41+
text: string;
42+
chip: {
43+
background: string;
44+
hover: string;
45+
};
46+
divider: string;
47+
languageToggle: {
48+
background: string;
49+
active: {
50+
background: string;
51+
hover: string;
52+
};
53+
inactive: {
54+
hover: string;
55+
};
56+
};
57+
};
58+
};
1959
}
2060

2161
interface PaletteOptions {
@@ -32,6 +72,46 @@ declare module "@mui/material/styles" {
3272
activeLanguage: string;
3373
};
3474
};
75+
mobileNavigation?: {
76+
main: {
77+
background: string;
78+
text: string;
79+
chip: {
80+
background: string;
81+
hover: string;
82+
};
83+
divider: string;
84+
languageToggle: {
85+
background: string;
86+
active: {
87+
background: string;
88+
hover: string;
89+
};
90+
inactive: {
91+
hover: string;
92+
};
93+
};
94+
};
95+
sub: {
96+
background: string;
97+
text: string;
98+
chip: {
99+
background: string;
100+
hover: string;
101+
};
102+
divider: string;
103+
languageToggle: {
104+
background: string;
105+
active: {
106+
background: string;
107+
hover: string;
108+
};
109+
inactive: {
110+
hover: string;
111+
};
112+
};
113+
};
114+
};
35115
}
36116

37117
interface PaletteColor {

0 commit comments

Comments
 (0)