[patternflow-bot]

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

커뮤니티 머리줄은 브라우저가 세션을 받아올 때까지 「Sign in」 을 그렸어요. 이제 레이아웃이 서버에서 이미 읽은 이름을 그려요. 머지하면 로그인한 사람이 쪽을 열 때마다 폰 머리줄이 두 줄에서 한 줄로 줄며 본문을 40px 끌어올리던 일(390px CLS 0.049)이 없어져요.

좋아지는 것: 로그인하면 커뮤니티 머리줄이 처음부터 내 이름이다 — 폰에서 쪽이 위로 튀지 않는다

할 일

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 앞 바퀴 PR 댓글(세 직함) 읽기: [DONE] 커뮤니티 메뉴와 폰 탭에서 Workshop 이 빠지고, 옛 워크숍 주소는 커뮤니티 첫 화면으로 간다 #268~[DONE] 빌드 경로 둘이 이상한 몸과 이름에 500 이나 빈 200 대신 400 과 404 를 돌려주고, 처음 시험을 얻는다 #287 에 따를 글 없음
• 고를 일 정하기: 후보 12위
• AuthStatus 가 기다리는 동안 서버의 이름을 그리기
• AuthStatus.test.tsx: dev 의 파일로 2개 빨강, 고친 뒤 5개 초록
• 빌드한 사이트에서 390 과 1440 으로 dev 와 견주기
• 다섯 검사 · check:voice
• dev merge · [DONE]

한 일

components/community/AuthStatus.tsx 가 serverUser 를 받아요. 레이아웃이 getSession 으로 이미 읽은 사람의 name, username, displayUsername 셋이에요. 브라우저의 useSession 이 첫 답을 낼 때까지는 그 사람을 그리고, 첫 답 뒤로는 브라우저의 답만 따라요.

app/community/layout.tsx 가 그 셋을 넘겨요. user 를 통째로 넘기면 이메일까지 쪽에 실려서 셋만 골랐어요.

새 components/community/AuthStatus.test.tsx 는 useSession 을 { data: null, isPending: true } 로 흉내 내요. 기다리는 동안 「@ada」 링크가 /community/u/ada 로 가는지, 서버 HTML(renderToString)에 「Sign in」 이 없는지, 서버가 아무도 못 봤으면 「Sign in」 인지, 답이 오면 브라우저의 이름을 따르는지, 답이 「로그아웃」 이면 뒤의 다시 묻기에서도 옛 이름이 돌아오지 않는지를 봐요.

증거

get-session 을 3초 붙잡고 load 뒤 1.5초에 찍었어요. 브라우저가 아직 답을 받지 못한 때예요.

Pi 와 같은 NEXT_PUBLIC_COMMUNITY_URL, NEXT_PUBLIC_BUILD_ENABLED 로 빌드하고, 스크래치 DB 에 ada 가 가입해 공개 패턴 다섯을 HTTP 로 올렸어요. 고치기 전은 같은 DB 를 dev 의 두 파일로 다시 빌드한 서버에서 쟀어요. playwright-core 1.56.1 로 ada 의 쿠키를 들고 쪽마다 세 번 열어 4초씩 봤어요. 서버 HTML 은 같은 쿠키로 받은 머리줄을 읽었어요.

폭 390 · 펌웨어 띠 닫음 · 쪽마다 세 번         dev                        이 PR
/community/patterns        서버 HTML  Sign in  · CLS 0.000 0.049 0.049     @ada · CLS 0.000 0.000 0.000
/community/decks           서버 HTML  Sign in  · CLS 0.049 0.049 0.049     @ada · CLS 0.000 0.000 0.000
/community/notifications   서버 HTML  Sign in  · CLS 0.038 0.038 0.038     @ada · CLS 0.000 0.000 0.000

머리줄 높이와 본문 y, 첫 번
dev    /community/decks          87ms 104px Sign in, 본문 y 104 → 289ms 64px @ada, 본문 y 64
dev    /community/notifications  55ms 104px Sign in, 본문 y 104 → 222ms 64px @ada, 본문 y 64
이 PR  /community/decks          88ms 64px @ada, 본문 y 64
이 PR  /community/notifications  66ms 64px @ada, 본문 y 64

1440 에선 머리줄이 두 판 다 70px 한 줄이라 「Sign in」 이 「@ada」 로 글만 바뀌었어요. 거기 남은 CLS 0.033~0.038 은 펌웨어 띠가 하이드레이션 뒤에 나오는 몫(후보 13위)이고 dev 와 같아요. 로그아웃한 서버 HTML 은 두 쪽 다 그대로 「Sign in」 이에요.

새 시험을 dev 의 AuthStatus.tsx 로 돌렸을 때:

 × draws the server's user while the browser is still asking
 × puts the handle in the server's markup, not Sign in
 ✓ offers Sign in while asking when the server saw nobody
 ✓ takes the browser's answer once it has one
 ✓ stays signed out after the answer, through a later refetch
      Tests  2 failed | 3 passed (5)

