React 인터뷰 챌린지 #2: ToDo 구성 요소 만들기

이 예제 챌린지는 프런트엔드 엔지니어 직책에 지원하는 경우 예상할 수 있는 것입니다.

할 일 구성 요소를 만들고 기능 요구 사항 목록을 제공해야 합니다. 이 작업을 직접 수행하고 막히면 내 예제 데모 및 코드를 참조하십시오. 포스트 하단에 링크. 실제 인터뷰 상황을 시뮬레이션하려면 타이머를 45분으로 설정하고 진행하면서 사고 과정을 소리내어 설명하는 연습을 하세요.

지침

todo 구성 요소 생성

구성 요소가 할 일의 초기 목록을 수락해야 함

새 할일을 목록에 추가하기 위한 입력 및 버튼 추가

할 일을 클릭하면 상태(완료/미완료)가 업데이트되어야 합니다.

완료된 할일에는 텍스트 스타일에 취소선이 있어야 하며 확인 표시 아이콘이 표시되어야 합니다

.

완료되지 않은 할 일에 속이 빈 원 아이콘이 표시되어야 함

Todo에는 사용자가 todo를 제거할 수 있는 삭제 버튼이 있어야 합니다

.

추가 크레딧:

할 일 목록 상단에 탭을 추가하여 사용자가 모든 할 일, 완료된 할 일 및 완료되지 않은 할 일 간에 전환할 수 있도록 함

전체 할일 수 중 완료된 할일 수를 표시하는 섹션 추가

모든 할 일이 완료되면 섹션을 업데이트하여 성공 메시지를 표시합니다

.

밝은 모드와 어두운 모드 스타일을 모두 지원합니다

.


구성 요소에 사용할 아이콘은 다음과 같습니다.

확인 표시 아이콘:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
    <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z" />
</svg>

선택되지 않은 아이콘:

<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z" />
</svg>

휴지통 아이콘:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
    <path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z" />
</svg>

Live Demo
Code