[DONE] 가이드 끝의 「다음」 링크가 사이트 안 쪽은 다시 불러오지 않고 넘어가고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열린다

[patternflow-bot]

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

가이드 끝 링크가 전부 맨 링크에 ↗ 였어서, Audio 의 All guides 를 누르면 3D 무대까지 통째로 다시 불러왔고 GitHub 문서는 가이드를 덮고 같은 탭에서 열렸어요. 이제 가이드 안 쪽은 무대를 그대로 둔 채 넘어가고, Pattern Lab 이나 Editions 같은 사이트 안 쪽은 → 를 달고 다시 불러오지 않고 열리고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열려요.

좋아지는 것: 가이드 끝 링크가 사이트 안에선 바로 넘어간다 — 3D 무대를 다시 기다리지 않는다

• 앞 바퀴 PR([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96–[DONE] 첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다 #101) 댓글·리뷰 확인: 없음
• GuideExperience.tsx 끝 링크를 가이드 안, 사이트 안, 밖으로 가르기
• pages.test.ts 에 시험 더하기
• lint · typecheck · build · check:ci · check:voice
• 브라우저에서 눌러 보기, 폰 390 · 데스크톱 1440 사진
• PR 검사 초록: Drift checks, Web CI (head 40fdffd)

한 일

components/guide/pages.ts 에 linkWay(href) 를 더했어요. 주소 하나를 받아 셋 가운데 하나로 돌려줘요. /guide, /guide/ko 처럼 가이드의 한 쪽이면 guide 와 그 쪽, 그 언어예요. / 로 시작하는 다른 주소는 site, 나머지는 away 예요. 커뮤니티는 community.patternflow.work 라는 다른 호스트라 away 예요.

GuideExperience.tsx 의 끝 링크는 이 값대로 그려요. guide 는 GuideLink 예요. 허브의 세 갈래와 「다음 가이드」가 이미 쓰는 그 링크라, 글이 먼저 빠지고 무대가 남은 채 다음 쪽이 들어와요. site 는 Next 의 Link 에 → 예요. away 는 target="_blank" rel="noopener noreferrer" 에 ↗ 예요. 꼴은 build/BuildCards.tsx 의 Links 를 따랐어요.

Guide.module.css 에선 → 단추에 data-in 을 달아, 가리켰을 때 화살표가 ↗ 처럼 위로 비껴 가지 않고 옆으로만 2px 가요. 움직임 줄이기를 켜면 그것도 안 움직여요.

pages.test.ts 는 네 가이드의 끝 링크를 두 언어로 다 읽어요. away 는 모두 https:// 로 시작하고, 가이드로 돌아가는 링크는 읽던 언어 그대로예요. Audio 영어 판은 GitHub 다섯 개가 away, Editions 가 site, All guides 가 guide 예요.

증거

브라우저(/guide/audio#next, 1440)에서 눌러 본 결과예요. 누르기 전에 window.__mark 를 심어 두고, 넘어간 뒤에도 남아 있으면 같은 문서에서 넘어간 거예요.

All guides -> /guide · window kept · canvas 1
Editions -> /editions · window kept · canvas 0
The MIDI map -> new tab https://github.com/engmung/Patternflow/blob/main/docs/midi-spec.md · guide still on /guide/audio

빌드한 HTML 에서 읽은 끝 링크예요.

play     /pattern-lab same →, community new-tab ↗, /editions same →, /features same →
build    BUILD_GUIDE §10 new-tab ↗, youtu.be ×2 new-tab ↗, BUILD_GUIDE.md new-tab ↗
make/ko  /editions same →, /features same →
audio    GitHub ×5 new-tab ↗, /editions same →, /guide same →
audio/ko GitHub ×5 new-tab ↗, /editions same →, /guide/ko same →

두 사진 다 All guides 를 가리킨 채 찍었어요. 1440 사진은 왼쪽 무대가 어둡게 찍혔어요. 이번 PR 은 무대를 건드리지 않아요.

web/ 에서 돌린 명령과 각 출력의 끝줄이에요.

$ npm ci
Run `npm audit` for details.
$ npm run lint -- --max-warnings=0
> eslint --max-warnings=0          (출력 없음, 종료 0)
$ npm run typecheck
> tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel          (출력 없음, 종료 0)
$ npm run build
ƒ  (Dynamic)  server-rendered on demand          (종료 0)
$ npm run check:ci
passed   virtual-panel          (roadmap 만 skipped, 종료 0)
$ npx vitest run src/components/guide/pages.test.ts
      Tests  21 passed (21)
$ npm run check:voice
check:voice: nothing found

PR 검사는 head 40fdffd 에서 Drift checks | completed | success, Web CI | completed | success 예요. dev 는 그새 움직이지 않았어요(da545bd).

실행법

web/ 에서 npm run build && npx next start -p 3100 다음 http://localhost:3100/guide/audio#next 를 열어요. All guides 를 누르면 무대가 그대로 있고 글만 바뀌어요. The MIDI map 은 새 탭에서 열려요.

가정

후보 줄은 안(→)과 밖(↗)의 둘로 나누자고 했는데, 가이드 안 쪽은 셋째로 따로 뒀어요. GuideExperience.tsx 머리 주석이 가이드의 다른 쪽으로 가는 길은 GuideLink 라고 정해 두었고, 맨 Link 로도 무대는 남지만 글이 빠지는 넘김이 없어요. 가이드 쪽 주소에 # 이 붙으면 GuideLink 가 그걸 버리니 site 로 보내요. 지금 끝 링크엔 그런 주소가 없어요.

새 탭에서 열린다는 걸 화면 읽기 프로그램에 따로 알리지는 않았어요. ↗ 는 aria-hidden 그대로이고, BuildCards.tsx 의 Links 도 그렇게 해요.

표 밖에서 본 것 둘은 고치지 않았어요. app/globals.css:165 의 a:hover { text-decoration: underline } 가 .nextLink 의 text-decoration: none 보다 세서, 끝 단추는 이번 PR 전에도 가리키면 밑줄이 생겨요(사진의 All guides). Audio 첫 장의 「Open patternflow.work/editions」(copy/audio.ts:329)는 사이트 안 쪽인데 ↗ 를 달고 새 탭에서 열려요. 설치하는 동안 가이드를 띄워 두려고 그런 것일 수 있어요.

Changelog

Web

• The links at the end of each guide say where they go. All guides moves to the hub over the same 3D stage instead of reloading the page. A link to another page of the site carries → and opens in the same tab without a reload, and a link away from it carries ↗ and opens in a new tab.

바퀴

바퀴 7 · 후보 7 「가이드 끝의 「다음」 링크가 사이트 안 쪽은 다시 불러오지 않고 넘어가고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열린다」

다음 바퀴

8 「한국어 가이드에서 화면 읽기 프로그램이 한국어 이름을 읽는다」: 이번에 고친 GuideExperience.tsx 옆이고, aria-label 몇 개와 alt 를 copy.ts 로 옮기는 일이라 작아요.
9 「Pattern Lab 의 대화창이 Esc 로 닫히고, 위 메뉴는 터치와 키보드로도 닫힌다」: 폰에서 Panels 메뉴가 독 위에 열린 채 남아서, 4바퀴에서 고친 폰 배치를 쓰는 사람이 바로 부딪혀요.
10 「커뮤니티 창의 닫기 단추를 폰에서 누르기 쉽고, 지도의 점에 키보드 초점이 보인다」: 닫기 단추 자리가 20px 남짓이라 손가락으론 자주 빗나가요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UJHz7zdTtWcrSLRtkJFMx3

---

Generated by Claude Code