igoman2 / Todo-APP-VanillaJS

Todo app

- Webpack 4+ 를 이용한 개발/빌드 환경 구성

- 라이브러리나 프레임워크를 사용하지 않고 Vanilla js (ES6+) 로 구현

- 웹 표준, 웹 접근성 고려

- NPM Script 구성

• Development Mode : $npm run dev

• Production Mode : $npm run build

• Production Mode 는 UMD 빌드로 설정

  
  
  

- 할 일 만들기

• 할 일 내용의 글자 수 제한은 없음
• 종료 시간은 초 단위로 숫자
• 할 일 내용, 종료 시간은 필수 입력 항목
• 할 일 내용, 종료 시간을 바르게 입력 후 “추가” 버튼을 클릭하면 할 일 목록에 추가

- 할 일 목록

• 정렬 기능
  • “입력한 순”(기본값), “남은 시간 순” 버튼 클릭에 따라 목록 아이템의 정렬이 변경
  • 현재 반영되어 있는 값의 버튼에 활성화 UI 를 적용
• 종료 기능
  • 종료된 목록 아이템은 “종료된 할 일” 로 이동
  • 전체 종료
    • 모든 할 일 바로 종료
  • 선택 종료
    • 체크된 목록 아이템이 바로 종료
    • 체크된 목록 아이템이 없을 경우 버튼에 비활성화 UI 를 적용
• 목록 아이템
  • 목록 아이템이 추가되면 설정된 시간이 감소하며 시간이 0 이 되면 시간 종료 처리
  • 남은 시간이 5초 이내인 경우 별도의 UI 를 적용
  • 종료 기능
    • 해당 목록 아이템을 바로 종료
  • 시간 종료
    • 설정한 시간이 0 이 되면 바로 종료
    • 종료된 목록 아이템을 팝업 형태의 UI 로 알림
    • 시간 종료 이외의 종료는 팝업을 노출하지 않음
• 종료된 할 일
  • 목록 아이템
  • “할 일 목록”에서 종료된 목록 아이템을 “종료된 할 일”로 이동
  • 목록 아이템에는 할 일 내용, 초기에 설정된 종료 시간이 표기있음
    
    

- 수정 기능

• 목록 아이템의 내용을 개별적으로 수정할 수 있는 UI 를 구성
• 수정 진행 중에는 시간이 멈춤

- 종료 복원

• “종료 된 목록” 의 목록 아이템을 복원할 수 있는 기능을 구현
• 복원된 목록 아이템의 시간은 최초 설정한 시간이 적용

---

부연 설명

- 종료된 할 일 에서 시간 수정 기능 추가

- UX를 고려한 input 자동 포커싱, 엔터 입력 기능 추가

• 엔터 키로 입력 가능
• 엔터 및 마우스 클릭 이벤트 후 첫 번째 input 태그 자동 포커싱