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

    좋은 웹페이지 즐겨찾기