Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
게시판 투두리스트를 만들었습니다.
#to_do_list
3년 전
1,599
4

링크

안녕하세요 인디게임개발자 opadong입니다.

니꼬샘 강의에 푹 빠져버린 뒤로 풀스택 개발자의 꿈을 가꿔나가고 있습니다.

저는 아이디어를 '귀찮음'에서 얻었습니다.

당장 구글에 todolist만 쳐봐도 수많은 아이템들이 쏟아져 나오는데, 하나같이 귀찮다는 느낌을 받았습니다. 아무리 UI, UX가 간단하고 깔끔하다 한들, 여러가지 귀찮음이 저를 따라왔습니다. 이를테면

1. 구체적인 시간을 정하거나, 과목을 분류하는 등 기본적으로 복잡하다.

2. 다 했으면 했다고 체크해야 한다.

이런 점들이 있었습니다.

귀찮음이 많았던 저는 저와 같은 사람들을 위한 투두리스트를 만들었습니다.

undefined

먼저 실행시키면 화이트보드처럼 생긴 틀이 있습니다. 아무 공간이나 클릭하면 카드 하나를 만들 수 있는데요, 클릭하면

undefined

이렇게 생긴 모달 창이 생깁니다.

제목과 간단한 설명을 적고, 우선순위(range bar)를 0부터 3까지 정합니다.

undefined

이런저런 카드들을 만들어본 모습입니다. 여기서 카드의 상단(초록색)부분을 클릭하면 카드를 이동시킬 수 있게 됩니다. 원하는 곳에다가 배치시킬 수 있고, 배치한 x,y 좌표 또한 로컬 스토리지에 저장됩니다. 카드 본문을 클릭하면 카드 내용을 수정할 수 있습니다.

undefined

카드의 초록색 부분을 눌러 이동시킬 때는 이런 모습입니다.

아래로 끝까지 내리면 카드를 버릴 수 있습니다.

실수로 버리는 것을 감안하여 confirm창을 추가하였습니다.

추가로, 제목의 길이에 맞춰서 카드의 길이또한 길어지는 기능, 

아무것도 작성하지 않았을 시 쓰라고 독촉하는 기능 들이 만들어져 있으니 한번 해 보시기 바랍니다.

곧 군대에 갑니다.

추천보다는, 따뜻한 응원 메시지 한마디만 부탁드립니다..

4 comments