[patternflow-bot]

lsh / https://claude.ai/code/session_014FvJjjS6wAXXHdmeMcBk47

모든 쪽이 받는 globals.css 에서 아무도 쓰지 않던 옛 Inside 패널 규칙 377줄을 걷었어요. Inside 패널은 이미 제 CSS 모듈을 써서 화면은 그대로이고, 머지하면 사이트의 모든 쪽이 받는 CSS 덩이가 6,107바이트(gzip 1,104) 가벼워져요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 댓글(세 직함) 읽기. [DONE] 기기 주소 칸을 비우거나 http:// 를 붙여 넣어도 「Send over Wi-Fi」 링크가 그 보드로 간다 #150~[DONE] Pattern Lab 의 ! 단언 가운데 타입으로 좁힐 수 있는 일곱이 빠진다 #248 에서 꼬리말 없는 세 직함 글은 [DONE] Lab 갤러리 패널·Gemini 걷어 내기(#183)가 원래 레포 dev 위에 겹침 없이 다시 얹힌다 #215 와 [DONE] 매니페스토 · AGENTS.md · /pattern 카드가 걷은 배치 생성 대신 지금 Pattern Lab 을 말한다 #243 의 닫는 알림 둘뿐이고 일을 시키지 않아요
• 후보 고르기. 1~7위와 지시 6 · 7 은 끝났고, 남은 맨 위가 8위예요
• 걷을 덩어리가 아직 죽었는지 다시 재기
• 걷기 앞뒤 빌드의 CSS 덩이 크기와 다섯 쪽, 두 폭의 getComputedStyle 비교
• / 와 /inside 를 390 · 1440 으로 찍어 앞뒤 픽셀 비교
• 다섯 검사
• PR 의 Actions 초록. 09a4e42 와 2a66592 에서 Drift checks, Web CI 둘 다 success
• dev merge 뒤 [DONE]. 그새 [DONE] 연구 페이지에 할로윈 갈래가 열리고, 호박 등과 침대보 유령을 포함한 할로윈 다섯과 현수선 길을 구르는 정사각형 바퀴를 포함한 수학 다섯이 선다 #242 가 dev 에 들어와 a21d4aa 를 merge 했어요(2a66592). 바뀐 곳이 incoming/pattern-study/ 뿐이라 lint, typecheck, markers 만 다시 돌려 통과했어요

한 일

web/src/app/globals.css 의 :1117~:1494 를 지웠어요. 「"Inside" panel list」 주석부터 그 @media (max-width: 900px) 의 닫는 괄호와 뒤 빈 줄까지예요. 「Sponsor」 주석 앞 빈 줄 하나는 남겨서 덩어리 사이 간격이 그대로예요. 파일은 2,852줄 75,019바이트에서 2,474줄 66,630바이트가 됐어요.

지우기 전에 다시 쟀어요. 레포의 postcss 로 그 줄들을 읽으니 규칙 62개, 선언 239개, at-rule 은 @media (max-width: 900px) 하나였고, 셀렉터마다 .inside-* 나 .reddit-* 클래스가 하나씩 들어 있었어요. 그 클래스 24개(inside-* 20개, reddit-comment-band, reddit-comment-card, reddit-comment-track, reddit-upvotes)는 web/src, web/content, web/public, docs, tools 어디에도 없어요. 같이 걸린 is-active, is-next, is-open, is-prev, panel-header, sub 는 다 이 클래스들 밑에서만 쓰여서 다른 쪽 규칙에 닿지 않아요. 덩어리 안에서 정의한 변수 다섯(--inside-bg, --inside-text, --inside-heading, --inside-accent, --inside-wire)도 덩어리 밖에서 var() 로 읽는 곳이 없어요. web/src 에서 inside- 나 reddit- 를 글자로 이어 클래스 이름을 만드는 곳도 없고, reddit-comment 는 저널 MDX 의 사진 파일 이름(/journal/v1-30-days/reddit-comment-1.png)으로만 나와요.

증거

CSS 덩이 크기

