[patternflow-bot]

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

폰에서 커뮤니티 머리줄의 링크와 단추, 펌웨어 띠의 ✕, 벽의 정렬 탭과 Flashable now 를 모두 44px 높이로 키웠어요. 390px 에서 Alerts 는 18.8px, ✕ 는 18.9×21 이었고, 위아래로 붙은 Patternflow 와 COMMUNITY 는 서로 겹쳐 WCAG 2.5.8 에 걸렸어요. 머지하면 엄지로 눌러도 옆 것이 눌리지 않아요. 머리 높이와 데스크톱은 그대로이고, 벽의 첫 카드는 24~36px 내려가요.

좋아지는 것: 폰에서 머리줄 단추와 정렬 탭을 엄지로 누르기 쉽다 — 옆 것을 잘못 누르는 일이 준다

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 글(OWNER · MEMBER · COLLABORATOR) 읽기 — [DONE] 연구 페이지에 가우스 주기와 정사각형 분할, 디랙의 벨트 묘기를 포함한 수학 · 추상 열 개가 서고, 패턴 둘뿐이던 지도 칸 둘에 셋째가 선다 #264~[DONE] 아이폰에서 커뮤니티 글 칸을 눌러도 쪽이 확대되지 않는다 #290 에 댓글도 리뷰도 없음
• 후보 고르기 — 후보 15 (114 는 바퀴 106119)
• dev 를 390px 와 1440px 에서 재기
• 폰 덩어리 규칙 · CSS 시험
• 다시 재기 · 사진 · 긴 핸들 · featured 편집기
• 다섯 검사
• 검사 초록(Drift checks, Web CI) · dev merge(dev 가 c73dfb1 그대로라 merge 할 것 없음) · 겹치는 [DONE] PR 없음 · [DONE]

한 일

components/community/Community.module.css 의 폰 덩어리(@media (max-width: 768px), (hover: none))만 고쳤어요. 데스크톱 규칙은 한 줄도 바뀌지 않아요.

머리줄의 .headerNav > a 와 .headerNav > button 을 min-height: 44px 인 inline-flex 로 했어요. Make, Pattern Lab ↗, 덱 칩, Alerts, Sign in 이 다 44px 예요. 핸들(.userChip)은 말줄임표가 block 상자에서만 되어서 line-height: 44px 로 높이를 받아요. 가장 좁은 Alerts 와 핸들은 12px 틈의 반씩을 좌우로 더 받고(padding: 0 6px), 같은 만큼 음수 margin 으로 돌려줘서 줄 길이는 그대로예요. 모든 상자가 border-box 라 그 padding 이 핸들의 96px 에서 빠지지 않게 머리 안 핸들의 상한을 108px 로 올렸어요.

워드마크의 두 링크(.brand, .pageTitle)는 한 줄씩 24px 를 받아요. Patternflow 는 아래로, COMMUNITY 는 위로 붙여서 두 글자는 전처럼 붙어 보여요. 워드마크가 48px 가 되어서 머리의 위아래 여백을 14px 에서 8px 로 줄였어요. 머리는 65.8px 에서 65px 예요.

펌웨어 띠의 ✕ 는 44×44 이고 Pick an edition → 은 44px 높이예요. 둘 다 띠의 9px 여백 안으로 들어가서 띠는 23px 가 아니라 5px 커져요.

벽의 정렬 탭(.sortTabs a)은 44px 높이에 글자를 아래에 둬서, 글자와 밑줄은 붙은 채 남은 높이를 위로 받아요. Flashable now(.filterChip)도 44px 예요. 각 줄이 제 여백을 가지니 정렬 탭 줄 사이와 조절 줄 사이의 틈(8px, 12px)은 0 으로 했어요. featured 편집기의 정렬 단추는 같은 탭을 단추로 베낀 것(FeaturedEditor.module.css 의 「Mirrors .sortTabs a」)이라 .sortTabs button 도 같이 넣었어요.

communityCss.test.ts 에 「touch targets on a phone」 시험 열하나를 더했어요. 폰 덩어리에서 머리 링크와 단추, 정렬 탭, Flashable now 의 44px, 핸들의 line-height 와 말줄임표, Alerts 와 핸들의 padding 과 음수 margin 짝과 108px 상한, 워드마크 두 링크의 24px, 머리 여백이 머리 높이를 키우지 않는지, ✕ 의 음수 margin 이 띠의 padding 과 같은지, 줄 틈 0 을 봐요.

증거

