[patternflow-bot]

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

데스크톱에서 저널 목록의 날짜 칸이 120px 로 막혀 있어서, 「2026년 5월 29」 아래에 「일」 하나만 내려간 줄이 한국어 37개 가운데 27개, 영어 37개 가운데 17개였어요. 머지하면 날짜 칸이 제 날짜만큼 넓어져서 모든 날짜가 한 줄에 서요. 폰 화면은 그대로예요.

좋아지는 것: 저널 목록의 날짜가 한 줄에 선다 — 데스크톱 목록이 반듯하게 읽힌다

체크리스트

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 창작자 지시 1~10 이 다 끝났는지 보기(지시 10 은 [DONE] 바퀴 106~132 가 고칠 커뮤니티 후보 35줄이 서고, 남의 이름으로 보이는 구멍이 맨 위에 선다 #273)
• 앞 바퀴 PR 댓글 · 리뷰 · 줄 댓글(세 직함만) 읽기 — 일을 시키는 글 없음
• 저널 76쪽을 390px 와 1440px 로 재서 하나 고르기 — 목록의 날짜 꺾임
• 시험을 먼저 쓰고 dev 의 CSS 에서 빨간지 보기
• 다섯 검사 · 전후 사진
• dev merge(dev f4e7130 가 이미 들어 있음) · 검사 초록 · 겹침 기다리기 「안 겹친다」

한 일

• web/src/app/globals.css 의 .journal-post-list a 그리드를 1fr 120px 80px 에서 minmax(0, 1fr) minmax(120px, max-content) 80px 로 바꿨어요. 날짜 칸은 120px 밑으로 줄지 않고, 날짜가 더 길면 그만큼 넓어져요.
• 같은 파일의 .journal-list-meta 에 white-space: nowrap 을 더했어요. 글 쪽 아래 목록(.journal-context-list .journal-list-meta)은 이미 그랬어요.
• 새 web/src/components/journal/journalCss.test.ts 가 globals.css 를 읽어 날짜 칸이 max-content 를 쓰는지, 날짜가 줄을 바꾸지 않는지 봐요.

증거

dev 빌드를 Chromium 으로 열어 목록의 날짜 칸마다 줄 수를 셌어요. 721px 부터 1920px 까지 일곱 폭 모두 같았어요.

	dev	이 브랜치
/journal 1440 · 두 줄인 날짜	27 / 37	0 / 37
/journal/en 1440 · 두 줄인 날짜	17 / 37	0 / 37
1440 · 날짜 오른쪽 끝 x	1042 하나	1042 하나
1440 · 줄 높이	88, 89	88, 89
390 · 두 줄인 날짜 · scrollWidth	0 · 390	0 · 390

두 줄인 날짜 수는 dev 빌드에서 쟀고, 날짜 끝 x 와 줄 높이의 dev 칸은 이 브랜치 빌드에 dev 의 두 규칙을 덮어 잰 값이에요. 꺾이던 날짜의 폭(1440, 한 줄로 늘였을 때)은 한국어가 113122px(두 자리 달과 날이면 130.5px), 영어가 97159px(「SEPTEMBER 29, 2026」)였어요.

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

× journal archive dates > sizes the date column to its date
  AssertionError: the date track: expected '120px' to match /max-content/
× journal archive dates > keeps a date on one line
  AssertionError: expected false to be true
Tests  2 failed (2)

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

다섯 검사(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
npm run check:ci                    → exit 0 · Test Files 129 passed (129) · Tests 1589 passed (1589)
                                      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 23a3170): Drift checks | completed | success, Web CI | completed | success.

전후 사진은 /journal 에서 「머리아파」 줄을 가운데 둔 화면이에요. 폰 두 장은 같아야 맞아요. 사진 속 글 목록과 날짜 37줄도 전후가 같았어요(diff 출력 없음).

실행법

cd web
npx vitest run src/components/journal/journalCss.test.ts
npm run build && npx next start -p 3100
# 1440px 에서 /journal 과 /journal/en 을 열고 「오늘은 내 생일」, 「September 29」 줄의 날짜를 본다

가정

• 저널 감 가운데 이것을 골랐어요. 「창작자가 열어야 하는 것」의 날짜 시간대 줄도 이번 빌드에서 재현했어요(아래 「다음 바퀴」 1). 그 줄은 글 넷의 날짜가 하루 앞서는 일이고, 이 줄은 데스크톱에서 목록을 여는 사람 모두가 보는 깨짐이라 먼저 했어요.
• 목록의 줄은 줄마다 제 그리드라서 날짜 칸 폭이 줄마다 달라요(영어에서 최대 39px). 날짜는 오른쪽 맞춤이라 오른쪽 끝은 한 x 에 서고, 제목 칸 왼쪽 끝도 그대로예요. 1024px 부터는 줄 높이도, 잘린 소개 글 수(0)도 dev 와 같아요. 줄을 모두 한 칸으로 맞추려면 subgrid 로 목록을 다시 짜야 해서 하지 않았어요.
• 721px 의 영어 목록은 긴 날짜 줄의 제목 칸이 153px 에서 114px 로 좁아져요. 제목 몇이 한 줄 더 꺾여서 목록이 3,619px 에서 3,760px 로 길어져요. 한국어(3,315px)는 그대로예요. 제목이 꺾이는 건 글이 흐르는 것이고, 날짜에서 「일」 만 떨어지는 건 깨진 것이라고 봤어요. 721900px 의 제목 칸은 dev 에서도 153330px 로 좁아요.
• white-space: nowrap 은 폰에도 걸려요. 폰에선 날짜가 10.5px 라서 280px, 320px, 360px 에서도 칸을 넘지 않았어요(scrollWidth 가 폭과 같음).
• 첫 npm run build 는 Google 글꼴(Newsreader)을 못 찾는 오류 12개로 끝났고, 아무것도 바꾸지 않고 다시 돌리니 지났어요.
• 표 밖: 목록과 글 쪽의 큰 회색 번호(.pf-ghost, #C9C2B0)는 axe 가 대비 1.55~1.77:1 로 잡아요. 여러 화면이 같이 쓰는 클래스이고 장식 숫자라 건드리지 않았어요. 글 쪽 OG 그림(app/journal/[slug]/opengraph-image.tsx:54)은 날짜를 2026-05-14T01:30:00+09:00 같은 머리말 글 그대로 찍어요.

Changelog

Web

• Journal archive dates stay on one line on a desktop. The index's date column was a fixed 120px, so above 720px 27 of the 37 Korean dates and 17 of the 37 English ones broke onto a second line. The column now grows to fit its date.

경험

언제: 바퀴 컨테이너에서 npm ci 바로 뒤 처음 npm run build 를 돌릴 때
교훈: Turbopack 이 Newsreader 에서 Can't resolve '@vercel/turbopack-next/internal/font/google/font' 로 멈추면 코드를 의심하지 말고 빌드를 한 번 더 돌려요
근거: #306 에서 첫 빌드가 이 오류 12개로 exit 1 이었고, 아무것도 바꾸지 않고 다시 돌리니 exit 0 이었어요

바퀴

바퀴 133 · 후보: 저널 — 고친 곳: web/src/app/globals.css(.journal-post-list a, .journal-list-meta) · 까닭: 데스크톱 저널 목록의 120px 날짜 칸이 한국어 날짜 37개 가운데 27개, 영어 17개를 두 줄로 꺾었다

다음 바퀴

• 날짜 시간대(web/src/lib/journal.ts:131 의 formatJournalDate 에 timeZone: "Asia/Seoul"): UTC 로 돈 이번 빌드에서 /journal/headache 가 「2026년 5월 13일」(서울 5월 14일 01:30에 씀), /journal/stopped 가 「5월 22일」, /journal/i-hope-it-works-out 이 「7월 17일」이었어요. negative 까지 글 넷의 두 언어 판, 8곳이에요.
• 흐린 글자 대비: 언어 전환의 꺼진 쪽(.journal-lang-switch, #A69F90)이 목록의 흰 바탕에서 2.63:1, 글 쪽 크림에서 2.29:1 이고, 목록의 「Archive」(.journal-archive-label)도 2.63:1 이에요. axe 가 저널 76쪽 모두에서 잡아요. 토큰은 두고 저널 규칙에서 있는 --ink-muted(#6B655A)로요.
• 글 쪽에 <main> 이 없다: ArticleLayout.tsx 가 <article> 과 <footer> 를 바로 그려서, axe 가 글 74쪽 모두에서 landmark-one-main 과 region(쪽마다 4~70곳)을 잡아요. 목록 쪽은 <main className="journal-index"> 라 0이에요.

https://claude.ai/code/session_01Gdqi6QqcA76T4w7qfdapZB

---

Generated by Claude Code