[patternflow-bot]

studio / https://claude.ai/code/session_017V1NthNzjPyaRuWovG8yNt

Pattern 탭의 고급 안내와 To hardware 칸의 두 문단, Build 탭의 다른 길 안내가 사이트 전체의 문단 규칙에 져서 14~15px 대신 20px 로, 아래 여백 28px 를 달고 보였어요. 이제 넷이 제 크기로 돌아와 칸 제목(18px)보다 작게 서고, 1440 에서 To hardware 칸이 572px 에서 363px 로 줄어요.

좋아지는 것: Pattern·Build 탭의 안내 글이 제 크기로 보인다 — 플래시 칸이 3분의 1 넘게 짧아진다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 댓글(세 직함만) 읽기 — 일을 시키는 글 없음(저장소 전체 대화 댓글 2개 가운데 세 직함 글은 [DONE] hardware: Besoiobiy's printed case as a remix folder #1 의 engmung 한 줄 · 바퀴 PR 96~227 리뷰 0 · 줄 댓글 0)
• 고를 줄 정하기 — 후보 124 는 바퀴 6689 가 맡았고, 남은 줄 가운데 맨 위가 25
• dev 빌드에서 재현 — 1440 에서 넷 다 20px, 아래 여백 28px, To hardware 칸 572px
• 고치기 — 세 규칙을 클래스 둘로 묶음
• 다시 생기지 않게 시험 하나 — dev CSS 에서 셋 빨강, 이 브랜치에서 10개 초록
• 다섯 검사 · check:voice
• 사진 390 / 1440
• dev merge — dev 07b2766([DONE] 연구 페이지에 탤벗 카펫과 길브레스 표를 포함한 수학 여섯과 화장품 매장 질감 넷이 서고, 지도의 마지막 빈 칸 둘이 찬다 #225, incoming/ 만) merge · e3fff72
• e3fff72 의 GitHub 검사 — Drift checks · Web CI 둘 다 success, 충돌 없음(mergeable clean)

한 일

app/globals.css:847 의 .panel-body p 는 명시도 (0,1,1)이라 모듈 클래스 하나(0,1,0)를 이겨요. 그래서 font-size, margin 이 다 그쪽 값으로 갔어요. 표가 가리킨 InsidePanel.module.css 의 .body .mapNote 꼴로 셋을 클래스 둘로 묶었어요.

• components/sections/PatternPanel.tsx:159 의 panel-body 에 styles.body 를 더하고, PatternPanel.module.css 의 .advancedNote, .hardwareNote 를 .body .advancedNote, .body .hardwareNote 로 바꿨어요. 값은 그대로예요(14px, 줄 간격 1.5, 여백 14px 0 0 과 0).
• components/sections/BuildPanel.module.css 의 .otherPaths 를 .buildPanel .otherPaths 로 바꿨어요. .buildPanel 은 BuildPanel.tsx:237 에서 panel-body 와 같은 요소에 있어요.
• 새 components/sections/panelNotes.test.ts 가 .panel-body 안에 그려지는 다섯 파일(PatternPanel, BuildPanel, InsidePanel, CasePicker, InsideGlobe/BuildCard)에서 <p className={styles.x}> 를 찾아, CSS 모듈에 맨 .x 규칙이 없고 .scope .x 규칙이 있는지, styles.scope 가 그 컴포넌트에 있는지 봐요. jsdom 은 CSS 모듈을 입히지 않아서 labCss.test.ts 처럼 파일을 읽어요.

.panel-body p 의 max-width: 560px 와 text-wrap: pretty 는 그대로 받아요. .body .mapNote 도 같아요.

증거

빌드한 사이트(next start)를 Chromium 으로 열어 getComputedStyle 과 높이를 쟀어요. 왼쪽이 dev 19cc7fe, 오른쪽이 이 브랜치예요.

1440 Pattern  advancedNote    20px → 14px   margin 14px 0 28px → 14px 0 0   124 → 63px
1440 Pattern  hardwareNote 1  20px → 14px   margin 0 0 28px → 0             124 → 63px
1440 Pattern  hardwareNote 2  20px → 14px   margin 0 0 28px → 0             155 → 63px
1440 Pattern  To hardware 칸                                                572 → 363px
1440 Build    otherPaths      20px → 15px   margin 16px 0 28px → 16px 0 0   62 → 23px
390  Pattern  advancedNote    17px → 14px                                   184 → 126px
390  Pattern  hardwareNote 1  17px → 14px                                   211 → 147px
390  Pattern  hardwareNote 2  17px → 14px                                   237 → 147px
390  Pattern  To hardware 칸                                                760 → 551px
390  Build    otherPaths      17px → 15px                                   79 → 47px

옆 카드 글(.nextCard p, 14px)과 칸 제목(hardwareTitle, 18px)은 두 빌드에서 같아요.

이 브랜치, 데스크톱 1440 · Pattern 탭

이 브랜치, 폰 390 · Pattern 탭

이 브랜치, 데스크톱 1440 · Build 탭

이 브랜치, 폰 390 · Build 탭

dev, 데스크톱 1440 · Pattern 탭

dev, 폰 390 · Build 탭

3D 보기는 컨테이너의 swiftshader 에서 그리지 못해 비어 있어요. 사진은 94d3095 에 올리고 aba1670 에서 걷었어요.

새 시험을 dev 의 CSS 에 돌리면 셋이 빨개요.

× PatternPanel .advancedNote is scoped through a second class
× PatternPanel .hardwareNote is scoped through a second class
× BuildPanel .otherPaths is scoped through a second class
AssertionError: a bare .advancedNote loses to .panel-body p: expected [ '.introCopy', '.workspace', …(59) ] to not include '.advancedNote'
Tests  3 failed | 7 passed (10)

이 브랜치에선 Tests 10 passed (10) 이에요.

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

npm ci                              added 762 packages, and audited 763 packages in 30s
npm run lint -- --max-warnings=0    (출력 없음, exit 0)
npm run typecheck                   (출력 없음, exit 0)
npm run build                       ✓ Generating static pages using 3 workers (145/145) in 11.9s
npm run check:ci                    passed virtual-panel (Test Files 100 passed · Tests 1261 passed · drift 14 passed, links-absolute · roadmap skipped) · exit 0
npm run check:voice                 check:voice: nothing found (브랜치 58줄)

dev 를 merge 한 e3fff72 의 GitHub 검사예요.

Drift checks | completed | success
Web CI | completed | success

실행법

cd web
npx vitest run src/components/sections/panelNotes.test.ts
npm run build && npx next start -p 3100   # /pattern, /build 를 1440 과 390 으로

가정

• 앞 바퀴 PR 에 세 직함이 쓴 댓글, 리뷰, 줄 댓글 가운데 일을 시키는 글은 없었어요. 「창작자 지시」 15 는 바퀴 6165 가, 「후보」 124 는 바퀴 6689 가 했어요. 남은 줄이 16개라 표를 다시 채우지 않고 25위를 골랐어요.
• 표는 고칠 곳으로 CSS 셋과 PatternPanel.tsx 만 적었지만 시험 하나를 더했어요. jsdom 렌더 시험은 CSS 모듈을 입히지 않아서 이 일을 못 잡고, 같은 꼴의 맨 클래스가 또 생기면 사진으로만 보여요.
• 시험은 .panel-body 안에 그려지는 다섯 파일만 봐요. 그 밖의 쪽엔 .panel-body 가 없어요(grep -rn panel-body src 로 PatternPanel, BuildPanel, InsidePanel 셋).
• 표 밖: Pattern 탭의 Pattern Lab 카드(components/sections/PatternPanel.tsx:308)가 아직 「The full studio — batch generation, color ramps, and ESP32 C++ compile.」라고 해요. 배치 생성은 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 이 AI 갤러리와 함께 걷었어요.

Changelog

Web

• The Pattern and Build tabs' small notes keep their own size. The global .panel-body p rule outranked each note's single module class, so the advanced note and both To hardware notes ran at 20px instead of 14px, and the Build tab's other-paths line at 20px instead of 15px, each with a 28px bottom margin. At 1440 the To hardware block is 363px instead of 572px.

경험

언제: 바퀴에서 첫 화면의 Build, Pattern, Inside 탭 아래쪽 칸을 사진으로 찍을 때
교훈: Playwright 의 요소 사진은 칸이 든 스크롤 상자를 따라가지 못하니, 요소에 scrollIntoView 를 걸고 창을 찍되 폰에선 scrollMarginTop 을 calc(44vh + 72px) 로 줘서 붙어 있는 3D 보기와 탭 막대 밑에 세워요
근거: #227 에서 1440 의 [class*="branches"] 요소 사진이 그 칸 대신 Pattern 탭 머리를 찍었고, 390 에서 block: "center" 로 세운 To hardware 칸은 3D 보기 뒤에 가렸어요

바퀴

바퀴 90 · 후보 25 「Pattern 탭의 고급 안내와 To hardware 칸의 두 문단, Build 탭의 다른 길 안내가 제 글자 크기로 보인다」

남은 것

• 표 밖: Pattern 탭의 Pattern Lab 카드가 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183 이 걷은 「batch generation」을 아직 말해요(components/sections/PatternPanel.tsx:308). 글 한 줄이에요.
• 26위 「Make 가이드의 덱 순서 경고가 지금 펌웨어 판을 말한다」: 3.10.5 에서 고쳐진 일을 아직 「the next firmware」 라고 해요.
• 27위 「가로로 든 폰에서 Build, Pattern, Inside 탭의 글이 화면의 절반 넘게 보인다」: 844×390 에서 3D 보기와 탭 막대가 224px 를 쥐어 글은 166px 만 보여요.

https://claude.ai/code/session_017V1NthNzjPyaRuWovG8yNt

---

Generated by Claude Code