Pi 와 같은 NEXT_PUBLIC_COMMUNITY_URL, NEXT_PUBLIC_BUILD_ENABLED 로 dev 의 CSS 와 이 브랜치를 따로 빌드했어요. 스크래치 DB 에 ada 와 bea, 프리셋 코드로 된 공개 패턴 여덟을 HTTP 로 넣었어요. 쪽 다섯(/community, /community/patterns, /community/decks, /community/u/ada, /community/featured)을 로그아웃과 ada 로 열어, 보이는 링크 · 단추 · 칸의 크기를 Playwright 로 읽었어요(isMobile 없이 390×844). 2.5.8 은 24px 아래 칸에 24px 원을 그려 다른 칸이나 다른 원과 만나는지 셌어요.

390px · /community/patterns       dev          이 브랜치
펌웨어 띠 ✕                        18.9×21      44×44
펌웨어 띠 Pick an edition →        101.3×18.1   101.3×44
Patternflow                       90.9×18.4    90.9×24
COMMUNITY                         90.9×11.5    90.9×24
Pattern Lab ↗ (로그아웃)           86.1×18.8    86.1×44
▦ 0/20                            64.9×29.2    64.9×44
Sign in (로그아웃)                 71.6×36.8    71.6×44
Make ↗ (ada)                      71.4×35.4    71.4×44
Alerts (ada)                      35.8×18.8    47.8×44
@ada                              28.8×17.4    40.8×44
정렬 탭 다섯 · 여섯                25.6 높이     44 높이
.h Flashable now                  117.6×18.1   117.6×44

머리 높이                          65.8 (ada 64.4)   65
펌웨어 띠 높이                      105.4        110.4
첫 카드 y (로그아웃, 탭 한 줄)       362          386.5
첫 카드 y (ada, 탭 두 줄)           394.1        430.5
첫 카드 y (/community)              663          687.5
2.5.8 걸림 (쪽 다섯 × 둘)           열 번 다 2곳   열 번 다 0곳
가로 넘침 (scrollWidth)             390          390

dev 의 2.5.8 두 곳은 열 번 모두 「Patternflow (90.9×18.4) meets Community (90.9×11.5)」 와 그 반대였어요. 1440px 에서 같은 열 번을 잰 출력은 dev 와 이 브랜치가 한 글자도 다르지 않아요(diff 출력 없음).

19자 핸들 maximilian_longname 으로 로그인하면 두 빌드 다 링크 줄이 워드마크 아래로 내려가요. 머리는 102.3px 에서 117px 이고, 핸들은 둘 다 96px 의 글자에서 말줄임표로 끝나요. 줄은 x 374 에서 끝나요(16px 여백).

dev        Make 69.9+71.4 · ▦ 153.3+64.9 · Alerts 230.2+35.8 · @maximilian_… 278.0+96.0  (h 35.4 · 29.2 · 18.8 · 17.4)
이 브랜치   Make 69.9+71.4 · ▦ 153.3+64.9 · Alerts 224.2+47.8 · @maximilian_… 272.0+108.0 (h 44 · 44 · 44 · 44)

ada 를 운영자로 둔 서버에서 /community/featured 의 정렬 단추 넷은 390px 에서 44px, 1440px 에서 25.6px 그대로예요.

새 시험을 dev 의 CSS 로 돌렸을 때:

 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives .headerNav > a 44px of height
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives .headerNav > button 44px of height
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives .sortTabs a 44px of height
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives .sortTabs button 44px of height
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives .filterChip 44px of height
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives the handle its 44px from the line and keeps the ellipsis
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > widens Alerts and the handle without lengthening the row
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives the wordmark's two links a 24px line each
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > keeps the header as tall as it was
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > gives the notice's ✕ a 44px square inside the strip's padding
 FAIL  src/components/community/communityCss.test.ts > touch targets on a phone > drops the gaps between the wall's control rows
      Tests  11 failed | 31 passed (42)

고친 뒤:

 ✓ src/components/community/communityCss.test.ts (42 tests)
      Tests  42 passed (42)

다섯 검사(web/ 에서):

npm ci                              added 1024 packages, and audited 1025 packages in 1m
npm run lint -- --max-warnings=0    lint exit 0 (출력 없음)
npm run typecheck                   typecheck exit 0 (출력 없음)
npm run build                       build exit 0
npm run check:ci                    Test Files 117 passed (117) · Tests 1442 passed (1442) · passed virtual-panel · skipped roadmap · exit 0
npm run check:voice                 check:voice: nothing found
npm run check:human-lock            check:human-lock: no locked words changed

check:ci 의 links-absolute 와 roadmap 은 이 컨테이너에 gh 로그인이 없어서 skipped 예요. PR 의 drift.yml 이 다시 돌렸고, 8292761 에서 Drift checks 와 Web CI 가 둘 다 success 예요.

실행법

# web/ 에서
npx vitest run src/components/community/communityCss.test.ts
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/patterns 를 열면 머리줄의 단추와 정렬 탭이 44px 높이예요. 데스크톱은 그대로예요.

