toDoList - 기획(1차수정)

1차 수정

주제

오늘 할일을 일자 별로 분류하여 게시해두기 위한 웹.
사이트맵 작성 -> 화면설계 -> 화면별 프로세스 설계 -> 데이터베이스 설계의 순서로 기획을 한다.

사이트맵 작성

번호	제목	URL	역할
1	메인	/	오늘 날짜에 해당하는 toDo를 보여주고, 생성, 제거, 편집 버튼을 둔다.
2	모든 toDo 조회	get api/todos
3	특정 toDo 조회	get api/todo/:id
4	일정 생성	post api/todo
5	일정 제거	delete api/todo/:id
6	일정 편집	put api/todo/:id
7	한달 보기	/view/month	한달단위로 일정을 본다.
8	일주일 보기	/view/week	일주일 단위로 일정을 본다. week의 경우 숫자의 앞에 0을 붙이기 ex)01,02,03,04
9	하루 보기	/view/day	하루의 일정을 본다. ex)1,2,3,11,20…
10	일정 생성	/create	일정을 생성한다.
11	일정 편집	/update	일정을 편집한다.

화면설계

패스…

화면별 프로세스 설계(기존 설계)

메인
오늘 날짜에 해당하는 toDo를 보여준다.
탭 기능으로 한달, 일주일, 하루 단위로 바꿔서 볼수있는 기능 구현
하루 단위로 볼 때와 같은 컴포넌트 사용
날짜 변경 기능 구현 -> 달력 누르는 방식

한달보기
한 달 단위로 toDo리스트를 매우 간략하게 보여준다.
메인과 같이 CRUD역할을 하는 버튼 생성
한 달 단위로 변경할 수 있는 슬라이드 구현 ex) < 2018 - 01 >

일주일 보기
일주일 단위로 toDo리스트를 간략하게 보여준다.
메인과 같이 CRUD역할을 하는 버튼 생성
날짜 변경 기능 -> 리스트 누르기

일정 생성
생성할 날짜 정하기 -> 달력으로 입력
할 일을 한 줄로 입력 하기
중요도 체크 -> 5단계 라디오 버튼으로 구현 ngb-rating를 사용

일정 편집
날짜 수정 -> 기존 날짜에서 달력으로 수정
기존의 할 일을 텍스트 박스에 입력된 상태로 화면에 구현
라디오 버튼 눌러진채로 화면에 구현

백엔드

server/api : nodejs 파일이 있는 디렉토리 백엔드 라우팅, DB 정보 관리.
…/api.js : 백엔드 라우팅
…/database.js : DB 정보 관리

컴포넌트 설계(Angular)

src/app : angular 파일 디렉토리
header.component : 웹 상단의 제목
todos.component : 본문이다. day, week, month 컴포넌트를 자식으로 가지고 있으며 이 컴포넌트에서는 날짜변경, 읽기모드, 수정모드 등의 편집을 담당.
읽기모드 시에는 todo와 important여부만 보이고, 수정모드로 변환 시 X버튼, V버튼을0 생성. todo라벨을 textbox로 변환하여 즉시 수정이 가능하게 변환

day.component : 하루의 todo를 나열
week.component : 일주일간의 todo를 나열
month.component : 한달간의 todo를 달력에 간결하게 나열

데이터 베이스 설계

DB : MySQL
Database name : myApp
Table : todos
column :
id : int, pirmary key, auto_increment
todo : varchar(50), not null
important: boolean, not null
date : date, not null