feat: HandongJudge 포맷 기반 대량 문제 Import 페이지 구현

[Diggydogg]

Issue

HandongJudge 전용 파일 포맷을 사용한 대량 문제 Import 페이지를 구현합니다.
(서버는 Import 시 파싱 후 DOMjudge ZIP으로 변환해 업로드함)

HandongJudge Import 포맷 (참고)

사용자가 업로드하는 ZIP 파일 구조:

• DOMjudge 포맷이 아닌 서비스 전용 단순 구조
• 폴더명 = 문제 제목

{문제제목}/
├── description.md # 문제 설명 (마크다운)
├── problem.ini # timelimit=1, memorylimit=256
└── testcases/
├── 1.in
├── 1.out
├── 2.in
├── 2.out
└── ...

요구사항

1. 대량 문제 생성 페이지 진입

• 라우트 추가 (예: /tutor/problems/bulk-import)
• 사이드바/문제 관리 메뉴에서 진입 링크
• 페이지 컨테이너 클래스: .bulk-import (Tutor CSS 스코프 규칙 준수)

2. 파일 선택

• 여러 ZIP 파일 선택 (드래그 앤 드롭 또는 파일 선택)
• 선택된 파일 목록 표시 (파일명, 크기 등)
• "검증하기" / "업로드하여 검증" 버튼

3. 검증 결과 표시

• 백엔드 POST /api/problems/bulk/parse 응답 기반 테이블
• 컬럼: 체크박스(승인), 파일명, 제목, 시간/메모리 제한, 테스트케이스 수, 검증 상태(✓/✗), 에러 메시지
• 검증 성공/실패 시각적 구분 (예: 녹색/빨간색 아이콘)
• 검증 실패 시 에러 메시지 툴팁 또는 인라인 표시

4. 수정

• 검증 실패 항목에 "수정" 버튼
• 수정 모달 또는 새 창에서 description, limits, 테스트케이스 수정 후 재업로드
• 또는 기존 문제 수정 페이지와 유사한 편집 UI 연동

5. 승인 및 Import

• 각 행 체크박스로 Import할 문제 선택
• "전체 선택" / "전체 해제" 버튼
• 검증 실패 항목은 기본 비선택(disabled)
• "선택한 문제 Import" 버튼 → POST /api/problems/bulk/create 호출

6. Import 결과

• 성공/실패 개수 표시
• 성공 시 생성된 문제 ID 또는 제목 목록
• 실패 시 파일별 실패 사유 표시
• 완료 후 문제 관리 목록으로 이동 또는 "추가 Import" 버튼

7. Export (선택)

• 문제 관리 목록에서 "Export" 버튼
• GET /api/problems/{id}/export 호출 → HandongJudge 포맷 ZIP 다운로드

참고 사항

• 백엔드 API: POST /api/problems/bulk/parse, POST /api/problems/bulk/create (BE 이슈 참조)
• Tutor 페이지 CSS: .bulk-import 스코프 사용, 모달 열림 시 focus 스타일 무시 규칙 추가
• 기존 ProblemManagement 스타일/레이아웃 참고

참고 자료

• BE 이슈: HandongJudge 포맷 Import/Export 및 bulk API
• ProblemManagement 페이지 구조
• AssignmentManagement 등 기존 대량/목록 UI

To-do

• 라우트 및 페이지骨架 구성
• 파일 선택 컴포넌트 (드래그 앤 드롭)
• bulk parse API 연동 및 검증 결과 테이블
• 체크박스 선택 및 bulk create API 연동
• Import 결과 피드백 UI
• (선택) Export 버튼 및 다운로드 연동
• CSS 스코프 및 모달 focus 규칙 적용