#581 대회 생성 페이지 UI 개선

[taekoong]

Changelog

• 대회 생성 페이지 UI 개선
  • 기존 문제 생성 페이지와 UI/UX를 통일하여 일관된 사용자 경험 제공
• 허용된 IP 범위 입력 기능 개선
  • 기존에는 모든 IP 입력 필드를 삭제할 경우 다시 추가할 수 없는 문제 존재
  • 최소 1개의 입력 필드는 항상 유지되도록 로직 수정
  • 마지막 입력 필드는 삭제할 수 없도록 제한하여 UX 안정성 향상

Testing

2026-04-17.1.44.19.mov

• 대회 생성 페이지에서 UI 변경 사항 정상 반영 확인
• 허용된 IP 범위 입력 필드 테스트
  • 여러 개 입력 필드 추가 및 삭제 동작 확인
  • 마지막 1개의 입력 필드는 삭제되지 않도록 제한되는지 확인
  • 입력 필드가 1개 이상 항상 유지되는지 검증

Ops Impact

N/A

Version Compatibility

N/A

[wlsgur11]

수고하셨습니다~

[Copilot]

Pull request overview

관리자 대회 생성(및 수정) 페이지의 UI/UX를 문제 생성 페이지와 유사한 스타일로 정리하고, 허용 IP 범위 입력 UX를 개선하는 PR입니다.

Changes:

• 대회 생성 폼 레이아웃을 카드형 UI로 개편(라디오/토글/입력 필드 구성 변경)
• 허용 IP 범위 입력에 “추가” 버튼을 별도 제공하고, 마지막 1개는 삭제 불가 처리
• 대회 수정 시 allowed_ip_ranges 데이터를 입력용 형태로 매핑 로직 간소화

[Copilot]

설정 섹션 라벨과 3개 el-tooltip의 content가 한국어 문자열로 하드코딩되어 있어 다국어(i18n) 환경에서 번역이 적용되지 않습니다. 이 프로젝트의 다른 관리자 화면들은 문자열을 $t('m.*')로 처리하고 있으니(예: frontend/src/pages/admin/views/general/HomeBannerManagement.vue:32의 $t('m.Setting')) 동일하게 번역 키를 사용하도록 변경하는 편이 좋습니다.

[Copilot]

커스텀 토글에서 <input type="checkbox">가 display:none 처리되어 있고, 입력을 감싼 <label class="spj-toggle"> 안에 접근 가능한 텍스트(라벨명)가 없어 스크린리더가 체크박스의 이름을 읽지 못할 가능성이 큽니다. 현재 텍스트는 별도의 <span class="toggle-label">에 있어 입력과 연결되지 않으므로, 토글 텍스트를 같은 <label> 안에 포함시키거나 aria-label/aria-labelledby로 입력과 텍스트를 연결해 주세요.