heejaykong / mad-camp-week3-Gardening-To-Do

할일 다하면 보상으로 꽃을 심는 신개념 투두리스트 서비스

[⚠공사 중...] Gardening To-do

Mad Camp(2020-winter) Week3 Project

🌱 Gardening To-do? 🌱

Gardening To-do는 보드형 to-do List인 trello에 사용자의 동기를 부여해주는 웹사이트이다.

데모▶ https://heejaykong.github.io/mad-camp-week3-Gardening-To-Do

***용어 안내***
SEED: 씨앗(= 타이머를 시작하면 `씨앗`을 심습니다.)
PLANT: 심다(= 타이머를 시작하면 씨앗을 `심습니다`.)
GROW: 자라다(= 씨앗이 심기면 `자라기` 시작합니다.)
FLOWER: 꽃(= 할 일을 시간 내 완성하면 `꽃`이 핍니다.)
BLOOM: 꽃이 피다(= 할 일을 시간 내 완성하면 꽃이 `핍니다`.)
DEAD: 시들었다(= 할 일을 시간 내 완성하지 못하면 꽃이 `시듭니다`.)

구현할 기능 목록

• 홈
  • 시간을 설정할 수 있다
    • 시:분:초를 입력할 수 있다.
    • 시간 설정 시 모달을 띄워 다시금 묻는다.
    • 시간을 설정하면 카운트다운을 바로 시작한다.
    • 브라우저를 껐다 켜도 카운트다운 정보가 사라지지 않는다.(새로고침, 다른 페이지 다녀오기 등도 마찬가지)
  • 칸반보드를 사용할 수 있다.
    • 카운트다운 시작 전에는 할 일을 옮길 수 없다.
    • '+' 버튼을 눌러 할 일을 추가한다.
    • 할 일을 추가하면 input에 할 일을 적어서 저장할 수 있다.
    • 할 일을 수정할 수 있다.
    • 할 일을 삭제할 수 있다.
  • 할 일 생명주기에 따라 씨앗의 상태도 바뀐다.
    • 할 일을 시작하면 랜덤한 씨앗이 심긴다.
      • 씨앗을 심은 순간부터는 할 일을 추가할 수 없다.(씨앗 심기는 신중히~)
      • 예외처리
        • 할 일을 하나도 작성하지 않은 경우 씨앗을 심을 수 없다.
        • 목표 시간을 입력하지 않은 경우 씨앗을 심을 수 없다.
    • 꽃피우기 성공/실패 여부를 가린다.
      • 성공: 시간 내에 할 일이 전부 done 칼럼에 도달한 경우
      • 실패: 시간이 다 된 경우(시간이 다 됐다는 의미는 곧, 시간이 다 될 때까지 done 칼럼에 모든 할 일이 도달하지 못했다는 의미이므로)
    • 꽃을 피운 경우, 한 일은 전부 그 꽃에 아카이빙된다.
  • 할 일을 Done 칼럼에 옮길 때마다 씨앗에 비를 내린다.(애니메이션)
  • 꽃이 피거나 진 이력을 알 수 있다.
  • 나의 정원에서 꽃을 갖고 놀 수 있다.
    • 꽃에 아카이빙된, 꽃을 피우기 위해 한 일들을 볼 수 있다.

---

기존 trello 역시 due date 기능이 있어 해야 할 일을 장려 할 수 있지만 그에 대한 보상이 없어 보통 시간 설정 기능을 사용하지 않는다. 이에 gardening To-do는 사용자의 참여와 보상 심리에 부응하고자 game effect 요소를 추가하였다. 사용자는 Gardening To-do를 통해 해야 할 일도 끝내고 나만의 정원도 가꿀 수 있다.

🌳 기능 설명 🌳

1. Login

• 사용자 이름, 비밀번호, 이메일을 입력한 뒤 메인 페이지로 이동 가능하다.

2. Main (to-do List, timer, plant)

• 사용자는 해야 할 일을 끝낼 시간을 고려해 timer를 설정하고 그 시간동안 task들을 수행해야 한다.
• 만약 To-do 칼럼에 주어진 시간 동안 task들을 Done 칼럼에 다 옮기지 못하면 꽃이 시들게 되고 my profile에 시든 꽃에 대한 정보가 저장된다.
• task들을 Done 칼럼에 하나씩 옮기는 동안 꽃이 자라게 되는데 도와 줄 아이템(햇빛, 바람, 물 등)을 획득할 수 있다.
• 모든 task들을 다 Done 칼럼으로 옮기게 되면 꽃을 획득할 수 있으며 획득한 꽃은 my garden에서 확인할 수 있다.
• 꽃의 누적 수 역시 my profile 페이지에서 확인 가능하다.

3. Profile

• profile 페이지로 들어가게 되면 로그인 시 입력했던 이름, 이메일 정보가 기록되어 있다.
• 사용자는 이미지를 클릭해 로컬 컴퓨터에 있는 이미지를 불러와 프로필 이미지를 선택할 수 있으며 정원에 있는 꽃의 리스트와 총 꽃의 개수, 시든 꽃의 수를 파악할 수 있다.

4. My Garden

• my garden 페이지로 들어가면 메인 페이지에서 획득한 꽃들이 누적되어 있다.
• 획득한 꽃들을 drag and drop으로 주어진 ground에 customizing 하여 나만의 정원을 가꿀 수 있다.

Gardening To-do를 통해 해야 할 일을 수행함과 동시에 나만의 정원을 가꾸며 성취감을 얻을 수 있길 기대한다.