From 4c36dc5bbe75305a1a6edceb8350afc22892a916 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= Date: Wed, 11 Feb 2026 15:53:49 +0900 Subject: [PATCH] =?UTF-8?q?chore(WEB):=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=AF=B8=EC=84=B8=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - globals.css 스타일 업데이트 - AuthenticatedLayout 수정 - claudedocs 문서 인덱스 업데이트 Co-Authored-By: Claude Opus 4.6 --- claudedocs/_index.md | 17 +++++++++++++++++ src/app/globals.css | 9 ++++++--- src/layouts/AuthenticatedLayout.tsx | 2 +- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/claudedocs/_index.md b/claudedocs/_index.md index 2a52494a..814b866e 100644 --- a/claudedocs/_index.md +++ b/claudedocs/_index.md @@ -25,6 +25,23 @@ 4. **blob URL 비호환** — 업로드 미리보기(blob:)는 `next/image`가 지원 안 함 5. **설정 부담 > 이점** — `remotePatterns` 설정 + 백엔드 도메인 관리 비용이 실질 이점보다 큼 +### 모바일 헤더 `backdrop-filter` 깜빡임 수정 (2026-02-11) + +**현상**: 모바일(Safari/Chrome)에서 sticky 헤더가 스크롤 시 투명↔불투명 깜빡임 발생. PC 브라우저 축소로는 재현 불가, 실제 모바일 기기에서만 발생. + +**원인 2가지**: +1. `globals.css`에 `* { transition: all 0.2s }` — 전체 요소의 모든 CSS 속성에 전역 transition. 모바일 스크롤 리페인트 시 background/opacity가 매번 애니메이션 +2. 모바일 헤더의 `clean-glass` 클래스: `backdrop-filter: blur(8px)` + `background: rgba(255,255,255, 0.95)` 조합이 모바일 sticky 요소에서 GPU 컴포지팅 충돌 + +**수정**: +- `globals.css`: `*` 전역 transition → `button, a, input, select, textarea, [role]` 인터랙티브 요소만, `transition: all` → `color, background-color, border-color, box-shadow` 속성만 +- 모바일 헤더: `clean-glass` (반투명+blur) → `bg-background border border-border` (불투명 배경) + +**교훈**: +- `transition: all`은 절대 `*`에 걸지 않기. 모바일 성능 저하 + 의도치 않은 애니메이션 발생 +- `backdrop-filter: blur()` + `sticky` 조합은 모바일 브라우저 고질적 리페인트 버그. 모바일 헤더는 불투명 배경 사용 +- 0.95 투명도는 육안 구분 불가 → 불투명 처리해도 시각적 차이 없음 + **사용처 (9개 파일)**: | 파일 | 용도 | 이미지 소스 | |------|------|-------------| diff --git a/src/app/globals.css b/src/app/globals.css index 35397ac4..ccb93f4e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -296,9 +296,12 @@ box-shadow: var(--clean-shadow-xl); } - /* Smooth transitions for all interactive elements */ - * { - transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); + /* Smooth transitions for interactive elements only */ + button, a, input, select, textarea, + [role="button"], [role="tab"], [role="menuitem"] { + transition-property: color, background-color, border-color, box-shadow; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Bell ringing animation for notifications */ diff --git a/src/layouts/AuthenticatedLayout.tsx b/src/layouts/AuthenticatedLayout.tsx index dc1561fc..1e1ff007 100644 --- a/src/layouts/AuthenticatedLayout.tsx +++ b/src/layouts/AuthenticatedLayout.tsx @@ -699,7 +699,7 @@ export default function AuthenticatedLayout({ children }: AuthenticatedLayoutPro return (
{/* 모바일 헤더 - sam-design 스타일 */} -
+
{/* 좌측 영역: 햄버거 메뉴 + (대시보드일 때는 로고, 다른 페이지일 때는 이전/홈 버튼) */}