[patternflow-bot]

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

커뮤니티 창 열둘이 Pattern Lab 의 창처럼 바깥 판에서 누르고 놓았을 때만 닫혀요. 지금까지는 편집 창의 설명 칸에서 글을 끌어 고르다 창 밖에서 손을 떼면 창이 닫히고, 다시 열면 쓴 글이 비어 있었어요. 머지하면 패턴 · 덱 편집, 신고, 로그인, 덱 창에서 글을 고르다 실수로 닫는 일이 없어요.

좋아지는 것: 창 안 글을 끌어 고르다 밖에서 놓아도 창이 남는다 — 쓰던 글을 잃지 않는다

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 의 세 직함 댓글 읽기 (일을 시키는 글 없음)
• 후보 6위 고르기
• 새 시험이 dev 에서 빨갛고 고친 뒤 초록
• Chromium 으로 고치기 전과 뒤를 재기
• 다섯 검사
• dev merge (87e7552) · GitHub 검사 Drift checks 와 Web CI 초록 · 겹치는 [DONE] PR 없음

한 일

바깥 판의 onClick={onClose} 를 useBackdropClose(lib/hooks/useBackdropClose.ts)로 바꿨어요. 바퀴 78(#204)이 Lab 의 창 셋에 만든 그 훅이에요. 누름이 바깥 판에서 시작했고 click 도 바깥 판 자체에 떨어질 때만 닫아요.

바꾼 창은 표 6위가 적은 열둘이에요. PublishModal, EditDetailsModal, ReportModal, AddHeaderModal, AddPerformanceModal, ShareDeckModal, ShareDeckPackModal, AuthModal(혼자 뜰 때의 AuthWindow), SendModuleModal, DeckPanel, 그리고 덱 쪽(app/community/d/[id]/DeckDetailClient.tsx)의 PerformanceModal 과 EditDeckModal 이에요. 카드의 stopPropagation 은 Lab 의 창들처럼 그대로 뒀어요.

새 시험 components/community/backdropClose.test.tsx 는 dialogKeys.test.tsx 옆이에요. 창마다 그 쪽이 여는 길로 열고, 카드의 첫 글 칸(없으면 카드)에서 누른 뒤 바깥 판에서 click 을 보내요. 바깥 판에서 누르고 놓으면 닫히는 것도 같이 봐요. 편집 창은 설명에 쓴 글이 남는지도 읽어요.

증거

고친 뒤 사진은 설명 칸에 「Two waves that cross」 를 쓰고, 칸 안에서 눌러 창 왼쪽 위 바깥 판(6, 6)까지 끌어 놓은 바로 뒤예요. 끌림이 고른 글이 파랗게 남아 있어요. 고치기 전 사진은 같은 끌림에 창이 닫혀서 Edit details 로 다시 연 모습이에요. 설명이 비어 있어요.

새 시험을 dev 의 창으로 돌렸을 때(a362c19, 시험 파일만 더함):

 × the Edit details window > stays open when a drag from inside the card lets go on the backdrop
 ... 열둘 다 같은 줄에서 ×, 「closes on a press that goes down and comes up on the backdrop」 열둘은 ✓
 × community windows > Edit details keeps a description that a drag out of it let go outside
TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name "Description"
 Test Files  1 failed (1)
      Tests  13 failed | 12 passed (25)

고친 뒤(e8d6243):

 Test Files  1 passed (1)
      Tests  25 passed (25)

Pi 와 같은 NEXT_PUBLIC_COMMUNITY_URL, NEXT_PUBLIC_BUILD_ENABLED 로 빌드해 스크래치 DB 서버를 띄우고 Chromium 으로 쟀어요. ada 와 eve 가입, ada 의 공개 패턴 하나와 공개 덱 하나를 HTTP 로 넣었어요. 창을 열고 글 칸에 쓰고, 칸 안에서 마우스를 눌러 바깥 판까지 끌어 놓았어요. 그 뒤 바깥 판을 한 번 눌렀어요. 고치기 전은 같은 트리에서 창 파일 열하나만 dev 판으로 돌려 따로 빌드했어요.

                               끌어서 밖에서 놓기       글                 바깥 판 누르기
고치기 전 (dev 의 창 파일)
1440  Edit details (패턴)      닫힘                     다시 여니 비어 있음   -
1440  Report                   닫힘                     다시 여니 비어 있음   -
1440  Edit deck details        닫힘                     다시 여니 비어 있음   -
1440  Sign in                  닫힘                     다시 여니 비어 있음   -
1440  Deck                     닫힘                     (글 칸 없음)          -
390   다섯 창                  다 닫힘                  넷 다 비어 있음       -

고친 뒤
1440  Edit details (패턴)      열려 있음                남음                  닫힘
1440  Report                   열려 있음                남음                  닫힘
1440  Edit deck details        열려 있음                남음                  닫힘
1440  Sign in                  열려 있음                남음                  닫힘
1440  Deck                     열려 있음                (글 칸 없음)          닫힘
390   다섯 창                  다 열려 있음             넷 다 남음            다 닫힘

다섯 검사(web/ 에서, e8d6243 · 그 뒤 dev 를 merge 한 87e7552 는 incoming/pattern-study/ 만 더해서 새 시험만 다시 돌려 25 passed):

npm ci                              → exit 0
npm run lint -- --max-warnings=0    → exit 0
npm run typecheck                   → exit 0
npm run build                       → ✓ Compiled successfully in 15.3s · exit 0
npm run check:ci                    → Test Files 110 passed (110) · Tests 1369 passed (1369)
                                      drift: passed 14, skipped 2 (links-absolute, roadmap) · exit 0
npm run check:voice                 → check:voice: nothing found (가지가 더한 237줄, 이 본문 둘 다)

실행법

# web/ 에서
npx vitest run src/components/community/backdropClose.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 npx next start -p 3100

그 서버에 /api/auth/sign-up/email, /api/community/patterns, /api/community/decks 로 가입과 패턴, 덱을 넣고, 컨테이너의 Playwright 로 page.mouse.down() 과 page.mouse.up() 을 글 칸과 바깥 판에 나눠 눌렀어요. 데스크톱에선 덱 칩이 숨어 있어서, 덱 독의 Build 단추가 보내는 pf-open-deck-panel 이벤트로 덱 창을 열었어요. package.json 은 그대로예요.

가정

• 시험의 덱 쪽 두 창은 DeckDetailClient.tsx 가 내보내지 않는 함수라서, 시험을 위해 내보내지 않고 주인으로 쪽째 그려 주인 줄의 Edit details 와 Attach performance 로 열었어요.
• 390 도 마우스로 쟀어요. 손가락으로 끌면 브라우저가 쪽을 굴리거나 글을 고를 뿐 click 을 만들지 않아서, 이 문제는 마우스와 트랙패드 몫이에요. 폰 사진은 같은 창이 폰 폭에서 그대로인지 보려고 찍었어요.
• 표 밖: 가이드 연습 벽의 Send 창(components/guide/desk/community/SendDialog.tsx:42)도 바깥 판에 onClick={close} 를 두고 기기 주소 칸이 있어 같은 꼴이에요. 표 6위는 커뮤니티 창 열둘이라 고치지 않았어요.

Changelog

Web

• Community windows stay open when a drag that began inside them ends on the backdrop. Selecting text in Edit details, the report window, sign-in or the deck panel and letting go outside closed the window and dropped what was typed. The twelve community windows now close the way Pattern Lab's do, on a press that begins and ends on the backdrop.

경험

언제: 띄운 next start 서버를 Bash 한 줄 안에서 끄고 그 뒤 일을 이어 갈 때
교훈: pkill -f·pgrep -f 에 서버 이름을 주면 그 줄을 돌리는 셸의 명령줄도 걸려 셸째 죽으니, ps -eo pid,comm 의 comm 칸(next-server)으로 골라 꺼요
근거: #281 에서 pkill -f "next start -p 3100" 과 kill $(pgrep -f next-server) 가 둘 다 exit 144 로 셸을 끊어, 같은 줄의 git checkout 과 빌드가 돌지 않았어요

바퀴

바퀴 111 · 후보 6 「커뮤니티 창 안에서 글을 끌어 고르다 창 밖에서 놓아도 창이 닫히지 않고 쓴 글이 남는다」

다음 바퀴

• 7위 「폰에서 댓글의 Post 단추와 덱 패널의 순서 단추, 내 프로필의 단추가 오른쪽 제자리에 선다」: .headerSpacer 를 숨기는 폰 규칙이 여덟 곳의 빈 칸까지 지워요.
• 8위 「지워졌거나 비공개인 패턴, 덱, 프로필 링크가 커뮤니티 안에서 까닭을 말한다」: app/community/ 아래 not-found.tsx 가 없어 사이트 뿌리의 404 쪽이 떠요.
• 9위 「머리줄의 알림 수가 알림 쪽을 열면 사라지고, 쪽에 보이지 않는 알림은 세지 않는다」: 레이아웃이 수를 한 번만 읽고, 세는 쿼리가 목록이 거르는 알림까지 세요.

https://claude.ai/code/session_01Q8sw7T4oHSw5ysxeUb19Nk

---

Generated by Claude Code