할 일 관리 웹 애플리케이션 📝
🔗 https://scseong.github.io/react-todolist
-
React | 사용자와 상호작용할 수 있는 UI를 효율적으로 구현합니다.
-
Typescript | 코드 작성 단계에서 오류를 사전에 방지하고 코드 피드백 및 자동 완성 기능을 활용하여 개발 생산성을 높였습니다.
-
Styled-components | 자바스크립트로 스타일을 관리합니다. 재사용이 쉬운 컴포넌트를 만들고 상태에 따른 스타일 변경이 용이합니다.
-
Recoil | 전역에서 필요한 상태를 관리합니다. localStorage에 상태를 저장하여 데이터를 유지합니다.
-
React-beautiful-dnd | 간단하게 드래그 앤 드롭 기능을 지원합니다.
-
작업을 특정 카테고리로 나누어 보기
-
전체 작업, 진행 중인 작업, 혹은 완료된 작업
-
새로고침 후에도 마지막 작업 목록 유지
-
-
작업 추가하기
-
각 카테고리에서 추가 가능
-
상단에 + 버튼을 누르면 추가할 작업 양식 표시
-
내용을 작성하여 Submit 버튼을 누르면 새로운 작업이 추가
-
-
작업 삭제하기
-
휴지통 아이콘을 눌러 삭제 가능
-
휴지통 아이콘을 누르면 경고창이 표시되어 확인을 누르면 해당 작업 삭제
-
-
집합 내 작업 순서 변경하기
- 이동하고자 하는 작업을 마우스로 드래그하여 카테고리 내 순서 이동
-
작업 카테고리 변경하기
- 이동하고자 하는 작업을 마우스로 드래그하여 다른 카테고리로 이동
-
카테고리별 작업 개수 표시
- 카테고리 내 작업의 개수를 상단 좌측에 표시