/find-different-color

🕹️ 다른 색깔 찾기 게임

Primary LanguageTypeScriptMIT LicenseMIT

다른 색깔 찾기 게임

넘블 프로젝트 클론하기 챌린지

Feb-08-2022 14-03-14



기간

  • 챌린지 기간: 2022년 2월 4일 (금) - 2022년 2월 13일 (일)
  • 구현 기간: 약 4일

규칙

  • 요구사항 설명 링크
  • 이 챌린지에서 우리는 Context, Redux, Recoil 등 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임을 제작할 거예요.
  • 이 챌린지를 통해 우리는 이 챌린지를 통해 우리는 요구사항에 따라 적절한 단위로 component를 나눠볼 수 있고, 어느 component가 어느 state를 가지고 있어야하는가에 대해 실전적으로 익힐 수 있으며, 적절한 prop을 사용해 탄력적인 component 작성에 대해서도 연습할 수 있어요.

기술

  • TypeScript (language)
  • create-react-app (react)
  • react-router-dom (router)
  • styled-components (CSS in JS)
  • react-animated-numbers (number animation)
  • react-responsive-modal (Modal component)
  • Eslint & Prettier (linter & formatter)
  • Vercel (deploy)

기능 목록

  • 게임 시작 버튼 클릭 기능
  • 색 랜덤 뽑기 기능
  • 게임 보드 기능
  • 제한 시간 기능
  • 보드 클릭 기능
  • 게임 종료 기능
  • 홈 이동
  • 다시 시작

실행

# Development Stage
npm install
npm run start

# Production Stage
npm install
npm run build
npm install -g serve
npx serve -s build