From 669b3584601690cbccae7a8664477d36e3e8a32f Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 22 Apr 2026 00:34:10 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A0=8C=EB=8D=94=20=EB=B3=91=EB=AA=A9=202?=
 =?UTF-8?q?=EA=B3=B3=20=EC=A0=9C=EA=B1=B0:=20=ED=97=A4=EB=8D=94=20backdrop?=
 =?UTF-8?q?-blur=20+=20=EC=A0=84=EC=97=AD=20=EB=B0=B0=EA=B2=BD=20transitio?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

프로미스나인과 비교 분석 결과 메이플에만 있는 두 가지 무거운 패턴.

- Layout 헤더의 backdrop-blur-md 제거하고 불투명 배경(var(--bg-from))으로
  교체. sticky 헤더 아래 컨텐츠가 애니메이션될 때마다 frosted glass
  필터를 매 프레임 재계산하던 비용 제거 (fromis_9는 shadow-sm만 사용).
- html/body/#root의 background-color/image 500ms transition 제거.
  테마 전환 부드럽게 하려는 의도였지만 범위가 전역이라 페이지 렌더
  성능 발목을 잡음. 테마 토글은 이제 즉시 전환.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/pc/Layout.jsx | 3 ++-
 frontend/src/index.css                | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/pc/Layout.jsx b/frontend/src/components/pc/Layout.jsx
index 5b87b34..0834c51 100644
--- a/frontend/src/components/pc/Layout.jsx
+++ b/frontend/src/components/pc/Layout.jsx
@@ -230,9 +230,10 @@ export default function Layout() {
         style={{ color: 'var(--text-strong)' }}
       >
         <header
-          className="sticky top-0 z-20 border-b backdrop-blur-md shrink-0"
+          className="sticky top-0 z-20 border-b shrink-0"
           style={{
             borderColor: 'var(--header-border)',
+            background: 'var(--bg-from)',
           }}
         >
           <div className="mx-auto flex max-w-[1400px] items-center justify-between px-6 py-4">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index de69ef1..5265779 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -319,9 +319,6 @@ html, body, #root {
   background-color: var(--bg-from);
   background-image: linear-gradient(to bottom right, var(--bg-from), var(--bg-via), var(--bg-to));
   background-attachment: fixed;
-  transition:
-    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-image 500ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 html {
   overscroll-behavior-y: contain;