[ 3주차 ] 과제 투두

[yarimu]

💡 기본 과제

• Context API, 전역상태 라이브러리 사용 X (ThemeProvider 제외)

1. 헤더

• 게임/랭킹 2개의 메뉴 선택 가능
• 게임 선택 시 헤더 우측에 레벨 선택 Select와 타이머 표시
• 게임 선택 시 게임 판 출력
• 랭킹 선택 시 헤더 우측엔 아무것도 나오지 않음
• 랭킹 선택 시 랭킹 보드 출력

2. 게임

• (기본) 한 종류의 레벨만 구현
• 숫자는 항상 랜덤으로 표시됨. (초기 표시 숫자들도, 이후 열리는 숫자들도 모두 랜덤)
• 처음에 표시되는 숫자는 클릭해야 하는 숫자의 앞에 절반임. 만약 level 1이라 118까지 클릭해야한다면, 처음에는 19까지의 숫자가 랜덤으로 보여짐
• 게임판 위쪽에 다음으로 클릭해야할 숫자를 표시
• 1을 누르는 순간 게임이 시작되며 헤더 우측의 타이머가 동작. 타이머는 소수점 2번째 자리까지 측정.
• 마지막 숫자 클릭시 게임 종료
• 게임 종료 시, 타이머를 멈추고 alert 창을 띄워주며 걸린 시간을 표시
• 게임 종료 시, 현재 시각, 게임의 레벨, 플레이 시간 3개의 정보를 localStorage에 저장 (랭킹에서 사용)
• 종료 창에서 확인 누르면 다시 시작할 수 있는 상태로 게임 초기화
• 게임 중 level 변경 시 다시 시작할 수 있는 상태로 게임 초기화

3. 랭킹

• localStorage에서 데이터 불러오기
• 플레이 시간 오름차순으로 보여야 함 (빨리 깬 기록이 위쪽)
• 우측 상단의 초기화 버튼 누르면 대시보드 초기화 (localStorage도 초기화)

---

🔥 심화 과제

1. 게임

• Level 선택 가능
  Level 1: 3 x 3, Level 2: 4 x 4, Level 3: 5 x 5
• 숫자 클릭할 때 클릭되는 것 같은 효과 (예시: 깜빡거림)
• 게임 종료 alert 대신, React의 createPortal을 사용하여 Modal 구현
  createPortal

2. 랭킹

• Level 내림차순 & 시간 오름차순 정렬(정렬 기준이 2개). 높은 Level이 위쪽으로, 같은 레벨 중에선 플레이 시간이 짧은게 위쪽으로 정렬