같은 트리에서 이 커밋만 빼고 넣어 npm run build 를 두 번 했어요. .next/static/chunks/*.css 15개 가운데 바뀐 것은 모든 쪽이 받는 덩이(/ 의 HTML 이 부르는 둘 가운데 하나) 하나예요.

앞  09xanwc08mce1.css  70,913 바이트  gzip -9 13,353
뒤  31tthjllw7pos.css  64,806 바이트  gzip -9 12,249
나머지 14개           크기 그대로

뒤 빌드의 CSS 에서 inside-panel 을 찾으면 0개예요.

계산된 스타일

/, /inside, /build, /pattern, /journal/v1-30-days 를 390×844(2×)와 1440×900 으로 열어 load 뒤 3초를 기다리고, body 아래 모든 요소와 ::before, ::after 의 getComputedStyle 을 다 받아 비교했어요(reducedMotion 은 reduce). 앞 빌드를 두 번 받아 비교한 것이 0 차이라 이 비교에 흔들림은 없어요.

build-1440.json: 450 elements, 0 differences
build-390.json: 450 elements, 0 differences
home-1440.json: 576 elements, 0 differences
home-390.json: 445 elements, 0 differences
inside-1440.json: 582 elements, 0 differences
inside-390.json: 582 elements, 0 differences
journal_v1-30-days-1440.json: 169 elements, 0 differences
journal_v1-30-days-390.json: 169 elements, 0 differences
pattern-1440.json: 449 elements, 0 differences
pattern-390.json: 449 elements, 0 differences
total differences: 0

사진

맨 위 셋과 아래 하나가 걷은 뒤예요. 앞 사진과 픽셀로 비교하니 / 390 은 0 차이였어요. 나머지 셋은 3D 캔버스(/inside 390 에서 0,0 390×371, 1440 두 쪽에서 0,0 691×900 CSS px) 안에서만 달랐는데, 걷은 뒤 빌드를 두 번 찍어도 1440 두 쪽은 같은 칸이 달라요. 지구본과 제품 모델이 도는 그림이라서예요.

home-390     diff bbox None          pixels 0
home-1440    diff bbox (112,173,580,683)   캔버스 0..691 안
inside-390   diff bbox (142,80,641,619)    2× 캔버스 0..780 × 0..742 안
inside-1440  diff bbox (114,176,578,681)   캔버스 0..691 안
같은 뒤 빌드 두 번: home-1440 (115,176,578,681), inside-1440 (114,176,578,681)

검사

web/ 에서 돌렸어요.

$ npm ci                                   (exit 0)
$ npm run lint -- --max-warnings=0
> eslint --max-warnings=0                  (exit 0, 출력 없음)
$ npm run typecheck
> tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel   (exit 0)
$ npm run build
✓ Generating static pages using 3 workers (145/145) in 18.9s   (exit 0)
$ npm run check:ci                         (exit 0)
 ✓ src/app/fonts.test.ts (11 tests)
 ✓ src/app/hoverUnderline.test.ts (3 tests)
 ✓ src/components/sections/panelNotes.test.ts (10 tests)
 Test Files  103 passed (103)
      Tests  1291 passed (1291)
passed   audio-vectors … passed   virtual-panel   (drift 14개 통과, links-absolute 와 roadmap 은 책상이라 skipped)

globals.css 를 읽는 시험 셋(fonts.test.ts, hoverUnderline.test.ts, panelNotes.test.ts)이 다 지났어요.

PR 의 Actions(head 2a66592): Drift checks, Web CI 둘 다 success.

실행법

# web/ 에서
npm ci && npm run build && npx next start -p 3100
# 스크래치에서: playwright-core 1.56.1, 컨테이너의 Chromium
npm i playwright-core@1.56.1

스타일을 받는 스크립트는 다섯 쪽을 두 폭으로 열어 요소마다 DOM 경로(태그와 형제 순번)를 열쇠로 계산된 속성을 JSON 에 적고, 비교 스크립트가 앞뒤 JSON 을 열쇠와 속성마다 맞대요. 앞 빌드로 한 번, 이 커밋으로 다시 빌드해 한 번 돌려요.

가정

• 표의 8위는 클래스 27개라고 적었는데 다시 세니 inside-* 와 reddit-* 이름은 24개예요. 그 밑에서만 쓰는 이름 여섯까지 넣으면 30개라, 27 이 어디서 왔는지는 모르겠어요. 지운 줄은 표가 적은 범위(:1117~:1493)와 같아요. 첫 커밋 메시지에 표의 27 을 그대로 옮겼는데, squash 머지라 dev 에는 PR 제목이 남아요.
• 사진은 걷은 뒤만 PR 에 올렸어요. 앞 사진은 3D 캔버스 밖이 픽셀까지 같아서 스크래치에만 두었어요.
• 표 밖: web/src/app/globals.css:1117~:1119 의 「Sponsor」 머리 주석과 「60px horizontal, matching .hero」 주석이 Milestones 덩어리 위에 있고, .sponsor 규칙은 :1160 부터 머리 없이 시작해요.

Changelog

Web

• The global stylesheet drops 377 lines of old Inside panel rules. InsidePanel moved to its own CSS module, and nothing read the 24 inside-* and reddit-* classes left in globals.css. The CSS chunk every page loads is 6,107 bytes smaller (1,104 gzipped), and computed styles on five pages at 390 and 1440 px are unchanged.

바퀴

바퀴 100 · 후보 8 「모든 쪽이 받는 globals.css 에서 아무도 쓰지 않는 옛 Inside 패널 규칙 377줄이 빠진다」

경험

언제: 바퀴에서 CSS 를 걷거나 옮기고 화면이 그대로인지 사진으로 보일 때
교훈: 홈 탭과 /inside 는 3D 캔버스가 같은 빌드에서도 찍을 때마다 달라서 사진 비교는 캔버스 칸을 빼고 읽고, 판정은 reducedMotion 으로 연 쪽의 모든 요소 getComputedStyle 을 앞뒤로 맞대어 해요
근거: #249 에서 같은 뒤 빌드를 두 번 찍어도 1440 의 / 와 /inside 가 캔버스 0,0 691×900 안에서 달랐고, 계산된 스타일은 같은 빌드 두 번과 앞뒤 빌드 모두 10쌍 0 차이였어요

다음 바퀴

• 9위 「Lab 밖 CSS 모듈 다섯에서 아무 컴포넌트도 읽지 않는 클래스 23개가 빠지고, 시험이 사이트 전체의 CSS 모듈을 본다」. 남은 줄 가운데 순위가 가장 높아요.
• 10위 「globals.css 에 남은 안 쓰는 규칙 70개와 그것만 쓰던 애니메이션 둘, 변수 넷이 빠진다」. 이 PR 뒤로 표가 적은 :1117 아래 줄 번호는 378씩 올라가요(:1770 은 :1392, :2597 은 :2219).
• 11위 「Lab 밖에서 아무도 읽지 않는 이름 다섯이 빠지고, 가이드 화면 그리기가 글자 폭과 줄 높이를 이름으로 읽는다」. 가이드 화면 그리기의 숫자 열 곳이 이름을 읽어요.

https://claude.ai/code/session_014FvJjjS6wAXXHdmeMcBk47

---

Generated by Claude Code