가정

• 워드마크의 두 링크는 44px 가 아니라 24px 씩이에요. 후보 줄도 「브랜드 줄 24px」 였고, 44px 씩이면 워드마크만 88px 라 머리가 23px 커져요. 24px 둘이면 2.5.8 은 통과해요.
• 후보 줄은 머리가 65.8px 에서 77px 가 된다고 했어요. 머리의 위아래 여백을 14px 에서 8px 로 줄여 65px 에 두었어요.
• 정렬 탭은 가로로는 넓히지 않았어요. 밑줄이 padding 상자에 그려져서 넓히면 고른 탭의 밑줄이 글자보다 16px 길어져요. 가장 좁은 Liked 도 34.6px 라 2.5.8 은 통과해요.
• 정렬 칸이 커져서 첫 카드가 로그아웃에서 24.5px, 탭이 두 줄인 로그인에서 36.4px 내려가요. 후보 줄의 44px 보다 적은 건 줄 사이 틈을 0 으로 해서예요.
• 펌웨어 띠의 Pick an edition → 은 후보 줄에 없었어요. ✕ 가 44px 가 되면 그 줄이 어차피 44px 라서 같이 44px 로 했어요.
• (hover: none) 이 폰 질의에 있어서 아이패드처럼 넓은 터치 화면도 같은 44px 를 받아요. 그런 화면은 이미 폰 머리를 받고 있었어요.
• 가이드의 연습 커뮤니티도 같은 클래스를 써요. 390px 에선 그려지지 않고 1440px 에선 데스크톱 크기 그대로라 이번 규칙이 닿지 않아요. 터치 화면에선 진짜 커뮤니티와 같이 44px 가 돼요.
• 데스크톱 1440px 에서도 Patternflow 와 COMMUNITY 는 2.5.8 에 걸려요(열 번 다 2곳). 후보 줄이 폰이라 데스크톱은 그대로 두었어요. 48px 워드마크면 데스크톱 머리가 69.8px 에서 81px 쯤 돼요.
• 이 컨테이너의 gh 는 토큰이 맞지 않아서, 일꾼 규칙의 검사 기다림과 겹침 기다림 두 줄은 gh api 대신 공개 레포를 로그인 없이 읽는 curl 로 돌렸어요. 읽는 주소와 끝내는 조건은 같아요.
• 표 밖: 폰에서 로그아웃 단추가 있는 내 프로필의 「sign out」 은 390px 에서 55.5×15.2 예요.
• 표 밖: 운영자의 /community/featured 는 390px 에서 가로가 393px 예요. 슬롯 카드의 .cardStats 가 x 393.4 까지 나가요. 이번에 고친 규칙과 상관없어요.

Changelog

Web

• The community header and the wall's controls take a thumb on a phone. At phone widths every link and button in the header, the firmware notice's ✕ and link, the wall's sort tabs and Flashable now are 44px tall, where Alerts was 18.8px and the ✕ 18.9×21. The wordmark's two links get a 24px line each and no longer overlap under WCAG 2.5.8, and the header stays 65px tall.

바퀴

바퀴 120 · 후보 15 「폰에서 커뮤니티 머리줄과 벽의 정렬 칸을 엄지로 누를 수 있다」

경험

언제: 바퀴에서 next start 로 띄운 서버를 멈추고 다시 빌드할 때
교훈: pkill -f "next start -p 3100" 은 그 글이 든 제 Bash 셸까지 죽이니 pkill -f '^next-server' 로 서버 프로세스만 멈추고, 다시 띄우기 전에 pgrep -af '^next-server' 가 비었는지 봐요
근거: #291 에서 서버를 멈추고 빌드하려던 명령 둘이 빌드도 하기 전에 exit 144 로 끝났고, 살아남은 옛 서버가 3100 을 쥔 채 새 .next 의 CSS 덩이를 못 찾아 스타일 없는 쪽을 쟀어요

다음 바퀴

• 16 「서버가 HTML 오류 쪽을 돌려줘도 커뮤니티 글 칸이 「Network error.」 대신 서버가 몇 번으로 답했는지 말한다」 — JSON 이 아닌 답에 던지는 response.json() 이 28곳이에요.
• 17 「「Liked」 탭이 비면 아무도 올리지 않았다는 글 대신 아직 좋아한 패턴이 없다고 한다」 — 좋아한 것이 없는 회원에게 「Nobody has hung anything here yet.」 이 떠요.
• 18 「서버가 거절한 좋아요가 말없이 되돌아가지 않고 까닭을 보인다」 — 429 에 단추가 150ms 안에 꺼지고 어디에도 글이 없어요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01M6eqwTXUYYSnQ68ocoQv2X