[patternflow-bot]

dev / https://claude.ai/code/session_01Gdqi6PP5SVyTK6YeNSu1Pn

저널 CSS 에서 아무것도 그리지 않던 규칙 61줄을 걷었어요. 어느 컴포넌트도 글도 쓰지 않는 클래스 넷, 표지 칸에 생기지 않는 span 규칙 둘, 아무도 켜지 않은 ::before 를 끄던 규칙 둘이에요. 저널 76쪽을 390 과 1440 에서 다 견주니 모든 요소의 계산된 스타일과 상자가 dev 와 같았고, 화면은 그대로예요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 남은 줄: 없음(지시 6~10 은 [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244 · [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 · [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268 · [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271 · [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 앞 바퀴 PR 의 세 직함 댓글: 일을 시키는 글 없음(대화 댓글 넷은 원래 레포로 옮겼다는 알림이고, [DONE] 연구 페이지에 카츠의 고리와 햄 샌드위치를 포함한 수학 다섯과 레이스 커튼 유령, 검은 고양이를 포함한 할로윈 다섯이 선다 #255~[DONE] 저널 그림을 크게 보고 닫아도 읽던 자리가 그대로고, Tab 이 창 뒤로 새지 않는다 #314 의 리뷰와 줄 댓글은 0)
• 133141바퀴([DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306[DONE] 저널 그림을 크게 보고 닫아도 읽던 자리가 그대로고, Tab 이 창 뒤로 새지 않는다 #314)와 겹치지 않음: 그 바퀴들은 이 규칙들을 건드리지 않았고, 135바퀴부터 일곱 바퀴가 「다음 바퀴」에 이 일을 적었어요
• dev 에서 잼(규칙의 클래스를 web/src 와 글 74편에서 세기, 빌드한 CSS 비교)
• 고치기, 새 시험 셋(dev 의 CSS 에서 3 빨강, 고친 뒤 3 초록)
• 저널 76쪽 × 390 · 1440 에서 계산된 스타일과 상자 비교(152/152 같음)
• 전후 사진(폰 390 · 데스크톱 1440)
• npm ci · lint · typecheck · build · check:ci · check:voice
• dev merge(그새 dev 가 움직이지 않았어요) · CI 초록(Drift checks · Web CI) · 겹치는 [DONE] PR 없음

한 일

web/src/app/globals.css 에서 저널 규칙 61줄을 걷었어요.

• .journal-list-number: mono 묶음의 한 줄과 색 규칙 하나. 목록의 번호는 .pf-ghost 예요.
• .journal-figure, .journal-figure-wide, .journal-figure-full 과 그 img, video, figcaption, 폰 규칙 하나. 글 74편의 그림은 journal-md-figure 와 journal-figure-row 만 써요.
• .journal-index-thumb span, .journal-cover-slot span. 두 칸엔 JournalImage 하나만 들고, next/image 는 맨 <img> 하나만 그려요.
• .journal-cover-slot::before { content: none } 과 .journal-hero-cover .journal-cover-slot::before { content: none; display: none }. 이 ::before 에 content 를 주는 규칙은 없어요.

새 시험 셋은 web/src/components/journal/journalCss.test.ts 끝에 더했어요. globals.css 가 부르는 journal- 클래스가 다 web/src 의 코드나 글에 있는지, 표지 칸 안 요소 규칙이 JournalImage 가 그리는 태그만 부르는지, content: none 으로 끄는 저널 ::before 마다 켜는 규칙이 있는지 봐요. 화면 글과 마크업은 그대로예요.

증거

dev 의 globals.css 에 새 시험을 돌리면

× journal rules > name only classes a journal component or post writes
  expected [ 'journal-list-number', 'journal-figure', 'journal-figure-wide', 'journal-figure-full' ] to deeply equal []
× journal rules > style nothing in a cover slot but what JournalImage draws
  .journal-… span: expected [ 'img' ] to include 'span'
× journal rules > switch off no ::before that no rule switches on
  .journal-cover-slot::before: expected false to be true
Tests  3 failed | 11 passed (14)

고친 뒤엔 Tests 14 passed (14) 이고, src/components/journal/ 네 파일이 25 passed (25) 예요.

빌드한 CSS 는 56,781 바이트에서 55,756 바이트가 됐어요. 두 빌드의 CSS 를 규칙마다 줄을 나눠 diff 하면 걷은 열한 줄과 mono 묶음의 한 줄 말고는 같아요.

화면이 그대로인지는 dev 빌드(3200)와 고친 빌드(3100)를 같이 띄워 쟀어요. 저널 76쪽(목록 둘, 글 74)을 390 과 1440 에서 열고, 그림을 다 받은 뒤 <body> 아래 모든 요소의 상자와 계산된 스타일 전부(요소, ::before, ::after)를 적었어요. 한 쪽을 열어 둔 채로 고친 판 CSS, dev CSS, 고친 판 CSS 를 차례로 같은 origin 의 <style> 로 끼워 세 번 쟀어요.

잰 것	결과
고친 판 CSS 와 dev CSS 가 같음	152/152 (요소 13,132개)
대조: 고친 판 CSS 를 다시 끼워도 같음	152/152
감도: .journal-shell 에 letter-spacing: .001em 을 더하면 달라짐	152/152

content: none 인 ::before 는 상자가 없어서 「상자 없음」으로 적었어요. 그 자리에서 달라지는 값은 하나예요. /journal/refocus 1440 의 .journal-cover-slot::before 는 dev 가 display: none, 고친 판이 display: inline 이고, 둘 다 content: none 이라 그려지지 않아요.

사진 여덟 장(목록과 /journal/refocus, 390 · 1440, 전후)은 전후가 바이트까지 같았어요. 위 셋은 고친 뒤, 아래는 나머지예요.

다섯 검사(web/ 에서):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0 (tsc 둘 다)
npm run build                       → exit 0
npm run check:ci                    → exit 0 · Test Files 133 passed (133) · Tests 1615 passed (1615)
                                      drift 14 passed, links-absolute · roadmap skipped
npm run check:voice                 → read: 66 added lines in 1 file · check:voice: nothing found

links-absolute 와 roadmap 은 이 컨테이너의 gh 로 원래 레포를 읽지 못해 건너뛰었어요. PR 에서 drift.yml 이 다시 돌려요.

실행법

# web/ 에서
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100

비교 스크립트는 레포 밖 스크래치 폴더에서 컨테이너의 Playwright 와 Chromium 으로 돌렸고 레포에 두지 않았어요.

가정

• 고르는 차례는 창작자 지시 남은 줄(없음), 세 직함 댓글(없음), 저널 순서였어요. 마지막 바퀴라서 일곱 바퀴째 「다음 바퀴」에 남아 있던 이 정리를 골랐어요. 화면을 바꾸는 남은 둘은 아래 「남은 것」에 뒀어요.
• 136바퀴가 센 목록에 ::before 를 끄기만 하는 두 규칙을 더했어요. 같은 표지 칸 규칙이고 아무것도 바꾸지 않아서예요.
• .journal-cover-slot 과 .journal-hero-cover .journal-cover-slot 처럼 둘 다 그려지지만 겹치는 규칙은 그대로 뒀어요. 지우면 값이 옮겨 가는 일이라 이번 정리와 따로예요.
• 처음엔 두 빌드를 따로 열어 견줬는데, 같은 dev 빌드를 두 번 열어도 152번 가운데 16번이 달랐어요. Next 가 흘려 넣는 <script> 자리가 열 때마다 바뀌고, /journal/wins-and-losses-next-step/en 1440 은 글 <article> 의 계산된 margin 이 열 때마다 198px 이거나 0px 였어요. 상자는 둘 다 x 246, 폭 948 로 같아서 화면엔 보이지 않아요. 그래서 한 쪽 안에서 CSS 만 갈아 끼우는 비교를 썼어요.
• incoming/ 과 저널 글, 그림, 화면 글은 그대로예요.

Changelog

Web

• The journal's stylesheet drops 61 lines that matched nothing. No component or post used .journal-list-number or .journal-figure with its -wide and -full, the cover slots never held the span two rules styled, and two rules switched off a ::before nothing switched on. Every journal page renders as before.

경험

언제: 저널이나 사이트의 CSS 만 고친 뒤 화면이 그대로인지 두 빌드로 견줄 때
교훈: 두 빌드를 따로 열어 계산된 스타일을 견주지 말고, 한 쪽을 연 채 두 빌드의 CSS 를 url(../media/ 를 /_next/static/media/ 로 바꿔 같은 origin 의 <style> 로 갈아 끼워 견줘요. 다른 origin 의 <link> 로 바꾸면 글꼴을 다시 받아 글자 폭이 0.04px 달라져요
근거: #315 에서 따로 연 dev 와 dev 가 152번 가운데 16번 달랐고(흘려 넣는 script 자리, article 의 auto margin), CSS 를 갈아 끼운 비교는 대조가 152번 모두 같았어요

바퀴

바퀴 142 · 후보: 저널 — 고친 곳: web/src/app/globals.css(.journal-list-number, .journal-figure 와 -wide · -full, .journal-index-thumb span, .journal-cover-slot span 과 ::before) · 까닭: 저널 76쪽 어디서도 맞는 요소가 없거나 아무것도 바꾸지 않는 규칙이 61줄이었다

남은 것

• 그림 창의 close 단추가 작아요: 오늘 이 브랜치 빌드에서 390 과 1440 모두 44.2×18.8px 예요. 높이가 24px 밑이라 폰에서 누를 자리가 좁아요. 바탕을 눌러도 닫히지만 단추는 그 하나예요. globals.css:1646 의 .journal-lightbox-close 예요.
• 저널의 작은 링크: 오늘 390 에서 언어 전환 ko · en 이 17.7×18.8px, 글 쪽 맨 위 「All writing」 이 114.1×17.0px 이에요. 1440 에선 .journal-lockup 이 판 폭 1180×88px 를 다 차지해서 「Patternflow」 오른쪽 빈 곳을 눌러도 첫 화면으로 가요(390 은 342×50px).
• 겹친 표지 칸 규칙: .journal-cover-slot(globals.css:1249)은 .journal-hero-cover 안에서만 그려지는데, :1425 가 그 margin-top, display, overflow, border, background 를 다 덮어써서 듣는 값은 position: relative 하나예요. align-items 와 justify-content 는 block 에선 듣지 않아요. .journal-cover-slot img(:1259)와 :1435 도 display, width, height, max-width 를 둘 다 적어요. 한 쌍으로 합치면 돼요.

https://claude.ai/code/session_01Gdqi6PP5SVyTK6YeNSu1Pn

---

Generated by Claude Code