[patternflow-bot]

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

폰 규칙이 쪽 머리의 빈 칸만 숨기게 좁히고, 내 프로필의 단추 묶음은 제 여백으로 오른쪽에 서게 했어요. 머지하면 390px 에서 댓글 Post 가 x 16 대신 316 에, 덱 패널의 ↑ 다섯이 104~213 사이로 들쭉날쭉하던 자리 대신 모두 213 에, 프로필의 Make & publish 가 16 대신 234 에 서요.

좋아지는 것: 폰에서 단추들이 오른쪽 제자리에 선다 — 댓글 올리기와 덱 순서 단추를 찾지 않아도 된다

• 앞 바퀴 PR 의 댓글 · 리뷰 읽기 (세 직함이 쓴 글은 PR 을 닫는다는 말 셋뿐이라 맡을 글 없음)
• 고를 줄 정하기: 후보 7 (1~6 은 [DONE] 회원이 표시 이름을 남의 이름으로 바꿔 카드와 라이선스 머리에 그 사람으로 나오지 못한다 #275, [DONE] 제목에 든 줄바꿈이 패턴 코드의 한 줄이 되지 않고, 포크한 사람의 코드에도 남의 줄이 따라가지 않는다 #276, [DONE] 커뮤니티의 흐린 회색 글자가 어두운 바탕에서 읽힌다 #277, [DONE] 폰에서 커뮤니티 벽이 여섯 칸으로 떴다가 세 칸으로 다시 놓이지 않는다 #279, [DONE] 폰에서 긴 덱 이름 하나가 덱 쪽과 프로필을 옆으로 밀고 YOU 탭을 화면 밖으로 내보내지 않는다 #280, [DONE] 커뮤니티 창 안에서 글을 끌어 고르다 창 밖에서 놓아도 창이 닫히지 않고 쓴 글이 남는다 #281)
• 폰 규칙을 .pageHeader > .headerSpacer 로 좁히기
• 두 칸 .actionRow 의 빈 칸은 그 그리드가 있는 900px 덩어리에서 숨기기
• 프로필 단추 묶음에 margin-left: auto
• communityCss.test.ts 에 검사 넷 (dev 에서 셋 빨갛고 고친 뒤 넷 다 초록)
• 390 · 820 · 1440 에서 재기, 390 · 1440 사진
• 다섯 검사
• dev merge(dev 가 cac3ad7 그대로라 가져올 것 없음) · CI 초록(Web CI, Drift checks, 3bb525a) · 겹치는 [DONE] PR 없음

한 일

components/community/Community.module.css 폰 덩어리((max-width: 768px), (hover: none))가 .headerSpacer 를 통째로 숨겼어요. 쪽 머리에서 Patterns · Decks 메뉴가 아래 탭 바로 간 뒤 남는 빈 칸을 숨기려던 규칙이에요. 그런데 같은 span 을 단추를 오른쪽으로 미는 데 쓰는 줄이 여덟 곳 더 있었어요. 댓글 칸 아래 줄, 댓글 칸의 Write · Preview 줄, 덱 패널의 패턴 줄과 단추 줄 둘, 프로필 머리, 운영자 쪽의 신고 줄과 마퀴 편집 줄이에요. 이제 그 규칙은 .pageHeader > .headerSpacer 만 숨겨요. 덱 패널 창은 머리의 덱 칩 옆, 곧 <header> 안에 그려져서 자손 셀렉터가 아니라 자식 셀렉터예요.

덱 패널의 단추 줄(.actionRow)은 900px 밑에서 두 칸 그리드예요. 거기서 빈 칸은 칸 하나를 차지해 Empty deck 을 셋째 줄로 밀어요. 그래서 그 그리드가 있는 (max-width: 900px) 덩어리에 .actionRow > .headerSpacer { display: none } 을 뒀어요. dev 에선 폰 규칙이 이 일을 대신했는데, 769~900px 창엔 그 규칙이 닿지 않았어요. 820px 에서 Share deck 아래(y 732)로 떨어져 있던 Empty deck 이 이제 그 옆(y 706)에 서요.

프로필은 빈 칸을 살리는 것만으로는 서지 않았어요. 390px 에서 「@ada YOU」 와 통계 줄이 첫 줄을 쓰고 단추 묶음은 둘째 줄로 넘어가요. flex: 1 빈 칸은 첫 줄에 남아서 둘째 줄을 밀지 못해요. 그래서 .profileSelfActions 에 margin-left: auto 를 주고 app/community/u/[username]/page.tsx 의 빈 칸 span 은 뺐어요. 그 묶음은 이미 align-items: flex-end 로 안의 sign out 을 오른쪽에 붙이고 있었어요.

1440px 은 그대로예요. 가이드 연습 커뮤니티(components/guide/desk/community/pages.tsx:54)의 빈 칸도 .pageHeader 의 자식이라 폰에서 그대로 숨어요.

증거

Pi 와 같은 NEXT_PUBLIC_COMMUNITY_URL, NEXT_PUBLIC_BUILD_ENABLED 로 빌드하고, 스크래치 DB 에 ada 하나와 공개 패턴 다섯(「Tide」, 「Slow ramps for the late set」, 「Origin, slower」, 「Night bus window」, 「Grid」)을 HTTP 로 넣었어요. 덱은 pf-deck 에 그 다섯을 넣고, 패널은 폰에선 pf-open-deck-panel 이벤트로 열었어요. 고치기 전은 같은 빌드에 dev 를 되돌려 넣고 쟀어요. 390 과 1440 은 @media (max-width: 768px), (hover: none) { [class*="headerSpacer"] { display: none !important } [class*="profileSelfActions"] { margin-left: 0 !important } }, 820 은 [class*="actionRow"] > [class*="headerSpacer"] { display: inline !important } 예요. 첫 빌드(프로필 고침 전, dev 의 빈 칸 span 이 있는 판)에서도 390 프로필은 16156, 820 은 640780, 1440 은 1260~1400 이라 아래 「전」과 같아요. 폰은 isMobile, hasTouch 를 켰고 ada 로 로그인했어요. 가로 넘침(scrollWidth/visualViewport.width)은 아홉 쪽 모두 넘지 않았어요.

                 댓글 Post      프로필 Make & publish   덱 패널 ↑ x                덱 패널 Share deck · Empty deck
390   전         16~74          16~156 (y 169)          104, 213, 166, 194, 103    41~191 · 199~349, 같은 줄 y 655
390   뒤         316~374        234~374 (y 169)         213, 213, 213, 213, 213    41~191 · 199~349, 같은 줄 y 655
820   전         722~780        640~780                 613 × 5                    71~406 (y 680) · 71~406 (y 732), 두 줄
820   뒤         722~780        640~780                 613 × 5                    71~406 · 414~749, 같은 줄 y 706
1440  전 · 뒤    742~800        1260~1400               923 × 5                    518~617 · 697~821, 같은 줄 y 633

운영자 쪽 두 줄도 390px 에서 데스크톱처럼 단추가 오른쪽으로 가요(ada 를 COMMUNITY_ADMIN_USERNAMES 로 두고 신고 하나를 넣었어요).

390 전  /community/reports   Dismiss x 91~168            · scroll 390/390
390 뒤  /community/reports   Dismiss x 152~230           · scroll 390/390
390 전  /community/featured  Save the marquee x 144~286  · scroll 393/390
390 뒤  /community/featured  Save the marquee x 232~374  · scroll 393/390

새 검사를 dev 의 CSS 로 돌렸을 때:

 FAIL  src/components/community/communityCss.test.ts > the header spacer on a phone > hides only the page header's own spacer
AssertionError: expected [ '.headerSpacer' ] to deeply equal [ '.pageHeader > .headerSpacer' ]
 FAIL  src/components/community/communityCss.test.ts > the header spacer on a phone > still hides it in the action grid, wherever that grid is drawn
AssertionError: .actionRow > .headerSpacer is missing from @media (max-width: 900px): expected undefined to be defined
 FAIL  src/components/community/communityCss.test.ts > the header spacer on a phone > keeps your profile's actions right when they wrap under the name
AssertionError: expected [ 'display: flex', …(3) ] to include 'margin-left: auto'
      Tests  3 failed | 20 passed (23)

고친 뒤:

      Tests  23 passed (23)

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

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

실행법

# 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 npx next start -p 3100

그 서버에 /api/auth/sign-up/email 과 /api/community/patterns 로 가입과 패턴을 넣고, playwright-core 1.56.1 로 단추의 getBoundingClientRect() 를 읽었어요. 스크래치 폴더에 깔았고 package.json 은 그대로예요.

가정

• 표의 고칠 곳은 Community.module.css 의 폰 규칙 하나였어요. 그 규칙만 좁히니 댓글과 덱 패널은 섰는데 프로필은 390px 에서 그대로 16~156 이었어요. 표가 바란 234 를 맞추려고 .profileSelfActions 의 margin-left: auto 와 프로필 쪽의 빈 칸 span 빼기를 더했어요. 같은 주제의 같은 줄이라 이 바퀴에 넣었어요.
• 두 칸 .actionRow 의 빈 칸 숨기기는 폰 덩어리가 아니라 그리드가 사는 (max-width: 900px) 덩어리에 뒀어요. 그래서 769~900px 창에서도 Empty deck 이 한 줄 내려가지 않아요. dev 에서 그 폭은 이미 빈 칸이 그리드 칸을 차지하고 있었어요.
• 터치 화면이면서 900px 보다 넓은 창(가로로 든 태블릿)에선 이제 빈 칸이 쪽 머리 밖에서 데스크톱처럼 살아요. dev 에선 거기서도 다 숨었어요.
• 표 밖: 390px 의 /community/featured 가 393px 로 넓어요. 마퀴 후보 카드의 .cardStats(「2026-10-26 · LIK 00」)가 오른쪽 끝을 3px 넘고 탭 바가 같이 393px 가 돼요. 고치기 전과 뒤가 같아서 이 바퀴의 일이 아니에요.

Changelog

Web

• Buttons that belong on the right stay there on a phone in the community. The phone rule that hid the page header's spacer hid the same span in eight other rows, so at 390px the comment Post button sat at the left edge, the deck panel's order buttons moved with each title's length, and Make & publish on your own profile wrapped to the left.

경험

언제: 줄이 넘어갈 수 있는(flex-wrap) 줄에서 마지막 항목을 오른쪽에 세울 때
교훈: flex: 1 빈 span 은 첫 줄에 남아 넘어간 항목을 밀지 못하니, 그 항목에 margin-left: auto 를 줘요
근거: #283 에서 빈 칸을 살려도 390px 프로필의 Make & publish 는 둘째 줄 x 16 에 섰고, margin-left: auto 를 주니 234 에 섰어요

바퀴

바퀴 112 · 후보 7 「폰에서 댓글의 Post 단추와 덱 패널의 순서 단추, 내 프로필의 단추가 오른쪽 제자리에 선다」

다음 바퀴

• 8위 「지워졌거나 비공개인 패턴, 덱, 프로필 링크가 커뮤니티 안에서 까닭을 말한다」: app/community/ 아래 not-found.tsx 가 없어 사이트 뿌리의 404 쪽이 떠요.
• 9위 「머리줄의 알림 수가 알림 쪽을 열면 사라지고, 쪽에 보이지 않는 알림은 세지 않는다」: 읽음 POST 뒤 다시 그리지 않고, 세는 쿼리가 목록의 거르기를 따르지 않아요.
• 10위 「커뮤니티 쪽이 Pattern Lab 코드 218 KB 를 뒤에서 받지 않는다」: 머리의 /pattern-lab Link 가 Lab 덩이 여덟을 미리 받아요.

---

Generated by Claude Code