리펙토링: 코드 최적화, AGENTS.md, README.md 내용 반영
This commit is contained in:
@@ -91,9 +91,13 @@ prisma/
|
||||
### 접근성 / 키보드 조작
|
||||
|
||||
- 문제 풀이 화면은 키보드만으로 진행할 수 있어야 한다.
|
||||
- 새 문제가 표시되면 첫째 항 입력 칸에 focus를 둔다.
|
||||
- 첫째 항에서 Enter를 누르면 둘째 항 입력 칸으로 focus를 이동한다.
|
||||
- 둘째 항에서 Enter를 누르면 제출 동작을 실행한다.
|
||||
- 문제 풀이 화면은 모든 항을 하나의 공유 input group으로 입력한다.
|
||||
- input group 아래에는 각 항의 입력값 버튼을 버튼 그룹으로 표시한다. 현재 입력 중인 항은 `aria-pressed`로 표시하고, 비어 있는 항은 `?`로 표시한다.
|
||||
- 첫째 항에서 Enter를 누르면 같은 input group이 둘째 항 입력으로 전환된다.
|
||||
- 둘째 항에서 Enter를 누르면 제출 동작을 실행한다. 별도 제출 버튼이 없어도 form submit 흐름이 유지되어야 한다.
|
||||
- 모바일 화면에서는 input group에 `-/+` 버튼과 `↵` 버튼을 표시한다. `sm` 이상 화면에서는 물리 키보드 사용을 전제로 이 보조 버튼들을 숨긴다.
|
||||
- 문제 풀이 화면 최초 진입 시 모바일 키보드를 강제로 열지 않는다. 사용자가 input을 직접 focus하거나 피드백 후 다음 문제로 넘어갈 때 input에 focus를 둔다.
|
||||
- 모바일 input focus 시 가상 키보드가 올라온 뒤 `span.katex` 상단이 브라우저 화면 상단에 오도록 조정한다.
|
||||
- 정답·오답 피드백이 표시되면 다음 진행 버튼에 focus를 둔다.
|
||||
- 최종 결과 화면이 표시되면 다시 시작 버튼에 focus를 둔다.
|
||||
- 아이콘이나 기호만으로 상태를 표시할 때는 `aria-label`, `sr-only` 텍스트 등으로 의미를 함께 제공한다.
|
||||
@@ -157,12 +161,16 @@ NEXTAUTH_SECRET=your-secret
|
||||
시작 화면 → 문제 유형 선택 → 게임 모드 선택 → 문제 풀이 → 결과 및 기록
|
||||
```
|
||||
|
||||
- 시작 화면은 문제 수 `[5] [10]` 선택 버튼 그룹을 제공하고 기본값은 `10`이다.
|
||||
- 문제 풀이 화면은 URL의 `count` 쿼리와 Zustand의 선택 문제 수를 동기화한다. 허용 문제 수는 `5`, `10`이며 유효하지 않은 값은 `10`으로 처리한다.
|
||||
|
||||
---
|
||||
|
||||
## CI/CD
|
||||
|
||||
- `.gitea/workflows/deploy.yml`이 CI/CD 진입점이다. main 브랜치 push 시 자동으로 빌드·배포된다.
|
||||
- 패키지 설치는 반드시 `pnpm`을 사용한다. `npm` / `yarn` 명령을 사용하지 않는다.
|
||||
- 빌드 확인은 `pnpm build`로 실행한다. standalone 배포 산출물에 필요한 정적 파일 복사까지 `postbuild` 스크립트가 처리한다.
|
||||
- 배포 환경: Synology NAS + Docker Compose + Nginx Proxy Manager.
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user