프로젝트 계획

주의 사항

- 페이지 최소 3개 이상

- 난이도 있는 자바스크립트 구현

- 퍼블리싱 소스 및 화면 구성

1단계

(블로그)

1. 메인페이지

(메인 상단)

- 메인 사진 3개 슬라이드 효과(각 메인 사진은 카테고리별 대표사진 1개씩)

- 해당 글 마우스 이동시 opacity효과 주기

 

(메인 중단)

- inside, trend, newsroom 카테고리별 상, 중, 하 레이아웃 구성

- 각 카테고리별 최신글 2개 화면에 표시

- 각 카테고리별 최신글 위에 페이지 이동 태그 만들기

 

(메인 하단)

- 회사소개, 이용약관 등등

- 개인정보보호정책, 이용약관 클릭시 페이지 이동

 

(메인 왼쪽 메뉴)

- 최신글, 인기글 화면에 출력

 

2. 게시물리스트

- 사진, 제목, 내용 순으로 레이아웃 구성

- 내용 일정 넘어가면 ...으로 대체

 

3. 게시물 페이지

- 똑같이 구현

 

(todo)

1. 할일 추가

   (배열.push) 사용

 

2. 할일 목록 조회

   (배열[0]~배열[?] html에서 반복문으로 출력)

 

3. 할일 수정, 삭제

   (목록에서 수정, 삭제 버튼 아이콘 사용해서 오른쪽에 위치시키고)

    수정 - 2번 내용에서 updata(index) 함수 호출해서 해당 인덱스 배열 내용 바꾸면 될듯 

    삭제 - 2번 내용에서 delete(index) 함수 호출후 splice(i, 1)

 

4. 할일 완료 처리

   (목록에서 오른쪽에 체크박스 만들어서 누르면 background : gray하고 

    새로운 배열에 .push 하고, 하단으로 내용 이동)

   이때 count 변수 만들어서 완료 버튼 누르면 count++

 

5. 완료 처리된 할일 전체 삭제 

   (오른쪽 하단에 해결한일 내용 부분 위에 전체 삭제 버튼 생성후 누르면 함수실행 시켜서 빈배열로 초기화)

 

6.  todo페이지 카테고리 전체/완료/미완료 카테고리 만들기

 

 

2단계

(todo)

- 블로그 오른쪽 하단에 기존 홈페이지와 비슷한 모양의 todo 아이콘 만들기

- todo 버튼 클릭시 오른쪽에 메뉴 div 태그 만들기

- vuex를 이용해서 1단계에서 사용했던 데이터 화면에 출력

- 일별, 시간별 카테고리 2개만들어서 두가지 종류의 todo 만들기

- todo페이지로 이동하는 버튼 생성

 

3단계

(todo)

- myInfo 카테고리 추가

- todo 완료한것과 미완료한것 데이터 chart.js로 차트 만들기 

 

번외

- 3단계에서 구현한 차트 주간, 월간 으로 사용할 수 있게 구현하는법 생각하기

- 수정 부분을 어떻게 처리할지 고민

- 지금은 vue로 구현하지만 javascript로 구현 할 수있게 공부하기