From bf205f8b52ca92d59499a457aa9144a4047b87b7 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Wed, 17 Dec 2025 15:58:59 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EB=B2=A0=EC=9D=B4=EC=A7=80=EC=95=88=20?= =?UTF-8?q?=EB=B0=9C=ED=91=9C=20=EC=9E=85=EB=A0=A5=20=ED=95=84=EB=93=9C=20?= =?UTF-8?q?UX=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EB=A6=AC=EC=85=8B=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 입력값 유실 문제 해결 (서버 상태 동기화) - 입력 중 덮어쓰기 방지 (포커스 필드 보호) - 자동 저장 구현 (debounce 300ms) - 리셋 버튼 정상 작동 (로컬 상태 초기화) --- ...bayesian_presentation_ballquiz_redesign.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/journey/troubleshooting/251216_bayesian_presentation_ballquiz_redesign.md b/journey/troubleshooting/251216_bayesian_presentation_ballquiz_redesign.md index 7f92e59..801d3b9 100644 --- a/journey/troubleshooting/251216_bayesian_presentation_ballquiz_redesign.md +++ b/journey/troubleshooting/251216_bayesian_presentation_ballquiz_redesign.md @@ -28,6 +28,11 @@ - Section 1 제거 후에도 백엔드 기본 section이 1로 유지 - 프론트엔드에서 section 2로 시작하도록 변경했으나 백엔드와 불일치 +### 5. 입력 필드 UX 문제 (2025-12-17 추가) +- **입력값 유실**: 페이지 새로고침/재연결 시 입력한 확률이 사라짐 (서버에는 저장되지만 화면에 표시 안 됨) +- **입력 중 덮어쓰기**: 입력 중 서버 `state_update`가 오면 아직 저장되지 않은 입력값이 사라짐 +- **리셋 버튼 미작동**: 리셋 후에도 테이블의 입력값이 그대로 남아있어 초기화되지 않음 + --- ## 해결 방안 @@ -52,6 +57,12 @@ - `state_service.py:207`: `reset_state`에서도 section 2로 초기화 - 프론트엔드와 백엔드 일치 +### 입력 필드 UX 개선 (2025-12-17) +- **서버 상태로 로컬 상태 동기화**: `BallQuizPage.tsx:25-86` - `useEffect`로 서버 `state_update` 수신 시 `participantInputs` 동기화 +- **입력 중 필드 보호**: `BallQuizPage.tsx:22` - `focusedInputRef`로 포커스 중인 필드는 서버 업데이트로 덮어쓰지 않음 +- **자동 저장**: `BallQuizPage.tsx:94-120` - `useEffect` + debounce(300ms)로 입력값 자동 저장 +- **리셋 시 로컬 상태 초기화**: `BallQuizPage.tsx:26-29` - `estimates`가 빈 객체일 때 `participantInputs`도 빈 객체로 초기화 + --- ## 구현 완료 @@ -60,6 +71,11 @@ - 42개 셀(7명 × 6컬럼) 모두 수정 가능 - 포트 3001로 백엔드 실행 - 기본 section 2로 통일 +- 입력 필드 UX 개선 완료 (2025-12-17) + - 새로고침/재연결 시 입력값 유지 + - 입력 중 서버 업데이트로 덮어쓰기 방지 + - 자동 저장으로 입력값 유실 방지 + - 리셋 버튼 정상 작동 --- @@ -94,3 +110,10 @@ - 코드 변경 후 반드시 실제 브라우저에서 동작 확인 - **원칙**: `AGENTS.md` - 직접 확인 후 진행 +### 서버 상태 리셋 시 로컬 상태도 초기화 필수 +- **원인**: `reset_state`로 서버 `estimates`는 `{}`로 초기화되지만, 프론트엔드 `useEffect` 동기화 로직에서 빈 객체일 때 early return하여 `participantInputs`가 초기화되지 않음 +- **교훈**: + - 서버 상태가 빈 객체로 리셋될 때는 로컬 상태도 명시적으로 초기화해야 함 + - `useEffect`에서 early return 전에 빈 객체 체크 후 로컬 상태 초기화 로직 추가 +- **원칙**: `313_React_구조_원칙.md:100-104` - 프론트엔드/백엔드 상태 동기화 +