[patternflow-bot]

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

저널 글 링크를 카톡이나 X 에 붙이면 뜨는 공유 카드가 날짜 자리에 머리말 시각 2026-05-14T01:30:00+09:00 을 그대로 찍었어요. 37편 모두요. 머지하면 그 자리에 글 쪽이 찍는 서울 날짜가 카드 윗줄 꼴대로 MAY 14, 2026 으로 찍히고, 카드의 나머지는 그대로예요.

좋아지는 것: 공유 카드에 날짜가 읽히는 꼴로 찍힌다 — 링크를 받은 사람이 시각 문자열 대신 날짜를 본다

체크리스트

• 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] 아이폰에서 커뮤니티 글 칸을 눌러도 쪽이 확대되지 않는다 #290~[DONE] 화면 낭독기가 저널 글 쪽에서 본문으로 바로 건너뛴다 #312) 댓글 · 리뷰 · 줄 댓글 읽기 — 글 없음
• 133139바퀴 PR([DONE] 데스크톱 저널 목록에서 날짜가 두 줄로 꺾이지 않는다 #306[DONE] 화면 낭독기가 저널 글 쪽에서 본문으로 바로 건너뛴다 #312) 읽고 같은 주제 피하기
• dev 빌드의 저널 76쪽을 390 과 1440 에서 넘침 재기(없음), 카드 37장 받기
• 시험을 먼저 쓰고 dev 의 opengraph-image.tsx 에서 빨간지 보기
• 고친 빌드의 카드 37장을 dev 와 견주기, 같은 판 대조 빌드 하나씩
• 다섯 검사 · 전후 사진
• dev merge(dev 24bcfa7 가 이미 들어 있음) · 검사 초록 · 겹침 기다리기

한 일

• web/src/app/journal/[slug]/opengraph-image.tsx 의 날짜 칸이 post?.date 대신 formatJournalDate(post.date, "en") 을 찍어요. 134바퀴가 서울로 맞춘 그 함수라서 UTC 빌드에서도 글을 쓴 서울 날짜가 나와요. 대문자는 윗줄의 textTransform: "uppercase" 가 그대로 해요.
• 새 web/src/app/journal/[slug]/opengraph-image.test.tsx 가 next/og 의 ImageResponse 만 바꿔 끼워 카드에 들어가는 글자를 모아요. 프로세스를 UTC 로 두고 headache 카드에 May 14, 2026 이 있고 머리말 문자열이 없는지, 37편 어느 카드에도 YYYY-MM-DDT 꼴이 없는지 봐요.

증거

새 시험을 dev 의 opengraph-image.tsx 에 돌리면

× journal share card > prints the day the post was written in Seoul, not the frontmatter string
  → expected [ 'patternflow / journal', …(2) ] to include 'May 14, 2026'
× journal share card > gives no card a raw timestamp
  → expected [ 'all-jumbled-up', …(36) ] to deeply equal []
Tests  2 failed (2)

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

카드는 빌드 때 그려져서(generateStaticParams), 빌드를 네 번 하고 37장씩 PNG 를 견줬어요. 빌드 컨테이너는 UTC 예요.

견준 것	다른 카드	다른 곳
dev 빌드 1 · dev 빌드 2	0 / 37	없음
고친 빌드 1 · 고친 빌드 2	1 / 37	the-30th-entry 제목의 「째」 한 글자가 1px 옆
dev · 고친 빌드 2, 날짜 줄(y 82~104)	37 / 37	날짜 칸만(x 731~1122)
dev · 고친 빌드 2, 날짜 줄 아래	0 / 37	없음

「째」 는 고친 빌드 1 에서만 옆으로 갔고 고친 빌드 2 는 dev 와 같았어요. 카드의 한글은 빌드 때 받아 오는 글꼴로 그려서, 같은 판에서도 한 번 그렇게 나온 거예요.

다섯 검사(web/ 에서):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0 (tsc 둘 다)
npm run build                       → exit 0 (route 표에 /journal/[slug]/opengraph-image 하나, 시험 파일은 경로가 되지 않음)
npm run check:ci                    → exit 0 · Test Files 132 passed (132) · Tests 1607 passed (1607)
                                      drift 14 passed, links-absolute · roadmap skipped
npm run check:voice                 → read: 61 added lines in 2 files · check:voice: nothing found
npm run check:voice -- -            → (PR 본문) check:voice: nothing found

roadmap 은 이 컨테이너의 gh 로 원래 레포를 읽지 못해 건너뛰었어요.

PR 의 검사(head 105b880): Drift checks | completed | success, Web CI | completed | success. 겹침 기다리기는 「안 겹친다」 였어요.

저널 76쪽(목록 두 언어와 글 74쪽)을 390×844 와 1440×900 에서 열어 화면 밖으로 나가거나 본문 폭을 넘는 요소를 셌어요. dev 에서 0 이었고, 이번 고침은 쪽을 건드리지 않아요.

전후 사진은 「머리아파」(/journal/headache) 카드예요. 카드는 쪽이 아니라 1200×630 그림 한 장이라서, 폰(390, 화면 폭에서 32px 뺀 폭)과 데스크톱(1440, 제 크기)이 여는 크기로 놓고 찍었어요. 이 글은 서울 5월 14일 01:30 에 써서 UTC 로는 5월 13일이에요.

실행법

cd web
npx vitest run opengraph-image
npm run build && npx next start -p 3100
# http://localhost:3100/journal/headache/opengraph-image 의 오른쪽 위가 MAY 14, 2026

가정

• 139바퀴 「다음 바퀴」 의 셋 가운데 공유 카드 날짜를 골랐어요. 134 · 135 · 138 · 139바퀴가 네 번 적고 하지 않은 감이고, 링크를 받는 사람 누구나 37편 모두에서 봐요. 그림 확대 창의 초점은 마우스로 그림을 누른 뒤 키보드를 쓰는 사람에게만 나와서 다음으로 뒀어요.
• 날짜는 영어로 찍어요. 한국어 쪽과 영어 쪽의 generateMetadata 가 둘 다 /journal/<slug>/opengraph-image 한 장을 가리키고, 카드 윗줄의 다른 글이 영어 대문자(PATTERNFLOW / JOURNAL)예요. 한국어 날짜를 찍으면 그 줄에 한글이 들어가고, 카드의 한글은 빌드 때 바깥에서 받는 글꼴이에요. 제목은 지금처럼 한국어판 제목이에요.
• 화면 글은 그대로예요. 바뀐 것은 날짜를 찍는 꼴뿐이고, web/src/lib/journal.ts 는 건드리지 않았어요.
• 시험 파일 이름은 vitest.config.ts 머리 주석대로 고치는 파일 옆에 opengraph-image.test.tsx 로 뒀어요. Next 의 메타데이터 파일 판별(opengraph-image 뒤에 숫자와 확장자만)에 걸리지 않고, 빌드의 경로 표에도 나오지 않았어요.
• 표 밖: 없음.

Changelog

Web

• A journal post's share card prints a date you can read. The card printed the frontmatter timestamp, 2026-05-14T01:30:00+09:00, on all 37 posts. It now prints the Seoul day the post page shows, in the card's English capitals: MAY 14, 2026.

경험

언제: 저널 바퀴에서 대조 빌드를 레포 밖 git worktree 에서 따로 돌릴 때
교훈: worktree 의 web/node_modules 를 심볼릭 링크로 두면 Turbopack 이 빌드를 멈춰요. cp -al 하드링크로 두면 새로 깔지 않고 몇 초에 빌드가 돌아요
근거: #313 에서 ln -s 로 둔 첫 대조 빌드가 「Symlink node_modules could not be resolved」 로 끝났고, cp -al 로 바꾸니 dev 와 고친 판 대조 빌드가 둘 다 exit 0 이었어요

바퀴

바퀴 140 · 후보: 저널 — 고친 곳: web/src/app/journal/[slug]/opengraph-image.tsx · 까닭: 저널 글 37편의 공유 카드가 날짜 자리에 머리말 시각 2026-05-14T01:30:00+09:00 을 그대로 찍었다

다음 바퀴

• 그림을 크게 열어도 초점이 뒤에 남는다: /journal/a-strange-dream 1440 에서 그림을 누르면 .journal-lightbox(role="dialog", aria-modal="true")가 열리는데 초점은 BODY 그대로이고, Tab 한 번에 창 밖 아래 목록의 링크로 가요(139바퀴가 봤어요). components/journal/JournalLightbox.tsx:69~:91. 열리면 닫기 단추로 초점을 옮기고 Tab 을 창 안에 두면 돼요.
• 안 쓰는 저널 규칙: .journal-list-number(globals.css:1144, :1321), .journal-figure, .journal-figure-wide, .journal-figure-full 과 그 img, video, figcaption(:1638:1652, :1707, 폰 :1998:1999), .journal-index-thumb span(:1242), .journal-cover-slot span(:1271)을 컴포넌트와 글 74개 어디서도 그리지 않아요(136바퀴가 셌어요). 오늘 dev 에서도 줄 번호가 같아요.
• 폰에서 저널의 작은 링크: 오늘 dev 빌드 390 에서 언어 전환 ko · en 이 18×19px, 글 쪽 맨 위 「All writing」 이 114×17px 이에요. 손가락으로 누를 자리가 24px 도 안 돼요. 1440 에선 .journal-lockup 이 판 폭 1180×88px 를 다 차지해서, 「Patternflow」 글자 오른쪽 빈 곳을 눌러도 첫 화면으로 가요.

https://claude.ai/code/session_01Gdqi6Ni4vT2iLiwVC6K3dp

---

Generated by Claude Code