- 날짜 선택: datepicker를 활용해서 날짜 표시 및 변경을 할 수 있습니다.
- 이름 입력: useRef와 useState hook를 활용해서 사용자 이름 입력 및 변경을 할 수 있습니다.
- 타이머 기능: useState hook를 활용해서 시작, 정지, 리셋 기능이 포함된 타이머를 구현합니다.
- 전체 아이템 표시: useState hook를 활용해서 현재의 모든 할 일 항목을 배열로 처리해서 보여줍니다.
- 아이템 추가/삭제: useState hook를 활용해서 새로운 할 일 항목을 기존 배열에 추가하거나 기존 항목을 삭제할 수 있습니다.
- 아이템 체크박스: 아이템의 staus 상태 값을 변경해서 완료된 항목을 표시합니다.
- 아이템 필터링: useState hook를 활용해서 특정 기준에 따라 할 일 항목을 필터링하여 보여줄 수 있습니다. (예: 마감 기한, 중요도 등)
- 다크 모드 지원: useState, useEffect hook과 tailwindcss, createContext()를 활용해서 다크 모드를 구현합니다.
- 로컬 스토리지 저장: useState, useEffect를 활용해서 사용자 이름, 사용자의 할 일 목록을 로컬 스토리지에 저장하여 나중에 앱을 다시 열 때 이전 상태를 유지할 수 있습니다.
미리보기 : https://sage-belekoy-3f0d37.netlify.app/
- react.js(https://react.dev/) 를 사용하여 사이트를 번들링하고 관리합니다.
- react-icons(https://react-icons.github.io/react-icons/) 를 이용하여 아이콘들을 활용했습니다.
- UUID(https://www.npmjs.com/package/react-uuid)를 사용해서 data의 고유한 아이디를 자동으로 생성합니다.
- tailwindcss(https://tailwindcss.com/docs/installation)를 사용해서 다크 모드를 구현합니다.
- datepicker(https://reactdatepicker.com/)를 사용합니다.
- netlify(https://www.netlify.com/) 를 통해 사이트를 배포합니다.
- git(https://github.com/) 을 사용하여 파일을 관리합니다.
- HTML, CSS 기반으로 웹사이트의 기본 레이아웃 설계하고, 웹 표준 및 웹 접근성을 준수하여 작업합니다. ARIA(Accessible Rich Internet Applications)
- react를 설치합니다.
npm install -g create-react-app - react-icons를 설치합니다.
npm install react-icon ==save - UUID를 설치합니다
npm install uuid - tailwindcss를 설치합니다.
npm install -D tailwindcss - datepicker를 설치합니다.
npm install react-datepicker --save