고친 뒤:

 ✓ src/components/community/AuthStatus.test.tsx (5 tests)

다섯 검사(web/ 에서, 2194316):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0
npm run build                       → ✓ Compiled successfully in 14.2s · exit 0
npm run check:ci                    → Test Files 116 passed (116) · Tests 1418 passed (1418)
                                      drift: passed 14, skipped 2 (links-absolute, roadmap) · exit 0
npm run check:voice                 → check:voice: nothing found

dev(442c39c, #282 는 incoming/ 만 고쳤어요)를 merge 한 0143da4 에서 typecheck, 새 시험 5개, check:drift 를 다시 돌려 통과했고, GitHub 의 Web CI 와 Drift checks 도 초록이에요.

실행법

# web/ 에서
npx vitest run src/components/community/AuthStatus.test.tsx
NEXT_PUBLIC_COMMUNITY_URL=http://localhost:3100 NEXT_PUBLIC_BUILD_ENABLED=1 npm run build
COMMUNITY_ENABLED=1 COMMUNITY_DB_PATH=<스크래치>/community.db BETTER_AUTH_SECRET=<아무 글> BETTER_AUTH_URL=http://localhost:3100 COMMUNITY_ALLOWED_ORIGINS=http://localhost:3100 npx next start -p 3100

로그인한 채 폰 폭으로 /community/decks 를 새로 고치면 머리줄이 처음부터 「@이름」 한 줄이에요.

가정

• 서버의 이름은 브라우저의 첫 답까지만 써요. Better Auth 1.7.9 는 세션이 비어 있을 때 다시 묻는 동안에도 isPending 을 켜요(node_modules/better-auth/dist/client/query.mjs 의 onRequest, isPending: currentValue.data === null). isPending 만 보면 다른 탭에서 로그아웃한 뒤 창에 초점이 돌아올 때마다 옛 이름이 잠깐 돌아와요. 마지막 시험이 그 경우예요.
• 후보 34위가 꼽은 형 변환 여섯 가운데 AuthStatus.tsx:20, :22 의 둘은 이 줄을 고치며 같이 빠졌어요. 바꾼 줄이 그 자리라서예요. Better Auth 의 세션 타입에 username 과 displayUsername 이 이미 있어서 typecheck 가 그대로 통과해요. 레이아웃의 것(layout.tsx:75~:76)과 나머지 셋은 34위 몫으로 남겼어요.
• 후보 줄의 layout.tsx:122 는 [DONE] 커뮤니티 쪽이 Pattern Lab 코드 218 KB 를 뒤에서 받지 않는다 #286 뒤로 :127 이었어요.
• 390 의 CLS 는 Playwright 의 isMobile 없이 쟀어요. isMobile 과 hasTouch 를 켜면 두 판 모두, 펌웨어 띠의 119px 밀림까지 CLS 가 0 으로 나와요. 본문 y 로는 dev 의 40px 끌어올림이 그대로 보였어요. 후보 줄의 0.049 와 0.038 은 isMobile 없이 잰 값과 같아요.

Changelog

Web

• The community header draws a signed-in reader's handle from the first paint. It drew "Sign in" until the browser had fetched its own session, 0.2–0.9 s on every page. On a phone that put the header on two lines and then pulled the page up 40px (CLS 0.049). It now draws the user the layout already read on the server.

경험

언제: Playwright 로 폰 폭의 레이아웃 이동(CLS)을 잴 때
교훈: isMobile 과 hasTouch 를 켠 컨텍스트에선 layout-shift 가 하나도 잡히지 않아 CLS 가 늘 0 이니, CLS 는 isMobile 없이 390 폭으로 재고 요소의 y 를 rAF 로 따로 적어 맞춰 봐요
근거: #288 에서 dev 의 머리줄이 104px 에서 64px 로 줄어 본문이 40px 올라갔는데 isMobile 로는 CLS 0.000 이었고, 끄니 후보 표와 같은 0.049 가 나왔어요

바퀴

바퀴 117 · 후보 12 「로그인한 사람의 머리줄에 쪽을 열 때마다 「Sign in」 이 잠깐 뜨지 않는다」

다음 바퀴

• 13위 「펌웨어 안내 띠가 첫 그림부터 쪽에 있어서, 하이드레이션 뒤에 쪽 전체를 아래로 밀지 않는다」: 이번에도 띠가 하이드레이션 뒤에 나와 1440 에서 CLS 0.033~0.038, 폰에서 본문을 120px 밀었어요.
• 14위 「아이폰에서 커뮤니티 글 칸을 눌러도 쪽이 확대되지 않는다」: 폰에서 글 칸의 글자가 12~14px 로 16px 아래예요.
• 15위 「폰에서 커뮤니티 머리줄과 벽의 정렬 칸을 엄지로 누를 수 있다」: 브랜드 줄 둘의 24px 원이 겹치고, 로그인하면 Alerts 와 이름 칩이 18px 남짓이에요.

https://claude.ai/code/session_01EiXnECnHAmZVVvr8jAQd6V

---

Generated by Claude Code