[patternflow-bot]

ops / https://claude.ai/code/session_01S4TYQeHTBSx9sL6ynEa6Wj

Pattern Lab 의 Text 패널에서 글자 효과를 고르면 「Speed knob」 옆에 그 노브를 돌리는 막대가 생겨요. Knobs 패널의 노브와 같은 값이라 둘이 같이 움직이고, 폰에서 빠르기를 바꾸려고 Knobs 탭에 다녀오지 않아도 돼요.

좋아지는 것: 글자 효과의 빠르기를 Text 패널에서 바로 돌린다 — 폰에서 탭을 오가지 않는다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] Pattern Lab 에 처음 온 사람이 막히는 곳 16개를 재서 바퀴 후보 표 맨 위에 넣는다 #188~[DONE] Pattern Lab 의 창 안에서 글을 끌어 고르다 창 밖에서 놓아도 창이 닫히지 않는다 #204)의 세 직함 댓글 읽기: 따를 글 없음
• 후보 14 고르기 (113 은 바퀴 6678 이 했어요)
• Text 패널에 노브 막대 더하기, 폰에서 44px
• 시험 둘 더하고 바뀐 안내 글 시험 맞추기, 옛 판에서 빨간 것 확인
• 다섯 검사, 390·1440 사진
• dev merge 뒤 [DONE]

한 일

app/pattern-lab/panels/TextPanel.tsx 의 「Speed knob」 고르개 옆에 range 칸을 두었어요. 칸은 고른 노브의 범위(ranges[effectKnob])와 값(knobs[effectKnob])을 읽고 setKnob(spec.effectKnob, …) 로 써요. Knobs 패널이 쓰는 store 값 그대로라 한쪽을 돌리면 다른 쪽이 따라와요. 칸 이름은 노브 이름(기본 패턴이면 「Speed」)이라 Knobs 패널의 「Speed value」 와 같은 노브로 읽혀요. 효과가 None 이면 칸이 없어요.

노브가 0 일 때 안내는 「turn it up in Knobs」 에서 「turn it up here or in Knobs」 로 바꿨어요. 파일 머리 주석에 이 칸이 왜 있는지 두 줄 더했어요.

TextPanel.module.css 엔 range 칸 높이 32px 를 두고, @media (hover: none) 에서 다른 칸처럼 44px 로 키웠어요. 폰 폭에선 칸이 제 줄로 내려가 352×44px 가 돼요.

TextPanel.test.tsx 에 시험 둘을 더했어요. 하나는 Text 패널과 Knobs 패널을 같이 그려 Text 쪽 칸을 끝까지 올리면 store 노브와 Knobs 쪽 칸이 따라오고 안내가 100% 를 말하는지, Knobs 쪽을 바닥으로 내리면 Text 쪽 칸이 따라오고 안내가 「turn it up here or in Knobs」 로 바뀌는지 봐요. 다른 하나는 Speed knob 을 바꾸면 칸이 새 노브의 이름과 값으로 바뀌고, 그 칸이 그 노브만 움직이고, 효과를 None 으로 두면 칸이 없어지는지 봐요.

증거

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

$ npm ci
npm notice          (새 npm 판 알림, 27.1초에 끝)
$ 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
$ npm run check:ci  (exit 0)
 Test Files  96 passed (96)
      Tests  1213 passed (1213)
passed   virtual-panel

PR 에서는 2f58f03 의 Drift checks 와 Web CI 가 둘 다 success 였어요.

check:ci 의 drift 표에서 roadmap 은 gh 로그인이 없어서, links-absolute 는 이 클론에 v1.0.0~v3.1.0 태그가 없어서 skipped 예요. 나머지 14개는 passed 예요. npm run check:voice 는 「nothing found」 였어요.

새 시험을 옛 판에 돌려 봤어요(git show origin/dev:web/src/app/pattern-lab/panels/TextPanel.tsx 로 바꿔 끼움).

