From 6d66219d7efc3468246bf7c5425e458383e0db4d Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 7 Jun 2023 17:08:17 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=A2=E3=83=90=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=81=A7=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E3=81=8C=E4=B8=8D=E9=80=8F=E6=98=8E=E3=81=AB?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                               |  4 +++-
 .../frontend/src/components/global/MkPageHeader.vue   |  2 +-
 packages/frontend/src/pages/admin/_header_.vue        | 11 ++++++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 03020a7128..b4507d445d 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -29,7 +29,9 @@
 - 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
 
 ### Client
-- 모바일에서 UI 흐림 효과를 끄면 토스트 알림의 배경이 불투명하게 표시되도록
+- 모바일에서 UI 흐림 효과를 껐을 때 가독성 향상
+	- 토스트 알림의 배경이 불투명하게 표시되도록
+  - 헤더의 배경이 불투명하게 표시되도록
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 7326a89176..e29c18c6d6 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/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();
 };
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index 95c763405b..92145bbc5b 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/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();
 };