enhance(client): モバイルでヘッダーの背景が不透明に表示されるように

CHANGELOG_CHERRYPICK.md

@@ -29,7 +29,9 @@
 - 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
 
 ### Client
-- 모바일에서 UI 흐림 효과를 끄면 토스트 알림의 배경이 불투명하게 표시되도록
+- 모바일에서 UI 흐림 효과를 껐을 때 가독성 향상
+	- 토스트 알림의 배경이 불투명하게 표시되도록
+  - 헤더의 배경이 불투명하게 표시되도록
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 

packages/frontend/src/components/global/MkPageHeader.vue

@@ -115,7 +115,7 @@ function goBack() {
 const calcBg = () => {
 	const rawBg = 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-	if (isFriendly.value && narrow) tinyBg.setAlpha(1);
+	if (narrow) tinyBg.setAlpha(1);
 	else tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };

packages/frontend/src/pages/admin/_header_.vue

@@ -38,6 +38,14 @@ import { scrollToTop } from '@/scripts/scroll';
 import MkButton from '@/components/MkButton.vue';
 import { globalEvents } from '@/events';
 import { injectPageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
+
+const MOBILE_THRESHOLD = 500;
+
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
 
 type Tab = {
 	key?: string | null;
@@ -122,7 +130,8 @@ function goBack() {
 const calcBg = () => {
 	const rawBg = metadata?.bg ?? 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-	tinyBg.setAlpha(0.85);
+	if (isMobile.value) tinyBg.setAlpha(1);
+	else tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };