diff --git a/apps/site/design.md b/apps/site/design.md index 0f7ba59..4abfd04 100644 --- a/apps/site/design.md +++ b/apps/site/design.md @@ -827,3 +827,10 @@ max-age=0 지정(존 설정이 우선하면 효과는 제한적). **운칙: /wor - **실기기 검증(안드로이드 에뮬레이터·실제 Chrome)**: adb reverse + uiautomator dump 텍스트 근거로 — 가온 렌더·수강생 탭·**백 키→대시보드 복귀**·더보기 시트·공지 선택·백 복귀, 두레 렌더·관심 탭·백 복귀. iOS 는 WebKit 엔진(L4)으로 대체(Windows 제약 문서화). 비전은 전환 중 프레임 오탐이 있어 '여부' 판정은 계측에만. - **도그푸드가 잡은 사고**: ①스킬 게이트 새 tapTargets 검사 개발 중 thresholds 얕은 병합 버그(구형 설정이 신규 기본값 지움, "≥undefinedpx") → 깊은 병합. ②죽은 선택자 검사가 이번 라운드 내가 만든 `.btn-seal/.btn-star`(가온에 없는 버튼)과 두레 포크 잔재 6종을 적발 → 삼위일체 제거, 세그먼트 `seg-${n}` JS 조립은 무시 목록(seg-)으로 오탐 차단. ③두레 `.btn-seal`은 생존(신청 버튼) — coarse 사이징 실수로 뺐다가 게이트 재실행으로 복원. CSS v22(양앱). - **스킬 내재화(v0.7 예정)**: references/mobile-app-ux.md 신규(5축 표·뒤로가기 전체 패턴·실기기 검증법·출처), audit-gate 7계층(L6 시나리오)·하니스 12~14(NaN 방어·fixed 판정·실기기 텍스트 근거), design-gate tapTargets 내장, SKILL.md 규칙 7 "OS 관습은 조사 없이 바꾸지 않는다". + +## 2026-08-23 — 국소: 모바일 상단 바 수리(v23) — 스크롤 잔류·이중 헤더 + +사용자 보고 "상단 바가 페이지마다 왔다갔다하며 패딩이 없고 포지션도 이상하다". 계측으로 원인 둘로 확정: +- **탭 전환 스크롤 잔류** — setCurrentView 는 focus({preventScroll:true}) 였지만 이전 뷰의 window.scrollY 가 그대로 남아, 새 뷰가 짧으면 브라우저가 클램프(600→49)해 헤더가 반쯤 잘리고 길면 화면 중간에 떨어졌다. 뷰마다 크롬 위치가 제각각 = "왔다갔다". 수리: setCurrentView 마지막에 window.scrollTo(0,0) (양앱). +- **모바일 헤더 이중 스택** — ≤900에서 브랜드 줄(.side 43px)+크럼 탑바(52px)=95px 크롬이 쌓이고 둘 다 static 이라 스크롤하면 떠내려가며, safe-top 도 없었다. 수리: ≤900에서 .side 숨김(크럼이 브랜드명을 이미 담음 — 중복), .topbar 를 sticky top:0 + safe-top 패딩의 단일 헤더로(두레 앱바와 같은 문법). 데스크톱(>900) 무변경. +- 재발 방지: e2e.mjs M5 헤더·스크롤 스위트 10단언(헤더 sticky·상단 박착, 300px+ 스크롤에서 탭 전환 → scrollY=0·헤더 top=0). 시각 기준 갱신(390px 9화면 의도 변경), verify L0~L6 재통과. 스킬 mobile-app-ux.md 에 "뷰 전환은 스크롤을 리셋·헤더는 하나" 규칙 반영. diff --git a/apps/site/public/work/dure-enrollment/index.html b/apps/site/public/work/dure-enrollment/index.html index 1d6ad0a..f4dc5fd 100644 --- a/apps/site/public/work/dure-enrollment/index.html +++ b/apps/site/public/work/dure-enrollment/index.html @@ -383,6 +383,8 @@ document.querySelectorAll(".more-item[data-view]").forEach((b) => b.classList.toggle("is-current", b.dataset.view === name)); views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + name)); $("view-" + name).focus({ preventScroll: true }); + // 뷰 전환은 새 화면의 맨 위에서 시작 — 이전 스크롤이 남으면 뷰마다 헤더 위치가 제각각이 된다 + window.scrollTo(0, 0); }; const gotoView = (name, push = true) => { if (push) history.pushState({ v: name }, ""); diff --git a/apps/site/public/work/gaon-lms/index.html b/apps/site/public/work/gaon-lms/index.html index 13f9e1b..5099c4a 100644 --- a/apps/site/public/work/gaon-lms/index.html +++ b/apps/site/public/work/gaon-lms/index.html @@ -35,7 +35,7 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Serif+KR:wght@500;600&display=swap" /> - + v.classList.toggle("is-on", v.id === "view-" + name)); document.getElementById("crumb-view").textContent = VIEW_LABEL[name] || name; document.getElementById("view-" + name).focus({ preventScroll: true }); + // 뷰 전환은 새 화면의 맨 위에서 시작한다 — 이전 화면의 스크롤이 남으면 + // 짧은 뷰에서는 클램프되어 헤더가 반쯤 잘리고, 긴 뷰에서는 화면 중간에 떨어진다 + window.scrollTo(0, 0); }; const gotoView = (name, push = true) => { if (push) history.pushState({ v: name }, ""); diff --git a/apps/site/public/work/gaon-lms/styles/main.css b/apps/site/public/work/gaon-lms/styles/main.css index f9211dc..fa0c7b4 100644 --- a/apps/site/public/work/gaon-lms/styles/main.css +++ b/apps/site/public/work/gaon-lms/styles/main.css @@ -600,18 +600,16 @@ tbody tr:hover { background: var(--muted); } /* ── 반응형 ── */ @media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } - /* 모바일 앱 헤더 — 내비는 바텀 탭으로 이동(HIG·M3), 사이드는 브랜드 바가 된다 */ - .side { - position: static; height: auto; - flex-direction: row; align-items: center; - gap: var(--space-3); - padding: var(--space-2) max(var(--space-4), var(--safe-right)) var(--space-2) max(var(--space-4), var(--safe-left)); - border-right: 0; border-bottom: 1px solid var(--border); - min-width: 0; + /* 모바일 앱 헤더 — 내비는 바텀 탭으로(HIG·M3). 헤더는 크럼 탑바 하나다: + 브랜드 줄(사이드)과 크럼이 서로 중복하는 데다 95px 크롬을 쌓아 옥에 끼는 느낌을 냈다. + 탑바가 sticky 로 상단에 남고, safe-top 으로 노치/상태바를 피한다 */ + .side { display: none; } + .topbar { + position: sticky; top: 0; z-index: 40; + height: auto; min-height: 52px; min-width: 0; + padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left)); + padding-top: max(0px, var(--safe-top)); } - .brand { padding: 0; flex: none; white-space: nowrap; } /* 스트립에서 찌그러져 글자가 세로로 쌓이는 것을 막는다 */ - .side-nav { display: none; } - .side-foot, .side-kbd { display: none; } .main { padding-bottom: calc(72px + var(--safe-bottom)); } /* 바텀 내비 + 홈 인디케이터 확보 */ .dash-grid, .cal-layout, .counsel-grid { grid-template-columns: minmax(0, 1fr); } .week-panel { grid-row: auto; } @@ -619,7 +617,6 @@ tbody tr:hover { background: var(--muted); } .view-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-4); } .view > *:not(.view-head) { margin-inline: var(--space-4); } .headline { gap: var(--space-2); } - .topbar { padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left)); min-width: 0; } .term-badge { display: none; } .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-day { height: 56px; } diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png index e8ba96e..cdec839 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png index 2a064f0..ee178f9 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png index 43402fb..e985462 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png index b09c224..6158868 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png and b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png index 52e70ae..95b7c54 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png index fddc030..1388e26 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png index 0b6b04c..73a866e 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png index 0deb70c..6db75c7 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png index b7c09ca..b5d3110 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png differ diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png index 097dc05..084748e 100644 Binary files a/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png and b/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png b/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png index 141de61..9fe355b 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png and b/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png b/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png index e698f9e..a065f24 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png and b/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png b/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png index 69a65fd..d3277c0 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png and b/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png b/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png index 81d2548..5e4dbd6 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png and b/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png index 1fcf58f..42179b0 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png and b/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-files-390.png b/apps/site/tools/__shots__/current/gaon-lms-files-390.png index 0db0616..52c3d89 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-files-390.png and b/apps/site/tools/__shots__/current/gaon-lms-files-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-grades-390.png b/apps/site/tools/__shots__/current/gaon-lms-grades-390.png index cb1f96f..f0a408f 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-grades-390.png and b/apps/site/tools/__shots__/current/gaon-lms-grades-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-notice-390.png b/apps/site/tools/__shots__/current/gaon-lms-notice-390.png index 6188801..0ed2d6d 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-notice-390.png and b/apps/site/tools/__shots__/current/gaon-lms-notice-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-report-390.png b/apps/site/tools/__shots__/current/gaon-lms-report-390.png index d5ef1b7..98d1f2c 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-report-390.png and b/apps/site/tools/__shots__/current/gaon-lms-report-390.png differ diff --git a/apps/site/tools/__shots__/current/gaon-lms-students-390.png b/apps/site/tools/__shots__/current/gaon-lms-students-390.png index da52543..f8dbdbd 100644 Binary files a/apps/site/tools/__shots__/current/gaon-lms-students-390.png and b/apps/site/tools/__shots__/current/gaon-lms-students-390.png differ diff --git a/apps/site/tools/__shots__/diag-gaon-390-dashboard.png b/apps/site/tools/__shots__/diag-gaon-390-dashboard.png new file mode 100644 index 0000000..a064124 Binary files /dev/null and b/apps/site/tools/__shots__/diag-gaon-390-dashboard.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png b/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png index 348d574..32938b3 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png b/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png index c666962..7169265 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png b/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png index b470495..dcb0dda 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png index 75e6b20..e006761 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-files-390.png b/apps/site/tools/__shots__/diff-gaon-lms-files-390.png index a82a35c..a5e0ec5 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-files-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-files-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png b/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png index 593d3c5..5bf33d8 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png b/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png index d9b7487..d7b48f8 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-report-390.png b/apps/site/tools/__shots__/diff-gaon-lms-report-390.png index aa00b5a..dab617f 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-report-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-report-390.png differ diff --git a/apps/site/tools/__shots__/diff-gaon-lms-students-390.png b/apps/site/tools/__shots__/diff-gaon-lms-students-390.png index d5ecd51..927ff69 100644 Binary files a/apps/site/tools/__shots__/diff-gaon-lms-students-390.png and b/apps/site/tools/__shots__/diff-gaon-lms-students-390.png differ diff --git a/apps/site/tools/e2e-report.md b/apps/site/tools/e2e-report.md index eb8e603..a325b7c 100644 --- a/apps/site/tools/e2e-report.md +++ b/apps/site/tools/e2e-report.md @@ -1,14 +1,15 @@ -# E2E 시나리오 게이트 — 2026-08-23 05:32 +# E2E 시나리오 게이트 — 2026-08-23 05:48 -단언 1762 · 통과 1762 · 실패 0 — **GREEN — 전 단언 통과** +단언 1754 · 통과 1754 · 실패 0 — **GREEN — 전 단언 통과** | 스위트 | 통과 | 실패 | |---|---|---| | M4 앱 기반 | 22 | 0 | +| M5 헤더·스크롤 | 10 | 0 | | M320 매트릭스 | 90 | 0 | | M390 매트릭스 | 105 | 0 | -| M1 터치타깃 | 231 | 0 | -| M2 대비 | 1120 | 0 | +| M1 터치타깃 | 222 | 0 | +| M2 대비 | 1111 | 0 | | M768 매트릭스 | 90 | 0 | | S7 뒤로 가기 | 6 | 0 | | S7 뒤로 가기·모달 | 5 | 0 | diff --git a/apps/site/tools/e2e.mjs b/apps/site/tools/e2e.mjs index eb698ce..1fd3309 100644 --- a/apps/site/tools/e2e.mjs +++ b/apps/site/tools/e2e.mjs @@ -187,6 +187,37 @@ for (const [app] of Object.entries(APPS)) { ok(await page.evaluate(() => !!document.querySelector(".bottom-nav")), S, `${app} 바텀 내비 존재`); } +// ════════ M5 — 헤더·스크롤(탭 전환은 화면 맨 위에서, 헤더는 상단에 남는다) ════════ +// 실측 사고: 이전 뷰의 스크롤이 남아 짧은 뷰에서 클램프되면 헤더가 반쯤 잘리고, +// 뷰마다 크롬 위치가 제각각이 되어 "상단 바가 왔다갔다한다"는 보고로 나타났다 +for (const [app, cfg] of Object.entries(APPS)) { + const S = "M5 헤더·스크롤"; + await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true }); + await openApp(app); + const headerSel = app === "gaon-lms" ? ".topbar" : ".appbar"; + const head = await page.evaluate((sel) => { + const el = document.querySelector(sel); + if (!el) return null; + const cs = getComputedStyle(el); + const r = el.getBoundingClientRect(); + return { pos: cs.position, top: Math.round(r.top), h: Math.round(r.height) }; + }, headerSel); + ok(!!head && (head.pos === "sticky" || head.pos === "fixed"), S, `${app} 헤더 sticky/fixed`, head ? head.pos : "요소 없음"); + ok(head && head.top === 0 && head.h >= 44, S, `${app} 헤더 상단 밀착·높이`, head ? head.top + "px/" + head.h + "px" : "-"); + // 스크롤 내린 상태에서 탭 전환 — 새 화면은 맨 위에서 시작해야 한다 + await page.evaluate(() => window.scrollTo(0, 500)); + await new Promise((r) => setTimeout(r, 60)); + const scrolled = await page.evaluate(() => window.scrollY); + await switchView(app, cfg.views[1]); + const after = await page.evaluate((sel) => ({ + y: window.scrollY, + top: Math.round(document.querySelector(sel).getBoundingClientRect().top), + }), headerSel); + ok(scrolled > 300, S, `${app} 사전 조건: 300px+ 스크롤`, scrolled + "px"); + ok(after.y === 0, S, `${app} 탭 전환 후 스크롤 리셋`, after.y + "px"); + ok(after.top === 0, S, `${app} 탭 전환 후 헤더 상단 밀착`, after.top + "px"); +} + // ════════ M3+M1+M2 — 구조·터치타깃·대비 매트릭스(전 뷰 × 320/390/768) ════════ for (const [app, cfg] of Object.entries(APPS)) { for (const w of [320, 390, 768]) { diff --git a/apps/site/tools/verify-report.md b/apps/site/tools/verify-report.md index 4f77a08..782ed60 100644 --- a/apps/site/tools/verify-report.md +++ b/apps/site/tools/verify-report.md @@ -1,15 +1,15 @@ -# 검증 리포트 — 2026-08-23 05:32 +# 검증 리포트 — 2026-08-23 05:48 -게이트: **전 계층 통과 — 배포 가능** · 총 84.4초 +게이트: **전 계층 통과 — 배포 가능** · 총 85.9초 | 계층 | 결과 | 항목 | 소요 | |---|---|---|---| -| L0-정적/stylelint | PASS | PASS — | 1.7s | +| L0-정적/stylelint | PASS | PASS — | 1.4s | | L0-정식/html-validate | PASS | PASS — | 1.2s | | L1-단위/계산로직 | PASS | PASS 41 | 0.0s | -| L2-기능/감사 | PASS | PASS 72 | 9.7s | -| L2-불변식/렌더 | PASS | PASS 10 | 16.7s | -| L3-시각회귀/diff | PASS | PASS 30 | 11.4s | -| L4-WebKit | PASS | PASS 8 | 3.9s | -| L5-탐색/키보드 | PASS | PASS 14 | 6.1s | -| L6-시나리오/E2E | PASS | PASS — | 33.6s | +| L2-기능/감사 | PASS | PASS 72 | 9.6s | +| L2-불변식/렌더 | PASS | PASS 10 | 16.9s | +| L3-시각회귀/diff | PASS | PASS 30 | 11.3s | +| L4-WebKit | PASS | PASS 8 | 3.5s | +| L5-탐색/키보드 | PASS | PASS 14 | 6.3s | +| L6-시나리오/E2E | PASS | PASS — | 35.5s | diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index b58dac3..9701adc 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,11 @@ # designpaca +## 0.7.1 + +### Patch Changes + +- 모바일 뷰 전환 스크롤 리셋·단일 헤더 규칙 추가(mobile-app-ux.md) — 탭 전환 시 이전 스크롤이 남어 짧은 뷰에서 헤더가 클램프되어 잘리는 사고의 재발 방지. focus(preventScroll)만으론 부족하고 scrollTo(0,0)이 필요하며, 헤더는 sticky 하나로 + ## 0.7.0 ### Minor Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index f78b924..ae59812 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "designpaca", - "version": "0.7.0", + "version": "0.7.1", "description": "웹 디자인 파이프라인 스킬 — Claude Code · Codex · Cursor 에 한 줄로 설치한다", "keywords": [ "design", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 0a9b140..3853e40 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,7 @@ # @designpaca/core +## 0.7.1 + ## 0.7.0 ## 0.5.0 diff --git a/packages/core/package.json b/packages/core/package.json index d79bbfd..0ca135a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@designpaca/core", - "version": "0.7.0", + "version": "0.7.1", "private": true, "description": "designpaca 설치 엔진 — 타깃 어댑터, 매니페스트, 드리프트 감지", "type": "module", diff --git a/packages/skill/CHANGELOG.md b/packages/skill/CHANGELOG.md index 1a57f34..88ee262 100644 --- a/packages/skill/CHANGELOG.md +++ b/packages/skill/CHANGELOG.md @@ -1,5 +1,11 @@ # CHANGELOG +## 0.7.1 + +### Patch Changes + +- 모바일 뷰 전환 스크롤 리셋·단일 헤더 규칙 추가(mobile-app-ux.md) — 탭 전환 시 이전 스크롤이 남어 짧은 뷰에서 헤더가 클램프되어 잘리는 사고의 재발 방지. focus(preventScroll)만으론 부족하고 scrollTo(0,0)이 필요하며, 헤더는 sticky 하나로 + ## 0.7.0 ### Minor Changes diff --git a/packages/skill/package.json b/packages/skill/package.json index e5f91c9..affe8df 100644 --- a/packages/skill/package.json +++ b/packages/skill/package.json @@ -1,6 +1,6 @@ { "name": "@designpaca/skill", - "version": "0.7.0", + "version": "0.7.1", "private": true, "description": "designpaca 스킬 원본 — SKILL.md 와 참조 문서", "scripts": { diff --git a/packages/skill/references/mobile-app-ux.md b/packages/skill/references/mobile-app-ux.md index d67e172..b70b794 100644 --- a/packages/skill/references/mobile-app-ux.md +++ b/packages/skill/references/mobile-app-ux.md @@ -61,6 +61,12 @@ - 시트: 그래버(36×4px), `max-height: 92dvh`, `border-radius`는 위쪽만, 등장은 `sheet-up` 모션(≤ 감사 도구 대기시간 — audit-gate 하니스 규칙 10) - 시트 항목도 `min-height: 48px` +### 뷰 전환은 스크롤을 리셋하고, 헤더는 하나다 + +**탭을 바꾸면 새 화면은 맨 위에서 시작한다.** 뷰 전환 함수 마지막에 `window.scrollTo(0, 0)` 을 넣어라 — `focus({ preventScroll: true })` 만으로는 부족하다. 실측 사고: 이전 뷰의 스크롤이 남은 채 탭을 바꾸면, 새 뷰가 짧을 때 브라우저가 스크롤을 클램프해 헤더가 **반쯤 잘린 채** 뜨고, 길면 화면 중간에 떨어진다. 뷰마다 크롬 위치가 달라져 "상단 바가 왔다갔다한다"는 보고로 나타났다. + +**모바일 헤더는 한 줄이다.** 데스크톱의 브랜드 바(사이드바 상단)와 화면 크럼 바를 좁은 화면에 그대로 쌓으면 90px+ 크롬이 콘텐츠를 옥에 끼운다. 하나를 고른다(크럼이 브랜드명을 이미 담고 있다면 브랜드 줄을 숨긴다) — 고른 헤더는 `position: sticky; top: 0` + safe-top 패딩으로 스크롤 내내 상단에 남는다. 검증은 E2E 로: 300px+ 스크롤 상태에서 탭 전환 → `scrollY === 0`·헤더 `top === 0`. + ### 하드웨어 뒤로가기 = 앱 내 히스토리 (핵심 패턴) 안드로이드 백 키와 iOS 스와이프 백이 **앱을 종료하지 않고 앱 내 뒤로** 작동해야 한다. SPA 뷰 전환마다 `history.pushState` 로 스택을 쌓고 `popstate` 로 소비한다. 다이얼로그도 같은 스택에 태운다: