happybell80
6d3ca4b14d
- Section 1 제거 및 Section 2 통합 - 모든 셀(42개) 수정 가능하도록 변경 - 포트 충돌 해결 (8000 → 3001) - 기본 section 설정 일치 (프론트엔드/백엔드) - 반복 실수 교훈 기록 (포트 확인, 기본값 일치, 브라우저 확인)
97 lines
3.8 KiB
Markdown
97 lines
3.8 KiB
Markdown
# 베이지안 프레젠테이션 BallQuiz 페이지 리디자인
|
||
|
||
**날짜**: 2025-12-16
|
||
**작성자**: happybell80
|
||
**관련 파일**:
|
||
- `bayesian-presentation/frontend/src/pages/BallQuizPage.tsx`
|
||
- `bayesian-presentation/backend/app/services/state_service.py`
|
||
- `bayesian-presentation/backend/main.py`
|
||
|
||
---
|
||
|
||
## 문제 상황
|
||
|
||
### 1. Section 구조 복잡성
|
||
- Section 1(초기 확률 입력)과 Section 2(공 꺼내기)가 분리되어 불필요한 단계 추가
|
||
- 발표자가 두 번에 나눠 입력해야 하는 불편함
|
||
|
||
### 2. 셀 수정 불가 문제
|
||
- 초기 확률과 회차별 확률이 읽기 전용으로 표시되는 경우 발생
|
||
- `isRoundCompleted` 조건으로 인해 일부 셀만 수정 가능
|
||
|
||
### 3. 포트 충돌
|
||
- 백엔드를 포트 8000에서 실행하려고 시도
|
||
- 포트 8000은 다른 서비스(goosefarminvestment)가 사용 중
|
||
- nginx 설정은 포트 3001로 프록시 설정되어 있음
|
||
|
||
### 4. 기본 section 설정 오류
|
||
- Section 1 제거 후에도 백엔드 기본 section이 1로 유지
|
||
- 프론트엔드에서 section 2로 시작하도록 변경했으나 백엔드와 불일치
|
||
|
||
---
|
||
|
||
## 해결 방안
|
||
|
||
### Section 1 제거 및 통합
|
||
- `BallQuizPage.tsx`: Section 1 렌더링 코드 제거 (141-259줄)
|
||
- Section 2에 초기 확률과 회차별 확률 입력 통합
|
||
- "시뮬레이션 시작" 버튼 제거
|
||
|
||
### 모든 셀 수정 가능하도록 변경
|
||
- `BallQuizPage.tsx:174-219`: `isRoundCompleted` 조건 제거, 모든 회차 셀을 항상 input 필드로 표시
|
||
- `BallQuizPage.tsx:120-164`: 초기 확률도 항상 input 필드로 표시
|
||
- 사용자 입력값 우선 반영 로직 개선
|
||
|
||
### 포트 충돌 해결
|
||
- `main.py`: 백엔드 실행 포트를 3001로 변경
|
||
- nginx 설정 확인: `/bayesian-api/` → `http://localhost:3001/`
|
||
- 포트 8000은 다른 서비스 사용 중이므로 사용 불가
|
||
|
||
### 기본 section 설정
|
||
- `state_service.py:26`: 기본 section을 1 → 2로 변경
|
||
- `state_service.py:207`: `reset_state`에서도 section 2로 초기화
|
||
- 프론트엔드와 백엔드 일치
|
||
|
||
---
|
||
|
||
## 구현 완료
|
||
|
||
- Section 1 제거 완료
|
||
- 42개 셀(7명 × 6컬럼) 모두 수정 가능
|
||
- 포트 3001로 백엔드 실행
|
||
- 기본 section 2로 통일
|
||
|
||
---
|
||
|
||
## 교훈
|
||
|
||
### 포트 사용 전 확인 필수
|
||
- **원인**: nginx 설정과 백엔드 포트를 확인하지 않고 포트 8000 사용 시도
|
||
- **교훈**:
|
||
- 포트 사용 전 `netstat` 또는 `ss` 명령어로 사용 중인 포트 확인
|
||
- nginx 설정 파일에서 프록시 포트 확인 (`/etc/nginx/sites-enabled/default`)
|
||
- 다른 서비스와 충돌하지 않는 포트 사용
|
||
- **원칙**: `312_문서_작성_원칙.md` - 확인된 사실만 기록
|
||
|
||
### 프론트엔드/백엔드 기본값 일치 확인
|
||
- **원인**: Section 1 제거 후 프론트엔드만 section 2로 변경, 백엔드는 section 1 유지
|
||
- **교훈**:
|
||
- 상태 관련 기본값 변경 시 프론트엔드와 백엔드 모두 확인
|
||
- `state_service.py`의 초기값과 프론트엔드 기본값 일치 확인
|
||
- **원칙**: `311_FastAPI_구조_원칙.md` - 상태 관리 일관성
|
||
|
||
### 사용자 요구사항 명확히 이해
|
||
- **원인**: "엑셀처럼 수정 가능하게" 요구사항을 여러 번 반복 요청
|
||
- **교훈**:
|
||
- 읽기 전용 셀(`isRoundCompleted` 조건)을 제거하고 모든 셀을 항상 input 필드로 표시
|
||
- 사용자가 "엑셀처럼"이라고 표현할 때는 모든 셀을 클릭해서 바로 수정 가능해야 함
|
||
- **원칙**: 사용자 의도 파악 후 구현
|
||
|
||
### 브라우저 직접 확인 습관화
|
||
- **원인**: 코드 수정 후 브라우저에서 직접 확인하지 않고 가정으로 진행
|
||
- **교훈**:
|
||
- Playwright를 사용한 자동화 테스트로 브라우저 상태 확인
|
||
- 코드 변경 후 반드시 실제 브라우저에서 동작 확인
|
||
- **원칙**: `AGENTS.md` - 직접 확인 후 진행
|
||
|