[patternflow-bot]

lsh / https://claude.ai/code/session_01KYMmnGwFjuvpEU4bt5bjzD

Build 와 Pattern 탭은 3D 칸이 지구본을 잠깐 붙였다가 기기로 바꾸는 사이에 지구본의 사진 65장을 받았고, 폰 첫 화면은 보이지 않는 지구본 때문에 같은 사진을 받았어요. 이제 3D 칸은 그 쪽의 탭으로 시작하고 지구본은 보일 때만 사진을 미리 받아서, 9 Mbps 폰의 /build 가 받는 양이 10.0 MB 에서 1.6 MB 로, 망이 조용해지는 때가 9.4초에서 2.0초로 줄어요.

좋아지는 것: 폰에서 Build, Pattern 탭과 첫 화면이 빨리 뜬다 — 안 보이는 사진 8 MB 를 받지 않는다

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] 정리 3단계 PR 17 — 사이트 3D 도구 React Three 가 지금 메이저 안의 새 판으로 올라간다 #60~[DONE] 첫 화면 영상 밑 사진이 2.1 MB 원본 대신 화면 폭에 맞춘 20 KB 남짓으로 와서 느린 망에서도 1초 안팎에 뜬다 #145)의 세 직함 댓글 읽기: 따를 글 없음
• 후보 표에서 남은 줄 고르기: 1, 2 는 [DONE] WebGL 을 못 쓰는 브라우저에서도 첫 화면과 Build, Pattern, Inside 탭이 오류 화면 대신 글과 단추를 보여 준다 #144, [DONE] 첫 화면 영상 밑 사진이 2.1 MB 원본 대신 화면 폭에 맞춘 20 KB 남짓으로 와서 느린 망에서도 1초 안팎에 뜬다 #145 가 했고 3 이 남은 맨 위 줄
• 3D 칸이 쪽의 탭으로 시작한다
• 지구본이 보일 때만 사진을 미리 받는다
• 시험 둘을 고치고 더함, 옛 코드에서 빨간 것 확인
• lint, typecheck, build, check:ci
• 빌드한 사이트에서 쪽마다 사진 수와 바이트, 9 Mbps 의 전송량을 dev 와 비교
• 화면 390, 1440
• dev merge(그새 dev 가 움직이지 않았어요)
• a6b4f34 에서 Web CI 와 Drift checks 초록

한 일

store 의 homeTab 은 어느 쪽에서나 'hero' 로 시작하고, 그 쪽의 탭은 RightPanel 의 effect 가 첫 렌더 뒤에 알려 줘요. 3D 칸(components/3d/ViewerPanel.tsx)이 store 만 읽어서 /build 와 /pattern 에서도 첫 장면을 지구본으로 골랐고, 200 ms 페이드 동안 GlobeViewer 가 붙어 미리 받기를 그렸어요.

• components/HomeView.tsx: 쪽의 initialTab 을 ViewerPanel 에 넘겨요.
• components/3d/ViewerPanel.tsx: 보는 탭을 제 state 로 두고 initialTab 에서 시작해요. store 를 구독해서 처음 바뀔 때부터 store 를 따라가요. 서버가 보내는 HTML 도 그 탭으로 그려서, 폰 /build 는 3D 칸이 하이드레이션 뒤에 내려오지 않고 처음부터 제자리에 있어요.
• components/sections/InsideGlobe/GlobeViewer.tsx: 미리 받기를 (min-width: 901px) 이거나 Inside 탭일 때만 그려요. useMediaQuery 는 재기 전엔 false 라서 폰이 사진을 한 번이라도 그리는 일이 없어요. 폭 질의는 BuildCard.tsx:35 와 같은 꼴이에요.
• components/3d/ViewerPanel.test.tsx: 쪽이 initialTab 을 넘기게 고치고, /build 와 /pattern 이 지구본을 한 번도 만들지 않는 것, store 에 지난 방문의 Inside 가 남아 있어도 그런 것, store 가 바뀌면 따라가는 것, 서버 HTML 의 is-open 을 봐요. 하이드레이션 시험은 hero 와 build 둘로 돌려요.
• 새 components/sections/InsideGlobe/GlobeViewer.test.tsx: 폰 첫 화면은 0장, 폰 Inside 와 901px 이상 첫 화면은 65장이에요.

