_app.tsx 페이지에서 호출해서 사용하며 모든 페이지를 감싸는 layout 컴포넌트이다. 모든 페이지에 적용하고 싶은 PageLink.tsx와 같은 컴포넌트가 들어가기 적절한 컴포넌트이다.

깃허브로 이동하는 Link가 있는 컴포넌트. 추후 다른 페이지도 연결 가능.

SEO 최적화를 위해 실제 html의 head에 들어갈 내용을 next/Head를 사용해 page 가장 상단에 들어갈 컴포넌트. title을 props로 받아 페이지마다 다른 <title> 적용 가능.

modal 컴포넌트를 여러개 만들 수 있는 모달 컴포넌트이다. 모달창이 나오는 백그라운드를 어둡게 처리해주는 용도이다.

위 모달 컴포넌트를 사용해 만든 알림 컴포넌트이다. 시간이 다 지났을때 display되어 누적 스코어와 게임을 다시할지 종료할지를 표시한다. 넘블 조건에는 없었지만 고도화해서 랭크 기능(RankModal.tsx) 추가 중임.

AlertModal 혹은 다른 곳에 사용되는 이미지와 함께 있는 버튼 컴포넌트이다. 이미지와 텍스트 그리고 버튼 클릭 핸들러를 props로 받는다.

game 페에지에 stage와 time이 표시하는 컴포넌트.

Game에 사용되는 박스 컴포넌트이다. 해당 박스가 목표로 하는 박스가 맞는지 내부에서 판단해서 props로 내려받은 것들이 적용된다.

위에서 보았던 BoxItem.tsx를 반복해서 디스플레이하는 컴포넌트이다.

display: grid 를 통해 컴포넌트를 제작했다.

박스 개수를 반환하는 함수

박스 개수에 맞는 배열을 반환하는 함수

BoxContainer에 grid로 반복될 수를 반환하는 함수

정답이 될 박스의 인덱스를 반환하는 함수

정답이 될 박스의 색을 조정하여 반환하는 함수

stage*0.1 씩 더해주는 연산을 거치고, 0.8 이상이 될 경우 0.8로 고정을 시켜주었다.

랜덤으로 색을 반환하는 함수

가장 먼저 사용자가 마주하게 될 index페이지.

Selecolor의 로고와 게임을 시작할 수 있는 페이지로의 링크 버튼이 있다.

게임이 이루어지는 페이지. 시간이 다 지나면 AlertModal를 표시해 Time out을 알린다.