트렐로는 프로젝트 관리 소프트웨어로 보드 안에 리스트, 리스트 안에 카드가 들어갑니다. 카드는 할 일의 기본 단위로, 제목, 설명, 이미지등을 추가할 수 있습니다.
- 보드에는 리스트, 리스트 추가 버튼이 표시된다.
- 리스트에는 제목, 리스트 제거 버튼, 카드 목록, 카드 추가 버튼이 표시된다.
- 카드에는 제목과 이미지(존재한다면 표시)가 보여진다.
- 카드 팝업에는 삭제 버튼, 닫기 버튼과 카드의 제목, 설명, 이미지가 표시된다.
- 이미지가 없다면 이미지 대신 이미지 추가 버튼이 표시된다.
- 이미지가 존재한다면 이미지와 함께 이미지 변경 버튼, 이미지 제거 버튼도 함께 표시된다.
- 리스트 추가 버튼 클릭시 제목 입력창이 나타난다. 제목 입력을 완료하고 확인 버튼을 누르면 입력한 값을 제목으로 하는 리스트가 추가된다.
- 리스트 제거 버튼 클릭시 해당 리스트가 제거된다.
- 카드 추가 버튼 클릭시 제목 입력창이 나타난다. 제목 입력을 완료하고 확인 버튼을 누르면 입력한 값을 제목으로 하는 카드가 해당 리스트의 카드 목록에 추가된다.
- 카드 클릭시 카드 팝업이 띄워진다.
- 생성 이후 설명을 변경한 적 없는 카드는 설명 대신 "설명을 입력해주세요.." 라는 text가 표시된다.
- 카드 팝업의 삭제 버튼 클릭시 해당 카드가 삭제된다.
- 카드 팝업에서 제목 클릭시 제목 text를 value로 하는 input으로 변경되고, input의 값이 변경되면 제목에도 변경된 값이 적용된다.
- 설명 혹은 "설명을 입력해주세요.." text 클릭시 해당 text를 value로 하는 input으로 변경되고, input의 값이 변경되면 설명에도 변경된 값이 적용된다.
- 제목 input, 설명 input은 enter 혹은 input의 외부 클릭시 포커스가 해제된다.
- 제목, 설명이 빈 스트링('') 값이 되어도 클릭해서 input으로 변경할 수 있어야 한다.
- 이미지 추가 버튼 클릭시 파일 선택창이 표시되고 이미지만 선택을 할 수 있다. 이미지를 업로드하면 해당 이미지가 카드의 이미지로 적용된다.
- 이미지 변경 버튼 클릭시 파일 선택창이 표시되고 이미지만 선택을 할 수 있다. 이미지를 업로드하면 해당 이미지가 카드의 이미지로 적용된다.
- 이미지 제거 버튼 클릭시 카드의 이미지가 제거된다.
- 리스트의 카드들은 drag & drop으로 위치를 조정할 수 있다. (다른 리스트로 이동도 가능)
ex) drag & drop 참고
Screen.Recording.2022-01-21.at.7.07.21.PM.mov
보드의 값들은 탭 새로고침, 브라우저 종료 후 재시작 후에도 유지된다.
(IndexedDB 참고)