본문 바로가기

프로젝트

intro_ 30days

 

 

어제의 습관이 오늘의 나를 만들었듯이

오늘의 습관이 10년 후 나를 만든다는 말이 있지...

 

그래서 만들어 보려고 하는 30days 챌린지! 

 

일단 디자인 초안까지는 만들었는데 좀 더 디테일한 작업이 필요할 거 같다. 

 

** 만들면서 추가, 필요한 기능

 

 

#1

  • + 버튼을 클릭해서 새로운 도전을 추가한다. 

 

 

#2

  • 모달 창이 열리고 입력 폼이 나타난다. 
    • Close 버튼 추가 ** 
  • 입력 폼 내용
    1. 목표
    2. 시작하는 날 설정 + 자동으로 30일 후가 계산되어 끝나는 날이 설정 
      1. 기본은 오늘 날짜가 설정되어 있다 → 오늘 날짜를 가져와서 value로 지정. **
      2. 날짜를 설정하면 설정된 날짜를 가져와서 30일 후 날짜를 계산한 결과를 반환 **
    3. 동기부여를 위한 나에게 보내는 메세지 작성
  • 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