fix(chat): 간헐적 스크롤 튐 · 나간 방 표시 · 화면 전환 흰 깜빡임

[nuyh99]

QA 3건입니다. 원인이 서로 달라 나눠 적습니다.

1. 들락날락하다 보면 가끔 포커스가 위로 튄다

#12 로 진입 직후는 잡혔는데, 반복하다 중간에 튀는 건 다른 원인이었습니다.

1:1 목록만 skipNextAutoScroll 플래그를 비우지 않고 있었습니다.

// 1:1 (기존)
if (renderedLatestKey.current === latestKey) return;          // ← 플래그 그대로

// 그룹 (원래부터)
if (renderedLatestMessageId.current === latest.id) {
  skipNextAutoScroll.current = false;                          // ← 비운다
  return;
}

과거를 붙여도 마지막 메시지는 그대로라 항상 이 분기에서 끝납니다. 그래서 "위로 올려 과거 읽기" 한 번이 플래그를 세운 채로 남기고, 그 뒤 새 메시지가 오거나 내가 하나 보내면 그제서야 보정 분기가 열리면서 바닥으로 가야 할 화면이 그때 잰 옛 높이로 튀었습니다. 보내보고 나갔다 들어오길 반복하다 걸린 이유가 이것입니다.

그룹과 동작을 맞췄고, 쓰이지 않게 된 previousScrollHeight 도 걷었습니다. 위로 올려 과거를 읽는 중에 바닥으로 끌려가지 않는 동작은 그대로입니다(그룹처럼 scrollTop 을 직접 만지지 않고 브라우저가 위치를 유지합니다).

2. 그룹 방을 나갔는데 목록에 그대로 남는다

서버는 나간 방을 지우지 않고 읽기 전용으로 남기는 것이 계약입니다(hasLeft: true, BE 요청서 회신에 기록). 방 화면은 이미 그 값으로 입력·투표·나가기를 막고 있었는데, 목록만 hasLeft 를 보지 않아 "진행중" 배지를 달고 안읽음까지 셌습니다.

종료된 방과 같은 규칙으로 다루되(진행중 필터에서 빠지고, 안읽음 배지 없음) 배지 문구는 "나간 방"으로 가릅니다 — 방은 남은 사람들끼리 이어질 수 있어 "종료"는 사실이 아닙니다.

목록에서 아예 숨기는 선택지도 있습니다. 서버가 읽기 전용으로 남기기로 한 취지(지난 대화를 볼 수 있게)를 따라 남기는 쪽으로 했는데, 제품에서 숨기는 게 맞다고 보시면 한 줄입니다.

3. 화면을 옮길 때 흰 화면이 한 번 스친다

capacitor.config.ts 의 웹뷰 배경색이 android 에만 있었습니다. iOS 는 웹뷰 기본색(흰색) 그대로라, 웹뷰가 다시 그려지는 사이 흰 화면이 드러났습니다.

+ backgroundColor: "#E9E6E2",   // 전역 — 두 플랫폼이 같이 받는다
  android: {
-   backgroundColor: "#E9E6E2",
  },

⚠️ 이건 웹 배포로 반영되지 않습니다. 네이티브 셸 설정이라 npm run cap:sync 후 앱을 다시 빌드·배포해야 합니다. 1·2번은 이 PR 머지 즉시 반영됩니다.

그리고 이 값은 --color-atomic-neutral-95 복제본입니다. layout.tsx 의 themeColor 와 같은 값이라, 토큰이 바뀌면 세 곳을 함께 바꿔야 합니다(주석에 남겼습니다).

테스트

cypress/e2e/chat/** 43건 전부 통과, npm run verify 통과(lint 0 errors · typecheck · vitest 268건).

chat-list.cy.ts 에 2번 회귀 테스트를 더했고 되돌리면 실패하는 것까지 확인했습니다 — 나간 방이 "나간 방" 배지로 뜨고, 안읽음 배지가 붙지 않고, 진행중 필터에서 빠져 종료 필터에 들어가는지.

1번은 타이밍(플래그가 남았다가 다음 메시지에서 터지는 경로)이라 E2E 로 안정적으로 재현하기 어려워 테스트를 붙이지 않았습니다. 그룹 목록이 이미 같은 처리를 하고 있어 두 목록의 동작이 같아진 것이 근거입니다.

🤖 Generated with Claude Code