증거

dev(152a047)와 이 브랜치를 각각 npm run build 하고 next start 로 띄워 크로미움으로 열었어요. 미리 받기가 그리는 사진 65장(builds.ts 의 핀마다 첫 3장)의 요청만 세고, load 뒤 5초를 기다렸어요. 폰은 390×844 DPR 3 이에요.

쪽	dev	이 브랜치
/build 390	65장 8,345,444 B	0장
/build 1440	65장 1,441,484 B	0장
/pattern 390	65장 8,345,444 B	0장
/pattern 1440	65장 1,441,484 B	0장
/ 390	65장 8,345,444 B	0장
/ 1440	65장 1,441,484 B	65장 1,441,484 B
/inside 390	65장 8,345,444 B	65장 8,345,444 B
/inside 1440	65장 1,441,484 B	65장 1,441,484 B
폰 / 에서 Inside 누름	누르기 전 65장	누르기 전 0장, 뒤 65장

9 Mbps, 지연 40 ms, 움직임 줄이기를 켜고 25초 동안 CDP Network.loadingFinished 를 모았어요.

== dev
/build 390px: 102 responses, 10040986 bytes, quiet at 9.4 s
/pattern 390px: 102 responses, 10041080 bytes, quiet at 9.3 s
/ 390px: 115 responses, 10162893 bytes, quiet at 9.4 s
/build 1440px: 101 responses, 3092158 bytes, quiet at 3.5 s
== branch
/build 390px: 36 responses, 1621985 bytes, quiet at 2.0 s
/pattern 390px: 36 responses, 1622096 bytes, quiet at 1.9 s
/ 390px: 51 responses, 1779527 bytes, quiet at 1.9 s
/build 1440px: 35 responses, 1577195 bytes, quiet at 1.8 s

탭을 오가도 지구본은 와요(이 브랜치, 각 단계 4초 뒤).

desktop 1440px  /build: 0 photos, product  →  Inside: 65 photos, globe, /inside  →  Pattern: 65 photos, product, /pattern  →  Pattern: 65 photos, globe, /
phone 390px  /build: 0 photos, product  →  Inside: 65 photos, globe, /inside  →  Inside: 65 photos, globe, /
phone 390px  /pattern: 0 photos, product  →  Pattern: 0 photos, globe, /  →  Build: 0 photos, product, /build

서버가 이제 /build 와 /pattern 에서 기기 미리보기를 그려서 하이드레이션 오류를 찾았어요. /build?case=simonepda-lasercut, /build, /pattern, /inside/seunghun-korea 를 390 과 1440 에서 열어 여덟 번 다 0건이었고, ?case= 의 제목은 SimonePDA 로 바뀌었어요. 콘솔 오류는 dev 와 같은 것뿐이에요(Vercel 스크립트 404, 컨테이너가 막은 바깥 요청).

새 시험은 옛 코드에서 빨개요. ViewerPanel.tsx 만 dev 판으로 돌리면 14개 가운데 4개, GlobeViewer.tsx 만 돌리면 3개 가운데 「warms no photo for the hidden globe of a phone’s hero」가 expected 65 to be +0 으로 실패해요.

$ npm ci                                   # added 794 packages in 21s
$ 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 9.7s
$ npm run check:ci                         # Test Files  78 passed (78) · Tests  807 passed (807) · drift 14 passed, links-absolute·roadmap skipped · exit 0

3D 기기는 두 빌드 다 그려지지 않아요. Draco 디코더를 www.gstatic.com 에서 받는데(components/3d/caseModels.ts:77) 이 컨테이너가 막아서예요. dev 의 /build 1440 도 같은 화면이었어요.

실행법

cd web
npx vitest run src/components/3d/ViewerPanel.test.tsx src/components/sections/InsideGlobe/GlobeViewer.test.tsx
npm run build && npx next start -p 3100

폰 폭 390 으로 /build 를 열고 개발자 도구 Network 에서 builds 로 거르면 dev 는 65줄, 이 브랜치는 0줄이에요. Inside 를 누르면 65줄이 와요.

가정

