웹 개발 - 프로젝트 2 - 3. streak lover 프론트

스트릭 부분을 계속 만들어 봅시다.

7개의 가로줄과 약 50개의 세로줄을 만듭니다.

 

리액트는 이런게 되서 참 좋아요.

적절한 디자인을 해 주면 다음처럼 나옵니다.

 

각 칸은 하루를 나타냅니다. 그럼 오늘에 해당하는 칸 까지만 나타내고 그 뒤는 나타내지 않을 것입니다.

화요일의 경우

 

만약 어제 백준 문제를 풀었다면 해당 칸은 색칠이 되어 있어야 합니다. 각 칸이 어떤 날짜를 나타내는지 알아냅니다.

각 칸에 있는 숫자는 오늘로부터 며칠 전 일인지 나타냅니다.

해당 날이 체크가 되어야 하는지 계산하고 해당 값에 따라 배경을 바꿔 줍니다.

 

그럼 아래와 같이 나옵니다.

 

생각해 보니 각 스트릭 마다 고유의 id를 넣어줘야 할 것 같습니다.

id를 넘겨 주고 해당 id의 해당 날에 해결한 경우 체크해 줍니다.

 

 

지금은 백엔드가 없어서 이렇게 처리하지만 나중에는 데이터도 넣어 줄 것입니다.