nohtaesang/react-todolist

Creating 'To do list app' with reactjs

To do list

할 일을 관리할 수 있는 웹 어플리케이션

Motivation

https://programmers.co.kr/competitions/86/2018%20Winter%20Coding%20%EA%B2%A8%EC%9A%B8%20%EC%8A%A4%ED%83%80%ED%8A%B8%EC%97%85%20%EC%9D%B8%ED%84%B4%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8
프로그래머스에서 진행한 '겨울 스타트업 인턴 프로그램'에 지원하기 위한 사전 과제를 위해 만들었다.

Tech/framework used

react

Installation

git clone https://github.com/nohtaesang/todolist.git
cd todolist
npm install
npm start

Screenshots

1. 기본 화면. 왼쪽의 form 에서 제목과 내용을 입력할 수 있다. 오른쪽의 tab으로 전체, 진행중, 완료된 할 일을 볼 수 있다.

2. 제목과 내용을 입력할 수 있다.

3. Add 버튼을 누르면 오른쪽에 카드가 추가된다.

4. 카드 오른쪽 상단 버튼을 누르면 나오는 옵션이다. (완료 / 순서 위로 / 순서 아래로 / 편집 / 기한 설정 / 삭제 )

5. 완료 버튼을 누르면 초록색 테두리로 변한다.

6. 순서 조정을 보여주기 위해 카드를 추가했다.

7. 늦게 추가된 제목 1의 카드 순서를 위로 올렸다.

8. To Do 탭을 눌러 아직 진행중인 할 일을 볼 수 있다.

9. Done 탭을 눌러 완료된 할 일을 볼 수 있다.

10. 편집 버튼을 누르면 제목과 내용을 수정할 수 있다

11. 내용을 수정하는 모습.

12. 수정이 완료된 모습

react-todolist's Issues

screenshots