$ npx vitest run src/app/pattern-lab/panels/TextPanel.test.tsx   # 옛 TextPanel.tsx
   × an effect on the text > says nothing moves while the chosen knob is all the way down
   × an effect on the text > turns the speed knob beside its picker, the same knob Knobs turns
   × an effect on the text > moves the slider to the knob a new pick names, and has none without an effect
      Tests  3 failed | 16 passed (19)
$ npx vitest run src/app/pattern-lab/panels/TextPanel.test.tsx   # 고친 판
      Tests  19 passed (19)

빌드한 사이트(next start -p 3100)를 Playwright 로 열어 「+ Text」, Text 탭, Effect 「Scroll」 을 고르고, 막대의 4분의 3 자리를 폰에선 손가락으로 누르고 데스크톱에선 마우스로 눌렀어요. 그다음 Knobs 탭에서 같은 노브를 읽었어요.

폭	막대	누르기 전	누른 뒤	Knobs 의 Speed	안내	탭 수
390 (터치)	352×44px	2	3.821	3.821	39% → 76%	9 → 9
1440 (마우스)	426×32px	2	3.811	3.811	39% → 76%	9 → 9

폰에서 빠르기를 바꾸는 데 탭을 옮긴 횟수는 0번이고, 닫힌 패널도 0개예요.

실행법

cd web
npx vitest run src/app/pattern-lab/panels/TextPanel.test.tsx
npm run dev   # /pattern-lab → + Text → Text 탭 → Effect 를 Scroll 로

가정

• 칸 이름은 「Speed」 가 아니라 고른 노브의 이름으로 했어요. Hue 를 빠르기 노브로 고르면 칸도 「Hue」 라서 Knobs 패널의 어느 줄과 같은 값인지 보여요. 기본 패턴에선 노브 이름이 Speed 라 「Speed knob」 옆에 「Speed」 가 서요.
• 칸의 step 은 Knobs 패널처럼 0.001 로 두었어요. 후보 16 이 Knobs 패널의 화살표 키를 기기의 한 칸으로 바꾸면 이 칸도 같은 꼴로 맞출 만해요.
• 두 손이 같은 노브를 쥐니 Director 키프레임이 노브를 움직이는 동안의 일은 Knobs 패널과 같아요. 따로 막지 않았어요.

Changelog

Web

• Pattern Lab's Text panel turns a text effect's speed knob in place. A slider beside Speed knob moves the same knob the Knobs panel does, so on a phone an effect's speed no longer takes a trip to the Knobs tab and back.

경험

언제: 바퀴에서 폰 390 의 Pattern Lab 패널 아래쪽 칸을 Playwright 로 누르거나 찍을 때
교훈: 누르기 전에 그 칸을 패널 안에서 scrollIntoView 한다 (패널이 짧아 칸이 굴림 밖에 있으면 touchscreen.tap 이 다른 곳에 떨어져 값이 그대로다)
근거: #205 에서 Text 패널의 Speed 막대를 굴리지 않고 눌렀더니 2 → 2 였고, Effect 줄을 패널 위로 굴린 뒤엔 2 → 3.821 이었어요

바퀴

바퀴 79 · 후보 14 「텍스트 효과의 빠르기를 Text 패널에서 바로 돌린다」

다음 바퀴

• 15위 · Code 패널의 붙여넣기 상자와 안내가 영어로, 고른 레이어의 종류대로 말한다: lang="en" 쪽에 한국어 window.prompt 가 뜨고, 텍스트 레이어를 「pixel art」 라고 불러요.
• 16위 · Knobs 패널에서 화살표 키 한 번이 기기의 노브 한 칸만큼 움직인다: 지금은 step="0.001" 이라 Freq 끝에서 끝이 화살표 110,000번이에요.
• 17위 · 폰에서 Layers 와 Knobs 의 단추가 손가락 크기다: 「+ Code」 가 60×28px, 레이어 눈이 20×17px, 「Push」 가 40×22px 예요.

https://claude.ai/code/session_01S4TYQeHTBSx9sL6ynEa6Wj

---

Generated by Claude Code