• 표는 「initialTab 을 ViewerPanel 에 넘겨 첫 장면을 정하고」라고만 해요. 마운트 플래그를 effect 에서 켜는 길은 react-hooks/set-state-in-effect 가 오류로 잡아서(빈 파일에 그 두 줄을 써서 확인), 탭을 제 state 로 두고 store 구독에서 바꿔요. 구독은 ViewerPanel 의 effect 에서 걸리는데, HomeView 가 이 칸을 RightPanel 앞에 두어서 RightPanel 의 effect 보다 먼저 돌아요. 그 차례는 주석에 적었어요.
• 서버 HTML 이 바뀌어요. /build 와 /pattern 은 지금까지 3D 칸을 비운 채(지구본은 ssr: false) 보냈는데, 이제 기기 미리보기의 겉(제목, 안내 글, 화살표, 빈 캔버스)을 보내고 폰에선 is-open 도 붙어요. 내용 칸은 이미 서버에서 viewer-open 으로 자리를 비워 두고 있어서, 폰에서 그 빈자리가 하이드레이션 전까지 비어 있던 것이 함께 사라져요.
• 표의 「load 가 11.1초에서 3.7초」는 다시 재지 못했어요. 이 컨테이너에선 두 빌드 다 load 가 1.4초였어요. 미리 받기는 하이드레이션 뒤에 그려져서 load 이벤트 뒤에 요청되기 때문이에요. 그래서 전송량과 망이 조용해진 때로 쟀어요.
• 표가 적은 사진은 65장 8,384,194 B, 오늘 잰 값은 65장 8,345,444 B 예요.
• 폭 질의는 정수 폭 기준이에요. CSS 가 3D 칸을 max-width: 900px 에서 숨기니 900.5px 같은 폭에선 둘 다 거짓이라 지구본은 보이고 사진은 미리 받지 않아요. 핀을 열면 그때 받아요.
• 남은 조각: 표가 다음 조각이라 한 HeroScene.tsx:85 의 useGLTF.preload(model.glb 282,620 B)는 손대지 않았어요. 폰 첫 화면과 /inside 에서도 이 모델을 받아요.
• 표 밖: 기기 미리보기의 Draco 디코더가 www.gstatic.com 에서 와서(components/3d/caseModels.ts:77), 그 주소가 막힌 곳에선 /build 의 기기가 그려지지 않아요.

Changelog

Web

• The Build and Pattern tabs, and the home page on a phone, no longer download the build globe's photos. The 3D view opened on the globe for a moment on /build and /pattern, and a phone's hidden hero globe warmed every pin's photos as well: 65 images, 8.3 MB on a 3× phone. The view now starts on the page's own tab, and the globe warms its photos only where it is on screen.

바퀴

바퀴 47 · 후보 3 「Build, Pattern 탭과 폰 첫 화면이 보이지 않는 지구본의 사진 65장을 받지 않는다」

경험

언제: 하이드레이션 뒤에 붙는 그림이나 미리 받기를 줄인 효과를 빌드한 사이트에서 잴 때
교훈: load 이벤트까지의 시간은 그 요청을 담지 않으니, CDP Network.loadingFinished 로 정해진 시간 동안 받은 바이트와 마지막 응답 시각을 dev 빌드와 나란히 잰다
근거: #146 에서 9 Mbps 의 load 가 dev 와 이 브랜치 둘 다 1.4초였는데, 25초 동안의 전송량은 폰 /build 에서 10,040,986 B 와 1,621,985 B, 조용해진 때는 9.4초와 2.0초였다

다음 바퀴

• 후보 4 「커뮤니티 API 가 본문이 null 인 요청에 500 대신 400 과 까닭을 돌려준다」: 쓰기 라우트 13곳이 null 본문에 CORS 머리 없는 500 을 내요.
• 후보 5 「끝이 잘린 코드를 붙이면 Lab 과 Live Editor 가 코드가 끝나기 전에 끊겼다고 말한다」: 지금은 사용자가 쓰지 않은 return 이나 ) 를 가리키는 오류가 떠요.
• 후보 6 「폰에서 Lab 의 Recent 와 Panels 메뉴가 화면 안에 열리고, 창 닫기 단추를 누르기 쉽다」: 390px 에서 Recent 메뉴가 x −105 에서 시작해 글이 잘려요.

https://claude.ai/code/session_01KYMmnGwFjuvpEU4bt5bjzD

---

Generated by Claude Code