어제의 습관이 오늘의 나를 만들었듯이
오늘의 습관이 10년 후 나를 만든다는 말이 있지...
그래서 만들어 보려고 하는 30days 챌린지!
일단 디자인 초안까지는 만들었는데 좀 더 디테일한 작업이 필요할 거 같다.
** 만들면서 추가, 필요한 기능
#1
- + 버튼을 클릭해서 새로운 도전을 추가한다.
#2
- 모달 창이 열리고 입력 폼이 나타난다.
- Close 버튼 추가 **
- 입력 폼 내용
- 목표
- 시작하는 날 설정 + 자동으로 30일 후가 계산되어 끝나는 날이 설정
- 기본은 오늘 날짜가 설정되어 있다 → 오늘 날짜를 가져와서 value로 지정. **
- 날짜를 설정하면 설정된 날짜를 가져와서 30일 후 날짜를 계산한 결과를 반환 **
- 동기부여를 위한 나에게 보내는 메세지 작성
- goal이 입력되지 않았을 때 → 목표를 입력해주세요. **
날짜가 입력되지 않았을 때 → 시작 날짜를 설정해주세요. **→ 기본날짜를 오늘 날짜로 설정- 그리고 도전 시작!
#3
- 도전 시작 페이지는 총 3군데로 나누어진다.
- 입력한 내용이 저장된 박스
- 수정 가능 버튼
1. 수정 버튼을 누르면 수정할 수 있는 기존 내용이 입력된 모달 창이 뜬다. **
2. goal과 motivate는 수정할 수 있지만 날짜는 수정이 안된다. **
3. 날짜는 reset하는걸로... ** - 도전 기간과 도전 종료일 D-day를 알려준다. **
- 수정 가능 버튼
- 현재 상황을 보여주는 박스
- 현재 날짜
- 색칠된 동그라미 카운트
- 체크하는 박스(가장 고민 많은 부분)
- 컬러를 하나로 통일할지 고민
- 하나 색칠할 때마다 하단에 메세지를 넣고 싶음. (응원 메세지나 d-day?)
- 클릭된 셀을 취소할 때는 메세지를 띄운다. (정말로 취소할지)
- 입력한 내용이 저장된 박스
- reset 버튼
- 정말 reset하시겠습니까? 창이 뜨고 확인을 누르면 reset 되서 초기 화면으로
- 취소를 누르면 그냥 창만 close
#4
아직 시안은 없긴 한데 만들면 추가해야지..
도전 종료하면 창을 띄운다.
결과 발표 20/30 성공하셨습니다.
확인 -> 그냥 창만 꺼지고 재도전 할 때에는 reset 버튼 이용.
재도전 -> 모달 폼이 나와서 다시 입력하고 재시작.
공유하기도 괜찮을 듯...
부족한게 많아 보이지만
일단 기본 기능만 구현하고 부족한 부분은 리스트업해서 보완이
될 수 있는 프로젝트가 되길 바라며....!
'프로젝트' 카테고리의 다른 글
Step4. useReducer, edit, reset, checkMessage (0) | 2020.07.09 |
---|---|
step3. Cell Table + Counter (0) | 2020.07.04 |
step2. Modal + Form (0) | 2020.07.02 |
step1. Main (0) | 2020.06.21 |