[patternflow-bot]

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

폰에서 저널 글을 읽으면 오른쪽 위 「KO EN」 이 화면에 붙어 있어서, 스크롤하는 본문 줄 끝 위로 겹쳐 지나갔어요. 390px 에서 글 74쪽 모두, 8,801줄이었어요. 머지하면 「KO EN」 은 처음 그 자리에 그대로 서 있다가 쪽과 같이 올라가서 본문을 가리지 않아요. 데스크톱은 그대로예요.

좋아지는 것: 폰에서 저널 글 위로 KO EN 이 겹치지 않는다 — 줄 끝까지 읽힌다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 6~10 이 다 끝났는지 보기(6 [DONE] 텍스트 레이어의 글을 비우면 미리보기도 비고, 판을 돌린 흐르기 글이 다시 열어도 살고, 글꼴을 못 남기면 그렇다고 말한다 #244, 7 [DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246, 8 [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268, 9 [DONE] 커뮤니티 메뉴에서 Atlas 가 빠지고, 아틀라스는 쪽 아래 Archive 링크로 닿는 읽기 전용 보관함이 된다 #271, 10 [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 앞 바퀴 PR 댓글 · 리뷰 · 줄 댓글(세 직함만) 읽기 — [DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306~[DONE] 저널의 다른 언어 링크와 Archive 글자가 바탕에서 또렷하게 읽힌다 #308 에도, 오늘 저장소 전체에도 글 없음
• 133~135바퀴 PR([DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306, [DONE] 저널 날짜가 어디서 빌드하든 글을 쓴 서울 날짜로 찍힌다 #307, [DONE] 저널의 다른 언어 링크와 Archive 글자가 바탕에서 또렷하게 읽힌다 #308) 읽고 같은 주제 피하기
• dev 빌드의 글 74쪽을 여덟 폭으로 재서 언어 전환 밑을 지나는 본문 줄 세기
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진
• dev merge(dev 281e432 가 이미 들어 있음) · 검사 초록 · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 의 @media (max-width: 720px) 안에 .journal-article .journal-lang-switch { position: absolute; } 를 더했어요. 글 쪽의 언어 전환은 위치가 fixed 라서, 720px 이하에서 오른쪽 22px 에 붙어 본문 칸 안에 들어와 있었어요. 감싼 상자 가운데 위치를 가진 것이 없어서 top: 18px, right: 22px 이 그대로 쪽 맨 위를 가리켜요. 처음 화면은 같고, 스크롤하면 쪽과 같이 올라가요.
• 목록 쪽의 언어 전환(.journal-panel .journal-lang-switch, 폰에서 static)과 721px 이상은 건드리지 않았어요.
• web/src/components/journal/journalCss.test.ts 에 시험 둘을 더했어요. globals.css 의 720px 미디어 블록을 따로 읽어, 글 쪽 언어 전환이 absolute 인지, 목록 쪽 것이 static 그대로인지 봐요.

증거

dev 빌드와 이 브랜치 빌드를 next start 로 띄우고 /journal, /journal/en 에서 잇는 글 74쪽을 열었어요. 쪽마다 .journal-article 의 글자 줄(Range.getClientRects)을 다 모아, 언어 전환 링크의 x 범위에 걸치는 줄을 셌어요. fixed 면 스크롤하며 그 줄이 모두 전환 밑을 지나고, absolute 면 쪽 맨 위 제자리에 걸치는 줄만 세요.

폭	dev · 겹치는 쪽	dev · 겹치는 줄	이 브랜치 · 쪽	이 브랜치 · 줄
360	74 / 74	9,933	0	0
390	74 / 74	8,801	0	0
600	74 / 74	4,931	0	0
720	74 / 74	3,874	0	0
721 · 800 · 1024 · 1440	0	0	0	0

dev 390 의 예: /journal/a-strange-dream 은 전환이 x 323~368 에 서고, 본문 칸이 342 에서 끝나서 그 사이를 지나는 줄이 68개였어요.

처음 화면은 그대로예요. dev 빌드에 이 규칙만 끼워 /journal/headache, /journal/headache/en, /journal, /journal/en 을 360, 390, 720, 721, 1440 에서 견주니, 스무 경우 모두 전환의 자리(390 글 쪽은 322.63, 18, 45.38 × 18.84)와 쪽 높이가 같았고 첫 화면 PNG 가 바이트까지 같았어요.

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

× journal language switch on a phone > scrolls away with a post instead of staying over its text
  → expected undefined to be 'absolute' // Object.is equality
✓ journal language switch on a phone > keeps the index's switch in the panel's flow
Tests  1 failed | 6 passed (7)

고친 뒤엔 Tests 7 passed (7) 예요.

다섯 검사(web/ 에서):

npm ci                              → exit 0 (added 1024 packages)
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0 (tsc 둘 다)
npm run build                       → exit 0 (dev 판도, 이 브랜치 판도 처음 한 번에)
npm run check:ci                    → exit 0 · Test Files 130 passed (130) · Tests 1599 passed (1599)
                                      drift 14 passed, links-absolute · roadmap skipped (태그 없음 · gh 로그인 없음)
npm run check:voice                 → check:voice: nothing found
npm run check:voice -- -            → (PR 본문) check:voice: nothing found

PR 의 검사(head 316e7a0): Drift checks | completed | success, Web CI | completed | success.

전후 사진은 「머리아파」 한국어판과 영어판을 1,180px 내린 화면이에요. 폰 한국어판은 dev 에서 「더욱」 위에 「KO」 가 겹쳐 있고, 영어판은 줄 사이 흰 판 위에 떠 있어요. 데스크톱은 전후 PNG 가 바이트까지 같아요.

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 폰 폭(390px)으로 /journal/headache 를 열고 내리면, 오른쪽 위 KO EN 이 쪽과 같이 올라간다

가정

• 저널 감 가운데 이것을 골랐어요. 135바퀴가 「다음 바퀴」 에 둔 셋(글 쪽 <main>, OG 그림 날짜, 안 쓰는 .journal-list-number)보다, 폰으로 글을 읽는 사람 모두가 글자가 가려지는 걸 보는 깨짐이라 먼저 했어요. 셋은 아래 「다음 바퀴」 에 그대로 두었어요.
• 135바퀴([DONE] 저널의 다른 언어 링크와 Archive 글자가 바탕에서 또렷하게 읽힌다 #308)도 .journal-lang-switch 를 고쳤지만 글자색이었어요. 이번엔 폰에서의 자리만 바꿔서 같은 주제가 아니라고 봤어요. 그 색 규칙은 그대로예요.
• 폰에서 전환을 계속 화면에 붙여 두는 쪽(바탕을 깔거나 본문 오른쪽 여백을 넓히기)도 생각했어요. 바탕은 새 요소에 가깝고, 여백은 본문 폭이 바뀌어요. 그래서 처음 자리는 그대로 두고 따라 올라가게만 했어요. 글 끝에서 언어를 바꾸려면 맨 위로 올라가야 해요. 목록 쪽 폰 화면도 이미 그래요(static).
• top, right 는 감싼 상자에 위치가 없어서 쪽 맨 위에서 재요. 나중에 .journal-article 이나 .journal-shell 에 position: relative 가 붙으면 전환이 그 상자 안으로 옮겨가요. CSS 주석에 처음 자리가 같다고 적었어요.
• 표 밖: 7211044px 에선 전환(800px 에서 x 711766)이 흰 판의 오른쪽 끝(752)에 걸쳐 판 위를 지나가요. 본문 글자에는 닿지 않아서(본문 끝 688) 두었어요.

Changelog

Web

• A journal post's language switch no longer sits over the text on a phone. Below 721px it was fixed 22px from the right edge, inside the column of text, and at 390px the 74 posts scrolled 8,801 lines of text under it. It now starts in the same place and scrolls away with the page.

경험

언제: CSS 한 줄이 처음 화면을 바꾸지 않는다는 걸 보일 때
교훈: 고친 판을 다시 빌드하기 전에 dev 빌드에 page.addStyleTag 로 그 규칙만 끼워 첫 화면 PNG 를 바이트로 견줘요. 다시 빌드하지 않고 폭 다섯과 쪽 넷을 한 번에 봐요
근거: #309 에서 이렇게 스무 경우가 모두 바이트까지 같았고, 그 뒤 고친 판을 빌드해 잰 겹침 수(8,801 → 0)도 끼운 판과 같았어요

바퀴

바퀴 136 · 후보: 저널 — 고친 곳: web/src/app/globals.css(@media (max-width: 720px) 의 .journal-article .journal-lang-switch) · 까닭: 폰에서 글 쪽의 고정된 언어 전환이 글 74쪽 모두에서 본문 줄 끝 위로 겹쳤다(390px 에서 8,801줄)

다음 바퀴

• 저널의 두 <footer> 가 첫 화면용 전역 footer 규칙(globals.css:888, 좌우 60px, 900px 이하 0, 640px 이하 30px 0 34px)을 받아요. 그래서 글 쪽 아래 목록(.journal-article-footer)은 1440 에서 본문보다 4px(306 대 310), 800 에서 64px(48 대 112), 390 에서 24px(24 대 48) 왼쪽에서 시작해요. 목록 쪽 아래 줄(.journal-index-footer)도 1440 에선 판 글과 같은 190 이지만 800 에서 48 대 108, 390 에서 24 대 48 이에요. 저널 규칙이 좌우 여백을 제 판에 맞춰 정하면 돼요.
• 글 쪽에 <main> 이 없다: ArticleLayout.tsx:49 가 <article>, :90 이 <footer> 를 바로 그려요. 목록 쪽은 <main className="journal-index"> 예요. 133 · 135바퀴가 axe 로 글 쪽마다 landmark-one-main 을 봤어요.
• 안 쓰는 저널 규칙: .journal-list-number(globals.css:1144, :1321)에 더해 .journal-figure, .journal-figure-wide, .journal-figure-full 과 그 img, video, figcaption, 폰 규칙도 컴포넌트와 글 74개 어디서도 그리지 않아요(글은 journal-md-figure 120곳, journal-figure-row 10곳만 써요). .journal-index-thumb span, .journal-cover-slot span 도 next/image 가 <span> 을 그리지 않아 닿는 것이 없어요.

https://claude.ai/code/session_01Gdqi6RyGJH2ThE3JBCDamg

🤖 Generated with Claude Code