/life-calendar

✍ 당신의 삶을 기록해보세요.

Primary LanguageSvelte

Life Calendar

Table of Contents
  1. About The Project
  2. Getting Started
  3. Pages
  4. Contact

🔍 About The Project

어느 날 유튜브를 보다가 우연히 Life Calendar라는 것을 알게되었습니다.

image

하지만 기존의 Life Calendar는 위와 같이 출력을 해서 색칠을 하는 방식이었는 데, '만약 주마다 기록을 할 수 있게 만들면 더 좋은 도구가 될 수 있지 않을까?' 라는 생각으로 프로젝트를 시작하게되었습니다. 현재는 기록뿐만 아니라 태그도 추가할 수 있고 그래프도 볼 수 있습니다.

🔨 Built With

image image image


✨ Getting Started

🔗 Link

Life Calendar


📄 Pages

✅ 홈

노션 홈페이지의 디자인을 참고하여 만들었습니다.

image image image image



✅ 로그인

  • class101 로그인 페이지의 디자인을 참고하여 만들었습니다.
  • sns로 로그인을 하거나 이메일로 회원가입을 한 뒤 이메일로 로그인을 할 수 있습니다.
  • 예외 처리가 가능합니다.

image image image image image



✅ 회원가입

  • 예외 처리가 가능합니다.

image image image image image image



✅ 태어난 연도 입력

  • 사용자가 로그인을 했는 데 연도 정보가 없을 때 나오는 화면입니다.
  • 본인이 태어난 연도를 입력합니다.

image



✅ 연간 달력

  • 기록하고 싶은 연도를 클릭하여 모달창에 기록할 수 있습니다.

bandicam 2021-06-20 14-40-44-368



✅ 월간 달력

  • 기록하고 싶은 월을 클릭하여 모달창에 기록할 수 있습니다.
  • 주간 모달창에서 입력한 내용으로 그려진 그래프를 확인할 수 있습니다.

bandicam 2021-06-20 14-37-44-310



✅ 주간 달력

  • 기록하고 싶은 주를 클릭하여 모달창에 기록할 수 있습니다.
  • 태그를 입력할 수 있습니다. (태그를 통해 분류가 가능합니다.)
  • 테이블에 본인이 만들고 싶은 습관 같은 것들을 입력할 수 있습니다. (운동 분류와 팔굽혀펴기, 턱걸이 항목을 기본값으로 설정했습니다.)
  • 기록한 요일 수에 따라 색깔을 다르게 했습니다. (1일: 가장 연함, 7일: 가장 진함.)

bandicam 2021-06-20 15-01-04-928



➕ 그 외

  • 월간, 주간 달력에서 행의 오른쪽에 있는 화살표를 클릭하면 10년 단위로 달력을 접었다 폈다 할 수 있습니다.
  • 도움말에는 마크다운 작성법을 적었습니다.

bandicam 2021-06-20 14-29-30-113 image


Contact

Email - ansrud45@gmail.com

Project Link - https://github.com/dinomoon/life-calendar