[patternflow-bot]

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

패턴 쪽의 좋아요 단추와 벽 카드의 하트는 서버가 거절하면 켜졌다가 말없이 꺼졌어요. 그래서 429 가 눌러도 안 먹는 단추로 읽혔어요. 머지하면 둘 다 되돌리면서 까닭을 보여요. 서버가 보낸 글(「Too many likes — slow down a moment.」)이 있으면 그 글이고, 프록시 쪽이 답했으면 「Like not saved (HTTP 502).」 예요.

좋아지는 것: 좋아요가 안 먹으면 까닭이 보인다 — 눌러도 안 되는 단추로 읽히지 않는다

• 앞 바퀴 PR 댓글 읽기 ([DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183~[DONE] 「Liked」 탭이 비면 아무도 올리지 않았다는 글 대신 아직 좋아한 패턴이 없다고 한다 #293, 세 직함이 일을 시킨 글 없음)
• 후보 표에서 남은 줄 고르기 (18위)
• LikeButton.tsx 와 PatternCard.tsx 의 실패 갈래가 readApiError 로 까닭을 보이기
• 429 · HTML 502 · 끊김 시험 (dev 에서 빨갛고 고친 뒤 초록)
• 다섯 검사
• 폰 390 · 데스크톱 1440 사진

한 일

components/community/LikeButton.tsx 는 실패 갈래(dev :47:51)에서 readApiError(response, "Like not saved") 를 불러 그 글을 단추 옆에 role="alert" 로 둬요. fetch 가 아무 데도 닿지 못한 catch(:55:58)는 다른 커뮤니티 글 칸처럼 「Network error.」 예요. 글은 다음에 누를 때 지워져요. 제목 줄(.metaTitleRow)이 줄을 바꾸는 flex 라서, 폰에서는 제목 아래로 내려가요. 글 꼴은 새 .likeNote 예요(mono 12px, --pfc-danger).

components/community/PatternCard.tsx 는 같은 두 갈래(dev :190:194, :198:201)에서 그 글을 카드에 이미 있던 쪽지 자리에 띄워요. 덱이 찼을 때 「Deck is full.」 이 2.5초 뜨던 자리예요. 이제 덱과 좋아요가 같이 쓰니 이름을 deckNote 에서 cardNote 로 바꿨어요. 쪽지를 띄우는 flashNote 는 앞 쪽지의 타이머를 지우고 새로 2.5초를 재요. 전에는 타이머를 지우지 않아서, 앞 쪽지의 타이머가 뒤 쪽지를 일찍 지울 수 있었어요.

시험은 새 components/community/likeErrors.test.tsx 예요. 두 단추에 429 JSON, HTML 502, 끊김을 주고 role="alert" 의 글과 되돌린 aria-pressed, 수를 봐요. 받아들인 좋아요엔 글이 없는지도 봐요.

증거

이 브랜치와 dev 의 세 파일(LikeButton.tsx, PatternCard.tsx, Community.module.css)을 따로 next build 했어요. NEXT_PUBLIC_BUILD_ENABLED=1 이고, NEXT_PUBLIC_COMMUNITY_URL 은 띄운 서버 http://localhost:3100 이에요. 스크래치 DB 에 ada 와 프리셋 코드로 된 공개 패턴 셋을 HTTP 로 넣고, ada 로 패턴 쪽과 /community/patterns 를 열었어요. Playwright context.route 가 좋아요 POST 하나에만 경로가 쓰는 429 와 {"error":"Too many likes — slow down a moment."} 를 돌려줬어요. 나머지는 진짜 서버가 답했어요.

                  dev                                   이 브랜치
390 패턴 쪽        aria-pressed false · LIK 00 · 글 없음   aria-pressed false · LIK 00 · 「Too many likes — slow down a moment.」
390 벽 카드        aria-pressed false · 글 없음            aria-pressed false · 「Too many likes — slow down a moment.」 · 3초 뒤 없음
1440 패턴 쪽       aria-pressed false · LIK 00 · 글 없음   aria-pressed false · LIK 00 · 「Too many likes — slow down a moment.」
1440 벽 카드       aria-pressed false · 글 없음            aria-pressed false · 「Too many likes — slow down a moment.」 · 3초 뒤 없음
좋아요 POST        네 번 다 1번                            네 번 다 1번

새 시험을 dev 의 두 컴포넌트로 돌렸을 때:

   × the pattern page's like button > rolls back and shows the server's words on a 429
   × the pattern page's like button > names the status when a proxy page answers
   × the pattern page's like button > says Network error when nothing answered
   × the pattern page's like button > clears the note when the next press goes through
   × the wall card's heart > rolls back and shows the server's words on a 429
   × the wall card's heart > names the status when a proxy page answers
   × the wall card's heart > says Network error when nothing answered
   ✓ the wall card's heart > takes the like without a note when the server agrees
      Tests  7 failed | 1 passed (8)

이 브랜치에서:

 ✓ src/components/community/likeErrors.test.tsx (8 tests)
      Tests  8 passed (8)

다섯 검사(web/ 에서):

npm ci                              added 1024 packages, and audited 1025 packages in 56s
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 121 passed (121) · Tests 1481 passed (1481) · skipped links-absolute · skipped roadmap · exit 0
npm run check:voice                 check:voice: nothing found

links-absolute 와 roadmap 은 이 컨테이너에 gh 로 원래 레포를 읽을 길이 없어서 skipped 예요. PR 의 drift.yml 이 다시 돌려요. 문서는 고치지 않아서 check:human-lock 은 돌리지 않았어요.

PR 의 검사는 6cee6b3 에서 Drift checks 와 Web CI 둘 다 success 예요.

실행법

# web/ 에서
npx vitest run src/components/community/likeErrors.test.tsx

화면으로 보려면 커뮤니티에 로그인해 패턴 쪽을 열고, 개발자 도구에서 POST /api/community/patterns/<id>/like 를 막은 뒤 LIK 단추를 눌러요. 막으면 「Network error.」 이고, 1분 안에 61번 누르면 서버의 429 글이에요.

가정

• 패턴 쪽의 글은 시간이 지나도 남고 다음에 누를 때 지워져요. 단추 옆 자리는 다른 것을 가리지 않아서 읽을 시간을 줬어요. 카드는 썸네일을 덮으니 덱 쪽지처럼 2.5초예요.
• 두 글 다 role="alert" 예요. 33위는 이미 있는 오류 자리 29곳에 이 역할을 다는 줄이고, 이번 바퀴는 새로 만든 두 자리에만 달았어요. 33위는 그대로 남아요.
• 「고친 뒤」 사진에서 role="alert" 를 세면 빈 것이 하나 더 나와요. Next 의 경로 안내(__next-route-announcer__)라서 표에서 뺐어요.
• 빌드의 NEXT_PUBLIC_COMMUNITY_URL 은 Pi 의 주소 대신 띄운 서버의 주소예요. Pi 의 주소로 빌드하면 localhost 의 쪽이 좋아요를 그 주소로 보내요(crossOriginCommunityBase).
• 표 밖: PatternCard.tsx:101:107(dev :96:102)의 fetchPatternHeader 는 아직 ok 를 보지 않고 몸을 JSON 으로 읽어요. 덱에 넣을 때 프록시 쪽이 답하면 그 까닭이 사라져요. [DONE] 서버가 HTML 오류 쪽을 돌려줘도 커뮤니티 글 칸이 「Network error.」 대신 서버가 몇 번으로 답했는지 말한다 #292 「가정」의 남은 19곳 가운데 하나예요.

Changelog

Web

• A like the server turns down says why. The pattern page's like button and the wall card's heart rolled back without a word when the server refused, so a 429 read as a button that ignored the press; both now show the route's message ("Too many likes — slow down a moment."), or the status when a proxy page answered.

경험

언제: 커뮤니티 쪽의 오류 글을 Playwright 로 getByRole("alert") 해서 셀 때
교훈: Next 의 경로 안내가 쪽마다 빈 role="alert" 하나를 두니, allInnerTexts() 에서 빈 글을 빼고 세요
근거: #294 에서 dev 빌드의 패턴 쪽이 글 없이도 alert 하나("")를 돌려줘서, 빼지 않았으면 「고치기 전」 도 alert 가 있다고 읽혔어요

바퀴

바퀴 123 · 후보 18 「서버가 거절한 좋아요가 말없이 되돌아가지 않고 까닭을 보인다」

다음 바퀴

1. 19위 「Preview 에서 댓글을 올리면 칸이 Write 로 돌아온다」: BodyComposer.tsx:34 의 previewing 이 글이 비어도 그대로라 올린 뒤 글 칸이 사라져요.
2. 20위 「댓글 마크다운이 머리 주석이 말한 시험을 얻고, 같은 쪽 링크가 새 탭으로 열리지 않는다」: safeHref 를 부르는 시험이 0곳이고, 각주 링크가 target="_blank" 로 같은 쪽을 새 탭에 열어요.
3. 21위 「덱과 보내기 창 여섯이 Esc 로 닫히고, 열리면 초점이 창 안으로, 닫히면 연 단추로 간다」: 여섯 창이 useDialog 를 쓰지 않아 Esc 가 아무것도 하지 않아요.

https://claude.ai/code/session_01EexebwGmxDtbqRMCdvR8ow

---

Generated by Claude Code