[FEAT] React를 이용한 웹 프론트

[suhyun6363]

Background

• 프레임워크: React.js
• 목적: AI와 캐치마인드
• 구성: / - 홈, /choice - 클래스, 증강 랜덤, /canvas - 3번 화면

Todo

홈 화면 (1번 화면)

• 경로: /
• 구성 요소
  • 게임 제목
  • 리더보드
  • 버튼
    • Start: /choice 화면으로 이동
    • Quit: 창 닫기
    • Developer: 만든 사람들
• 기능
  • 시작 버튼 클릭 시 /choice 화면으로 이동
  • 리더보드 순위 백으로부터 받기

선택 화면 (2번 화면)

• 경로: /choice
• 구성 요소
  • 라운드 {숫자} 표시
  • 제시어 박스: Quickdraw 클래스 중 랜덤으로 선택된 3개의 제시어 표시
  • 조건 박스: 각 제시어 하단에 AutoAugmentation 리스트에서 랜덤으로 선택된 3개의 증강 조건 표시
• 기능
  • 전달된 라운드 데이터를 받아 업데이트하고, 이를 화면에 표시
  • 제시어 및 조건 렌더링:
    • 제시어: Quickdraw 클래스에서 랜덤으로 3개 표시
    • 조건: AutoAugmentation 리스트에서 랜덤으로 3개 표시
  • 제시어 클릭 시 /canvas 화면으로 이동
  • 선택된 단어와 증강 조건을 /canvas로 전달

게임 화면 (3번 화면)

• 경로: /canvas
• 구성 요소
  • 캔버스
    • 화면 중앙에 그림을 그릴 수 있는 영역
    • 좌측 상단에 선택된 제시어 작게 표시
  • 추론 결과 박스
    • Quickdraw 모델 추론 결과를 상위 10개로 표시 (Class, Score)
  • 타이머
    • 화면 상단에 30초 제한 타이머
    • 초록색 바가 점점 줄어드는 애니메이션
  • 제출 버튼
    • 추론 결과 박스 우측 하단 옆에 위치
    • 클릭 시 다음 라운드로 이동
• 기능
  • 캔버스
    • 사용자가 그림을 그릴 때마다 백엔드로 그림 데이터 전송
  • 추론 결과 박스
    • 모델 추론 결과 백엔드로부터 받아 실시간 업데이트
    • 스코어가 가장 높은 결과 빨간색으로 표시
  • 타이머
    • 30초 제한 시간 구현
    • 시간이 다 지나면 자동으로 /choice 화면으로 이동
  • 제출 버튼
    • 클릭 시 다음 라운드로 이동
  • 라운드 진행
    • 총 3번 반복 (2번 → 3번 화면)

추가 디테일

• 상태 관리
  • 선택된 제시어 및 조건 상태 저장
  • 라운드 진행 상황 전역 상태로 관리 (현재 라운드, 총 라운드 수)
• 통신
  • REST API를 통해 백엔드와 실시간 통신
• 디자인
  • 직관적이고 깔끔한 UI/UX
• 애니메이션
  • 초록색 바 애니메이션 구현 (부드럽게 감소)
  • 화면 전환 시 간단한 효과 추가