본문 바로가기
내마음대로만들어보자/나만의 웹 서비스 만들기

[화면그리기]나만의 Planner 만들기

by 소농민! 2021. 9. 26.
728x90

* 필요 기능 

1. 목표 설정 (연간, 월간, 주간)

    → 공부, 습관, 운동, 다이어트 등등 우리가 매번 목표를 세우고 실행하다가도 금방 포기하고 그러는데 그러지 않도록 하기위한 목표!

2. 요일별 상세 Plan 내용 

    → 내가 설정한 목표에 따라서 내가 해야될 세부 계획들을 작성해보자.

3. 요일별 목표 달성 

4. 세부 계획에 대한 시간설정 및 알람 PUSH


우선 내가 생각한 필요 기능들을 만들기위한 화면구성을 간단하게 만들어보자.

 

* 공통 적용 내용 

   - 상단 + 버튼으로 오늘의 할일을 간단하게 추가할 수 있도록 버튼 추가 

   - 하단 버튼을 추가하여 화면이동이 가능하도록 적용 

 

1. MainPage

내가 설정한 목표를 리스트 형태로 확인할 수 있는 페이지

▶ 연간목표 , + 버튼

 

▶ 월간목표 , + 버튼

 

▼ 주간목표  , + 버튼 

  ㅁ 심화 강의 2주차까지 수강하기

 

▶ 오늘의 할일 

2. CalenderPage

캘린더를 통해 요일별로 내가 할일이 무엇이 있는지 확인할 수 있는 페이지

특정 요일을 클릭하는경우 아래에 해당 요일에 할일을 보여준다. 

 

 

3. DetailPage

캘린더 화면에서 아래에 보여지는 할일을 클릭하는경우

해당 할일에 대한 세부 내용을 수정할 수 있는 화면을 보여준다.

 

- 할일명 변경 

- 실천기한 

- 알림시간 설정 

 

* 해당 세부 화면은 편집버튼을 누르고 오늘의 할일 버튼을 누르면 해당 할일에 대해서만 수정할 수 있도록 페이지 전환 시켜줘보자. 

 

4. ProgressBar

하단에 버튼을 추가하여 진행상태 & 달성률 등을 확인할 수 있는 페이지를 구성