[DONE] 링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다

[patternflow-bot]

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

링크를 메신저나 X 에 붙이면 이제 쪽마다 제 제목과 그림이 떠요. 지금은 /pattern 과 가이드 쪽이 그림 없이 나가고, 미리보기를 따로 두지 않은 /features 같은 쪽은 첫 화면으로 보여요. 머지하면 /build/breadboard 도 제 탭 제목을 얻어요.

좋아지는 것: 링크를 붙이면 쪽마다 제 제목과 그림이 뜬다 — 나눈 쪽이 첫 화면으로 보이지 않는다

할 일

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 앞 바퀴 PR([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96) 의 대화 댓글·리뷰·줄 댓글 읽기: 셋 다 0개라 맡을 글이 없음
• 후보 2 를 고르고, dev 빌드에서 아직 안 고쳐졌음을 확인
• 고치기, 새 시험 src/app/metadata.test.ts
• lint · typecheck · build · check:ci · check:voice
• dev merge

한 일

Next 는 메타데이터를 한 겹만 합쳐요. 쪽이 openGraph 를 두면 뿌리 레이아웃의 openGraph 가 그림까지 통째로 빠지고, 두지 않으면 뿌리 것을 그대로 물려받아요. 뿌리에 첫 화면의 제목과 주소가 있었고 twitter.title 도 있어서, Next 가 쪽의 og:title 을 twitter:title 로 옮겨 주는 길도 막혀 있었어요(node_modules/next/dist/lib/metadata/metadata-resolution-primitives.js 의 postProcessMetadata).

• src/lib/siteMetadata.ts: 모든 쪽이 나누는 SITE_OPEN_GRAPH(type, siteName, og-image.png). Next 문서의 「Overwriting fields」가 권하는 꼴이에요.
• src/app/layout.tsx: openGraph 는 SITE_OPEN_GRAPH 만, twitter 는 card 만. 제목과 주소가 없으니 미리보기를 안 둔 쪽은 제 title 과 description 을 쓰고, X 카드는 쪽의 og: 를 따라가요.
• src/app/page.tsx: 첫 화면의 미리보기 글을 뿌리에서 옮겼어요. 글자 하나 안 바뀌었어요.
• /pattern, /build, /inside, /inside/[build], 가이드(components/guide/meta.ts): SITE_OPEN_GRAPH 를 펼쳐 넣어 그림을 지켜요. 지도의 빌드는 사진이 있으면 사진, 없으면 사이트 그림이에요.
• /features, /contact, /terms, /update: og:url 이 제 주소예요.
• src/app/build/breadboard/layout.tsx(새 파일): page.tsx 가 클라이언트 컴포넌트라 메타데이터를 못 내보내서, 레이아웃이 제목·설명·canonical·미리보기를 둬요. 설명은 쪽 머리글에서 가져왔어요.
• src/app/sitemap.ts: /build/breadboard 와 /update 를 더했어요.

증거

빌드한 HTML(.next/server/app/*.html)에서 읽은 값이에요. 앞은 dev(d6d4eb1), 뒤는 이 브랜치예요.

쪽	og:title 앞 → 뒤	og:image 앞 → 뒤	twitter:title 뒤
/pattern	제 것 → 제 것	없음 → og-image.png	Live Editor & Patterns — Patternflow
/guide/build	제 것 → 제 것	없음 → og-image.png	Build a Patternflow
/guide/ko	제 것 → 제 것	없음 → og-image.png	패턴플로우 가이드
/features	첫 화면 → Features / Patternflow	있음 → 있음	Features / Patternflow
/update	첫 화면 → Firmware update / Patternflow	있음 → 있음	Firmware update / Patternflow
/editions	첫 화면 → Firmware / Patternflow	있음 → 있음	Firmware / Patternflow
/build/breadboard	첫 화면 → Breadboard Build Guide / Patternflow	있음 → 있음	Breadboard Build Guide / Patternflow
/inside/seunghun-korea	제 것 → 제 것	빌드 사진 → 빌드 사진	The first build — Seunghun LEE · Seoul, Korea | Patternflow
/	첫 화면 → 첫 화면	있음 → 있음	Patternflow — An LED synthesizer

앞에서 twitter:title 은 / 말고도 표의 여덟 쪽 다 「Patternflow — An LED synthesizer」였어요. og:url 은 /features, /contact, /terms, /update, /build/breadboard 에서 https://patternflow.work 이던 것이 제 주소가 됐어요. /editions, /roadmap, /journal 은 고치지 않은 파일이라 og:url 이 첫 화면 주소에서 빠졌어요. 첫 화면은 og:site_name 줄과 twitter:image 의 크기 줄이 늘었을 뿐 나머지 태그는 같아요. sitemap 은 <url> 116개이고 /build/breadboard, /update 가 들어 있어요.

새 시험은 13건이에요. 뿌리 레이아웃, /pattern, 가이드 메타를 dev 판으로 되돌리고 돌리면 3건이 빨개져요.

npx vitest run src/app/metadata.test.ts      (dev 판 세 파일)
      Tests  3 failed | 10 passed (13)
npx vitest run src/app/metadata.test.ts      (이 브랜치)
      Tests  13 passed (13)

web/ 에서 돌린 다섯의 끝줄이에요.

npm ci                              added 794 packages, and audited 795 packages in 32s
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 (135/135) in 12.6s
npm run check:ci                    passed virtual-panel   (Vitest 37 files, 508 tests passed · roadmap 은 gh 로그인이 없어 skipped)
npm run check:voice                 check:voice: nothing found

화면 사진은 찍지 않았어요. 바뀐 것은 <head> 의 메타 태그뿐이라 390px 와 1440px 화면에 보이는 것이 같아요. /build/breadboard 의 탭 제목은 위 표의 og:title 과 같은 「Breadboard Build Guide / Patternflow」예요.

실행법

cd web
npm run build
grep -o '<meta \(property\|name\)="\(og\|twitter\):[^>]*>' .next/server/app/features.html
npx vitest run src/app/metadata.test.ts

가정

• 고칠 곳 목록의 파일만 고쳤어요. /editions, /roadmap, /journal, /compliance 와 커뮤니티 쪽은 창작자 영역이거나 목록 밖이라 손대지 않았고, 뿌리 레이아웃을 고친 것만으로 제 제목과 그림을 얻어요. 이 쪽들엔 og:url 이 없어요. 첫 화면 주소를 다는 것보다 없는 편이 나아요. 페이스북은 og:url 을 그 쪽의 정본 주소로 읽어서, 첫 화면 주소를 단 쪽을 첫 화면 카드로 묶어요.
• 비공개 커뮤니티 패턴은 메타데이터가 비어서 앞에선 첫 화면 제목, 이제 커뮤니티 레이아웃 제목 「Community / Patternflow」로 나가요. 패턴 제목은 여전히 안 드러나요.
• og:site_name(「Patternflow」)을 모든 쪽에 더했어요. 슬랙은 이 값을 카드 위에 사이트 이름으로 보여 줘요.
• /features, /contact, /terms, /update, /build/breadboard 는 og:title 을 따로 적지 않고 쪽의 title 을 쓰게 뒀어요. 같은 글을 두 곳에 두지 않으려고요.
• 공유 모듈은 Next 문서처럼 app/shared-metadata 에 두지 않고 src/lib/siteMetadata.ts 에 뒀어요. components/guide/meta.ts 도 써야 하는데 components/ 가 app/ 를 부르는 곳이 레포에 없어서예요. 시험은 거꾸로 lib/ 가 components/·app/ 를 못 부르는 lint 규칙 때문에 src/app/metadata.test.ts 에 뒀어요(첫 커밋의 Web CI 가 그 규칙으로 빨개졌고 다음 커밋에서 옮겼어요).
• sitemap 우선순위는 /build/breadboard 0.5, /update 0.4 로 정했어요.
• 표 밖: /contact, /terms, /update 는 alternates.canonical 이 없어요(/features, /editions 엔 있어요).

Changelog

Web

• A link to any page previews with that page's own title and picture. The guide pages and the home page's tabs went out with no image, and pages without Open Graph tags of their own, such as /features and /editions, previewed as the home page. twitter:title was the home page's everywhere. /build/breadboard has its own title now, and it and /update are in the sitemap.

바퀴

바퀴 2 · 후보 2 「링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다」

다음 바퀴

• 후보 3 「Pattern Lab 의 Del 이 레이어를 지우기 전에 한 번 묻는다」. 되돌릴 길이 없고 자동 저장이 곧 덮어써서 실수 한 번에 픽셀 그림이 사라져요.
• 후보 4 「폰에서 Pattern Lab 패널이 한 칸씩 넓게 보인다」. 390px 에서 세 칸으로 눌려 글이 잘리고 Knobs 칸 입력이 밖으로 나가요.
• 후보 5 「Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다」. passive 리스너라 preventDefault() 가 먹지 않아요. 같은 Lab 의 useTimelineZoom.ts 에 고친 꼴이 있어요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01XcyiJssExyAsixL6TfR9mb